@riil-frontend/component-topology 5.0.0-alpha.9 → 5.0.2

package/lib/core/viewer/components/plugins/ResourceDetail/ResourceDetailDrawer.js

@@ -0,0 +1,245 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _drawer = _interopRequireDefault(require("@alifd/next/lib/drawer"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _componentTopologyGraph = require("@riil-frontend/component-topology-graph");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _FullheightTab = _interopRequireDefault(require("../../../../../components/FullheightTab"));
+
+var _overview = _interopRequireDefault(require("../../../../services/overview"));
+
+var _ClusterMemberTable = _interopRequireDefault(require("./components/ClusterMemberTable"));
+
+var _DrawerTitle = _interopRequireDefault(require("./components/DrawerTitle"));
+
+var _ResourceOverview = _interopRequireDefault(require("./components/ResourceOverview"));
+
+var _WebConsoleContainer = _interopRequireDefault(require("./components/WebConsole/WebConsoleContainer"));
+
+var _indexModule = _interopRequireDefault(require("./index.module.scss"));
+
+var _ResourceDetail = _interopRequireDefault(require("./ResourceDetail"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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; }
+
+// 基本信息
+function ResourceDetailDrawer(props) {
+  var topo = props.topo,
+      canShow = props.canShow;
+
+  var _topo$store$useModel = topo.store.useModel('topoBaseInfoOverview'),
+      topoState = _topo$store$useModel[0],
+      topoDispatchers = _topo$store$useModel[1];
+
+  var _topo$store$useModelS = topo.store.useModelState('topoMod'),
+      topoId = _topo$store$useModelS.topoId,
+      topoModData = _topo$store$useModelS.data;
+
+  var _topo$store$useModelS2 = topo.store.useModelState("lock"),
+      lock = _topo$store$useModelS2.lock;
+
+  var _useState = (0, _react.useState)(false),
+      visible = _useState[0],
+      setVisible = _useState[1];
+
+  var _useState2 = (0, _react.useState)({
+    id: '',
+    name: '',
+    type: '',
+    // 类型： node、link
+    ciType: '',
+    ciName: ''
+  }),
+      activeData = _useState2[0],
+      setActiveData = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(''),
+      userId = _useState3[0],
+      setUserId = _useState3[1];
+
+  var resourceData = topo.dataModel.useDataById(activeData.id);
+  (0, _react.useEffect)(function () {
+    var notifier = topo.view.topoClient.notifier;
+    notifier.on(_componentTopologyGraph.TopoEvent.EVENT_DOUBLE_CLICK, openOverview);
+    notifier.on('topo_element_click', changeOverview);
+    return function () {
+      notifier.off(_componentTopologyGraph.TopoEvent.EVENT_DOUBLE_CLICK, openOverview);
+      notifier.off('topo_element_click', changeOverview); // 清除数据
+
+      topoDispatchers.update({
+        id: '',
+        metricCodes: []
+      });
+    };
+  }, [lock]); // 解决切换拓扑图隐藏概览
+
+  (0, _react.useEffect)(function () {
+    setVisible(false); // TODO 其他数据重置
+  }, [topoId]);
+
+  function getUser() {
+    return _getUser.apply(this, arguments);
+  } // select切换
+
+
+  function _getUser() {
+    _getUser = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              setUserId(function (prev) {
+                console.log('获取用户id', prev); // 如果已经获取过，就不再重新获取
+
+                if (!prev) {
+                  (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+                    var res;
+                    return _regenerator["default"].wrap(function _callee$(_context) {
+                      while (1) {
+                        switch (_context.prev = _context.next) {
+                          case 0:
+                            _context.next = 2;
+                            return _overview["default"].getUserId();
+
+                          case 2:
+                            res = _context.sent;
+                            setUserId((res === null || res === void 0 ? void 0 : res.user_id) || '');
+
+                          case 4:
+                          case "end":
+                            return _context.stop();
+                        }
+                      }
+                    }, _callee);
+                  }))();
+                }
+
+                return prev;
+              });
+
+            case 1:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+    return _getUser.apply(this, arguments);
+  }
+
+  function onChangeActive(activeNode) {
+    activeNode && init((0, _extends2["default"])({}, activeNode, {
+      type: 'node'
+    }), 'select');
+  } // 单击切换
+
+
+  function changeOverview(node) {
+    var data = node.getAttrObject();
+    init(data, 'click');
+  }
+
+  function openOverviewByHtElement(element) {
+    openOverview(element.getAttrObject());
+  } // 双击打开
+
+
+  function openOverview(data) {
+    if (lock) {
+      init(data, 'doubleClick');
+    }
+  }
+
+  function init(data, targetType) {
+    console.log('初始化基本信息', data, targetType);
+    var id = data.id,
+        name = data.name,
+        type = data.type,
+        ciType = data.ciType,
+        ciName = data.ciName; // 仅展示资源和链路的概览
+
+    var resourceData = topo.dataModel.getDataById(id);
+
+    if (!resourceData) {
+      return;
+    }
+
+    var operation = resourceData.operation,
+        permission = resourceData.permission;
+    if ( // 没有权限不显示
+    !operation && !(permission !== null && permission !== void 0 && permission.readable) || // 没有citype不显示
+    !ciType) return;
+    var htElement = topo.getDataModel().getDataByTag(id);
+
+    if (!canShow(htElement)) {
+      return;
+    }
+
+    setActiveData({
+      id: id,
+      name: name,
+      type: {
+        linkGroup: 'link',
+        group: 'node'
+      }[type] || type,
+      ciType: ciType,
+      ciName: ciName
+    }); // 显示隐藏
+
+    targetType === 'doubleClick' && setVisible(true); // userId
+
+    getUser();
+  }
+
+  var renderContent = function renderContent() {
+    return /*#__PURE__*/_react["default"].createElement(_ResourceDetail["default"], (0, _extends2["default"])({}, props, {
+      topo: topo,
+      userId: _react.useId,
+      activeData: activeData,
+      resourceData: resourceData
+    }));
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_drawer["default"], {
+    className: _indexModule["default"].baseInfo,
+    closeMode: ['close', 'esc'],
+    visible: visible,
+    title: /*#__PURE__*/_react["default"].createElement(_DrawerTitle["default"], (0, _extends2["default"])({}, activeData, {
+      topo: topo,
+      onChange: onChangeActive
+    })),
+    width: 580,
+    hasMask: false,
+    onClose: function onClose() {
+      return setVisible(false);
+    }
+  }, visible && resourceData && renderContent()));
+}
+
+ResourceDetailDrawer.propTypes = {
+  canShow: _propTypes["default"].func
+};
+ResourceDetailDrawer.defaultProps = {
+  canShow: function canShow(htElement) {
+    return true;
+  }
+};
+var _default = ResourceDetailDrawer;
+exports["default"] = _default;

