@riil-frontend/component-topology 9.0.1 → 9.0.3

package/es/core/models/AttributeMetricDisplay.js

@@ -302,31 +302,28 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
   ;
 
   _proto.getNodeNameVisible = function getNodeNameVisible(node) {
-    if (!this.topo.isViewMode()) {
-      return true;
-    }
-
+    // if (!this.topo.isViewMode()) {
+    //   return true;
+    // }
     var _this$getConfig3 = this.getConfig(),
         nodeTag = _this$getConfig3.nodeTag;
 
     var visible = true;
 
     if (nodeTag) {
-      var _nodeTag$data;
-
       var isCustom = nodeTag.isCustom,
           data = nodeTag.data;
       var items = (isCustom ? data[node.ciType] : data) || [];
       visible = !!items.filter(function (item) {
         return item.type === "graph";
-      }).length;
-      console.log("getNodeNameVisible--xxx", nodeTag);
-      var hasIpv4 = Array.isArray(nodeTag.data) && (nodeTag === null || nodeTag === void 0 ? void 0 : (_nodeTag$data = nodeTag.data) === null || _nodeTag$data === void 0 ? void 0 : _nodeTag$data.find(function (item) {
-        return item.code === "ipv4_address";
-      }));
+      }).length; // ipNode逻辑
 
-      if (node.bindType === "ip" && !hasIpv4) {
+      if (isCustom) {
         return true;
+      } else {
+        return !!(data || []).filter(function (item) {
+          return item.type === "graph";
+        }).length;
       }
     }
 

package/es/core/models/TopoApp.js

@@ -24,7 +24,7 @@ import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
 import SelectionModel from "./SelectionModel";
 import CiCache from "./cache/CiCache"; // eslint-disable-next-line no-undef
 
-var version = typeof "9.0.1" === 'string' ? "9.0.1" : null;
+var version = typeof "9.0.3" === 'string' ? "9.0.3" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

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

@@ -1,9 +1,7 @@
-import _Switch from "@alifd/next/es/switch";
 import React from "react"; // import { Link } from "react-router-dom";
 
-import styles from "./index.module.scss";
+import styles from "./index.module.scss"; // url 处理，UICBB 的地址需截取前缀
 
-// url 处理，UICBB 的地址需截取前缀
 function formatUrl(url) {
   var _window, _window$location;
 
@@ -57,12 +55,6 @@ 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,
@@ -78,11 +70,5 @@ export default function BaseInfo(props) {
 
   return /*#__PURE__*/React.createElement("div", {
     className: styles["base-info"]
-  }, 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"
-  })));
+  }, content);
 }

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

