@riil-frontend/component-topology 9.0.0-a.8 → 9.0.1

package/es/core/models/utils/linkUtils.js

@@ -1,8 +1,8 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _extends from "@babel/runtime/helpers/extends";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import keyBy from 'lodash/keyBy';
-import _ from 'lodash';
+import keyBy from "lodash/keyBy";
+import _ from "lodash";
 import { queryCisByIds, queryModelAsset } from "../../services"; // 查询所有连线
 
 import { getEdges } from "../../../utils/htElementUtils";
@@ -18,24 +18,24 @@ import CiCache from "../cache/CiCache"; // const interfaceTypeMap = {
 
 /**
  * 是否关键链路
- * @param {*} link 
- * @returns 
+ * @param {*} link
+ * @returns
  */
 
 export function isCrucialLink(link) {
-  return !!link.attributes['network_link.is_crucial'];
+  return !!link.attributes["network_link.is_crucial"];
 }
 /**
  * 是否出口链路
- * @param {*} link 
- * @returns 
+ * @param {*} link
+ * @returns
  */
 
 export function isExitLink(link) {
-  return (link === null || link === void 0 ? void 0 : link.attributes) && !(link !== null && link !== void 0 && link.attributes['destination_id']);
+  return (link === null || link === void 0 ? void 0 : link.attributes) && !(link !== null && link !== void 0 && link.attributes["destination_id"]);
 }
 export function mergeLinksData(links, linkCis, nodes, interfaceCiMap, interfaceDoc) {
-  var linkCiMap = keyBy(links, 'id');
+  var linkCiMap = keyBy(links, "id");
   return links.map(function (link) {
     var _interfaceCiMap$attri, _interfaceCiMap$attri2;
 
@@ -44,19 +44,26 @@ export function mergeLinksData(links, linkCis, nodes, interfaceCiMap, interfaceD
     var attributes = _extends({}, linkCi === null || linkCi === void 0 ? void 0 : linkCi.attributes);
 
     var sourceNode = nodes.find(function (node) {
-      return node.id === attributes['network_link.source_device_id'];
+      return node.id === attributes["network_link.source_device_id"];
     });
     var targetNode = nodes.find(function (node) {
-      return node.id === attributes['network_link.destination_device_id'];
-    }); // 翻译
+      return node.id === attributes["network_link.destination_device_id"];
+    });
+    var target = link.target; // 目的端为ip节点
+
+    if (attributes["destination_type"] === "ip") {
+      target = "ip:" + attributes["network_link.destination_ipv4"];
+    } // 翻译
+
 
     return _extends({}, link, {
+      target: target,
       attributes: _extends({}, attributes, {
         // 源/目的设备
-        'network_link.source_device_id_object': {
+        "network_link.source_device_id_object": {
           displayName: sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.name
         },
-        'network_link.destination_device_id_object': {
+        "network_link.destination_device_id_object": {
           displayName: targetNode === null || targetNode === void 0 ? void 0 : targetNode.name
         },
         // 源/目的接口类型
@@ -64,10 +71,10 @@ export function mergeLinksData(links, linkCis, nodes, interfaceCiMap, interfaceD
         destination_type_object: interfaceDoc[attributes.destination_type],
         // 源/目的接口
         source_id_object: {
-          displayName: (_interfaceCiMap$attri = interfaceCiMap[attributes.source_id]) === null || _interfaceCiMap$attri === void 0 ? void 0 : _interfaceCiMap$attri.attributes['display_name']
+          displayName: (_interfaceCiMap$attri = interfaceCiMap[attributes.source_id]) === null || _interfaceCiMap$attri === void 0 ? void 0 : _interfaceCiMap$attri.attributes["display_name"]
         },
         destination_id_object: {
-          displayName: (_interfaceCiMap$attri2 = interfaceCiMap[attributes.destination_id]) === null || _interfaceCiMap$attri2 === void 0 ? void 0 : _interfaceCiMap$attri2.attributes['display_name']
+          displayName: (_interfaceCiMap$attri2 = interfaceCiMap[attributes.destination_id]) === null || _interfaceCiMap$attri2 === void 0 ? void 0 : _interfaceCiMap$attri2.attributes["display_name"]
         }
       })
     });
@@ -106,7 +113,7 @@ function _getLinksDetail() {
             }), linkCis.map(function (item) {
               return item.attributes.destination_type;
             })))).filter(function (item) {
-              return item !== 'ip';
+              return item !== "ip";
             });
             _context.next = 7;
             return CiCache.load(interfaceIds);
@@ -147,10 +154,10 @@ export var compatibleWith = function compatibleWith(value) {
 
 export var plurals = {
   0: [],
-  1: ['phy'],
-  2: ['phy'],
-  3: ['agg'],
-  4: ['phy', 'agg']
+  1: ["phy"],
+  2: ["phy"],
+  3: ["agg"],
+  4: ["phy", "agg"]
 };
 export var showLinkByConfig = function showLinkByConfig(props) {
   var _plurals$compatibleWi;
@@ -165,27 +172,45 @@ export var showLinkByConfig = function showLinkByConfig(props) {
   var dm = gv.getDataModel();
   var edges = getEdges(dm); // console.log("edges", edges);
 
-  var showPhy = types.indexOf('phy') >= 0;
-  var showAgg = types.indexOf('agg') >= 0; // console.log("edges----types",showType, types,showPhy, showAgg);
+  var showPhy = types.indexOf("phy") >= 0;
+  var showAgg = types.indexOf("agg") >= 0; // console.log("edges----types",showType, types,showPhy, showAgg);
 
   if (Array.isArray(edges) && edges.length > 0) {
     edges.map(function (edge) {
       if (showType === 1 || showType === true) {
         // 单链路全部显示
         // console.log("单链路全部显示", edge);
-        edge.s('2d.visible', true);
+        edge.s("2d.visible", true);
       } else {
         var _d$attributes, _d$attributes2;
 
         var d = topo.dataModel.getDataById(edge.getTag()); // 判断是否聚合链路
 
-        if ((d === null || d === void 0 ? void 0 : (_d$attributes = d.attributes) === null || _d$attributes === void 0 ? void 0 : _d$attributes.destination_type) === 'network.agg_interface' && (d === null || d === void 0 ? void 0 : (_d$attributes2 = d.attributes) === null || _d$attributes2 === void 0 ? void 0 : _d$attributes2.source_type) === 'network.agg_interface') {
-          edge.s('2d.visible', showAgg);
+        if ((d === null || d === void 0 ? void 0 : (_d$attributes = d.attributes) === null || _d$attributes === void 0 ? void 0 : _d$attributes.destination_type) === "network.agg_interface" && (d === null || d === void 0 ? void 0 : (_d$attributes2 = d.attributes) === null || _d$attributes2 === void 0 ? void 0 : _d$attributes2.source_type) === "network.agg_interface") {
+          edge.s("2d.visible", showAgg);
         } else {
           // console.log("edge", edge, d, showAgg);
-          edge.s('2d.visible', showPhy);
+          edge.s("2d.visible", showPhy);
         }
       }
     });
   }
+};
+export var mergeExportLinkData = function mergeExportLinkData(props) {
+  var source = props.source,
+      target = props.target,
+      link = props.link;
+  var attrObj = link.attributes;
+
+  var linkData = _extends({}, link, {
+    name: attrObj.name,
+    source: attrObj["network_link.source_device_id"],
+    target: attrObj.destination_type === "ip" ? target.getTag() : attrObj["network_link.destination_device_id"],
+    operation: attrObj.operation,
+    interfaceSource: attrObj["source_id"],
+    interfaceTarget: attrObj["destination_id"],
+    ciType: link.typeCode
+  });
+
+  return linkData;
 };

package/es/core/store/models/topoConfig.js

@@ -13,6 +13,7 @@ import { removeFromArray } from "../../../utils/format";
 import { DEFAULT_GROUP } from "../../../utils/template";
 import { combTopoData, getCiTypes } from "../../../utils/topoData";
 import { saveTopo as _saveTopo, resToConditions, getLayoutId } from "../../../core/models/topoData";
+import networkLinkServer from "../../../networkTopo/services/topo/networkLink";
 import { addLinkData, buildData as buildTopoData } from "../../../networkTopo/getTopoData";
 
 var newGroupWithUUID = function newGroupWithUUID(group) {
@@ -244,24 +245,26 @@ export default function (topoApp) {
           var _this2 = this;
 
           return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-            var editState, resources, _editState$groups, groups, _editState$exportLink, exportLinkIdList, query, data;
+            var editState, resources, _editState$groups, groups, _editState$exportLink, exportLinkIdList, _editState$ipNodes, ipNodes, query, data;
 
             return _regeneratorRuntime.wrap(function _callee2$(_context2) {
               while (1) {
                 switch (_context2.prev = _context2.next) {
                   case 0:
                     editState = rootState.topoConfig;
-                    resources = editState.resources, _editState$groups = editState.groups, groups = _editState$groups === void 0 ? [] : _editState$groups, _editState$exportLink = editState.exportLinkIdList, exportLinkIdList = _editState$exportLink === void 0 ? [] : _editState$exportLink;
+                    resources = editState.resources, _editState$groups = editState.groups, groups = _editState$groups === void 0 ? [] : _editState$groups, _editState$exportLink = editState.exportLinkIdList, exportLinkIdList = _editState$exportLink === void 0 ? [] : _editState$exportLink, _editState$ipNodes = editState.ipNodes, ipNodes = _editState$ipNodes === void 0 ? [] : _editState$ipNodes;
+                    console.log("editState", editState);
                     query = {
                       id: rootState.topoMod.topoId,
                       resources: resources,
                       groups: groups,
-                      exportLinkIdList: exportLinkIdList
+                      exportLinkIdList: exportLinkIdList,
+                      ipNodes: ipNodes
                     };
-                    _context2.next = 5;
+                    _context2.next = 6;
                     return _this2.getTopoByConditions(query);
 
-                  case 5:
+                  case 6:
                     data = _context2.sent;
                     rlog.debug("按配置查询拓扑数据", {
                       config: {
@@ -272,7 +275,7 @@ export default function (topoApp) {
                     });
                     return _context2.abrupt("return", data);
 
-                  case 8:
+                  case 9:
                   case "end":
                     return _context2.stop();
                 }
@@ -308,36 +311,37 @@ export default function (topoApp) {
           var _this4 = this;
 
           return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
-            var topoId, resources, groups, exportLinkIdList, viewConditions, groupInfo, data, _yield$Promise$all, dataWithLinkDetail, _combTopoData, topoData, resAndMetrics, topoDataTrans;
+            var topoId, resources, groups, exportLinkIdList, ipNodes, viewConditions, groupInfo, data, _yield$Promise$all, dataWithLinkDetail, _combTopoData, topoData, resAndMetrics, topoDataTrans;
 
             return _regeneratorRuntime.wrap(function _callee4$(_context4) {
               while (1) {
                 switch (_context4.prev = _context4.next) {
                   case 0:
-                    // rlog.debug("getTopoByConditions--------", params);
-                    topoId = params.id, resources = params.resources, groups = params.groups, exportLinkIdList = params.exportLinkIdList;
+                    rlog.debug("getTopoByConditions--------", params);
+                    topoId = params.id, resources = params.resources, groups = params.groups, exportLinkIdList = params.exportLinkIdList, ipNodes = params.ipNodes;
                     viewConditions = resToConditions(resources);
                     groupInfo = isAvailableArray(groups) && groups.map(function (group) {
                       return _extends({}, group, {
                         layout: getLayoutId(group.layout),
                         resources: resToConditions(group.resources)
                       });
-                    }); // rlog.debug("getTopoByConditions--------", viewConditions, groupInfo);
-
-                    _context4.next = 5;
-                    return topoApp.serverApi.getTopoDataByResource(topoId, viewConditions, groupInfo, exportLinkIdList);
+                    });
+                    rlog.debug("getTopoByConditions--------", viewConditions, groupInfo);
+                    _context4.next = 7;
+                    return topoApp.serverApi.getTopoDataByResource(topoId, viewConditions, groupInfo, exportLinkIdList, ipNodes);
 
-                  case 5:
+                  case 7:
                     data = _context4.sent;
-                    _context4.next = 8;
+                    rlog.debug("getTopoByConditions--------data", data);
+                    _context4.next = 11;
                     return buildTopoData(data);
 
-                  case 8:
+                  case 11:
                     data = _context4.sent;
-                    _context4.next = 11;
+                    _context4.next = 14;
                     return Promise.all([addLinkData(data), topoApp.ciTyeCache.getCiTypeMap(getCiTypes(data)), dispatch.customIcon.loadCustomIcons()]);
 
-                  case 11:
+                  case 14:
                     _yield$Promise$all = _context4.sent;
                     dataWithLinkDetail = _yield$Promise$all[0];
                     _combTopoData = combTopoData({
@@ -364,7 +368,7 @@ export default function (topoApp) {
                       topoDataTrans: topoDataTrans
                     });
 
-                  case 19:
+                  case 22:
                   case "end":
                     return _context4.stop();
                 }
@@ -393,7 +397,7 @@ export default function (topoApp) {
                         }].concat(displayConfig.saveHistories || [])
                       }))
                     };
-                    rlog.debug('saveGlobalConfig', config);
+                    rlog.debug("saveGlobalConfig", config);
                     _context5.next = 5;
                     return topoApp.serverApi.saveTopoSettings(topoApp.id, config);
 
@@ -461,6 +465,33 @@ export default function (topoApp) {
         switchToViewMode: function switchToViewMode() {
           this.reset();
           dispatch.topoMod.switchToViewMode();
+        },
+        queryAllLinkByIp: function queryAllLinkByIp(data) {
+          return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+            var _result$data;
+
+            var ids, ip, result;
+            return _regeneratorRuntime.wrap(function _callee8$(_context8) {
+              while (1) {
+                switch (_context8.prev = _context8.next) {
+                  case 0:
+                    ids = data.ids, ip = data.ip;
+                    console.log("queryAllLinkByIp", ids, ip);
+                    _context8.next = 4;
+                    return networkLinkServer.queryLinksByIp(ids, ip);
+
+                  case 4:
+                    result = _context8.sent;
+                    console.log("queryAllLinkByIp-result", result);
+                    return _context8.abrupt("return", (_result$data = result === null || result === void 0 ? void 0 : result.data) !== null && _result$data !== void 0 ? _result$data : []);
+
+                  case 7:
+                  case "end":
+                    return _context8.stop();
+                }
+              }
+            }, _callee8);
+          }))();
         }
       };
     }

package/es/core/test/Test.js

@@ -22,6 +22,58 @@ var Test = /*#__PURE__*/function () {
   _proto.onReady = function onReady() {// TODO 待移除测试代码
     // this.iconManage.openUpload()
     // this.topo.store.getModelDispatchers('linkDynamicStyleConfig').open({type: 'networkLink'});
+  }
+  /**
+   * 关联IP示例代码
+   */
+  ;
+
+  _proto.createExportLink = function createExportLink() {
+    var htTopo = this.topo.getHtTopo();
+    var dm = htTopo.getGraphView().dm(); // 设置节点关联IP
+
+    var nodeElement = htTopo.getGraphView().sm().fd();
+    var ip = {
+      'id': 'ip:1.1.1.1',
+      'name': '1.1.1.1',
+      customName: null,
+      // 'groupId': null,
+      // 'groupTag': null,
+      'ipAddress': '1.1.1.1',
+      // 'attributes': [],
+      // 'metrics': [],
+      'type': 'node' // 'dtype': 'device'
+
+    };
+    nodeElement.a(ip);
+    nodeElement.setTag('ip:1.1.1.1');
+    var link = {
+      'id': '0000000019b462d1',
+      'name': '172.17.160.116(Gi2/2/0/1) - 172.27.130.13(Gi 0/9)',
+      'source': '00000000029f9411',
+      'target': 'ip:1.1.1.1',
+      'operation': 'delete',
+      'interfaceSource': '0000000018080aee',
+      'interfaceTarget': '000000000341b015',
+      'ciType': 'network_link',
+      'attributes': [],
+      'manageStatus': 0,
+      'permission': {
+        'readable': true,
+        'writeable': true,
+        'deleteable': true
+      },
+      'metrics': [],
+      'type': 'link',
+      'dtype': 'link'
+    };
+    var createElementsData = {
+      groups: [],
+      nodes: [],
+      links: [link],
+      linkGroups: []
+    };
+    htTopo.createElements(createElementsData);
   };
 
   return Test;

package/es/core/utils/graphLinkUtil.js

@@ -1,4 +1,4 @@
-import { getEdges } from "../../utils/htElementUtils";
+import { getElements, isEdge } from "../../utils/htElementUtils";
 /**
  * 连线两端节点变更时更新显示。如果两端互相切换，切换两端样式
  * @param {*} topo 
@@ -7,7 +7,7 @@ import { getEdges } from "../../utils/htElementUtils";
 export function fixLink(topo) {
   var linkDatas = topo.dataModel.getEdges();
   var dm = topo.getHtTopo().getGraphView().dm();
-  var edges = getEdges(dm);
+  var edges = getElements(dm).filter(isEdge);
   edges.forEach(function (edge) {
     var source = edge.getSource();
     var target = edge.getTarget();
@@ -16,15 +16,20 @@ export function fixLink(topo) {
     }); // TODO 判断两端互相切换
     // const isChange = 
 
-    if (linkData && source.getTag() !== linkData.source) {
+    if (linkData && (source === null || source === void 0 ? void 0 : source.getTag()) !== linkData.source) {
       var node = dm.getDataByTag(linkData.source);
-      edge.setSource(node);
+
+      if (node) {
+        edge.setSource(node);
+      }
     }
 
-    if (linkData && linkData.target && target.getTag() !== linkData.target) {
+    if (linkData && linkData.target && (target === null || target === void 0 ? void 0 : target.getTag()) !== linkData.target) {
       var _node = dm.getDataByTag(linkData.target);
 
-      edge.setTarget(_node);
+      if (_node) {
+        edge.setTarget(_node);
+      }
     } // TODO 两端互相切换，交换两端样式
 
   });

package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/BaseInfo.js

@@ -1,7 +1,9 @@
+import _Switch from "@alifd/next/es/switch";
 import React from "react"; // import { Link } from "react-router-dom";
 
-import styles from "./index.module.scss"; // url 处理，UICBB 的地址需截取前缀
+import styles from "./index.module.scss";
 
+// url 处理，UICBB 的地址需截取前缀
 function formatUrl(url) {
   var _window, _window$location;
 
@@ -55,6 +57,12 @@ export default function BaseInfo(props) {
       data = props.data,
       baseInfo = props.baseInfo,
       renderContent = props.renderContent;
+
+  var onChange = function onChange(checked) {
+    topo.topoCrucialLinkFn([data.id], !checked);
+  };
+
+  var defaultChecked = topo.dataModel.getDataById(data.id).attributes['network_link.is_crucial'] || false;
   var content = renderContent ? renderContent({
     type: type,
     data: data,
@@ -70,5 +78,11 @@ export default function BaseInfo(props) {
 
   return /*#__PURE__*/React.createElement("div", {
     className: styles["base-info"]
-  }, content);
+  }, content, type == 'link' && /*#__PURE__*/React.createElement("div", {
+    className: styles.isCrucialLink
+  }, "\u662F\u5426\u5173\u952E\uFF1A", /*#__PURE__*/React.createElement(_Switch, {
+    defaultChecked: defaultChecked,
+    onChange: onChange,
+    size: "small"
+  })));
 }

package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/ResourceOverview.js

@@ -29,8 +29,7 @@ import useCiAttrAndMetricData from "./useCiAttrAndMetricData";
 import Configurator from "./components/Configurator";
 import { formatMetric } from "../../../../../../models/attributeFormatter";
 import LinkTopoCard from "./components/LinkTopo/LinkTopoCard";
-import EventsCard from "./EventsCard";
-import { checkMenu, isOpenFlow, queryLastestValue } from "./components/LinkTopo/services"; // url 处理，UICBB 的地址需截取前缀
+import EventsCard from "./EventsCard"; // url 处理，UICBB 的地址需截取前缀
 
 function formatUrl(url) {
   var _window, _window$location;
@@ -692,7 +691,7 @@ export default function ResourceOverview(props) {
     _metricColChange = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8(col) {
       var _col2, _col3;
 
-      var codes, endTime, params, _ref5, times, metricList, newMetricList, metricLists;
+      var codes, endTime, params, _ref5, times, metricList, metricLists;
 
       return _regeneratorRuntime.wrap(function _callee8$(_context8) {
         while (1) {
@@ -740,16 +739,7 @@ export default function ResourceOverview(props) {
 
             case 11:
               metricList = _context8.sent;
-              _context8.next = 14;
-              return queryMetricList({
-                'name': data.attributes.display_name
-              }, {
-                'id': data.attributes.name
-              });
-
-            case 14:
-              newMetricList = _context8.sent;
-              metricLists = metricList.concat(getNewMetricList(newMetricList));
+              metricLists = metricList.concat(getNewMetricList());
               rlog.debug('metricColChange', metricLists, monitorMetricModels);
               setMetric(col.map(function (item, key) {
                 return {
@@ -775,7 +765,7 @@ export default function ResourceOverview(props) {
                 }, 60000);
               }
 
-            case 20:
+            case 17:
             case "end":
               return _context8.stop();
           }
@@ -785,73 +775,12 @@ export default function ResourceOverview(props) {
     return _metricColChange.apply(this, arguments);
   }
 
-  function queryMetricList(_x9, _x10) {
-    return _queryMetricList.apply(this, arguments);
-  }
-
-  function _queryMetricList() {
-    _queryMetricList = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9(data, param) {
-      var checkMenus, isOpen, list;
-      return _regeneratorRuntime.wrap(function _callee9$(_context9) {
-        while (1) {
-          switch (_context9.prev = _context9.next) {
-            case 0:
-              if (!(ciType !== 'network_link')) {
-                _context9.next = 2;
-                break;
-              }
-
-              return _context9.abrupt("return", []);
-
-            case 2:
-              _context9.next = 4;
-              return checkMenu();
-
-            case 4:
-              checkMenus = _context9.sent;
-
-              if (!(checkMenus[0].passed == 'PASS')) {
-                _context9.next = 14;
-                break;
-              }
-
-              _context9.next = 8;
-              return isOpenFlow(data);
-
-            case 8:
-              isOpen = _context9.sent;
-
-              if (!isOpen) {
-                _context9.next = 14;
-                break;
-              }
-
-              _context9.next = 12;
-              return queryLastestValue(param);
-
-            case 12:
-              list = _context9.sent;
-              return _context9.abrupt("return", list);
-
-            case 14:
-              return _context9.abrupt("return", []);
-
-            case 15:
-            case "end":
-              return _context9.stop();
-          }
-        }
-      }, _callee9);
-    }));
-    return _queryMetricList.apply(this, arguments);
-  }
-
-  var getNewMetricList = function getNewMetricList(data) {
+  var getNewMetricList = function getNewMetricList() {
     return [{
       errorMsg: null,
       mainCiId: "netDelayRatio",
       metricCode: "netDelayRatio",
-      metricValue: data.upNetDelayRatio + ' ms' + '|' + data.downNetDelayRatio + ' ms',
+      metricValue: '0',
       subCiId: '',
       subCiType: null,
       mainCiType: null
@@ -859,7 +788,7 @@ export default function ResourceOverview(props) {
       errorMsg: null,
       mainCiId: "retansRatio",
       metricCode: "retansRatio",
-      metricValue: data.upRetransRatio + ' %' + '|' + data.downRetansRatio + ' %',
+      metricValue: '0',
       subCiId: '',
       subCiType: null,
       mainCiType: null
@@ -922,6 +851,7 @@ export default function ResourceOverview(props) {
     ciTypeMeta: ciTypeMeta,
     baseInfo: baseInfo,
     isAppTopo: isAppTopo,
+    topo: topo,
     headerExtra: function headerExtra(p) {
       var _resourceOverviewProp3;
 

package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopo.js

@@ -12,6 +12,20 @@ export default function LinkTopo(props) {
     linkCi: data,
     linkMetricCodes: linkMetricCodes
   });
+  var linkMetrics = [].concat(metricData.linkMetrics, metricData.linkOther);
+  var linkMetricsList = [];
+
+  if (linkMetrics.length > 0) {
+    linkMetricCodes.forEach(function (e) {
+      var linkMetricsData = linkMetrics.filter(function (i) {
+        return e == i.code;
+      });
+      if (linkMetricsData.length > 0) linkMetricsList.push(linkMetricsData[0]);
+    });
+    metricData.linkMetrics = linkMetricsList;
+    metricData.linkOther = [];
+  }
+
   return /*#__PURE__*/React.createElement("div", {
     className: styles.container
   }, /*#__PURE__*/React.createElement(CrucialLinkTopo, _extends({