@next-libs/cmdb-instances 6.27.0 → 6.27.3

package/dist/esm/instance-list-table/DynamicSearch.js

@@ -0,0 +1,269 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from "react";
+import update from "immutability-helper";
+import { isEqual, isNil, isString, isArray, isEmpty } from "lodash";
+import { Form } from "@ant-design/compatible";
+import { Button, Col, Input, Row } from "antd";
+import { ComparisonOperators, LogicalOperators } from "@next-libs/cmdb-utils";
+import styles from "./DynamicSearch.module.css";
+import i18n from "i18next";
+import { NS_LIBS_CMDB_INSTANCES, K } from "../i18n/constants";
+import { processAttrValueWithQuote, ENABLED_CMDB_ADVANCE_SEARCH_WITH_QUOTE } from "../processors";
+export class DynamicSearchForm extends React.Component {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "onValueChange", (value, fieldIndex, valueIndex) => {
+      this.setState({
+        fields: update(this.state.fields, {
+          [fieldIndex]: {
+            values: {
+              [valueIndex]: {
+                $set: value
+              }
+            }
+          }
+        })
+      });
+    });
+
+    _defineProperty(this, "handleValueChange", (e, fieldIndex) => {
+      this.onValueChange(e.target.value, fieldIndex, 0);
+    });
+
+    _defineProperty(this, "handleSearch", e => {
+      e.preventDefault();
+
+      if (this.props.onSearch) {
+        var _queries = [];
+        var _queriesToShow = [];
+        var _fieldToShow = [];
+        this.state.fields.forEach(field => {
+          var expressions = {};
+          var fieldId = field.id;
+          var fieldQuery = {
+            [fieldId]: expressions
+          };
+          var fieldQueryToShow = {
+            [fieldId]: expressions
+          };
+          var hasValue = false;
+          var operator = {
+            comparisonOperator: ComparisonOperators.Like,
+            logicalOperator: LogicalOperators.Or
+          };
+          field.values.forEach(value => {
+            fieldQuery = {
+              [field.id]: expressions
+            };
+            var fieldIdToShow = field.id;
+            fieldQueryToShow = {
+              [fieldIdToShow]: expressions
+            };
+
+            if (value !== null && value !== "" && !(Array.isArray(value) && value.length === 0)) {
+              var values;
+
+              if (typeof value === "string") {
+                values = processAttrValueWithQuote(value, []);
+              }
+
+              if (values.length) {
+                fieldQuery = {
+                  [operator.logicalOperator]: values.map(value => {
+                    return {
+                      [fieldId]: {
+                        [operator.comparisonOperator]: "%".concat(value, "%")
+                      }
+                    };
+                  })
+                };
+              }
+
+              fieldQueryToShow = {
+                [operator.logicalOperator]: values.map(value => {
+                  return {
+                    [fieldIdToShow]: {
+                      [operator.comparisonOperator]: "%".concat(value, "%")
+                    }
+                  };
+                })
+              };
+              hasValue = true;
+
+              _fieldToShow.push({
+                [field.id]: field.values
+              });
+            }
+          });
+
+          if (hasValue) {
+            _queries.push(fieldQuery);
+
+            _queriesToShow.push(fieldQueryToShow);
+          }
+        });
+
+        if (_queries.length === 0) {
+          _queries = undefined;
+          _queriesToShow = undefined;
+        }
+
+        if (!isEqual(this.props.q, _queries)) {
+          this.props.onSearch(_queries, _queriesToShow, _fieldToShow);
+        }
+      }
+    });
+
+    _defineProperty(this, "handleReset", () => {
+      this.props.onSearch([], [], []);
+      this.props.form.resetFields();
+    });
+
+    this.state = this.computeState();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!isEqual(this.props.q, prevProps.q)) {
+      var newState = this.computeState();
+      this.setState(newState);
+      this.setFormFieldValues(newState.fields);
+    }
+  }
+
+  computeState() {
+    var fieldQueryOperatorExpressionsMap = {};
+    var fields = [];
+
+    if (this.props.q) {
+      this.props.q.forEach(query => {
+        Object.entries(query).forEach(_ref => {
+          var [key, expressions] = _ref;
+
+          if (key === LogicalOperators.Or || key === LogicalOperators.And) {
+            var firstSubQuery = expressions[0];
+            var fieldId = Object.keys(firstSubQuery)[0];
+            var compareOperator = Object.keys(firstSubQuery[fieldId])[0];
+            var subQueryValue = "";
+            var targetField;
+
+            if (ENABLED_CMDB_ADVANCE_SEARCH_WITH_QUOTE) {
+              var _this$props$fieldToSh;
+
+              targetField = (_this$props$fieldToSh = this.props.fieldToShow) === null || _this$props$fieldToSh === void 0 ? void 0 : _this$props$fieldToSh.find(fieldItem => Object.keys(fieldItem)[0] === fieldId);
+            }
+
+            if (!isNil(targetField)) {
+              // 二维数组会有问题，
+              subQueryValue = isArray(targetField[fieldId]) ? targetField[fieldId].map(item => isArray(item) ? item.join(" ") : item).join("") : targetField[fieldId];
+            } else {
+              subQueryValue = expressions.map(query => {
+                var targetValue = query[fieldId][compareOperator];
+
+                if (compareOperator === ComparisonOperators.Like || compareOperator === ComparisonOperators.NotLike) {
+                  return isString(targetValue) && targetValue.includes(" ") ? "".concat(targetValue[0], "\"").concat(targetValue.slice(1, targetValue.length - 1), "\"").concat(targetValue[targetValue.length - 1]) : targetValue;
+                } else {
+                  return isString(targetValue) && targetValue.includes(" ") ? "\"".concat(targetValue, "\"") : targetValue;
+                }
+              }).join(" ");
+            }
+
+            key = fieldId;
+            expressions = {
+              [compareOperator]: subQueryValue
+            };
+          }
+
+          fieldQueryOperatorExpressionsMap[key] = expressions;
+        });
+      });
+    }
+
+    if (this.props.fields) {
+      fields = this.props.fields.map(v => _objectSpread(_objectSpread({}, v), {}, {
+        values: [null]
+      }));
+
+      if (!isEmpty(fieldQueryOperatorExpressionsMap)) {
+        fields = this.props.fields.map(v => {
+          var str = null;
+
+          if (fieldQueryOperatorExpressionsMap[v.id]) {
+            var expressions = fieldQueryOperatorExpressionsMap[v.id]["$like"];
+            str = expressions.replace(/%/g, "");
+          }
+
+          return _objectSpread(_objectSpread({}, v), {}, {
+            values: [str]
+          });
+        });
+      }
+    }
+
+    return {
+      fields
+    };
+  }
+
+  setFormFieldValues(fields) {
+    var values = fields.reduce((acc, field) => {
+      acc["".concat(field.id)] = field.values.join("");
+      return acc;
+    }, {});
+    this.props.form.setFieldsValue(values);
+  }
+
+  getFields() {
+    var {
+      getFieldDecorator
+    } = this.props.form;
+    return this.state.fields.map((field, fieldIndex) => {
+      return /*#__PURE__*/React.createElement(Col, {
+        span: 12,
+        key: field.id
+      }, /*#__PURE__*/React.createElement(Form.Item, {
+        label: field.name
+      }, getFieldDecorator("".concat(field.id), {
+        initialValue: field.values || ""
+      })( /*#__PURE__*/React.createElement(Input, {
+        className: styles.conditionInput,
+        addonBefore: i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.OPERATOR_CONTAIN_DEFINE)),
+        placeholder: i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.ADVANCE_SEARCH_SINGLE_INPUT_PLACEHOLDER)),
+        onChange: e => this.handleValueChange(e, fieldIndex)
+      }))));
+    });
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.dynamicSearch
+    }, /*#__PURE__*/React.createElement(Form, {
+      layout: "vertical",
+      className: styles.dynamicSearchForm,
+      onSubmit: this.handleSearch
+    }, /*#__PURE__*/React.createElement(Row, {
+      gutter: 50
+    }, this.getFields()), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+      span: 24,
+      style: {
+        textAlign: "right"
+      }
+    }, /*#__PURE__*/React.createElement(Button, {
+      type: "primary",
+      htmlType: "submit",
+      "data-testid": "submit-button"
+    }, i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.SEARCH))), /*#__PURE__*/React.createElement(Button, {
+      style: {
+        marginLeft: 8
+      },
+      onClick: this.handleReset,
+      "data-testid": "reset-button"
+    }, i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.RESET)))))));
+  }
+
+}
+export var DynamicSearch = Form.create({
+  name: "dynamic_search"
+})(DynamicSearchForm);
+//# sourceMappingURL=DynamicSearch.js.map

