@next-libs/cmdb-instances 7.5.0 → 7.6.1

package/dist/esm/instance-list/FilterInstanceSource.js

@@ -0,0 +1,138 @@
+import React, { useEffect, useMemo, useState, memo } from "react";
+import { Popover, Input, Button, Radio, Space } from "antd";
+import { IconButton } from "./IconButton";
+import { SearchOutlined } from "@ant-design/icons";
+import styles from "./FilterInstanceSource.module.css";
+import { map, isEmpty } from "lodash";
+import i18n from "i18next";
+import { K, NS_LIBS_CMDB_INSTANCES } from "../i18n/constants";
+function encode(keyword) {
+  var reg = /[[($^.\]*\\?+{}|)]/gi;
+  return keyword.replace(reg, key => "\\".concat(key));
+}
+var FilterInstanceSource = props => {
+  var [instanceSource, setInstanceSource] = useState(props.value);
+  var [objectIdNameList, setObjectIdNameList] = useState([]);
+  var {
+    checked,
+    visible,
+    jsonLocalStorage,
+    isAbstract
+  } = props;
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  var objectNameMap = jsonLocalStorage.getItem("instances-sources-objectId-name-map") || {};
+  var _modelIdNameMap = useMemo(() => {
+    return isEmpty(props.inheritanceModelIdNameMap) ? objectNameMap === null || objectNameMap === void 0 ? void 0 : objectNameMap.idNameMap : props.inheritanceModelIdNameMap;
+  }, [props.inheritanceModelIdNameMap, objectNameMap]);
+  useEffect(() => {
+    var _objectIdNameList = map(_modelIdNameMap, (value, key) => ({
+      text: value,
+      value: key
+    }));
+    setObjectIdNameList(_objectIdNameList);
+  }, [_modelIdNameMap]);
+  var onReset = e => {
+    var {
+      parentObjectId,
+      query
+    } = objectNameMap;
+    var value = {
+      objectId: parentObjectId,
+      objectName: "",
+      query,
+      checked: false
+    };
+    setInstanceSource("");
+    props === null || props === void 0 ? void 0 : props.onChange(value);
+    props === null || props === void 0 ? void 0 : props.onIconClicKChange(false);
+    props === null || props === void 0 ? void 0 : props.onPopoverVisibleChange(false);
+  };
+  var onConfirm = e => {
+    var query = {
+      objectId: instanceSource,
+      objectName: _modelIdNameMap[instanceSource],
+      query: {},
+      checked
+    };
+    props === null || props === void 0 ? void 0 : props.onChange(query);
+    props === null || props === void 0 ? void 0 : props.onPopoverVisibleChange(false);
+  };
+  var handleRadioChange = e => {
+    setInstanceSource(e.target.value);
+  };
+  var onSearch = e => {
+    var value = encode(e.target.value.trim());
+    var _objectIdNameList = map(_modelIdNameMap, (value, key) => ({
+      text: value,
+      value: key
+    }));
+    var regex = new RegExp(value, "ig");
+    var filterObjectIdNameList = _objectIdNameList.filter(v => regex.test(v.text));
+    setObjectIdNameList(filterObjectIdNameList);
+  };
+  var onIconCheckedChange = checked => {
+    if (isAbstract) {
+      props === null || props === void 0 ? void 0 : props.onIconClicKChange(checked);
+      props === null || props === void 0 ? void 0 : props.onPopoverVisibleChange(checked);
+    } else {
+      props === null || props === void 0 ? void 0 : props.onIconClicKChange(true);
+      props === null || props === void 0 ? void 0 : props.onPopoverVisibleChange(true);
+    }
+  };
+  var getContent = () => {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
+      placeholder: i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.SEARCH_MODEL)),
+      suffix: /*#__PURE__*/React.createElement(SearchOutlined, null),
+      onPressEnter: onSearch,
+      "data-testid": "instance-source-search"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: styles.content
+    }, /*#__PURE__*/React.createElement(Radio.Group, {
+      value: instanceSource,
+      onChange: handleRadioChange
+    }, /*#__PURE__*/React.createElement(Space, {
+      direction: "vertical"
+    }, objectIdNameList.map(_ref => {
+      var {
+        text,
+        value
+      } = _ref;
+      return /*#__PURE__*/React.createElement(Radio, {
+        key: value,
+        value: value
+      }, text);
+    })))), /*#__PURE__*/React.createElement("div", {
+      className: styles.footer
+    }, /*#__PURE__*/React.createElement(Button, {
+      type: "text",
+      size: "small",
+      onClick: onReset,
+      disabled: isAbstract
+    }, i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.RESET))), /*#__PURE__*/React.createElement(Button, {
+      type: "primary",
+      size: "small",
+      onClick: onConfirm
+    }, i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.CONFIRM)))));
+  };
+  return /*#__PURE__*/React.createElement(Popover, {
+    content: getContent(),
+    placement: "bottomRight",
+    overlayStyle: {
+      width: "325px"
+    },
+    visible: visible,
+    trigger: "click"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    checked: checked,
+    onChange: onIconCheckedChange,
+    style: {
+      marginRight: 10
+    },
+    type: "filterInstanceSource",
+    label: "",
+    "data-testid": "instance-source-icon"
+  }));
+};
+export default /*#__PURE__*/memo(FilterInstanceSource);
+//# sourceMappingURL=FilterInstanceSource.js.map

