@riil-frontend/component-topology 10.0.22 → 10.0.24

package/lib/core/models/AttributeMetricDisplay.js

@@ -19,8 +19,6 @@ var _lodash = require("lodash");
 
 var _ResourceInfoDisplay = require("../../constants/ResourceInfoDisplay");
 
-var _topoData = require("../../utils/topoData");
-
 var _services = require("../services");
 
 var _manageStatusUtil = require("../utils/manageStatusUtil");
@@ -30,12 +28,12 @@ var _attributeFormatter = _interopRequireDefault(require("./attributeFormatter")
 var _DictCache = _interopRequireDefault(require("./cache/DictCache"));
 
 function isGraphField(item) {
-  return item.type === "graph";
+  return item.type === 'graph';
 }
 
 function filterUnExistedFields(fields, ciTypeMeta) {
   function isFieldExisted(item, ciTypeMeta) {
-    return item.type === "attribute" && ciTypeMeta.attributeMap[item.code] || item.type === "metric" && ciTypeMeta.metricMap[item.code] || item.type !== "attribute" && item.type !== "metric";
+    return item.type === 'attribute' && ciTypeMeta.attributeMap[item.code] || item.type === 'metric' && ciTypeMeta.metricMap[item.code] || item.type !== 'attribute' && item.type !== 'metric';
   }
 
   return fields.filter(function (item) {
@@ -52,7 +50,8 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
     var _this$topo$options$ta;
 
     this.topo = topo;
-    var ExtElementTagTipBuilder = (_this$topo$options$ta = this.topo.options.tagTip) === null || _this$topo$options$ta === void 0 ? void 0 : _this$topo$options$ta.ExtElementTagTipBuilder;
+    this.formatter = new _attributeFormatter["default"](this.topo);
+    var ExtElementTagTipBuilder = (_this$topo$options$ta = this.topo.options.tagTip) === null || _this$topo$options$ta === void 0 ? void 0 : _this$topo$options$ta.extElementTagTipBuilder;
 
     if (ExtElementTagTipBuilder) {
       this.extElementTagTipBuilder = new ExtElementTagTipBuilder(this);
@@ -62,7 +61,7 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
   var _proto = AttributeMetricDisplay.prototype;
 
   _proto.getConfig = function getConfig() {
-    var _this$topo$store$getM = this.topo.store.getModelState("displayConfig"),
+    var _this$topo$store$getM = this.topo.store.getModelState('displayConfig'),
         nodeTag = _this$topo$store$getM.nodeTag,
         nodeTip = _this$topo$store$getM.nodeTip,
         linkTag = _this$topo$store$getM.linkTag,
@@ -126,7 +125,7 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
 
     return [].concat(links.map(function (link) {
       return (0, _extends2["default"])({}, link, {
-        type: "edge"
+        type: 'edge'
       });
     }));
   };
@@ -139,14 +138,14 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
 
 
     var nodeArr = [];
-    nodes.map(function (node) {
-      if (!!node.ciType) {
+    nodes.forEach(function (node) {
+      if (node.ciType) {
         var ciType = node.ciType;
 
         var ciTypeConfig = _this.getNodeCiTypeConfig(ciType);
 
         nodeArr.push({
-          type: "node",
+          type: 'node',
           id: node.id,
           ciType: ciType,
           tags: _this.filterCiFiledConfigItems(node, ciTypeConfig.tags),
@@ -169,7 +168,7 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
 
     if (!(0, _manageStatusUtil.isMonitoring)(data)) {
       list = list.filter(function (item) {
-        return item.type !== "metric";
+        return item.type !== 'metric';
       });
     }
 
@@ -178,7 +177,7 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
   ;
 
   _proto.getModelType = function getModelType(ci) {
-    if (ci.ciType === "network_link") {
+    if (ci.ciType === 'network_link') {
       return ci.attributes.support_templates;
     }
 
@@ -218,9 +217,9 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
     return {
       tags: getItems(linkTagConfig),
       tagLinkArrow: {
-        1: "both",
-        2: "from",
-        3: "to"
+        1: 'both',
+        2: 'from',
+        3: 'to'
       }[linkTagConfig === null || linkTagConfig === void 0 ? void 0 : linkTagConfig.type] || undefined,
       tips: getItems(linkTip || defaultLinkTipConfig)
     };
@@ -280,7 +279,7 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
         }
       }); // 增加概览需要的指标字段
 
-      var overviewState = _this3.topo.store.getModelState("topoBaseInfoOverview");
+      var overviewState = _this3.topo.store.getModelState('topoBaseInfoOverview');
 
       if (overviewState.id === fields.id) {
         overviewState.metricCodes.forEach(function (code) {
@@ -333,10 +332,10 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
           data = nodeTag.data;
       var items = (isCustom ? data[node.ciType] : data) || [];
       visible = !!items.filter(function (item) {
-        return item.type === "graph";
+        return item.type === 'graph';
       }).length; // ipNode逻辑
 
-      if (isCustom && node.bindType === "ip") {
+      if (isCustom && node.bindType === 'ip') {
         visible = true;
       }
     }
@@ -369,7 +368,7 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
       var ele = dm.getDataByTag(id); //
 
       if (ele) {
-        ele.a("isShowName", visible);
+        ele.a('isShowName', visible);
       }
     });
   }
@@ -406,7 +405,7 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
 
             case 4:
               ciDatas = _context.sent;
-              bizDispatchers = topo.store.getModelDispatchers("topoBizMod");
+              bizDispatchers = topo.store.getModelDispatchers('topoBizMod');
               _context.next = 8;
               return bizDispatchers.setAttrsAndMetrics(ciDatas);
 
@@ -573,7 +572,7 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
 
     var elementTagsAndTips = this.buildTagsTips() // 开锁状态下禁用悬停展示悬浮框
     .map(function (item) {
-      var _topo$store$getModelS = topo.store.getModelState("lock"),
+      var _topo$store$getModelS = topo.store.getModelState('lock'),
           lock = _topo$store$getModelS.lock;
 
       return lock ? item : (0, _extends2["default"])({}, item, {
@@ -583,9 +582,9 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
     .map(function (item) {
       var tags = item.tags;
 
-      if (item.type === "edge") {
+      if (item.type === 'edge') {
         var allNoValue = tags.data.filter(function (tItem) {
-          return tItem.value === "- ";
+          return tItem.value === '- ';
         }).length === tags.data.length;
 
         if (allNoValue) {
@@ -603,9 +602,9 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
     if (htTopo) {
       var _topo$historyManager, _topo$historyManager2;
 
-      (_topo$historyManager = topo.historyManager) === null || _topo$historyManager === void 0 ? void 0 : _topo$historyManager.setDisabled(true, "加载标注");
+      (_topo$historyManager = topo.historyManager) === null || _topo$historyManager === void 0 ? void 0 : _topo$historyManager.setDisabled(true, '加载标注');
       htTopo.loadTagAndTip(JSON.parse(JSON.stringify(elementTagsAndTips)));
-      (_topo$historyManager2 = topo.historyManager) === null || _topo$historyManager2 === void 0 ? void 0 : _topo$historyManager2.setDisabled(false, "加载标注");
+      (_topo$historyManager2 = topo.historyManager) === null || _topo$historyManager2 === void 0 ? void 0 : _topo$historyManager2.setDisabled(false, '加载标注');
     }
   }
   /**
@@ -615,7 +614,51 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
   ;
 
   _proto.getData = function getData() {
-    return this.topo.store.getModelState("topoBizMod").attrsAndMetrics;
+    return this.topo.store.getModelState('topoBizMod').attrsAndMetrics;
+  };
+
+  _proto.buildElementTagsTips = function buildElementTagsTips(id) {
+    var ciConfigs = this.getResourceTagTipConfig();
+    var ciConfig = ciConfigs.find(function (item) {
+      return item.id === id;
+    });
+    var ciDataItem = this.getData().find(function (item) {
+      return item.id === id;
+    }); // console.log("buildTagsTips-ciDataItem", ciDataItem);
+
+    if (!ciDataItem) {
+      return {
+        id: ciConfig.id,
+        tags: [],
+        tips: []
+      };
+    } // 获取ci数据
+
+
+    var ciData = (0, _extends2["default"])({}, ciDataItem, {
+      ciType: ciConfig.ciType
+    }); // console.log("AttributeFormatter-----", ciData, ciConfig);
+
+    var tags = this.formatter.formatAttrs(ciConfig.tags, ciData) // 展示的所有标注不带对应的名字（包括属性和指标）
+    .map(function (item) {
+      return (0, _extends2["default"])({}, item, {
+        name: ''
+      });
+    }); // 链路标注箭头
+
+    if (ciConfig.type === 'edge') {
+      tags = {
+        data: tags,
+        linkArrow: ciConfig.tagLinkArrow
+      };
+    }
+
+    return {
+      type: ciConfig.type,
+      id: ciConfig.id,
+      tags: tags,
+      tips: this.formatter.formatAttrs(ciConfig.tips, ciData)
+    };
   }
   /**
    * 构造标注、悬浮框数据
@@ -624,50 +667,18 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
   ;
 
   _proto.buildTagsTips = function buildTagsTips() {
-    var data = this.getData(); // 获取标注、悬浮框配置
+    var _this6 = this,
+        _this$extElementTagTi;
 
+    // 获取标注、悬浮框配置
     var ciConfigs = this.getResourceTagTipConfig(); // console.log("buildTagsTips---ciConfigs", ciConfigs);
 
-    var formatter = new _attributeFormatter["default"](this.topo);
     var ciTagsAndTips = ciConfigs.map(function (ciConfig) {
-      var ciDataItem = (0, _topoData.findItem)(data, "id", ciConfig.id); // console.log("buildTagsTips-ciDataItem", ciDataItem);
-
-      if (!ciDataItem) {
-        return {
-          id: ciConfig.id,
-          tags: [],
-          tips: []
-        };
-      } // 获取ci数据
-
-
-      var ciData = (0, _extends2["default"])({}, ciDataItem, {
-        ciType: ciConfig.ciType
-      }); // console.log("AttributeFormatter-----", ciData, ciConfig);
-
-      var tags = formatter.formatAttrs(ciConfig.tags, ciData) // 展示的所有标注不带对应的名字（包括属性和指标）
-      .map(function (item) {
-        return (0, _extends2["default"])({}, item, {
-          name: ''
-        });
-      }); // 链路标注箭头
-
-      if (ciConfig.type === "edge") {
-        tags = {
-          data: tags,
-          linkArrow: ciConfig.tagLinkArrow
-        };
-      }
-
-      return {
-        type: ciConfig.type,
-        id: ciConfig.id,
-        tags: tags,
-        tips: formatter.formatAttrs(ciConfig.tips, ciData)
-      };
+      return _this6.buildElementTagsTips(ciConfig.id);
     }); // console.log("ciTagsAndTips", ciTagsAndTips);
 
-    var elementTagsAndTips = [].concat(ciTagsAndTips, this.extElementTagTipBuilder ? this.extElementTagTipBuilder.getExtElementTagsAndTips() : []); // 刷新标注、浮层
+    var extTagsAndTips = ((_this$extElementTagTi = this.extElementTagTipBuilder) === null || _this$extElementTagTi === void 0 ? void 0 : _this$extElementTagTi.getExtElementTagsAndTips()) || [];
+    var elementTagsAndTips = [].concat(ciTagsAndTips, extTagsAndTips); // 刷新标注、浮层
     // rlog.debug('AttributeMetricDisplay.buildTagsTips', {tagsAndTips: elementTagsAndTips, ciConfigs});
 
     return elementTagsAndTips;

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 "10.0.22" === 'string' ? "10.0.22" : null;
+var version = typeof "10.0.24" === 'string' ? "10.0.24" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

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

@@ -71,16 +71,9 @@ function mergeLinksData(links, linkCis, nodes, interfaceCiMap, interfaceDoc) {
     });
     var targetNode = nodes.find(function (node) {
       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 (0, _extends2["default"])({}, link, {
-      target: target,
       attributes: (0, _extends2["default"])({}, attributes, {
         // 源/目的设备
         "network_link.source_device_id_object": {

package/lib/core/viewer/components/plugins/ElementDetailDrawer/hooks/useElementDetailManager.js

@@ -172,6 +172,7 @@ function useElementDetailManager(props) {
 
     if (getCustomDetailContent) {
       widget = getCustomDetailContent({
+        topo: topo,
         id: id,
         resourceData: resourceData,
         htElement: htElement
@@ -190,18 +191,30 @@ function useElementDetailManager(props) {
   }
 
   function getDetailContentById(id) {
-    var htElement = topo.getDataModel().getDataByTag(id) || topo.getDataModel().getDataById(id.replace('ht:', ''));
+    var htElement = getHtElement(id);
     return getDetailContent({
       id: id,
       htElement: htElement
     });
   }
 
-  var Content = visible && id ? getDetailContentById(id) : null;
+  function getHtElement(id) {
+    var htElement = topo.getDataModel().getDataByTag(id) || topo.getDataModel().getDataById(id.replace('ht:', ''));
+    return htElement;
+  }
+
+  var htElement = (0, _react.useMemo)(function () {
+    return visible ? getHtElement(id) : null;
+  }, [visible, id]);
+  var Content = visible && id ? getDetailContent({
+    id: id,
+    htElement: htElement
+  }) : null;
   var elementDetailManager = {
     visible: visible,
     id: id,
     resourceData: resourceData,
+    htElement: htElement,
     Content: Content,
     init: init,
     destroy: destroy,

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

@@ -23,7 +23,6 @@ function DefaultDetailContent(props) {
   var topo = props.topo,
       id = props.id,
       viewerProps = props.viewerProps,
-      onChangeActive = props.onChangeActive,
       onClose = props.onClose;
 
   var _useUserId = (0, _useUserId2["default"])(),

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

@@ -36,6 +36,7 @@ function ResourceDetailDrawer(props) {
   });
   var visible = detailManager.visible,
       id = detailManager.id,
+      htElement = detailManager.htElement,
       resourceData = detailManager.resourceData,
       Content = detailManager.Content;
   (0, _react.useEffect)(function () {
@@ -59,11 +60,10 @@ function ResourceDetailDrawer(props) {
     onClose: detailManager.close
   }, visible && /*#__PURE__*/_react["default"].createElement(Content, (0, _extends2["default"])({}, props, {
     topo: topo,
-    visible: visible,
     id: id,
+    htElement: htElement,
     viewerProps: viewerProps,
-    onClose: detailManager.close,
-    onChangeActive: detailManager.open
+    onClose: detailManager.close
   })));
 }
 

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

@@ -20,7 +20,7 @@ function ResourceDetailPlugin(props) {
   var _topo$store$useModelS = topo.store.useModelState('topoMod'),
       graphLoaded = _topo$store$useModelS.graphLoaded;
 
-  if (graphLoaded || hideResourceDetailDrawer) {
+  if (!graphLoaded || hideResourceDetailDrawer) {
     return null;
   }
 

package/lib/networkTopo/models/EdgeGroupTagTipBuilder.js

@@ -0,0 +1,55 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _htElementUtils = require("../../utils/htElementUtils");
+
+var _edgeGroupTagUtil = require("../utils/edgeGroupTagUtil");
+
+var EdgeGroupTagTipBuilder = /*#__PURE__*/function () {
+  function EdgeGroupTagTipBuilder(amDisplay) {
+    this.amDisplay = void 0;
+    this.topo = void 0;
+    this.amDisplay = amDisplay;
+    this.topo = amDisplay.topo;
+  }
+
+  var _proto = EdgeGroupTagTipBuilder.prototype;
+
+  _proto.getExtElementTagsAndTips = function getExtElementTagsAndTips() {
+    var _this = this;
+
+    var topo = this.topo;
+    var dm = this.topo.getDataModel();
+    var edgeGroupsTagsTips = (0, _htElementUtils.getEdgeGroups)(dm).map(function (edgeGroup) {
+      var edge = edgeGroup.getEdges().getArray()[0]; // 获取配置的链路
+
+      var linkId = (0, _edgeGroupTagUtil.getEdgeGroupLinkIdConfig)(edge, topo);
+      var edgeGroupId = [edge.getSource().getId(), edge.getTarget().getId()];
+      var data = {
+        tags: [],
+        tips: []
+      };
+
+      if (linkId) {
+        data = _this.amDisplay.buildElementTagsTips(linkId);
+      }
+
+      return {
+        // edgeGroupId,
+        tags: data.tags,
+        tips: data.tips,
+        type: 'edgeGroup'
+      };
+    }).filter(function (item) {
+      return !!item;
+    });
+    return edgeGroupsTagsTips;
+  };
+
+  return EdgeGroupTagTipBuilder;
+}();
+
+exports["default"] = EdgeGroupTagTipBuilder;
+;

package/lib/networkTopo/models/ExtElementTagTipBuilder.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _IpNodeTagsTipsBuilder = _interopRequireDefault(require("./IpNodeTagsTipsBuilder"));
+
+var _EdgeGroupTagTipBuilder = _interopRequireDefault(require("./EdgeGroupTagTipBuilder"));
+
+var ExtElementTagTipBuilder = /*#__PURE__*/function () {
+  function ExtElementTagTipBuilder(amDisplay) {
+    this.amDisplay = void 0;
+    this.topo = void 0;
+    this.amDisplay = amDisplay;
+    this.topo = amDisplay.topo;
+  }
+
+  var _proto = ExtElementTagTipBuilder.prototype;
+
+  _proto.getExtElementTagsAndTips = function getExtElementTagsAndTips() {
+    return [].concat(new _IpNodeTagsTipsBuilder["default"](this.amDisplay).getExtElementTagsAndTips(), new _EdgeGroupTagTipBuilder["default"](this.amDisplay).getExtElementTagsAndTips());
+  };
+
+  return ExtElementTagTipBuilder;
+}();
+
+exports["default"] = ExtElementTagTipBuilder;
+;

package/lib/networkTopo/models/TopoCenter.js

@@ -27,7 +27,7 @@ var _store = _interopRequireDefault(require("../store"));
 
 var _ResourceInfoDisplay = require("../../constants/ResourceInfoDisplay");
 
-var _IpNodeTagsTipsBuilder = _interopRequireDefault(require("./IpNodeTagsTipsBuilder"));
+var _ExtElementTagTipBuilder = _interopRequireDefault(require("./ExtElementTagTipBuilder"));
 
 var TopoCenter = /*#__PURE__*/function (_TopoApp) {
   (0, _inheritsLoose2["default"])(TopoCenter, _TopoApp);
@@ -48,7 +48,7 @@ var TopoCenter = /*#__PURE__*/function (_TopoApp) {
         getDefaultLinkTipConfig: function getDefaultLinkTipConfig() {
           return _ResourceInfoDisplay.DEFAULT_TIP_COMMON_CONFIG;
         },
-        ExtElementTagTipBuilder: _IpNodeTagsTipsBuilder["default"]
+        extElementTagTipBuilder: _ExtElementTagTipBuilder["default"]
       }
     })) || this;
     _this.resourceConfig = null;

package/lib/networkTopo/utils/edgeGroupTagUtil.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getEdgeGroupLinkIdConfig = getEdgeGroupLinkIdConfig;
+
+// 获得连线组标注配置的链路id。无配置时取默认链路
+function getEdgeGroupLinkIdConfig(edgeGroup, topo) {
+  var _links$;
+
+  // const { } = options
+  var sourceId = edgeGroup.getSource().getTag();
+  var targetId = edgeGroup.getTarget().getTag();
+  var links = topo.dataModel.getEdgesBetweenTwoNodes(sourceId, targetId);
+  return (_links$ = links[0]) === null || _links$ === void 0 ? void 0 : _links$.id;
+}

package/lib/utils/htElementUtils.js

@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 
 exports.__esModule = true;
 exports.getEdgeDatas = getEdgeDatas;
+exports.getEdgeGroupAgents = getEdgeGroupAgents;
 exports.getEdgeGroupByNodeTags = getEdgeGroupByNodeTags;
 exports.getEdgeGroupByNodes = getEdgeGroupByNodes;
 exports.getEdgeGroups = getEdgeGroups;
@@ -265,6 +266,10 @@ function getEdgeGroups(dataModel) {
   return edgeGroups;
 }
 
+function getEdgeGroupAgents(dataModel) {
+  return getEdges(dataModel).filter(isEdgeGroupAgent);
+}
+
 function getEdgeDatas(dataModel) {
   return getEdges(dataModel).map(function (element) {
     var _element$getSource, _element$getTarget;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riil-frontend/component-topology",
-  "version": "10.0.22",
+  "version": "10.0.24",
   "description": "拓扑",
   "scripts": {
     "start": "build-scripts start",
@@ -116,6 +116,6 @@
     "access": "public"
   },
   "license": "MIT",
-  "homepage": "https://unpkg.com/@riil-frontend/component-topology@10.0.22/build/index.html",
+  "homepage": "https://unpkg.com/@riil-frontend/component-topology@10.0.24/build/index.html",
   "gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
 }