package/dist/esm/instance-list-table/DynamicSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/instance-list-table/DynamicSearch.tsx"],"names":["React","update","isEqual","isNil","isString","isArray","isEmpty","Form","Button","Col","Input","Row","ComparisonOperators","LogicalOperators","styles","i18n","NS_LIBS_CMDB_INSTANCES","K","processAttrValueWithQuote","ENABLED_CMDB_ADVANCE_SEARCH_WITH_QUOTE","DynamicSearchForm","Component","constructor","props","value","fieldIndex","valueIndex","setState","fields","state","values","$set","e","onValueChange","target","preventDefault","onSearch","queries","queriesToShow","fieldToShow","forEach","field","expressions","fieldId","id","fieldQuery","fieldQueryToShow","hasValue","operator","comparisonOperator","Like","logicalOperator","Or","fieldIdToShow","Array","length","map","push","undefined","q","form","resetFields","computeState","componentDidUpdate","prevProps","newState","setFormFieldValues","fieldQueryOperatorExpressionsMap","query","Object","entries","key","And","firstSubQuery","keys","compareOperator","subQueryValue","targetField","find","fieldItem","item","join","targetValue","NotLike","includes","slice","v","str","replace","reduce","acc","setFieldsValue","getFields","getFieldDecorator","name","initialValue","conditionInput","t","OPERATOR_CONTAIN_DEFINE","ADVANCE_SEARCH_SINGLE_INPUT_PLACEHOLDER","handleValueChange","render","dynamicSearch","dynamicSearchForm","handleSearch","textAlign","SEARCH","marginLeft","handleReset","RESET","DynamicSearch","create"],"mappings":"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","sourcesContent":["import React, { FormEvent } from \"react\";\nimport update from \"immutability-helper\";\nimport { isEqual, isNil, isString, isArray, isEmpty } from \"lodash\";\nimport { Form } from \"@ant-design/compatible\";\nimport { Button, Col, Input, Row, Select } from \"antd\";\nimport { FormComponentProps } from \"@ant-design/compatible/lib/form\";\nimport {\n  ComparisonOperators,\n  LogicalOperators,\n  Query,\n  QueryOperatorExpressions,\n} from \"@next-libs/cmdb-utils\";\nimport styles from \"./DynamicSearch.module.css\";\nimport i18n from \"i18next\";\nimport { NS_LIBS_CMDB_INSTANCES, K } from \"../i18n/constants\";\nimport {\n  processAttrValueWithQuote,\n  ENABLED_CMDB_ADVANCE_SEARCH_WITH_QUOTE,\n} from \"../processors\";\n\nexport interface Field {\n  id: string;\n  name: string;\n  values?: any[];\n}\n\nexport interface DynamicSearchFormProps extends FormComponentProps {\n  fields: Record<string, any>[];\n  q?: Query[];\n  onSearch?(\n    queries: Query[],\n    queriesToShow?: Query[],\n    fieldToShow?: Record<string, any[]>[]\n  ): void;\n  fieldToShow?: Record<string, any[]>[]; // 回填高级搜索的field值（根据query回填丢失了引号信息）\n}\n\nexport interface DynamicSearchFormState {\n  fields: Field[];\n}\n\nexport class DynamicSearchForm extends React.Component<\n  DynamicSearchFormProps,\n  DynamicSearchFormState\n> {\n  constructor(props: DynamicSearchFormProps) {\n    super(props);\n\n    this.state = this.computeState();\n  }\n\n  componentDidUpdate(prevProps: Readonly<DynamicSearchFormProps>): void {\n    if (!isEqual(this.props.q, prevProps.q)) {\n      const newState = this.computeState();\n      this.setState(newState);\n      this.setFormFieldValues(newState.fields);\n    }\n  }\n\n  computeState(): { fields: Field[] } {\n    const fieldQueryOperatorExpressionsMap: Record<\n      string,\n      QueryOperatorExpressions\n    > = {};\n    let fields: Field[] = [];\n    if (this.props.q) {\n      this.props.q.forEach((query) => {\n        Object.entries(query).forEach(([key, expressions]) => {\n          if (key === LogicalOperators.Or || key === LogicalOperators.And) {\n            const firstSubQuery = (expressions as Query[])[0];\n            const fieldId = Object.keys(firstSubQuery)[0];\n            const compareOperator = Object.keys(firstSubQuery[fieldId])[0];\n            let subQueryValue = \"\";\n            let targetField;\n            if (ENABLED_CMDB_ADVANCE_SEARCH_WITH_QUOTE) {\n              targetField = this.props.fieldToShow?.find(\n                (fieldItem) => Object.keys(fieldItem)[0] === fieldId\n              );\n            }\n            if (!isNil(targetField)) {\n              // 二维数组会有问题，\n              subQueryValue = isArray(targetField[fieldId])\n                ? targetField[fieldId]\n                    .map((item) => (isArray(item) ? item.join(\" \") : item))\n                    .join(\"\")\n                : (targetField[fieldId] as any);\n            } else {\n              subQueryValue = (expressions as Query[])\n                .map((query) => {\n                  const targetValue = (\n                    query[fieldId] as Record<ComparisonOperators, any>\n                  )[compareOperator as ComparisonOperators];\n                  if (\n                    compareOperator === ComparisonOperators.Like ||\n                    compareOperator === ComparisonOperators.NotLike\n                  ) {\n                    return isString(targetValue) && targetValue.includes(\" \")\n                      ? `${targetValue[0]}\"${targetValue.slice(\n                          1,\n                          targetValue.length - 1\n                        )}\"${targetValue[targetValue.length - 1]}`\n                      : targetValue;\n                  } else {\n                    return isString(targetValue) && targetValue.includes(\" \")\n                      ? `\"${targetValue}\"`\n                      : targetValue;\n                  }\n                })\n                .join(\" \");\n            }\n            key = fieldId;\n            expressions = {\n              [compareOperator]: subQueryValue,\n            };\n          }\n\n          fieldQueryOperatorExpressionsMap[key] =\n            expressions as QueryOperatorExpressions;\n        });\n      });\n    }\n    if (this.props.fields) {\n      fields = this.props.fields.map(\n        (v) => ({ ...v, values: [null] } as Field)\n      );\n      if (!isEmpty(fieldQueryOperatorExpressionsMap)) {\n        fields = this.props.fields.map((v) => {\n          let str: any = null;\n          if (fieldQueryOperatorExpressionsMap[v.id]) {\n            const expressions = fieldQueryOperatorExpressionsMap[v.id][\"$like\"];\n            str = expressions.replace(/%/g, \"\");\n          }\n          return {\n            ...v,\n            values: [str],\n          } as Field;\n        });\n      }\n    }\n    return { fields };\n  }\n\n  setFormFieldValues(fields: Field[]): void {\n    const values = fields.reduce<{ [key: string]: any }>((acc, field) => {\n      acc[`${field.id}`] = field.values.join(\"\");\n      return acc;\n    }, {});\n    this.props.form.setFieldsValue(values);\n  }\n\n  onValueChange = (value: any, fieldIndex: number, valueIndex: number) => {\n    this.setState({\n      fields: update(this.state.fields, {\n        [fieldIndex]: { values: { [valueIndex]: { $set: value } } },\n      }),\n    });\n  };\n\n  getFields() {\n    const { getFieldDecorator } = this.props.form;\n    return this.state.fields.map((field, fieldIndex) => {\n      return (\n        <Col span={12} key={field.id}>\n          <Form.Item label={field.name}>\n            {getFieldDecorator(`${field.id}`, {\n              initialValue: field.values || \"\",\n            })(\n              <Input\n                className={styles.conditionInput}\n                addonBefore={i18n.t(\n                  `${NS_LIBS_CMDB_INSTANCES}:${K.OPERATOR_CONTAIN_DEFINE}`\n                )}\n                placeholder={i18n.t(\n                  `${NS_LIBS_CMDB_INSTANCES}:${K.ADVANCE_SEARCH_SINGLE_INPUT_PLACEHOLDER}`\n                )}\n                onChange={(e) => this.handleValueChange(e, fieldIndex)}\n              />\n            )}\n          </Form.Item>\n        </Col>\n      );\n    });\n  }\n\n  handleValueChange = (e: any, fieldIndex: number) => {\n    this.onValueChange(e.target.value, fieldIndex, 0);\n  };\n\n  handleSearch = (e: FormEvent<any>): void => {\n    e.preventDefault();\n    if (this.props.onSearch) {\n      let queries: Query[] = [];\n      let queriesToShow: Query[] = [];\n      const fieldToShow: Record<string, any[]>[] = [];\n      this.state.fields.forEach((field) => {\n        const expressions: QueryOperatorExpressions = {};\n        const fieldId = field.id;\n        let fieldQuery: Query = { [fieldId]: expressions };\n        let fieldQueryToShow: Query = { [fieldId]: expressions };\n        let hasValue = false;\n        const operator = {\n          comparisonOperator: ComparisonOperators.Like,\n          logicalOperator: LogicalOperators.Or,\n        };\n        field.values.forEach((value) => {\n          fieldQuery = { [field.id]: expressions };\n          const fieldIdToShow = field.id;\n          fieldQueryToShow = { [fieldIdToShow]: expressions };\n          if (\n            value !== null &&\n            value !== \"\" &&\n            !(Array.isArray(value) && value.length === 0)\n          ) {\n            let values: any[];\n            if (typeof value === \"string\") {\n              values = processAttrValueWithQuote(value, []);\n            }\n            if (values.length) {\n              fieldQuery = {\n                [operator.logicalOperator]: values.map((value) => {\n                  return {\n                    [fieldId]: {\n                      [operator.comparisonOperator]: `%${value}%`,\n                    },\n                  };\n                }),\n              };\n            }\n            fieldQueryToShow = {\n              [operator.logicalOperator]: values.map((value) => {\n                return {\n                  [fieldIdToShow]: {\n                    [operator.comparisonOperator]: `%${value}%`,\n                  },\n                };\n              }),\n            };\n            hasValue = true;\n            fieldToShow.push({ [field.id]: field.values });\n          }\n        });\n        if (hasValue) {\n          queries.push(fieldQuery);\n          queriesToShow.push(fieldQueryToShow);\n        }\n      });\n      if (queries.length === 0) {\n        queries = undefined;\n        queriesToShow = undefined;\n      }\n      if (!isEqual(this.props.q, queries)) {\n        this.props.onSearch(queries, queriesToShow, fieldToShow);\n      }\n    }\n  };\n\n  handleReset = () => {\n    this.props.onSearch([], [], []);\n    this.props.form.resetFields();\n  };\n\n  render(): React.ReactNode {\n    return (\n      <div className={styles.dynamicSearch}>\n        <Form\n          layout=\"vertical\"\n          className={styles.dynamicSearchForm}\n          onSubmit={this.handleSearch}\n        >\n          <Row gutter={50}>{this.getFields()}</Row>\n          <Row>\n            <Col span={24} style={{ textAlign: \"right\" }}>\n              <Button\n                type=\"primary\"\n                htmlType=\"submit\"\n                data-testid=\"submit-button\"\n              >\n                {i18n.t(`${NS_LIBS_CMDB_INSTANCES}:${K.SEARCH}`)}\n              </Button>\n              <Button\n                style={{ marginLeft: 8 }}\n                onClick={this.handleReset}\n                data-testid=\"reset-button\"\n              >\n                {i18n.t(`${NS_LIBS_CMDB_INSTANCES}:${K.RESET}`)}\n              </Button>\n            </Col>\n          </Row>\n        </Form>\n      </div>\n    );\n  }\n}\n\nexport const DynamicSearch = Form.create<DynamicSearchFormProps>({\n  name: \"dynamic_search\",\n})(DynamicSearchForm);\n"],"file":"DynamicSearch.js"}