package/dist/esm/instance-list/FilterInstanceSource.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterInstanceSource.js","names":["React","useEffect","useMemo","useState","memo","Popover","Input","Button","Radio","Space","IconButton","SearchOutlined","styles","map","isEmpty","i18n","K","NS_LIBS_CMDB_INSTANCES","encode","keyword","reg","replace","key","FilterInstanceSource","props","instanceSource","setInstanceSource","value","objectIdNameList","setObjectIdNameList","checked","visible","jsonLocalStorage","isAbstract","objectNameMap","getItem","_modelIdNameMap","inheritanceModelIdNameMap","idNameMap","_objectIdNameList","text","onReset","e","parentObjectId","query","objectId","objectName","onChange","onIconClicKChange","onPopoverVisibleChange","onConfirm","handleRadioChange","target","onSearch","trim","regex","RegExp","filterObjectIdNameList","filter","v","test","onIconCheckedChange","getContent","t","SEARCH_MODEL","content","footer","RESET","CONFIRM","width","marginRight"],"sources":["../../../src/instance-list/FilterInstanceSource.tsx"],"sourcesContent":["import React, {\n  FC,\n  ReactElement,\n  useEffect,\n  useMemo,\n  useState,\n  memo,\n} from \"react\";\nimport { Popover, Input, Button, Radio, Space } from \"antd\";\nimport { IconButton } from \"./IconButton\";\nimport { SearchOutlined } from \"@ant-design/icons\";\nimport styles from \"./FilterInstanceSource.module.css\";\nimport { map, isEmpty } from \"lodash\";\nimport i18n from \"i18next\";\nimport { K, NS_LIBS_CMDB_INSTANCES } from \"../i18n/constants\";\n\nimport { filterObjectIdQuery } from \"./InstanceList\";\n\ninterface FilterInstanceSourceProps {\n  visible?: boolean;\n  checked?: boolean;\n  onIconClicKChange?(checked: boolean): void;\n  inheritanceModelIdNameMap?: Record<string, string>;\n  value?: string;\n  onChange: (value: filterObjectIdQuery) => void;\n  onPopoverVisibleChange?(visible: boolean): void;\n  jsonLocalStorage?: any;\n  isAbstract?: boolean;\n}\n\nfunction encode(keyword: string): string {\n  const reg = /[[($^.\\]*\\\\?+{}|)]/gi;\n  return keyword.replace(reg, (key) => `\\\\${key}`);\n}\n\nconst FilterInstanceSource: FC<FilterInstanceSourceProps> = (props) => {\n  const [instanceSource, setInstanceSource] = useState(props.value);\n  const [objectIdNameList, setObjectIdNameList] = useState([]);\n  const { checked, visible, jsonLocalStorage, isAbstract } = props;\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const objectNameMap =\n    jsonLocalStorage.getItem(\"instances-sources-objectId-name-map\") || {};\n\n  const _modelIdNameMap = useMemo(() => {\n    return isEmpty(props.inheritanceModelIdNameMap)\n      ? objectNameMap?.idNameMap\n      : props.inheritanceModelIdNameMap;\n  }, [props.inheritanceModelIdNameMap, objectNameMap]);\n\n  useEffect(() => {\n    const _objectIdNameList = map(_modelIdNameMap, (value, key) => ({\n      text: value,\n      value: key,\n    }));\n    setObjectIdNameList(_objectIdNameList);\n  }, [_modelIdNameMap]);\n\n  const onReset = (e: any): void => {\n    const { parentObjectId, query } = objectNameMap;\n    const value: filterObjectIdQuery = {\n      objectId: parentObjectId,\n      objectName: \"\",\n      query,\n      checked: false,\n    };\n    setInstanceSource(\"\");\n    props?.onChange(value);\n    props?.onIconClicKChange(false);\n    props?.onPopoverVisibleChange(false);\n  };\n\n  const onConfirm = (e: any): void => {\n    const query: filterObjectIdQuery = {\n      objectId: instanceSource,\n      objectName: _modelIdNameMap[instanceSource],\n      query: {},\n      checked,\n    };\n    props?.onChange(query);\n    props?.onPopoverVisibleChange(false);\n  };\n\n  const handleRadioChange = (e: any): void => {\n    setInstanceSource(e.target.value);\n  };\n\n  const onSearch = (e: any): void => {\n    const value = encode(e.target.value.trim());\n    const _objectIdNameList = map(_modelIdNameMap, (value, key) => ({\n      text: value,\n      value: key,\n    }));\n    const regex = new RegExp(value, \"ig\");\n    const filterObjectIdNameList = _objectIdNameList.filter((v) =>\n      regex.test(v.text)\n    );\n    setObjectIdNameList(filterObjectIdNameList);\n  };\n\n  const onIconCheckedChange = (checked: boolean): void => {\n    if (isAbstract) {\n      props?.onIconClicKChange(checked);\n      props?.onPopoverVisibleChange(checked);\n    } else {\n      props?.onIconClicKChange(true);\n      props?.onPopoverVisibleChange(true);\n    }\n  };\n\n  const getContent = (): ReactElement => {\n    return (\n      <>\n        <Input\n          placeholder={i18n.t(`${NS_LIBS_CMDB_INSTANCES}:${K.SEARCH_MODEL}`)}\n          suffix={<SearchOutlined />}\n          onPressEnter={onSearch}\n          data-testid=\"instance-source-search\"\n        />\n        <div className={styles.content}>\n          <Radio.Group value={instanceSource} onChange={handleRadioChange}>\n            <Space direction=\"vertical\">\n              {objectIdNameList.map(({ text, value }) => (\n                <Radio key={value} value={value}>\n                  {text}\n                </Radio>\n              ))}\n            </Space>\n          </Radio.Group>\n        </div>\n        <div className={styles.footer}>\n          <Button\n            type=\"text\"\n            size=\"small\"\n            onClick={onReset}\n            disabled={isAbstract}\n          >\n            {i18n.t(`${NS_LIBS_CMDB_INSTANCES}:${K.RESET}`)}\n          </Button>\n          <Button type=\"primary\" size=\"small\" onClick={onConfirm}>\n            {i18n.t(`${NS_LIBS_CMDB_INSTANCES}:${K.CONFIRM}`)}\n          </Button>\n        </div>\n      </>\n    );\n  };\n  return (\n    <Popover\n      content={getContent()}\n      placement=\"bottomRight\"\n      overlayStyle={{ width: \"325px\" }}\n      visible={visible}\n      trigger=\"click\"\n    >\n      <IconButton\n        checked={checked}\n        onChange={onIconCheckedChange}\n        style={{ marginRight: 10 }}\n        type=\"filterInstanceSource\"\n        label={\"\"}\n        data-testid=\"instance-source-icon\"\n      />\n    </Popover>\n  );\n};\n\nexport default memo(FilterInstanceSource);\n"],"mappings":"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"}