package/lib/core/viewer/components/plugins/ResourceDetail/ResourceDetailPlugin.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireDefault(require("react"));
 
-var _ResourceDetail = _interopRequireDefault(require("./ResourceDetail"));
+var _ResourceDetailDrawer = _interopRequireDefault(require("./ResourceDetailDrawer"));
 
 function ResourceDetailPlugin(props) {
   var viewerProps = props.viewerProps;
@@ -20,7 +20,7 @@ function ResourceDetailPlugin(props) {
     return null;
   }
 
-  return /*#__PURE__*/_react["default"].createElement(_ResourceDetail["default"], (0, _extends2["default"])({}, props, resourceDetailProps));
+  return /*#__PURE__*/_react["default"].createElement(_ResourceDetailDrawer["default"], (0, _extends2["default"])({}, props, resourceDetailProps));
 }
 
 var _default = ResourceDetailPlugin;

package/lib/core/viewer/components/plugins/ResourceDetail/components/ClusterMemberTable.js

@@ -76,7 +76,7 @@ function ClusterChildrenTable(props) {
                     });
                     return (0, _extends2["default"])({}, ci, {
                       typeObject: ciTypeMap[ci.typeCode],
-                      memberRole: topo.dictCache.dictObject.member_role[memberRoleMetric.metricValue]
+                      memberRole: topo.dictCache.dictObject.member_role[memberRoleMetric === null || memberRoleMetric === void 0 ? void 0 : memberRoleMetric.metricValue]
                     });
                   }),
                   total: ciDataResult.totalRecord,