package/dist/esm/instance-list-table/DynamicSearch.module.css

@@ -0,0 +1,40 @@
+.dynamicSearch {
+  padding: 20px 25px;
+  background-color: var(--custom-form-item-wrapper-bg, #f5f5f5);
+  border-radius: 6px;
+}
+
+.dynamicSearchForm
+  :global(.ant-legacy-form-item-children)
+  > .conditionInputGroup {
+  display: inline-flex;
+}
+
+.dynamicSearchForm :global(.ant-legacy-form-item) {
+  margin-bottom: 14px;
+}
+
+.dynamicSearchForm :global(.ant-legacy-form-item-label) {
+  line-height: unset;
+}
+
+.dynamicSearchForm :global(.ant-legacy-form-item) label {
+  display: inline-block;
+  margin-bottom: 4px;
+}
+
+.conditionInput {
+  flex-grow: 1;
+}
+
+.conditionInputGroup .separatorInput {
+  width: 30px;
+  pointer-events: none;
+  border-left: 0;
+  border-right: 0;
+  background: var(--input-fill-bg, var(--antd-input-disabled-bg));
+}
+
+.conditionInputGroup :global(.ant-select-selection-selected-value) {
+  margin-right: 4px;
+}

package/dist/esm/instance-list-table/InstanceListTable.js

@@ -357,9 +357,13 @@ export class LegacyInstanceListTable extends React.Component {
     });
   }
 