@@ -0,0 +1,91 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _Switch from "@alifd/next/es/switch";
+import React, { useState } from 'react';
+import BaseInfoBlock from "./BaseInfoBlock";
+import Configurator from "./components/Configurator";
+// import { isExitLink } from '@/core/models/utils/linkUtils';
+// 基本信息
+export default function NetworkBaseInfo(props) {
+  var loading = props.loading,
+      topo = props.topo,
+      data = props.data,
+      ciTypeMeta = props.ciTypeMeta,
+      renderContent = props.renderContent,
+      baseInfo = props.baseInfo,
+      isAppTopo = props.isAppTopo,
+      topoId = props.topoId,
+      support_templates = props.support_templates,
+      baseInfoCol = props.baseInfoCol,
+      defaultCols = props.defaultCols,
+      resourceOverviewProps = props.resourceOverviewProps,
+      baseInfoColChange = props.baseInfoColChange;
+  var id = data.id,
+      ciType = data.ciType,
+      type = data.type,
+      name = data.name;
+  var edge = topo.dataModel.getDataById(id);
+  var targetNode = topo.dataModel.getDataById(edge.target);
+  var sourceNode = topo.dataModel.getDataById(edge.source);
+
+  var _useState = useState(!!topo.dataModel.getDataById(data.id).attributes['network_link.is_crucial']),
+      defaultChecked = _useState[0],
+      setDefaultChecked = _useState[1];
+
+  var onChanges = function onChanges(checked) {
+    var defaultCheck = topo.topoCrucialLinkFn([data.id], !checked, setDefaultChecked);
+  };
+
+  var creatCruialSwitch = function creatCruialSwitch() {
+    return /*#__PURE__*/React.createElement(_Switch, {
+      checked: defaultChecked,
+      onChange: onChanges,
+      size: "small"
+    });
+  };
+
+  var crucialBaseInfo = {};
+
+  if (targetNode.permission.writeable && sourceNode.permission.writeable) {
+    crucialBaseInfo = {
+      contentTitle: topo.dataModel.getDataById(data.id).attributes['network_link.is_crucial'] ? '是' : '否',
+      dataIndex: 'isCrucial',
+      disabledHide: false,
+      hidden: false,
+      title: '是否关键',
+      value: creatCruialSwitch()
+    };
+  }
+
+  var newBaseInfo = [].concat(baseInfo, [crucialBaseInfo]);
+  return /*#__PURE__*/React.createElement(BaseInfoBlock, _extends({}, resourceOverviewProps === null || resourceOverviewProps === void 0 ? void 0 : resourceOverviewProps.baseInfoProps, {
+    loading: loading,
+    data: data,
+    ciTypeMeta: ciTypeMeta,
+    baseInfo: newBaseInfo,
+    isAppTopo: isAppTopo,
+    topo: topo,
+    headerExtra: function headerExtra(p) {
+      var _resourceOverviewProp;
+
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'flex'
+        }
+      }, (resourceOverviewProps === null || resourceOverviewProps === void 0 ? void 0 : (_resourceOverviewProp = resourceOverviewProps.baseInfoProps) === null || _resourceOverviewProp === void 0 ? void 0 : _resourceOverviewProp.headerExtra(p)) || '', /*#__PURE__*/React.createElement(Configurator, {
+        btnStyle: {
+          marginLeft: 5
+        },
+        topoId: topoId,
+        templateCode: support_templates,
+        type: "baseInfo",
+        defaultCol: defaultCols.baseInfo,
+        defaultDisabledCol: ['display_name'],
+        max: 6,
+        columns: baseInfoCol,
+        getOverviewConfig: resourceOverviewProps.getOverviewConfig,
+        saveOverviewConfig: resourceOverviewProps.saveOverviewConfig,
+        onChange: baseInfoColChange
+      }));
+    }
+  }));
+}

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

@@ -29,7 +29,8 @@ import useCiAttrAndMetricData from "./useCiAttrAndMetricData";
 import Configurator from "./components/Configurator";
 import { formatMetric } from "../../../../../../models/attributeFormatter";
 import LinkTopoCard from "./components/LinkTopo/LinkTopoCard";