package/dist/esm/instance-list/FilterInstanceSource.module.css

@@ -0,0 +1,13 @@
+.content {
+  margin: 16px 0 8px;
+  max-height: 264px;
+  overflow-x: hidden;
+}
+.footer {
+  margin: 0 -16px -12px;
+  padding: 8px 8px 8px 2px;
+  background-color: #f3f4f7;
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}

package/dist/esm/instance-list/IconButton.js

@@ -46,6 +46,14 @@ export function IconButton(props) {
             icon: "cube"
           }
         });
+      case "filterInstanceSource":
+        return /*#__PURE__*/React.createElement(GeneralIcon, {
+          icon: {
+            lib: "antd",
+            icon: "filter",
+            theme: "filled"
+          }
+        });
     }
   };
   var getTooltip = () => {
@@ -64,6 +72,8 @@ export function IconButton(props) {
         }) : i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.CLICK_TO_SHOW), {
           label: props.label
         });
+      case "filterInstanceSource":
+        return i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.CLICK_TO_FILTER_INSTANCE_SOURCE));
     }
   };
   return /*#__PURE__*/React.createElement(Tooltip, {

package/dist/esm/instance-list/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","names":["React","Tooltip","styles","classNames","GeneralIcon","i18n","K","NS_LIBS_CMDB_INSTANCES","IconButton","props","checked","setChecked","useState","useEffect","handleClick","onChange","getIcon","type","lib","icon","prefix","getTooltip","t","CLICK_TO_CANCEL_FILTER","label","CLICK_TO_FILTER","CLICK_TO_HIDDEN","CLICK_TO_SHOW","style","iconBtnBac","selected","disabled"],"sources":["../../../src/instance-list/IconButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { Tooltip } from \"antd\";\nimport styles from \"./IconButton.module.css\";\nimport classNames from \"classnames\";\nimport { GeneralIcon } from \"@next-libs/basic-components\";\nimport i18n from \"i18next\";\nimport { K, NS_LIBS_CMDB_INSTANCES } from \"../i18n/constants\";\n\ninterface IconButtonProps {\n  checked?: boolean;\n  onChange: (checked: boolean) => void;\n  type: string;\n  style?: Record<string, any>;\n  label: string;\n  disabled?: boolean;\n}\n\nexport function IconButton(props: IconButtonProps) {\n  const [checked, setChecked] = React.useState(false);\n\n  React.useEffect(() => {\n    setChecked(!!props.checked);\n  }, [props]);\n\n  const handleClick = (checked: boolean) => {\n    setChecked(checked);\n    props.onChange(checked);\n  };\n\n  const getIcon = () => {\n    switch (props.type) {\n      case \"relateToMe\":\n        return (\n          <GeneralIcon icon={{ lib: \"fa\", icon: \"user\", prefix: \"fas\" }} />\n        );\n      case \"showHiddenInfo\":\n        return <GeneralIcon icon={{ lib: \"fa\", icon: \"expand-alt\" }} />;\n      case \"normalHost\":\n        return <GeneralIcon icon={{ lib: \"fa\", icon: \"tv\", prefix: \"fas\" }} />;\n      case \"allName\":\n        return <GeneralIcon icon={{ lib: \"fa\", icon: \"cube\" }} />;\n    }\n  };\n  const getTooltip = () => {\n    switch (props.type) {\n      case \"relateToMe\":\n      case \"normalHost\":\n      case \"allName\":\n        return checked\n          ? i18n.t(`${NS_LIBS_CMDB_INSTANCES}:${K.CLICK_TO_CANCEL_FILTER}`, {\n              label: props.label,\n            })\n          : i18n.t(`${NS_LIBS_CMDB_INSTANCES}:${K.CLICK_TO_FILTER}`, {\n              label: props.label,\n            });\n      case \"showHiddenInfo\":\n        return checked\n          ? i18n.t(`${NS_LIBS_CMDB_INSTANCES}:${K.CLICK_TO_HIDDEN}`, {\n              label: props.label,\n            })\n          : i18n.t(`${NS_LIBS_CMDB_INSTANCES}:${K.CLICK_TO_SHOW}`, {\n              label: props.label,\n            });\n    }\n  };\n\n  return (\n    <Tooltip placement=\"top\" title={getTooltip()}>\n      <a\n        style={props.style}\n        className={classNames({\n          [styles.iconBtnBac]: true,\n          [styles.selected]: checked,\n          [styles.disabled]: props.disabled,\n        })}\n        onClick={() => !props.disabled && handleClick(!checked)}\n      >\n        {getIcon()}\n      </a>\n    </Tooltip>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"IconButton.js","names":["React","Tooltip","styles","classNames","GeneralIcon","i18n","K","NS_LIBS_CMDB_INSTANCES","IconButton","props","checked","setChecked","useState","useEffect","handleClick","onChange","getIcon","type","lib","icon","prefix","theme","getTooltip","t","CLICK_TO_CANCEL_FILTER","label","CLICK_TO_FILTER","CLICK_TO_HIDDEN","CLICK_TO_SHOW","CLICK_TO_FILTER_INSTANCE_SOURCE","style","iconBtnBac","selected","disabled"],"sources":["../../../src/instance-list/IconButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { Tooltip } from \"antd\";\nimport styles from \"./IconButton.module.css\";\nimport classNames from \"classnames\";\nimport { GeneralIcon } from \"@next-libs/basic-components\";\nimport i18n from \"i18next\";\nimport { K, NS_LIBS_CMDB_INSTANCES } from \"../i18n/constants\";\n\ninterface IconButtonProps {\n  checked?: boolean;\n  onChange: (checked: boolean) => void;\n  type: string;\n  style?: Record<string, any>;\n  label: string;\n  disabled?: boolean;\n}\n\nexport function IconButton(props: IconButtonProps) {\n  const [checked, setChecked] = React.useState(false);\n\n  React.useEffect(() => {\n    setChecked(!!props.checked);\n  }, [props]);\n\n  const handleClick = (checked: boolean) => {\n    setChecked(checked);\n    props.onChange(checked);\n  };\n\n  const getIcon = () => {\n    switch (props.type) {\n      case \"relateToMe\":\n        return (\n          <GeneralIcon icon={{ lib: \"fa\", icon: \"user\", prefix: \"fas\" }} />\n        );\n      case \"showHiddenInfo\":\n        return <GeneralIcon icon={{ lib: \"fa\", icon: \"expand-alt\" }} />;\n      case \"normalHost\":\n        return <GeneralIcon icon={{ lib: \"fa\", icon: \"tv\", prefix: \"fas\" }} />;\n      case \"allName\":\n        return <GeneralIcon icon={{ lib: \"fa\", icon: \"cube\" }} />;\n      case \"filterInstanceSource\":\n        return (\n          <GeneralIcon\n            icon={{ lib: \"antd\", icon: \"filter\", theme: \"filled\" }}\n          />\n        );\n    }\n  };\n  const getTooltip = () => {\n    switch (props.type) {\n      case \"relateToMe\":\n      case \"normalHost\":\n      case \"allName\":\n        return checked\n          ? i18n.t(`${NS_LIBS_CMDB_INSTANCES}:${K.CLICK_TO_CANCEL_FILTER}`, {\n              label: props.label,\n            })\n          : i18n.t(`${NS_LIBS_CMDB_INSTANCES}:${K.CLICK_TO_FILTER}`, {\n              label: props.label,\n            });\n      case \"showHiddenInfo\":\n        return checked\n          ? i18n.t(`${NS_LIBS_CMDB_INSTANCES}:${K.CLICK_TO_HIDDEN}`, {\n              label: props.label,\n            })\n          : i18n.t(`${NS_LIBS_CMDB_INSTANCES}:${K.CLICK_TO_SHOW}`, {\n              label: props.label,\n            });\n      case \"filterInstanceSource\":\n        return i18n.t(\n          `${NS_LIBS_CMDB_INSTANCES}:${K.CLICK_TO_FILTER_INSTANCE_SOURCE}`\n        );\n    }\n  };\n\n  return (\n    <Tooltip placement=\"top\" title={getTooltip()}>\n      <a\n        style={props.style}\n        className={classNames({\n          [styles.iconBtnBac]: true,\n          [styles.selected]: checked,\n          [styles.disabled]: props.disabled,\n        })}\n        onClick={() => !props.disabled && handleClick(!checked)}\n      >\n        {getIcon()}\n      </a>\n    </Tooltip>\n  );\n}\n"],"mappings":"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"}