-  handleClickItem(e, id) {
+  handleClickItem(e, record) {
     if (this.props.onClickItem) {
-      this.props.onClickItem(e, id);
+      this.props.onClickItem(e, record.instanceId);
+    }
+
+    if (this.props.onClickItemV2) {
+      this.props.onClickItemV2(e, record);
     }
   }
 
@@ -391,7 +395,7 @@ export class LegacyInstanceListTable extends React.Component {
     if (!url) {
       return /*#__PURE__*/React.createElement("a", {
         role: "button",
-        onClick: e => this.handleClickItem(e, record.instanceId),
+        onClick: e => this.handleClickItem(e, record),
         "data-testid": "instance-detail-link"
       }, /*#__PURE__*/React.createElement(Tooltip, {
         placement: "top",
@@ -422,7 +426,7 @@ export class LegacyInstanceListTable extends React.Component {
       className: isRenderStructList ? styles.iconWrapOfStruct : styles.iconWrap
     }, /*#__PURE__*/React.createElement(Link, {
       to: url,
-      onClick: e => this.handleClickItem(e, record.instanceId),
+      onClick: e => this.handleClickItem(e, record),
       "data-testid": "instance-detail-link"
     }, /*#__PURE__*/React.createElement(Tooltip, {
       placement: "top",
@@ -602,7 +606,7 @@ export class LegacyInstanceListTable extends React.Component {
 
           return /*#__PURE__*/React.createElement(Link, _extends({
             to: url,
-            onClick: e => this.handleClickItem(e, record.instanceId),
+            onClick: e => this.handleClickItem(e, record),
             "data-testid": "instance-detail-link"
           }, !firstColumns || object.isAbstract ? {
             target: "_blank"
@@ -680,7 +684,7 @@ export class LegacyInstanceListTable extends React.Component {
                 ,
                 to: url // 自定义 onClick 以支持事件配置和拦截
                 ,
-                onClick: e => this.handleClickItem(e, record.instanceId)
+                onClick: e => this.handleClickItem(e, record)
               }, instanceName));
             } else {
               if (index > 0) {