-import EventsCard from "./EventsCard"; // url 处理，UICBB 的地址需截取前缀
+import EventsCard from "./EventsCard";
+import NetworkBaseInfo from "./NetworkBaseInfo"; // url 处理，UICBB 的地址需截取前缀
 
 function formatUrl(url) {
   var _window, _window$location;
@@ -845,7 +846,19 @@ export default function ResourceOverview(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: styles['resource-overview'],
     style: style
-  }, /*#__PURE__*/React.createElement(BaseInfoBlock, _extends({}, resourceOverviewProps === null || resourceOverviewProps === void 0 ? void 0 : resourceOverviewProps.baseInfoProps, {
+  }, ciType === 'network_link' ? /*#__PURE__*/React.createElement(NetworkBaseInfo, {
+    resourceOverviewProps: resourceOverviewProps,
+    loading: baseInfoInitLoading,
+    data: elementData,
+    ciTypeMeta: ciTypeMeta,
+    baseInfo: baseInfo,
+    isAppTopo: isAppTopo,
+    topo: topo,
+    support_templates: support_templates,
+    defaultCols: defaultCols,
+    baseInfoCol: baseInfoCol,
+    baseInfoColChange: baseInfoColChange
+  }) : /*#__PURE__*/React.createElement(BaseInfoBlock, _extends({}, resourceOverviewProps === null || resourceOverviewProps === void 0 ? void 0 : resourceOverviewProps.baseInfoProps, {
     loading: baseInfoInitLoading,
     data: elementData,
     ciTypeMeta: ciTypeMeta,

package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/index.module.scss

@@ -8,12 +8,6 @@
   margin-top: 16px;
   margin-right: -25px;
   overflow: hidden;
-  .isCrucialLink{
-    line-height: 24px;
-    
-    display: flex;
-    float: left;
-  }
   .item {
     width: 220px;
     max-width: 100%;

package/es/networkTopo/models/IpNodeTagsTipsBuilder.js

@@ -3,47 +3,7 @@
  */
 import rlog from "@riil-frontend/component-topology-utils/es/rlog";
 import { getEdgeGroups } from "../../utils/htElementUtils";
-import AttributeFormatter from "../../core/models/attributeFormatter"; // 参与计算的链路指标
-
-var metrics = [// 总流速
-{
-  code: "interface_totalbps",
-  calcType: "sum"
-}, // 带宽利用率
-{
-  code: "bandwidth_utilization",
-  calcType: "avg"
-}, // 发送带宽利用率
-{
-  code: "out_bandwidth_utilization",
-  calcType: "avg",
-  showWhenSameSource: true
-}, // 接收带宽利用率
-{
-  code: "in_bandwidth_utilization",
-  calcType: "avg",
-  showWhenSameSource: true
-}, {
-  code: "out_rate",
-  calcType: "sum",
-  showWhenSameSource: true
-}, {
-  code: "in_rate",
-  calcType: "sum",
-  showWhenSameSource: true
-}];
-var calcFnMap = {
-  sum: function sum(values) {
-    return values.reduce(function (total, val) {
-      return total + parseInt(val || 0, 10);
-    }, 0);
-  },
-  avg: function avg(values) {
-    return values.reduce(function (total, val) {
-      return total + parseFloat(val || 0, 10);
-    }, 0) / values.length;
-  }
-};
+import AttributeFormatter from "../../core/models/attributeFormatter";
 
 var IpNodeTagsTipsBuilder = /*#__PURE__*/function () {
   function IpNodeTagsTipsBuilder(amDisplay) {
@@ -70,40 +30,91 @@ var IpNodeTagsTipsBuilder = /*#__PURE__*/function () {
     var dm = this.topo.getDataModel();
     var config = topo.attributeMetricDisplay.getConfig();
     console.log("getIpNodeTagsAndTips", config, ipNodes);
+    var tagDatas = config.nodeTag && !config.nodeTag.isCustom ? config.nodeTag.data : [];
+    var tipDatas = config.nodeTip && !config.nodeTip.isCustom ? config.nodeTip.data : [];
+    var tagHasIpv4 = tagDatas.filter(function (item) {
+      return item.code === "ipv4_address";
+    }).length > 0;
+    var tagHasName = tagDatas.filter(function (item) {
+      return item.code === "display_name";
+    }).length > 0;
+    var tipHasIpv4 = tipDatas.filter(function (item) {
+      return item.code === "ipv4_address";
+    }).length > 0;
+    var tipHasName = tipDatas.filter(function (item) {
+      return item.code === "display_name";
+    }).length > 0;
+    ipNodes.map(function (node) {
+      var tags = [];
 
-    if (config.nodeTag && !config.nodeTag.isCustom) {
-      var tagDatas = config.nodeTag.data;
-      var hasIpv4 = tagDatas.filter(function (item) {
-        return item.code === "ipv4_address";
-      }).length > 0;
-      ipNodes.map(function (node) {
-        if (hasIpv4) {
-          tts.push({
-            type: node,
-            id: node.id,
-            tags: [{
-              type: "attribute",
-              code: "ipv4_address",
-              // 属性code
-              name: "IPv4地址",
-              // 属性名称
-              value: node.bindIp,
-              // 属性值
-              originValue: node.bindIp
-            }],
-            tips: []
-          });
-        } else {
-          tts.push({
-            type: node,
-            id: node.id,
-            tags: [],
-            tips: []
-          });
-        }
-      });
-    }
+      if (tagHasName) {
+        var _element$a, _element$a2;
+
+        var element = dm.getDataByTag(node.id);
+        tags.push({
+          type: "attribute",
+          code: "display_name",
+          // 属性code
+          name: "显示名称",
+          // 属性名称
+          value: (_element$a = element.a("customName")) !== null && _element$a !== void 0 ? _element$a : node.name,
+          // 属性值
+          originValue: (_element$a2 = element.a("customName")) !== null && _element$a2 !== void 0 ? _element$a2 : node.name
+        });
+      }
+
+      if (tagHasIpv4) {
+        tags.push({
+          type: "attribute",
+          code: "ipv4_address",
+          // 属性code
+          name: "IPv4地址",
+          // 属性名称
+          value: node.bindIp,
+          // 属性值
+          originValue: node.bindIp
+        });
+      }
+
+      var tips = [];
 
+      if (tipHasName) {
+        var _element$a3, _element$a4;
+
+        var _element = dm.getDataByTag(node.id);
+
+        tips.push({
+          type: "attribute",
+          code: "display_name",
+          // 属性code
+          name: "显示名称",
+          // 属性名称
+          value: (_element$a3 = _element.a("customName")) !== null && _element$a3 !== void 0 ? _element$a3 : node.name,
+          // 属性值
+          originValue: (_element$a4 = _element.a("customName")) !== null && _element$a4 !== void 0 ? _element$a4 : node.name
+        });
+      }
+
+      if (tipHasIpv4) {
+        tips.push({
+          type: "attribute",
+          code: "ipv4_address",
+          // 属性code
+          name: "IPv4地址",
+          // 属性名称
+          value: node.bindIp,
+          // 属性值
+          originValue: node.bindIp
+        });
+      }
+
+      tts.push({
+        type: node,
+        id: node.id,
+        tags: tags,
+        tips: tips
+      });
+    });
     return tts;
   };
 

package/es/style.js

@@ -14,13 +14,13 @@ import '@riil-frontend/component-pager/es/style';
 import '@alifd/next/es/button/style';
 import '@alifd/next/es/icon/style';
 import '@alifd/next/es/loading/style';
-import '@alifd/next/es/switch/style';
 import '@alifd/next/es/divider/style';
 import '@riil-frontend/component-no-data-page/es/style';
 
 import '@alifd/next/es/overlay/style';
 import '@alifd/next/es/checkbox/style';
 import '@riil-frontend/component-crucial-link-topo/es/style';
+import '@alifd/next/es/switch/style';
 import '@alifd/next/es/input/style';
 import '@alifd/next/es/field/style';
 import '@alifd/next/es/form/style';

package/lib/core/models/AttributeMetricDisplay.js

@@ -320,31 +320,28 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
   ;
 
   _proto.getNodeNameVisible = function getNodeNameVisible(node) {
-    if (!this.topo.isViewMode()) {
-      return true;
-    }
-
+    // if (!this.topo.isViewMode()) {
+    //   return true;
+    // }
     var _this$getConfig3 = this.getConfig(),
         nodeTag = _this$getConfig3.nodeTag;
 
     var visible = true;
 
     if (nodeTag) {
-      var _nodeTag$data;
-
       var isCustom = nodeTag.isCustom,
           data = nodeTag.data;
       var items = (isCustom ? data[node.ciType] : data) || [];
       visible = !!items.filter(function (item) {
         return item.type === "graph";
-      }).length;
-      console.log("getNodeNameVisible--xxx", nodeTag);
-      var hasIpv4 = Array.isArray(nodeTag.data) && (nodeTag === null || nodeTag === void 0 ? void 0 : (_nodeTag$data = nodeTag.data) === null || _nodeTag$data === void 0 ? void 0 : _nodeTag$data.find(function (item) {
-        return item.code === "ipv4_address";
-      }));
+      }).length; // ipNode逻辑
 
-      if (node.bindType === "ip" && !hasIpv4) {
+      if (isCustom) {
         return true;
+      } else {
+        return !!(data || []).filter(function (item) {
+          return item.type === "graph";
+        }).length;
       }
     }
 

package/lib/core/models/TopoApp.js

@@ -56,7 +56,7 @@ var _SelectionModel = _interopRequireDefault(require("./SelectionModel"));
 var _CiCache = _interopRequireDefault(require("./cache/CiCache"));
 
 // eslint-disable-next-line no-undef
-var version = typeof "9.0.1" === 'string' ? "9.0.1" : null;
+var version = typeof "9.0.3" === 'string' ? "9.0.3" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

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

@@ -5,8 +5,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = BaseInfo;
 
-var _switch = _interopRequireDefault(require("@alifd/next/lib/switch"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
@@ -66,12 +64,6 @@ 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,
@@ -87,11 +79,5 @@ function BaseInfo(props) {
 
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _indexModule["default"]["base-info"]
-  }, content, type == 'link' && /*#__PURE__*/_react["default"].createElement("div", {
-    className: _indexModule["default"].isCrucialLink
-  }, "\u662F\u5426\u5173\u952E\uFF1A", /*#__PURE__*/_react["default"].createElement(_switch["default"], {
-    defaultChecked: defaultChecked,
-    onChange: onChange,
-    size: "small"
-  })));
+  }, content);
 }

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

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = NetworkBaseInfo;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _switch = _interopRequireDefault(require("@alifd/next/lib/switch"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _BaseInfoBlock = _interopRequireDefault(require("./BaseInfoBlock"));
+
+var _Configurator = _interopRequireDefault(require("./components/Configurator"));
+
+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; }
+
+// import { isExitLink } from '@/core/models/utils/linkUtils';
+// 基本信息
+function NetworkBaseInfo(props) {
+  var loading = props.loading,
+      topo = props.topo,
+      data = props.data,
+      ciTypeMeta = props.ciTypeMeta,
+      renderContent = props.renderContent,
+      baseInfo = props.baseInfo,
+      isAppTopo = props.isAppTopo,
+      topoId = props.topoId,
+      support_templates = props.support_templates,
+      baseInfoCol = props.baseInfoCol,
+      defaultCols = props.defaultCols,
+      resourceOverviewProps = props.resourceOverviewProps,
+      baseInfoColChange = props.baseInfoColChange;
+  var id = data.id,
+      ciType = data.ciType,
+      type = data.type,
+      name = data.name;
+  var edge = topo.dataModel.getDataById(id);
+  var targetNode = topo.dataModel.getDataById(edge.target);
+  var sourceNode = topo.dataModel.getDataById(edge.source);
+
+  var _useState = (0, _react.useState)(!!topo.dataModel.getDataById(data.id).attributes['network_link.is_crucial']),
+      defaultChecked = _useState[0],
+      setDefaultChecked = _useState[1];
+
+  var onChanges = function onChanges(checked) {
+    var defaultCheck = topo.topoCrucialLinkFn([data.id], !checked, setDefaultChecked);
+  };
+
+  var creatCruialSwitch = function creatCruialSwitch() {
+    return /*#__PURE__*/_react["default"].createElement(_switch["default"], {
+      checked: defaultChecked,
+      onChange: onChanges,
+      size: "small"
+    });
+  };
+
+  var crucialBaseInfo = {};
+
+  if (targetNode.permission.writeable && sourceNode.permission.writeable) {
+    crucialBaseInfo = {
+      contentTitle: topo.dataModel.getDataById(data.id).attributes['network_link.is_crucial'] ? '是' : '否',
+      dataIndex: 'isCrucial',
+      disabledHide: false,
+      hidden: false,
+      title: '是否关键',
+      value: creatCruialSwitch()
+    };
+  }
+
+  var newBaseInfo = [].concat(baseInfo, [crucialBaseInfo]);
+  return /*#__PURE__*/_react["default"].createElement(_BaseInfoBlock["default"], (0, _extends2["default"])({}, resourceOverviewProps === null || resourceOverviewProps === void 0 ? void 0 : resourceOverviewProps.baseInfoProps, {
+    loading: loading,
+    data: data,
+    ciTypeMeta: ciTypeMeta,
+    baseInfo: newBaseInfo,
+    isAppTopo: isAppTopo,
+    topo: topo,
+    headerExtra: function headerExtra(p) {
+      var _resourceOverviewProp;
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex'
+        }
+      }, (resourceOverviewProps === null || resourceOverviewProps === void 0 ? void 0 : (_resourceOverviewProp = resourceOverviewProps.baseInfoProps) === null || _resourceOverviewProp === void 0 ? void 0 : _resourceOverviewProp.headerExtra(p)) || '', /*#__PURE__*/_react["default"].createElement(_Configurator["default"], {
+        btnStyle: {
+          marginLeft: 5
+        },
+        topoId: topoId,
+        templateCode: support_templates,
+        type: "baseInfo",
+        defaultCol: defaultCols.baseInfo,
+        defaultDisabledCol: ['display_name'],
+        max: 6,
+        columns: baseInfoCol,
+        getOverviewConfig: resourceOverviewProps.getOverviewConfig,
+        saveOverviewConfig: resourceOverviewProps.saveOverviewConfig,
+        onChange: baseInfoColChange
+      }));
+    }
+  }));
+}

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

@@ -53,6 +53,8 @@ var _LinkTopoCard = _interopRequireDefault(require("./components/LinkTopo/LinkTo
 
 var _EventsCard = _interopRequireDefault(require("./EventsCard"));
 
+var _NetworkBaseInfo = _interopRequireDefault(require("./NetworkBaseInfo"));
+
 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; }
@@ -881,7 +883,19 @@ function ResourceOverview(props) {
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _indexModule["default"]['resource-overview'],
     style: style
-  }, /*#__PURE__*/_react["default"].createElement(_BaseInfoBlock["default"], (0, _extends2["default"])({}, resourceOverviewProps === null || resourceOverviewProps === void 0 ? void 0 : resourceOverviewProps.baseInfoProps, {
+  }, ciType === 'network_link' ? /*#__PURE__*/_react["default"].createElement(_NetworkBaseInfo["default"], {
+    resourceOverviewProps: resourceOverviewProps,
+    loading: baseInfoInitLoading,
+    data: elementData,
+    ciTypeMeta: ciTypeMeta,
+    baseInfo: baseInfo,
+    isAppTopo: isAppTopo,
+    topo: topo,
+    support_templates: support_templates,
+    defaultCols: defaultCols,
+    baseInfoCol: baseInfoCol,
+    baseInfoColChange: baseInfoColChange
+  }) : /*#__PURE__*/_react["default"].createElement(_BaseInfoBlock["default"], (0, _extends2["default"])({}, resourceOverviewProps === null || resourceOverviewProps === void 0 ? void 0 : resourceOverviewProps.baseInfoProps, {
     loading: baseInfoInitLoading,
     data: elementData,
     ciTypeMeta: ciTypeMeta,

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

@@ -8,12 +8,6 @@
   margin-top: 16px;
   margin-right: -25px;
   overflow: hidden;
-  .isCrucialLink{
-    line-height: 24px;
-    
-    display: flex;
-    float: left;
-  }
   .item {
     width: 220px;
     max-width: 100%;