package/dist/esm/instance-list/InstanceList.js

@@ -17,6 +17,7 @@ import { extraFieldAttrs, CMDB_MODAL_FIELDS_SETTINGS, CMDB_RESOURCE_FIELDS_SETTI
 import { ModelAttributeValueType } from "../model-attribute-form-control/ModelAttributeFormControl";
 import { IconButton } from "./IconButton";
 import { changeQueryWithCustomRules } from "../processors";
+import FilterInstanceSource from "./FilterInstanceSource";
 export function joinRelationFieldAndShowkey(fields, modelData, objectList) {
   var attrIdMap = keyBy(modelData.attrList, "id");
   return fields.map(field => {
@@ -140,10 +141,10 @@ export function translateConditions(aq, idObjectMap, modelData, t) {
   });
   var attrAndRelationList = [...modelData.attrList, ...relations];
   if (!isEmpty(aq)) {
-    for (var query of aq) {
-      var _queries = [query];
-      if (Object.keys(query)[0] === "$or" || Object.keys(query)[0] === "$and") {
-        _queries = query[Object.keys(query)[0]];
+    for (var _query of aq) {
+      var _queries = [_query];
+      if (Object.keys(_query)[0] === "$or" || Object.keys(_query)[0] === "$and") {
+        _queries = _query[Object.keys(_query)[0]];
       }
       _queries.forEach(query => {
         var _attr;
@@ -302,6 +303,11 @@ export function LegacyInstanceList(props) {
         idNameMap = yield CmdbObjectApi_getIdMapName({
           parentObjectId: modelData.objectId
         });
+        props.showFilterInstanceSource && jsonLocalStorage.setItem("instances-sources-objectId-name-map", {
+          parentObjectId: modelData.objectId,
+          query: props.presetConfigs.query,
+          idNameMap
+        });
       }
       setInheritanceModelIdNameMap(idNameMap);
     });
@@ -382,6 +388,9 @@ export function LegacyInstanceList(props) {
       pageSize: (_ref4 = (_props$dataSource$pag2 = (_props$dataSource2 = props.dataSource) === null || _props$dataSource2 === void 0 ? void 0 : _props$dataSource2.pageSize) !== null && _props$dataSource$pag2 !== void 0 ? _props$dataSource$pag2 : props.pageSize) !== null && _ref4 !== void 0 ? _ref4 : 10,
       aliveHosts: props.aliveHosts,
       relatedToMe: props.relatedToMe,
+      objectIdQuery: props.objectIdQuery,
+      filterInstanceSource: props.filterInstanceSource,
+      instanceSourcePopoverVisible: false,
       inited: false,
       loading: false,
       failed: false,
@@ -915,7 +924,36 @@ export function LegacyInstanceList(props) {
       (_props$onAdvancedSear2 = props.onAdvancedSearch) === null || _props$onAdvancedSear2 === void 0 ? void 0 : _props$onAdvancedSear2.call(props, queries);
     };
   };
+  var onFilterInstanceSourceChange = checked => {
+    var _props$onFilterInstan;
+    setState({
+      filterInstanceSource: checked
+    });
+    (_props$onFilterInstan = props.onFilterInstanceSourceChange) === null || _props$onFilterInstan === void 0 ? void 0 : _props$onFilterInstan.call(props, checked);
+  };
+  var onFilterObjectIdChange = objectIdQuery => {
+    var _props$onFilterObject;
+    setState({
+      objectIdQuery: objectIdQuery
+    });
+    (_props$onFilterObject = props.onFilterObjectIdChange) === null || _props$onFilterObject === void 0 ? void 0 : _props$onFilterObject.call(props, objectIdQuery);
+  };
+  var onPopoverVisibleChange = visible => {
+    setState({
+      instanceSourcePopoverVisible: visible
+    });
+  };
   var conditions = translateConditions(state.aqToShow, idObjectMap, modelData);
+  useEffect(() => {
+    if (props.showFilterInstanceSource) {
+      var aq = initAqToShow(props.aq, modelData, false);
+      var aqToShow = props.aqToShow || initAqToShow(props.aq, modelData);
+      setState({
+        aq,
+        aqToShow
+      });
+    }
+  }, [props.aq, props.aqToShow, props.showFilterInstanceSource]);
   return /*#__PURE__*/React.createElement(Spin, {
     spinning: state.loading
   }, state.inited && !state.failed ? /*#__PURE__*/React.createElement(React.Fragment, null, (!props.searchDisabled || !props.advancedSearchDisabled || !props.relatedToMeDisabled || !props.aliveHostsDisabled || !props.moreButtonsDisabled) && /*#__PURE__*/React.createElement("div", {
@@ -980,6 +1018,16 @@ export function LegacyInstanceList(props) {
     })
   }, " ", i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.CLEAR)))), ((_props$extraOperateBr = props.extraOperateBricks) === null || _props$extraOperateBr === void 0 ? void 0 : _props$extraOperateBr.useBrick) && /*#__PURE__*/React.createElement(BrickAsComponent, {
     useBrick: props.extraOperateBricks.useBrick
+  }), props.showFilterInstanceSource && /*#__PURE__*/React.createElement(FilterInstanceSource, {
+    visible: state.instanceSourcePopoverVisible,
+    checked: state.filterInstanceSource,
+    onPopoverVisibleChange: onPopoverVisibleChange,
+    onIconClicKChange: onFilterInstanceSourceChange,
+    onChange: onFilterObjectIdChange,
+    inheritanceModelIdNameMap: inheritanceModelIdNameMap,
+    value: state.objectIdQuery,
+    jsonLocalStorage: jsonLocalStorage,
+    isAbstract: modelData.isAbstract
   }), props.objectId === "HOST" && props.enableSearchByApp && /*#__PURE__*/React.createElement(Button, {
     type: "link",
     onClick: toggleSearchMode