@riil-frontend/component-topology 4.0.0-beta.9 → 4.0.2

package/es/topoCenter/models/LinkDynamicStyleExecutor.js

@@ -1,6 +1,7 @@
 import rlog from '@riil-frontend/component-topology-utils/es/rlog';
-import { getEdgeGroupByNodeTags, getEdges } from "../../utils/htElementUtils";
-import { getLinksBetweenTwoNodes } from "../../utils/topoData"; // network_link.actual_bandwidth
+import { isClusterHtElement } from "../../utils/clusterUtil";
+import { getEdgeGroupByNodeTags, getEdges, isNode } from "../../utils/htElementUtils";
+import { getLinksBetweenNodes } from "../utils/linkUtil"; // network_link.actual_bandwidth
 
 function calcEdgeWidth(actualBandwidth) {
   if (!actualBandwidth) {
@@ -16,6 +17,26 @@ function calcEdgeWidth(actualBandwidth) {
   }
 }
 
+var getChildrenNodeCiIds = function getChildrenNodeCiIds(nodes) {
+  var ciIds = [];
+  nodes.forEach(function (node) {
+    if (isNode(node) || isClusterHtElement(node)) {
+      var nodeTag = node.getTag();
+
+      if (nodeTag) {
+        ciIds.push(nodeTag);
+      }
+    }
+  });
+  nodes.forEach(function (node) {
+    if (node instanceof ht.Group) {
+      var children = node.getChildren().toArray();
+      ciIds.push.apply(ciIds, getChildrenNodeCiIds(children));
+    }
+  });
+  return ciIds;
+};
+
 var LinkDynamicStyleExecutor = /*#__PURE__*/function () {
   function LinkDynamicStyleExecutor(topo) {
     this.calcEdgeWidth = calcEdgeWidth;
@@ -74,19 +95,26 @@ var LinkDynamicStyleExecutor = /*#__PURE__*/function () {
     var edges = getEdges(dataModel);
     edges.forEach(function (edge) {
       try {
-        // 查询是否有聚合链路
-        var sourceId = edge.getSource().getTag();
-        var targetId = edge.getTarget().getTag();
+        // 获取两端代理节点
+        var sourceAgent = edge.getSourceAgent();
+        var targetAgent = edge.getTargetAgent();
+        var sourceId = sourceAgent.getTag();
+        var targetId = targetAgent.getTag(); // 查询是否有聚合链路
+
         var aggLink = linkGroups.find(function (link) {
           return link.source === sourceId && link.target === targetId || link.target === sourceId && link.source === targetId;
         }); // 如果连线组未关联链路并可见
 
         if (!aggLink && edge.isEdgeGroupAgent()) {
-          // 查询子链路列表
-          var edgeGroupLinks = getLinksBetweenTwoNodes(links, sourceId, targetId); // 如果有子链路，计算线宽并设置
-
-          if (edgeGroupLinks.length) {
-            var edgeWidth = _this.calcEdgeGroupEdgeWidth(edgeGroupLinks);
+          // 查询两端代理节点（包含子节点）间的子链路列表
+          var sourceCiIds = getChildrenNodeCiIds([sourceAgent]);
+          var targetCiIds = getChildrenNodeCiIds([targetAgent]);
+          var aggLinks = getLinksBetweenNodes(linkGroups, sourceCiIds, targetCiIds);
+          var phyLinks = getLinksBetweenNodes(links, sourceCiIds, targetCiIds);
+          var linkBetweenNodes = aggLinks.length ? aggLinks : phyLinks; // 如果有子链路，计算线宽并设置
+
+          if (linkBetweenNodes.length) {
+            var edgeWidth = _this.calcEdgeGroupEdgeWidth(linkBetweenNodes);
 
             edge.s('edge.width', edgeWidth);
           }

package/es/topoCenter/models/TopoCenter.js

@@ -6,11 +6,9 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import TopoApp from "../../core/models/TopoApp";
 import createMenuCommands from "../../contextmenu/createMenuCommands";
 import getTopoData from "../getTopoData";
-import _sortResources from "../utils/SortResourcesUtil";
 import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 import customStoreModels from "../store";
-import { DEFAULT_LINK_TAG_COMMON_CONFIG, DEFAULT_TIP_COMMON_CONFIG } from "../../constants/ResourceInfoDisplay";
-import LinkTagsTipsBuilder from "./LinkTagsTipsBuilder";
+import { DEFAULT_LINK_TAG_COMMON_CONFIG, DEFAULT_TIP_COMMON_CONFIG } from "../../constants/ResourceInfoDisplay"; // import LinkTagsTipsBuilder from './LinkTagsTipsBuilder';
 
 var TopoCenter = /*#__PURE__*/function (_TopoApp) {
   _inheritsLoose(TopoCenter, _TopoApp);
@@ -30,8 +28,8 @@ var TopoCenter = /*#__PURE__*/function (_TopoApp) {
         },
         getDefaultLinkTipConfig: function getDefaultLinkTipConfig() {
           return DEFAULT_TIP_COMMON_CONFIG;
-        },
-        ExtElementTagTipBuilder: LinkTagsTipsBuilder
+        } // ExtElementTagTipBuilder: LinkTagsTipsBuilder,
+
       },
       onSwitchToEditModeBegin: function () {
         var _onSwitchToEditModeBegin = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(topo) {
@@ -87,12 +85,6 @@ var TopoCenter = /*#__PURE__*/function (_TopoApp) {
           id: topo.id
         });
         topoModDispatchers.refreshTopoTree();
-      },
-      editor: {
-        // 分层、区域的关联资源按名称排序
-        sortResources: function sortResources(nodes) {
-          return _sortResources(_this.store, nodes);
-        }
       }
     })) || this;
     _this.resourceConfig = null;

package/es/topoCenter/store/functionAuth.js

@@ -69,6 +69,8 @@ export default {
                     func: 'topo_manageNavTree'
                   }, {
                     func: 'topo_setTopoPermission'
+                  }, {
+                    func: 'addResource'
                   }]);
 
                 case 2:

package/es/topoCenter/utils/SortResourcesUtil.js

@@ -4,9 +4,9 @@ export default function sortResources(store, nodes) {
 
   var resources = [];
   ((data === null || data === void 0 ? void 0 : data.nodes) || []).forEach(function (res) {
-    var node = nodes.filter(function (node) {
-      return node.id === res.id;
-    })[0];
+    var node = nodes.find(function (item) {
+      return item.id === res.id;
+    });
 
     if (node) {
       resources.push(node);

package/es/topoCenter/utils/exportData.js

@@ -2,29 +2,35 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { request } from '@riil-frontend/component-topology-utils';
 import rlog from '@riil-frontend/component-topology-utils/es/rlog';
+import { findClusters, isCluster } from "../../utils/clusterUtil";
 export default function (_x) {
   return _ref.apply(this, arguments);
 }
 
 function _ref() {
   _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(topo) {
-    var _topo$store$getModelS, nodes, links, params, fileData, fileName, blob, elink;
+    var _topo$store$getModelS, nodes, links, linkGroups, clusters, params, fileData, fileName, blob, elink;
 
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            _topo$store$getModelS = topo.store.getModelState('topoMod').data, nodes = _topo$store$getModelS.nodes, links = _topo$store$getModelS.links;
+            _topo$store$getModelS = topo.store.getModelState('topoMod').data, nodes = _topo$store$getModelS.nodes, links = _topo$store$getModelS.links, linkGroups = _topo$store$getModelS.linkGroups;
+            clusters = findClusters(nodes);
             params = {
               id: topo.id,
-              'nodes': nodes.map(function (node) {
+              'nodes': nodes.filter(function (node) {
+                return !clusters.find(function (c) {
+                  return c.id === node.ownerId;
+                });
+              }).map(function (node) {
                 var element = topo.getDataModel().getDataByTag(node.id);
                 return {
                   'id': node.id,
                   'imageName': element.a('customName') || element.a('name') || element.getName()
                 };
               }),
-              'links': links.map(function (link) {
+              'links': [].concat(links, linkGroups).map(function (link) {
                 var id = link.id,
                     source = link.source,
                     target = link.target,
@@ -40,13 +46,13 @@ function _ref() {
               })
             };
             rlog.error('导出数据', params);
-            _context.next = 5;
+            _context.next = 6;
             return request.post('/topo/v1/api/structure/excel', params, {
               responseType: 'blob' // responseType: 'arraybuffer',
 
             });
 
-          case 5:
+          case 6:
             fileData = _context.sent;
             fileName = topo.store.getModelState('topoMod').topoData.config.name + ".xls";
             blob = new Blob([fileData]); // 处理文档流
@@ -61,7 +67,7 @@ function _ref() {
 
             document.body.removeChild(elink);
 
-          case 16:
+          case 17:
           case "end":
             return _context.stop();
         }

package/es/topoCenter/utils/linkUtil.js

@@ -0,0 +1,8 @@
+export function isLink(link, id1, id2) {
+  return link.source === id1 && link.target === id2 || link.target === id1 && link.source === id2;
+}
+export function getLinksBetweenNodes(links, ids1, ids2) {
+  return links.filter(function (link) {
+    return ids1.indexOf(link.source) !== -1 && ids2.indexOf(link.target) !== -1 || ids2.indexOf(link.source) !== -1 && ids1.indexOf(link.target) !== -1;
+  });
+}

package/es/utils/ResourceConfigUtil.js

@@ -1,7 +1,8 @@
 import rlog from "@riil-frontend/component-topology-utils/es/rlog";
 import sortBy from "lodash/sortBy";
 import { isClusterHtElement } from "./clusterUtil";
-import { getEdges, getGroupChildrenNodes, getGroups, getLayerChildrenNodes, getLayers, getNodes } from "./htElementUtils";
+import { getGroupChildrenResourceElements, getLayerChildrenResourceElements } from "./htElementDataUtil";
+import { getEdges, getGroups, getLayers, getNodes } from "./htElementUtils";
 /**
  * 从拓扑图解析出拓扑资源配置
  *
@@ -21,9 +22,7 @@ function getResourceConfigFromHt(topo) {
       name: layerElement.s("label"),
       order: layerElement.a("order"),
       resources: {
-        "static": getLayerChildrenNodes(layerElement).filter(function (node) {
-          return !!node.getTag();
-        }).map(function (node) {
+        "static": getLayerChildrenResourceElements(layerElement).map(function (node) {
           return node.getTag();
         })
       }
@@ -94,7 +93,7 @@ function getGroupConfigByElement(groupElement) {
     name: groupElement.a("name"),
     order: groupElement.a("order"),
     resources: {
-      "static": getGroupChildrenNodes(groupElement).filter(function (node) {
+      "static": getGroupChildrenResourceElements(groupElement).filter(function (node) {
         return !!node.getTag();
       }).map(function (node) {
         return node.getTag();

package/es/utils/clusterUtil.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /**
  * 集群处理工具类
  */
+import { getGroups } from "./htElementUtils";
 export function isCluster(node) {
   return !!node.cluster;
 }
@@ -16,18 +17,25 @@ export function processCluster(topoData) {
   });
 }
 export function buildClusterGroups(nodes) {
-  return nodes.filter(isCluster).map(function (n) {
+  return findClusters(nodes).map(function (n) {
     return _extends({
       tag: null,
       parentId: n.groupId,
       parentTag: n.groupTag
     }, n, {
       elementTemplate: 'cluster',
-      expandable: !!n.operation // 无权限禁用展开折叠
+      expandable: !!n.operation,
+      // 无权限禁用展开折叠
+      styles: {
+        showExpanded: false // 是否默认展开
 
+      }
     });
   });
 }
+export function findClusters(nodes) {
+  return nodes.filter(isCluster);
+}
 export function processClusterChildrenNodes(nodes, groups) {
   return nodes // 过滤集群
   .filter(function (node) {
@@ -61,4 +69,21 @@ export function processClusterChildNode(node, groups) {
 }
 export function isClusterHtElement(element) {
   return !!element.a('cluster');
+}
+export function isClusterMemberHtElement(element) {
+  return element && element.getParent() && isClusterHtElement(element.getParent());
+}
+/**
+ * 集群无权限时收起
+ * @param {*} topo 
+ */
+
+export function handleClusterNoPermission(topo) {
+  var dm = topo.getHtTopo().getGraphView().dm();
+  var groups = getGroups(dm);
+  groups.forEach(function (group) {
+    if (isClusterHtElement(group) && !group.a('operation') && group.isExpanded()) {
+      group.setExpanded(false);
+    }
+  });
 }

package/es/utils/htElementDataUtil.js

@@ -1,3 +1,5 @@
+import { getEdges, getGroupChildren, getLayerChildren } from "./htElementUtils";
+import * as htElementUtils from "./htElementUtils";
 export function isLayer(element) {
   return element.className === 'ht.Grid';
 }
@@ -12,4 +14,23 @@ export function isEdge(element) {
 }
 export function isText(element) {
   return element.className === 'ht.Text' && element.attrObject.isText;
-}
+}
+export function isResourceElement(element) {
+  return !!element.a('ciType');
+}
+export function isResourceNodeElement(element) {
+  return (htElementUtils.isGroup(element) || htElementUtils.isNode(element)) && isResourceElement(element);
+}
+export function getGroupChildrenResourceElements(element) {
+  return getGroupChildren(element).filter(isResourceElement);
+}
+export function getLayerChildrenResourceElements(layerElement) {
+  return getLayerChildren(layerElement).filter(isResourceElement);
+}
+export var getAllEdgeResourceIds = function getAllEdgeResourceIds(dm) {
+  return getEdges(dm).filter(function (node) {
+    return !!node.getTag();
+  }).map(function (node) {
+    return node.getTag();
+  });
+};

package/es/utils/htElementUtils.js

@@ -229,6 +229,20 @@ export function getLayerChildrenNodes(layer) {
 
   return layer.getChildren().getArray().filter(isNode);
 }
+/**
+ * 获取分层里的节点列表
+ *
+ * @param layer
+ * @return {*}
+ */
+
+export function getLayerChildren(layer) {
+  if (!layer) {
+    return [];
+  }
+
+  return layer.getChildren().getArray();
+}
 /**
  * 获取容器里的子元素列表
  *
@@ -286,7 +300,7 @@ export function setElementRuntimeStyle(element, name, value) {
  * 判断拓扑图是否存在元素
  */
 
-export function isExistedElement(dataModel, data) {
+export function isExistedElement(htTopo, dataModel, data) {
   var type = data.type,
       id = data.id;
 
@@ -294,15 +308,14 @@ export function isExistedElement(dataModel, data) {
     return true;
   }
 
-  if (type === 'group') {
-    var group = getElements(dataModel).find(function (item) {
-      return item.a('tag') === data.tag;
-    });
+  var element = getElements(dataModel).find(function (item) {
+    return item.a('tag') === data.tag;
+  });
+
+  if (element) {
+    return true;
+  } // 连线/连线组
 
-    if (group) {
-      return true;
-    }
-  }
 
   return false;
 }

package/es/utils/showGraphManageStatusUtil.js

@@ -0,0 +1,67 @@
+import rlog from "@riil-frontend/component-topology-utils/lib/rlog";
+import { setElementRuntimeStyle } from "./htElementUtils";
+export function showManageStatus(options) {
+  var topo = options.topo,
+      resources = options.resources,
+      isEditMode = options.isEditMode,
+      graphLoaded = options.graphLoaded,
+      cisEventLevel = options.cisEventLevel;
+
+  var hasAlarm = function hasAlarm(id) {
+    return !!cisEventLevel.find(function (item) {
+      return item.id === id;
+    });
+  }; // 首次加载和监控状态变化后，更新节点和连线置灰状态
+
+
+  if (!isEditMode && graphLoaded) {
+    resources.forEach(function (resource) {
+      var type = resource.type,
+          id = resource.id,
+          manageStatus = resource.manageStatus,
+          permission = resource.permission;
+      var isNotMonite = manageStatus === 0;
+      var readable = !!(permission !== null && permission !== void 0 && permission.readable);
+      var showUnMoniteStatus = !hasAlarm(id) && isNotMonite && readable;
+      var element = topo.getDataModel().getDataByTag(id);
+      if (!element) return;
+
+      if (type === 'node') {
+        try {
+          if (showUnMoniteStatus) {
+            topo.getHtTopo().setNodeStyleIcon(element, {
+              styleIcon: 'unMoniter',
+              icon: 'resource.subIcon.unMoniter'
+            });
+          } else {
+            element.removeStyleIcon('unMoniter');
+          }
+        } catch (error) {
+          rlog.error('设置监控图标异常', element, error);
+        }
+      } else {
+        setElementRuntimeStyle(element, 'color', showUnMoniteStatus ? '#C9CED2' : undefined);
+      }
+    });
+  }
+}
+export function removeManageStatus(options) {
+  var topo = options.topo,
+      resources = options.resources;
+  resources.forEach(function (resource) {
+    var type = resource.type,
+        id = resource.id;
+    var element = topo.getDataModel().getDataByTag(id);
+    if (!element) return;
+
+    if (type === 'node') {
+      try {
+        element.removeStyleIcon('unMoniter');
+      } catch (error) {
+        rlog.error('设置监控图标异常', element, error);
+      }
+    } else {
+      setElementRuntimeStyle(element, 'color', undefined);
+    }
+  });
+}

package/es/utils/topoData.js

@@ -11,6 +11,7 @@ import mergeContextmenu from "../core/common/contextmenu/mergeContextmenu";
 import { getEditorIcons } from "../core/common/icons/icon";
 import { getBackgroundImageUrl } from "../core/utils/backgroundUtil";
 import { processCluster } from "./clusterUtil";
+import { isGroup } from "./htElementUtils";
 /**
  * 查找数组中对应key的值为value的元素并返回,只查找第一个符合的元素
  * @param {Array} arr 数组
@@ -86,40 +87,34 @@ export function formatGroup(group) {
 
 export function formatGroups(groups) {
   return groups.map(formatGroup);
-}
-/**
- *
- * @param attributes {array|object}
- * @return {object}
- */
-
-function nodeAttributesAdapter(attributes) {
-  if (Array.isArray(attributes)) {
-    var map = {};
-    attributes.forEach(function (attr) {
-      map[attr.code] = attr.value;
-    });
-    return map;
-  }
-
-  return attributes || {};
 } // 格式化节点
 
-
-var tfNode = function tfNode(engine, node) {
-  var attributes = nodeAttributesAdapter(node.attributes); // rlog.debug('tfNode---------',node);
-
-  var result = _extends({
-    ipAddress: attributes.ipAddress || null
-  }, node, {
-    operation: node.hasOwnProperty("operation") ? node.operation : null,
+var tfNode = function tfNode(topoEngine, node) {
+  return _extends({}, node, {
     metrics: [],
-    attributes: [],
-    isShowName: engine.isViewMode() ? engine.attributeMetricDisplay.getNodeNameVisible(node) : true
+    attributes: []
   });
+};
+/**
+ * ip、是否显示名称
+ * 
+ * @param {*} topoEngine 
+ * @param {*} topoData 
+ * @returns 
+ */
 
-  return result;
-}; // 格式化连线
+
+function updateNodeInfo(topoEngine, topoData) {
+  return _extends({}, topoData, {
+    nodes: topoData.nodes.map(function (node) {
+      var attributes = node.attributes;
+      return _extends({}, node, {
+        ipAddress: node.ipAddress || (attributes === null || attributes === void 0 ? void 0 : attributes.ipAddress) || (attributes === null || attributes === void 0 ? void 0 : attributes.ipv4_address) || null,
+        isShowName: topoEngine.attributeMetricDisplay.getNodeNameVisible(node)
+      });
+    })
+  });
+} // 格式化连线
 
 
 var tfLink = function tfLink(engine, link) {
@@ -331,7 +326,37 @@ function buildGlobal(_ref2) {
     },
     icons: getEditorIcons(engine),
     // 获取默认节点图标，可选参数。如果无返回值则继续使用内部默认
-    getDefaultNodeIcon: engine.options.getDefaultNodeIcon
+    getDefaultNodeIcon: engine.options.getDefaultNodeIcon,
+
+    /**
+     * 编辑界面左侧面板控制元素是否可拖动到区域中node代表拖动的元素，group代表图上的区域
+     * 区域不能拖拽到区域
+     * 元素不能拖拽到集群
+     */
+    canDragElementToGroup: function canDragElementToGroup(element, group) {
+      if (!isGroup(group)) {
+        return true;
+      }
+
+      if (element.dtype === 'container' && isGroup(group)) {
+        return false;
+      }
+
+      if (isGroup(group) && group.a('cluster')) {
+        return false;
+      }
+
+      console.error(element, group);
+      return true;
+    },
+    // 图上元素能否拖动到区域中
+    canDragGraphElementsToGroup: function canDragGraphElementsToGroup(elemetns, group) {
+      if (!isGroup(group)) {
+        return true;
+      }
+
+      return true;
+    }
   };
 }
 /**
@@ -350,7 +375,7 @@ export var combTopoData = function combTopoData(_ref3) {
       globalConfig = _ref3.globalConfig,
       ciTypeMap = _ref3.ciTypeMap,
       engine = _ref3.engine;
-  var result = processCluster(data); // rlog.debug("combTopoData-接收到数据", result, engine, globalConfig);
+  var result = processCluster(updateNodeInfo(engine, data)); // rlog.debug("combTopoData-接收到数据", result, engine, globalConfig);
 
   var config = _extends({
     type: "auto"
@@ -746,7 +771,7 @@ export function findGroupChildren(elements, group) {
     var type = element.type,
         groupId = element.groupId,
         groupTag = element.groupTag;
-    var isChild = groupId === id || groupTag === tag;
+    var isChild = groupId === id || tag && groupTag === tag;
 
     if (isChild) {
       children.push(element);

package/lib/components/BatchAttrMetric/setting.js

@@ -9,6 +9,8 @@ var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
 
 var _table = _interopRequireDefault(require("@alifd/next/lib/table"));
 
+var _search = _interopRequireDefault(require("@alifd/next/lib/search"));
+
 var _grid = _interopRequireDefault(require("@alifd/next/lib/grid"));
 
 var _message = _interopRequireDefault(require("@alifd/next/lib/message"));
@@ -40,8 +42,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var Setting = function Setting(_ref) {
-  var _allCiSet$ciType;
-
   var defaultSet = _ref.defaultSet,
       showType = _ref.showType,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
@@ -69,9 +69,13 @@ var Setting = function Setting(_ref) {
       ciType = _useState[0],
       setCiType = _useState[1];
 
-  var _useState2 = (0, _react.useState)(utils.initSelected(allCiSet, showType)),
-      selected = _useState2[0],
-      setSelected = _useState2[1];
+  var _useState2 = (0, _react.useState)(''),
+      search = _useState2[0],
+      setSearch = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(utils.initSelected(allCiSet, showType)),
+      selected = _useState3[0],
+      setSelected = _useState3[1];
 
   var selectedRowKeys = selected[ciType];
 
@@ -117,6 +121,28 @@ var Setting = function Setting(_ref) {
     setSelected(values);
   };
 
+  var tableData = (0, _react.useMemo)(function () {
+    var _allCiSet$ciType;
+
+    console.log('allCiSet,ciType,search', allCiSet, ciType, search);
+    var list = ((_allCiSet$ciType = allCiSet[ciType]) === null || _allCiSet$ciType === void 0 ? void 0 : _allCiSet$ciType.list) || [];
+
+    if (search) {
+      list = list.filter(function (item) {
+        var _item$name;
+
+        return ((_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.toUpperCase().indexOf(search.toUpperCase())) !== -1;
+      });
+    }
+
+    return list;
+  }, [allCiSet, ciType, search]);
+
+  function onSearch(value) {
+    console.log('search', search);
+    setSearch(value);
+  }
+
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _indexModule["default"].layout
   }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -138,10 +164,25 @@ var Setting = function Setting(_ref) {
   })), /*#__PURE__*/_react["default"].createElement(_grid["default"].Col, {
     className: _indexModule["default"]["table-wrap"]
   }, /*#__PURE__*/_react["default"].createElement(_componentTableLayout["default"], {
+    filterItems: /*#__PURE__*/_react["default"].createElement("div", {
+      className: _indexModule["default"].filter
+    }, /*#__PURE__*/_react["default"].createElement(_search["default"], {
+      // className={styles.search}
+      style: {
+        width: 200
+      },
+      shape: "simple",
+      placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57",
+      onSearch: onSearch,
+      onChange: function onChange(val) {
+        return !val && onSearch('');
+      },
+      hasClear: true
+    })),
     table: /*#__PURE__*/_react["default"].createElement(_table["default"], {
       fixedHeader: true,
       hasBorder: false,
-      dataSource: ((_allCiSet$ciType = allCiSet[ciType]) === null || _allCiSet$ciType === void 0 ? void 0 : _allCiSet$ciType.list) || [],
+      dataSource: tableData,
       emptyContent: /*#__PURE__*/_react["default"].createElement(_NoDataPage["default"], {
         type: "table"
       }),