package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/BaseInfoBlock.js

@@ -28,7 +28,6 @@ function BaseInfoBlock(props) {
       ciType = data.ciType,
       type = data.type,
       name = data.name;
-  console.log('111 data', data);
   return /*#__PURE__*/_react["default"].createElement(_BlockBox["default"], {
     headerTitle: "\u57FA\u672C\u4FE1\u606F",
     headerExtra: /*#__PURE__*/_react["default"].createElement("div", {

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

@@ -47,6 +47,8 @@ var _Configurator = _interopRequireDefault(require("./components/Configurator"))
 
 var _attributeFormatter = require("../../../../../../models/attributeFormatter");
 
+var _LinkTopoCard = _interopRequireDefault(require("./components/LinkTopo/LinkTopoCard"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 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; }
@@ -87,7 +89,6 @@ function ResourceOverview(props) {
   var resourceOverviewProps = (viewerProps === null || viewerProps === void 0 ? void 0 : (_viewerProps$resource = viewerProps.resourceDetailProps) === null || _viewerProps$resource === void 0 ? void 0 : _viewerProps$resource.resourceOverviewProps) || {}; // 是否是业务拓扑
 
   var isAppTopo = !!resourceOverviewProps.getData;
-  console.log('resourceOverviewProps', resourceOverviewProps);
 
   var _topo$store$useModelS = topo.store.useModelState('topoMod'),
       topoId = _topo$store$useModelS.topoId; // 拓扑id
@@ -142,17 +143,7 @@ function ResourceOverview(props) {
       setInitFlag = _useState7[1];
 
   var ciTypeMeta = (0, _react.useMemo)(function () {
-    var typeMeta;
-
-    if (ciType === 'network_link') {
-      // 网络链路要按链路类型查询属性、指标
-      var link = topo.dataModel.getDataById(id);
-      var linkConnectType = link.attributes['network_link.connect_type'];
-      typeMeta = topo.ciTyeCache.getNetworkLinkCiType(linkConnectType);
-    } else {
-      typeMeta = topo.ciTyeCache.getCiType(ciType);
-    }
-
+    var typeMeta = topo.ciTyeCache.getCiType(ciType);
     return typeMeta;
   }, [id]);
 
@@ -568,7 +559,7 @@ function ResourceOverview(props) {
     _baseInfoColChange = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5(col) {
       var _col;
 
-      var infoData, attributeMap, _iterator, _step, item, value, contentTitle, link, node, _data, _ref2, _ref2$, _item, _attributeMap, object, _object, displayName, attr;
+      var infoData, attributeMap, _iterator, _step, item, value, contentTitle, link, address, owned_computer_room, owned_cabinet, roomLink, node, _data, _ref2, _ref2$, _item, _attributeMap, object, _object, displayName, attr;
 
       return _regenerator["default"].wrap(function _callee5$(_context5) {
         while (1) {
@@ -598,7 +589,7 @@ function ResourceOverview(props) {
 
             case 11:
               if ((_step = _iterator()).done) {
-                _context5.next = 46;
+                _context5.next = 48;
                 break;
               }
 
@@ -606,7 +597,7 @@ function ResourceOverview(props) {
               value = (0, _attributeFormatter.formatMetric)(attributeMap[item.dataIndex], ciTypeMeta.attributeMap[item.dataIndex]);
               contentTitle = value;
               _context5.t0 = item.dataIndex;
-              _context5.next = _context5.t0 === 'display_name' ? 18 : _context5.t0 === 'ciName' ? 22 : _context5.t0 === 'res_address' ? 25 : _context5.t0 === 'imageName' ? 30 : 34;
+              _context5.next = _context5.t0 === 'display_name' ? 18 : _context5.t0 === 'ciName' ? 22 : _context5.t0 === 'res_address' ? 25 : _context5.t0 === 'imageName' ? 32 : 36;
               break;
 
             case 18:
@@ -616,36 +607,53 @@ function ResourceOverview(props) {
                 onClick: onClose
               }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
                 className: _indexModule["default"].link,
-                title: attributeMap.display_name || "",
+                title: attributeMap.display_name || '',
                 to: formatUrl(link)
-              }, attributeMap.display_name || "-"));
-              contentTitle = attributeMap.display_name || "-";
-              return _context5.abrupt("break", 35);
+              }, attributeMap.display_name || '-'));
+              contentTitle = attributeMap.display_name || '-';
+              return _context5.abrupt("break", 37);
 
             case 22:
               value = ciTypeMeta.displayName;
               contentTitle = value;
-              return _context5.abrupt("break", 35);
+              return _context5.abrupt("break", 37);
 
             case 25:
               _context5.next = 27;
               return getAddressFormat(attributeMap);
 
             case 27:
-              value = _context5.sent;
-              contentTitle = value;
-              return _context5.abrupt("break", 35);
+              address = _context5.sent;
+              owned_computer_room = attributeMap.owned_computer_room, owned_cabinet = attributeMap.owned_cabinet; // 跳转3D机房定位设备
+
+              if (owned_computer_room && owned_cabinet) {
+                // /visual/room/index_runtime.html?type=preview&room_id=00000000383e3381&rack_id=11&device_id=122
+                roomLink = "/visual/room/index_runtime.html?type=preview&room_id=" + owned_computer_room + "&rack_id=" + owned_cabinet + "&device_id=" + id;
+                value = /*#__PURE__*/_react["default"].createElement("span", {
+                  onClick: onClose
+                }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+                  className: _indexModule["default"].link,
+                  title: address,
+                  to: roomLink,
+                  target: "_blank"
+                }, address));
+              } else {
+                value = address;
+              }
+
+              contentTitle = address;
+              return _context5.abrupt("break", 37);
 
-            case 30:
+            case 32:
               node = topo.getDataModel().getDataByTag(id);
               value = (node === null || node === void 0 ? void 0 : node.a('customName')) || (node === null || node === void 0 ? void 0 : node.a('name')) || '-';
               contentTitle = value;
-              return _context5.abrupt("break", 35);
+              return _context5.abrupt("break", 37);
 
-            case 34:
-              return _context5.abrupt("break", 35);
+            case 36:
+              return _context5.abrupt("break", 37);
 
-            case 35:
+            case 37:
               // 拿翻译字段属性数据
               if (attributeMap[item.dataIndex] && attributeMap[item.dataIndex + ".name"]) {
                 value = attributeMap[item.dataIndex + ".name"];
@@ -681,15 +689,15 @@ function ResourceOverview(props) {
                 contentTitle: contentTitle
               }));
 
-            case 44:
+            case 46:
               _context5.next = 11;
               break;
 
-            case 46:
+            case 48:
               settBaseInfoInitLoading(false);
               setBaseInfo(infoData);
 
-            case 48:
+            case 50:
             case "end":
               return _context5.stop();
           }
@@ -706,7 +714,7 @@ function ResourceOverview(props) {
 
   function _getAttribute() {
     _getAttribute = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6(id) {
-      var res, _ref3, attributes;
+      var _yield$resourceOvervi2, baseInfos, res, _ref3, attributes;
 
       return _regenerator["default"].wrap(function _callee6$(_context6) {
         while (1) {
@@ -720,25 +728,46 @@ function ResourceOverview(props) {
               return _context6.abrupt("return");
 
             case 2:
-              _context6.next = 4;
+              if (!(resourceOverviewProps !== null && resourceOverviewProps !== void 0 && resourceOverviewProps.getData)) {
+                _context6.next = 9;
+                break;
+              }
+
+              _context6.next = 5;
+              return resourceOverviewProps === null || resourceOverviewProps === void 0 ? void 0 : resourceOverviewProps.getData({
+                id: id
+              });
+
+            case 5:
+              _yield$resourceOvervi2 = _context6.sent;
+              baseInfos = _yield$resourceOvervi2.baseInfos;
+
+              if (!baseInfos) {
+                _context6.next = 9;
+                break;
+              }
+
+              return _context6.abrupt("return", baseInfos);
+
+            case 9:
+              _context6.next = 11;
               return _overview["default"].commonQueryCiData({
                 condition: "id('" + id + "')",
                 refAttribute: true,
                 orders: [{
-                  name: "CREATED_TIME",
-                  type: "asc"
+                  name: 'CREATED_TIME',
+                  type: 'asc'
                 }],
                 pageIndex: 1,
-                pageSize: 100000
+                pageSize: 10
               });
 
-            case 4:
+            case 11:
               res = _context6.sent;
-              console.log('getAttribute res', res);
               _ref3 = (res === null || res === void 0 ? void 0 : res.data[0]) || {}, attributes = _ref3.attributes;
-              return _context6.abrupt("return", attributes);
+              return _context6.abrupt("return", attributes || {});
 
-            case 8:
+            case 14:
             case "end":
               return _context6.stop();
           }
@@ -849,7 +878,7 @@ function ResourceOverview(props) {
         return item.dataIndex;
       });
     } else if (type === 'link') {
-      baseInfo = ['display_name', 'network_link.actual_bandwidth', 'network_link.source_ipv4', 'network_link.destination_ipv4', 'network_link.connect_type'];
+      baseInfo = ['display_name', 'network_link.actual_bandwidth', 'network_link.source_ipv4', 'network_link.destination_ipv4'];
       keyIndicators = metricCol.slice(0, 3).map(function (item) {
         return item.dataIndex;
       });
@@ -916,7 +945,15 @@ function ResourceOverview(props) {
         onChange: baseInfoColChange
       }));
     }
-  })), /*#__PURE__*/_react["default"].createElement(_BlockBox["default"], {
+  })), ciType === 'network_link' ? /*#__PURE__*/_react["default"].createElement(_LinkTopoCard["default"], {
+    data: data,
+    topoId: topoId,
+    metricCol: metricCol,
+    metricColChange: metricColChange,
+    metricCodes: metric.map(function (item) {
+      return item.code;
+    })
+  }) : /*#__PURE__*/_react["default"].createElement(_BlockBox["default"], {
     headerTitle: "\u5173\u952E\u6307\u6807",
     headerExtra: /*#__PURE__*/_react["default"].createElement(_Configurator["default"], {
       topoId: topoId,

package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/ResourceOverviewMetric.js

@@ -86,7 +86,6 @@ function ResourceOverviewMetric(props) {
     var code = itemData.code,
         metricItem = itemData.metricItem,
         list = itemData.list;
-    console.log('formatValue', itemData);
     var format = (0, _utils.metricValueFormat)({
       value: (_list = list[list.length - 1]) === null || _list === void 0 ? void 0 : _list.metricValue,
       dataType: metricItem.dataType,
@@ -108,9 +107,9 @@ function ResourceOverviewMetric(props) {
         value: item.metricValue == -2 ? null : Number(item.metricValue)
       };
     });
-  }
+  } // console.log('ResourceOverviewMetric', data);
+
 
-  console.log('ResourceOverviewMetric', data);
   var content;
 
   if (data.length) {

package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/Configurator/index.js

@@ -58,8 +58,8 @@ function Configurator(props) {
       type = props.type,
       max = props.max,
       _props$btnStyle = props.btnStyle,
-      btnStyle = _props$btnStyle === void 0 ? {} : _props$btnStyle;
-  console.log('Configurator props', props);
+      btnStyle = _props$btnStyle === void 0 ? {} : _props$btnStyle; // console.log('Configurator props', props);
+
   var buttonRef = (0, _react.useRef)(null);
 
   var _useState = (0, _react.useState)(false),

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

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = LinkTopo;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _componentCrucialLinkTopo = _interopRequireDefault(require("@riil-frontend/component-crucial-link-topo"));
+
+var _componentTopologyUtils = require("@riil-frontend/component-topology-utils");
+
+var _useMetricPolling = _interopRequireDefault(require("./hooks/useMetricPolling"));
+
+var _LinkTopoModule = _interopRequireDefault(require("./LinkTopo.module.scss"));
+
+function LinkTopo(props) {
+  var data = props.data,
+      linkMetricCodes = props.linkMetricCodes;
+  var metricData = (0, _useMetricPolling["default"])({
+    linkCi: data,
+    linkMetricCodes: linkMetricCodes
+  });
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: _LinkTopoModule["default"].container
+  }, /*#__PURE__*/_react["default"].createElement(_componentCrucialLinkTopo["default"], (0, _extends2["default"])({
+    request: _componentTopologyUtils.request,
+    data: data // 链路ci数据
+    ,
+    isNarrow: true,
+    jumpto: (0, _componentTopologyUtils.getHistory)().push
+  }, metricData)));
+}

package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopo.module.scss

@@ -0,0 +1,11 @@
+.container {
+  width: 100%;
+  height: 100%;
+  min-height: 250px;
+  position: relative;
+  .floatBox{
+    position: absolute;
+    top:50px;
+    left: 40px;
+  }
+}

package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopoCard.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = LinkTopoCard;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _BlockBox = _interopRequireDefault(require("../../BlockBox"));
+
+var _Configurator = _interopRequireDefault(require("../Configurator"));
+
+var _LinkTopo = _interopRequireDefault(require("./LinkTopo"));
+
+function LinkTopoCard(props) {
+  var _data$attributes;
+
+  var topoId = props.topoId,
+      data = props.data,
+      defaultCols = props.defaultCols,
+      metricCol = props.metricCol,
+      metricColChange = props.metricColChange,
+      metricCodes = props.metricCodes; // eslint-disable-next-line camelcase
+
+  var supportTemplates = (data === null || data === void 0 ? void 0 : (_data$attributes = data.attributes) === null || _data$attributes === void 0 ? void 0 : _data$attributes.support_templates) || ''; // 该资源监控模板
+
+  var isCrucial = data === null || data === void 0 ? void 0 : data.attributes['network_link.is_crucial'];
+  return /*#__PURE__*/_react["default"].createElement(_BlockBox["default"], {
+    headerTitle: "\u8FD0\u884C\u60C5\u51B5",
+    headerExtra: /*#__PURE__*/_react["default"].createElement(_Configurator["default"], {
+      topoId: topoId,
+      templateCode: supportTemplates,
+      type: "keyIndicators" // 关键链路默认展示的指标展示【端到端ping时延】和【端到端ping丢包率】
+      ,
+      defaultCol: isCrucial ? ['remote_ping_delayed', 'remote_ping_discards_rate'] : [],
+      max: 5,
+      columns: metricCol,
+      onChange: metricColChange
+    })
+  }, /*#__PURE__*/_react["default"].createElement(_LinkTopo["default"], {
+    data: data,
+    linkMetricCodes: metricCodes
+  }));
+}

package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/constants.js

@@ -0,0 +1,11 @@
+"use strict";
+
+exports.__esModule = true;
+exports.INTERFACE_METRIC_CODES = void 0;
+var INTERFACE_METRIC_CODES = ['out_rate', // 发送速率、接收速率发送接收利用率、总错包数
+'out_bandwidth_utilization', // 发送带宽利用率
+'in_rate', // 接收速率
+'in_bandwidth_utilization', // 接收带宽利用率
+'total_errors_packets' // 总错包数
+];
+exports.INTERFACE_METRIC_CODES = INTERFACE_METRIC_CODES;