@riil-frontend/component-topology 11.0.11 → 11.0.13

package/es/components/BatchAttrMetric2/setting.js

@@ -6,7 +6,7 @@ import _Message from "@alifd/next/es/message";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["value", "defaultSet", "dataSource"];
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 import ActionTree from '@riil-frontend/component-action-tree';
 import NoDataPage from '@riil-frontend/component-topology-common/es/components/NoDataPage';
@@ -28,15 +28,21 @@ var Setting = function Setting(_ref) {
   var allCiSet = useMemo(function () {
     var map = {};
     loopTreeNode(dataSource, function (item) {
-      map[item.id] = item;
+      if (item.type !== 'folder') {
+        map[item.id] = item;
+      }
     });
     return map;
   }, [dataSource]);
 
-  var _useState = useState(Object.keys(allCiSet)[0]),
+  var _useState = useState(utils.getDefaultSelectedCiType(dataSource)),
       ciType = _useState[0],
       setCiType = _useState[1];
 
+  useEffect(function () {
+    setCiType(utils.getDefaultSelectedCiType(dataSource));
+  }, [dataSource]);
+
   var _useState2 = useState(''),
       search = _useState2[0],
       setSearch = _useState2[1];
@@ -72,7 +78,7 @@ var Setting = function Setting(_ref) {
   var onTreeSelect = function onTreeSelect(_ref2) {
     var selectedKey = _ref2[0];
 
-    if (selectedKey && allCiSet[selectedKey].type !== 'folder') {
+    if (selectedKey && allCiSet[selectedKey] && allCiSet[selectedKey].type !== 'folder') {
       setCiType(selectedKey);
     }
   };
@@ -126,12 +132,23 @@ var Setting = function Setting(_ref) {
   }, /*#__PURE__*/React.createElement(_Grid.Col, {
     span: 8,
     className: styles['tree-wrap']
-  }, /*#__PURE__*/React.createElement(ActionTree, {
+  }, dataSource.length && /*#__PURE__*/React.createElement(ActionTree, {
     dataSource: dataSource,
     onSelect: onTreeSelect,
     draggable: false,
     treeProps: {
-      selectedKeys: [ciType]
+      selectedKeys: [ciType],
+      defaultExpandedKeys: dataSource.filter(function (item) {
+        return item.type === 'folder';
+      }).map(function (item) {
+        return item.id;
+      }),
+      expandedKeys: dataSource.filter(function (item) {
+        return item.type === 'folder';
+      }).map(function (item) {
+        return item.id;
+      }),
+      defaultExpandAll: true
     }
   })), /*#__PURE__*/React.createElement(_Grid.Col, {
     className: styles['table-wrap']

package/es/components/BatchAttrMetric2/utils.js

@@ -1,6 +1,7 @@
 import React from "react";
 import styles from "./index.module.scss";
 import rlog from "@riil-frontend/component-topology-utils/es/rlog";
+import { loopTreeNode } from "../../utils/treeUtil";
 /**
  * 获取树结构数据源
  * @param {*} allCiSet 数据源
@@ -77,4 +78,21 @@ export var typeCell = function typeCell(text) {
   }
 
   return "-";
-};
+};
+/**
+ * 获得默认选中第一个模型
+ * @param {*} tree 
+ * @returns 
+ */
+
+export function getDefaultSelectedCiType(tree) {
+  var ciType = null;
+  loopTreeNode(tree, function (item) {
+    if (item.type !== 'folder') {
+      if (!ciType) {
+        ciType = item.id;
+      }
+    }
+  });
+  return ciType;
+}

package/es/core/components/ResourceViewAttributeSetting/nodeCiTypeAttrUtil.js

@@ -6,11 +6,10 @@ import { getCiTypesFromCiElements } from "../../../utils/topoData";
  */
 
 export function getNodeModels(topo) {
-  var data = topo.store.getModelState('topoMod').data;
-  var ciTypeMap = topo.ciTyeCache.ciTypes;
   return getNodeModSet();
 
   function getNodeModSet() {
+    var data = topo.store.getModelState('topoMod').data;
     var ciTypes = getCiTypesFromCiElements(data.nodes);
     return getMods(ciTypes);
   }
@@ -22,6 +21,7 @@ export function getNodeModels(topo) {
 
 
   function getMods(ciTypeCodes) {
+    var ciTypeMap = topo.ciTyeCache.ciTypes;
     return Object.keys(ciTypeMap).filter(function (item) {
       return ciTypeCodes.includes(item);
     }).map(function (key) {
@@ -29,11 +29,21 @@ export function getNodeModels(topo) {
       return {
         id: ciTypeObj.code,
         label: ciTypeObj.displayName,
-        icon: ciTypeObj.icon,
-        list: ciModfilter(ciTypeObj, 'node')
+        typeCode: ciTypeObj.typeCode,
+        icon: "/img/model/" + ciTypeObj.icon + ".svg",
+        list: buildModelFields(ciTypeObj, 'node')
       };
     });
   }
+
+  function buildModels(ciTypeObj) {
+    return {
+      id: ciTypeObj.code,
+      label: ciTypeObj.displayName,
+      icon: "/img/model/" + ciTypeObj.icon + ".svg",
+      list: buildModelFields(ciTypeObj, 'node')
+    };
+  }
   /**
    * 过滤ci元数据中的属性和指标，用于属性和指标显示设置
    * @param {} ciTypeObj
@@ -41,7 +51,7 @@ export function getNodeModels(topo) {
    */
 
 
-  function ciModfilter(ciTypeObj, type) {
+  function buildModelFields(ciTypeObj, type) {
     var custom = [];
 
     if (type === 'node') {
@@ -56,6 +66,15 @@ export function getNodeModels(topo) {
         name: '资源类型',
         type: 'custom'
       }]);
+
+      if (topo.isCMPTopo) {
+        custom.push.apply(custom, [{
+          id: 'p:source',
+          code: 'name',
+          name: '所属平台',
+          type: 'custom'
+        }]);
+      }
     }
 
     var attributes = ciTypeObj.attributes.filter(function (attr) {

package/es/core/editor/components/BottomFloatTool/HelpIcon.js

@@ -48,11 +48,7 @@ function HelpIcon(props) {
       }
     }, /*#__PURE__*/React.createElement("img", {
       src: "/img/topo/editor/bottomFloatTool/default.svg",
-      alt: "",
-      style: {
-        width: '15px',
-        height: '15px'
-      }
+      alt: ""
     })),
     closable: true,
     visible: helpBoxIsShow,
@@ -89,7 +85,7 @@ function HelpIcon(props) {
     span: "8"
   }, "ctrl/\u2318+b")), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
     span: "16"
-  }, "\u9009\u62E9-\u62D6\u5230"), /*#__PURE__*/React.createElement(Col, {
+  }, "\u9009\u62E9-\u62D6\u52A8"), /*#__PURE__*/React.createElement(Col, {
     span: "8"
   }, "\u7A7A\u683C")), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
     span: "16"

package/es/core/editor/components/BottomFloatTool/HelpIcon.module.scss

@@ -4,6 +4,9 @@
     margin: 0;
     padding: 0;
     border: 0;
+    cursor: pointer;
+    margin-top: -1px;
+    margin-left: -1px;
 }
 :global{
     #white.next-overlay-inner{

package/es/core/models/AttributeMetricDisplay.js

@@ -158,11 +158,7 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
   ;
 
   _proto.getModelType = function getModelType(ci) {
-    if (ci.ciType === 'network_link') {
-      return ci.attributes.support_templates;
-    }
-
-    return ci.ciType;
+    return this.topo.elementTagTipConfig.getModelType(ci);
   }
   /**
    * 按链路类型获取对应的属性、指标配置

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

package/es/core/models/cache/CiTypeCache.js

@@ -9,12 +9,12 @@ import keyBy from 'lodash/keyBy';
  * Ci类型属性、指标缓存
  */
 
-var CiTyeCache = /*#__PURE__*/function () {
-  function CiTyeCache() {
+var CiTypeCache = /*#__PURE__*/function () {
+  function CiTypeCache() {
     this.cache = {};
   }
 
-  var _proto = CiTyeCache.prototype;
+  var _proto = CiTypeCache.prototype;
 
   _proto.getCiTypeMap = /*#__PURE__*/function () {
     var _getCiTypeMap = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(ciTypeIds) {
@@ -57,7 +57,7 @@ var CiTyeCache = /*#__PURE__*/function () {
     var _load = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(ciTypeIds) {
       var _this = this;
 
-      var unLoadCiTypeIds, ciTypeMetas, cache;
+      var unLoadCiTypeIds, ciTypeMetas;
       return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
@@ -70,36 +70,10 @@ var CiTyeCache = /*#__PURE__*/function () {
 
             case 3:
               ciTypeMetas = _context2.sent;
-              cache = _extends({}, this.cache);
-              ciTypeMetas.forEach(function (ciTypeMeta) {
-                var attributes = (ciTypeMeta.attributes || []).map(function (attr) {
-                  if (ciTypeMeta.code !== 'network_link') {
-                    return attr;
-                  } // 链路属性名称转化，临时方案
-
-
-                  var name = {
-                    source_id: '源端口',
-                    destination_id: '目的端口'
-                  }[attr.code] || attr.name;
-                  var userVisible = ['source_id', 'destination_id'].indexOf(attr.code) !== -1 ? true : attr.userVisible;
-                  return _extends({}, attr, {
-                    name: name,
-                    userVisible: userVisible
-                  });
-                });
-                var metrics = ciTypeMeta.metrics || [];
-                cache[ciTypeMeta.code] = _extends({}, ciTypeMeta, {
-                  attributes: attributes,
-                  attributeMap: keyBy(attributes, 'code'),
-                  metrics: metrics,
-                  metricMap: keyBy(metrics, 'code')
-                });
-              });
-              this.cache = cache;
+              this.addCiTypes(ciTypeMetas);
               return _context2.abrupt("return", this.cache);
 
-            case 8:
+            case 6:
             case "end":
               return _context2.stop();
           }
@@ -114,15 +88,33 @@ var CiTyeCache = /*#__PURE__*/function () {
     return load;
   }();
 
+  _proto.addCiTypes = function addCiTypes(ciTypeMetas) {
+    var _this2 = this;
+
+    ciTypeMetas.forEach(function (ciTypeMeta) {
+      _this2.addCiType(ciTypeMeta);
+    });
+  };
+
+  _proto.addCiType = function addCiType(ciTypeMeta) {
+    var cache = _extends({}, this.cache);
+
+    var attributes = adapterNetworkLinkAttributes(ciTypeMeta, ciTypeMeta.attributes || []);
+    var metrics = ciTypeMeta.metrics || [];
+    cache[ciTypeMeta.code] = _extends({}, ciTypeMeta, {
+      attributes: attributes,
+      attributeMap: keyBy(attributes, 'code'),
+      metrics: metrics,
+      metricMap: keyBy(metrics, 'code')
+    });
+    this.cache = cache;
+  };
+
   _proto.getCiType = function getCiType(typeCode) {
     return this.cache[typeCode];
   };
 
   _proto.getCiTypeByCi = function getCiTypeByCi(ci) {
-    // if (ci.ciType === 'network_link') {
-    //   const supportTemplates = link.attributes.support_templates;
-    // } else {
-    // }
     return this.getCiType(ci.ciType);
   };
 
@@ -136,14 +128,33 @@ var CiTyeCache = /*#__PURE__*/function () {
     return ciType === null || ciType === void 0 ? void 0 : ciType.metricMap[metricCode];
   };
 
-  _createClass(CiTyeCache, [{
+  _createClass(CiTypeCache, [{
     key: "ciTypes",
     get: function get() {
       return this.cache;
     }
   }]);
 
-  return CiTyeCache;
+  return CiTypeCache;
 }();
 
-export default new CiTyeCache();
+function adapterNetworkLinkAttributes(ciTypeMeta, attributes) {
+  return attributes.map(function (attr) {
+    if (ciTypeMeta.code !== 'network_link') {
+      return attr;
+    } // 链路属性名称转化，临时方案
+
+
+    var name = {
+      source_id: '源端口',
+      destination_id: '目的端口'
+    }[attr.code] || attr.name;
+    var userVisible = ['source_id', 'destination_id'].indexOf(attr.code) !== -1 ? true : attr.userVisible;
+    return _extends({}, attr, {
+      name: name,
+      userVisible: userVisible
+    });
+  });
+}
+
+export default new CiTypeCache();

package/es/core/models/tagstips/ElementTagTipConfig.js

@@ -1,13 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { getLinkMtCodes, getMonitorTemplateCodesFromTopoData, getMtCodeCiTypeMap, getNodeMtCodes } from "./utils";
-import { getMetricsByMonitorTemplateCodes } from "../../services/topo/tagtip";
+import keyBy from 'lodash/keyBy';
 import rlog from '@riil-frontend/component-topology-utils/lib/rlog';
+import { getLinkMtCodes, getMtCodeCiTypeMap, getNodeMtCodes } from "./utils";
+import { getMetricsByMonitorTemplateCodes } from "../../services/topo/tagtip";
+/**
+ * 标注、悬浮框字段模型
+ */
 
 var ElementTagTipConfig = /*#__PURE__*/function () {
   function ElementTagTipConfig(topo) {
     this.topoData = void 0;
+    this.modelMap = {};
     this.mtCodes = void 0;
     this.mtMetricsMap = {};
     this.mtCiTypeMap = void 0;
@@ -23,51 +28,213 @@ var ElementTagTipConfig = /*#__PURE__*/function () {
           switch (_context.prev = _context.next) {
             case 0:
               this.topoData = topoData;
-              this.mtCodes = getMonitorTemplateCodesFromTopoData(topoData);
-              _context.prev = 2;
+              _context.next = 3;
+              return this.initNetworkLinkModel();
+
+            case 3:
+              this.mtCiTypeMap = getMtCodeCiTypeMap(topoData);
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, this);
+    }));
+
+    function init(_x) {
+      return _init.apply(this, arguments);
+    }
 
-              if (!this.mtCodes.length) {
-                _context.next = 7;
+    return init;
+  }();
+
+  _proto.initNetworkLinkModel = /*#__PURE__*/function () {
+    var _initNetworkLinkModel = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var mtCodes;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              mtCodes = ['m.critical_link', 'm.ethernet_link'];
+
+              if (!mtCodes.length) {
+                _context2.next = 6;
                 break;
               }
 
-              _context.next = 6;
-              return getMetricsByMonitorTemplateCodes(this.mtCodes);
+              _context2.next = 5;
+              return getMetricsByMonitorTemplateCodes(mtCodes);
 
-            case 6:
-              this.mtMetricsMap = _context.sent;
+            case 5:
+              this.mtMetricsMap = _context2.sent;
 
-            case 7:
-              _context.next = 12;
+            case 6:
+              _context2.next = 11;
               break;
 
-            case 9:
-              _context.prev = 9;
-              _context.t0 = _context["catch"](2);
-              rlog.error('查询监控模板指标失败', _context.t0);
+            case 8:
+              _context2.prev = 8;
+              _context2.t0 = _context2["catch"](0);
+              rlog.error('查询监控模板指标失败', _context2.t0);
 
-            case 12:
-              this.mtCiTypeMap = getMtCodeCiTypeMap(topoData);
-
-            case 13:
+            case 11:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
         }
-      }, _callee, this, [[2, 9]]);
+      }, _callee2, this, [[0, 8]]);
     }));
 
-    function init(_x) {
-      return _init.apply(this, arguments);
+    function initNetworkLinkModel() {
+      return _initNetworkLinkModel.apply(this, arguments);
     }
 
-    return init;
-  }()
+    return initNetworkLinkModel;
+  }();
+
+  _proto.getModelTypes = function getModelTypes(cis) {
+    var _this = this;
+
+    var modelTypes = [];
+    cis.forEach(function (ci) {
+      var modelType = _this.getModelType(ci);
+
+      if (modelType && modelTypes.indexOf(modelType) < 0) {
+        modelTypes.push(modelType);
+      }
+    });
+    return modelTypes;
+  }
   /**
-   * 获得节点字段配置项map
+   * 查询模型
+   * @param {*} ci 
+   * @returns 
    */
+  // eslint-disable-next-line class-methods-use-this
   ;
 
+  _proto.getModelType = function getModelType(ci) {
+    if (ci.ciType === 'network_link') {
+      return ci.attributes.support_templates;
+    }
+
+    return ci.ciType;
+  };
+
+  _proto.getModelByType = function getModelByType(type) {
+    return this.getNetworkLinkModel(type) || this.topo.ciTyeCache.getCiType(type);
+  };
+
+  _proto.getNetworkLinkModel = function getNetworkLinkModel(type) {
+    var _this2 = this;
+
+    var baseInfo = [{
+      code: 'm.critical_link',
+      displayName: '关键链路',
+      typeCode: 'network_link'
+    }, {
+      code: 'm.ethernet_link',
+      displayName: '网络链路',
+      typeCode: 'network_link'
+    }].find(function (item) {
+      return item.code === type;
+    });
+
+    if (!baseInfo) {
+      return null;
+    }
+
+    var ciTypeModel = this.topo.ciTyeCache.getCiType('network_link');
+    var metrics = ciTypeModel.metrics.filter(function (m) {
+      return _this2.mtMetricsMap[type] && !!_this2.mtMetricsMap[type][m.code];
+    });
+    return _extends({}, ciTypeModel, baseInfo, {
+      metrics: metrics,
+      metricMap: keyBy(metrics, 'code')
+    });
+  }
+  /**
+   * 获取链路标注悬浮框属性配置数据
+   * @returns 
+   */
+  ;
+
+  _proto.getLinkConfigItems = function getLinkConfigItems() {
+    var _this3 = this;
+
+    var _this$topo$dataModel$ = this.topo.dataModel.getData(),
+        links = _this$topo$dataModel$.links;
+
+    var modelTypes = this.getModelTypes(links);
+    var list = modelTypes.map(this.getModelByType.bind(this)).map(function (item) {
+      return _this3.buildModels(item, 'link');
+    });
+    return list;
+  } // eslint-disable-next-line
+  ;
+
+  _proto.buildModels = function buildModels(ciTypeObj, type) {
+    return {
+      id: ciTypeObj.code,
+      label: ciTypeObj.displayName,
+      typeCode: ciTypeObj.typeCode,
+      icon: "/img/model/" + ciTypeObj.icon + ".svg",
+      list: this.buildModelFields(ciTypeObj, type)
+    };
+  }
+  /**
+   * 过滤ci元数据中的属性和指标，用于属性和指标显示设置
+   * @param {} ciTypeObj
+   * @returns
+   */
+  // eslint-disable-next-line
+  ;
+
+  _proto.buildModelFields = function buildModelFields(ciTypeObj, type) {
+    var custom = [];
+
+    if (type === 'node') {
+      custom.push.apply(custom, [{
+        id: 'graph:name',
+        code: 'name',
+        name: '图片名称',
+        type: 'custom'
+      }, {
+        id: 'ciType:display_name',
+        code: 'ciType',
+        name: '资源类型',
+        type: 'custom'
+      }]);
+    }
+
+    var attributes = ciTypeObj.attributes.filter(function (attr) {
+      return !!attr.userVisible;
+    }).map(function (item) {
+      return {
+        type: 'attribute',
+        id: "attribute:" + item.code,
+        code: "attribute:" + item.code,
+        name: item.name,
+        typeName: '属性'
+      };
+    });
+    var metrics = ciTypeObj.metrics.map(function (item) {
+      return {
+        type: 'metric',
+        id: "metric:" + item.code,
+        code: "metric:" + item.code,
+        name: item.name,
+        typeName: '指标'
+      };
+    });
+    return [].concat(custom, attributes, metrics);
+  };
+
+  /**
+   * 获得节点字段配置项map
+   */
   _proto.getNodeFiedldMap = function getNodeFiedldMap() {
     var mtCodes = getNodeMtCodes(this.topoData);
     return this.getFiedldMapByMtCodes(mtCodes, 'node');
@@ -80,48 +247,15 @@ var ElementTagTipConfig = /*#__PURE__*/function () {
   _proto.getLinkFidldMap = function getLinkFidldMap() {
     var mtCodes = getLinkMtCodes(this.topoData);
     return this.getFiedldMapByMtCodes(mtCodes, 'link');
-  }
-  /**
-   * 获取链路标注悬浮框属性配置数据
-   * @returns 
-   */
-  ;
-
-  _proto.getLinkConfigItems = function getLinkConfigItems() {
-    var mtCodes = getLinkMtCodes(this.topoData);
-    var linkFidldMap = this.getLinkFidldMap();
-    var list = [{
-      id: 'm.critical_link',
-      label: '关键链路'
-    }, {
-      id: 'm.ethernet_link',
-      label: '网络链路'
-    }] // 只拓扑图上已有资源的监控模板
-    .filter(function (item) {
-      return mtCodes.includes(item.id);
-    }).map(function (t) {
-      return _extends({}, t, {
-        icon: '/img/model/networkLink.svg',
-        list: linkFidldMap[t.id] || []
-      });
-    });
-    return list; // return [
-    //   { id: 'ax1', label: '本级平台', children: list, type: 'folder', disabled: true },
-    //   {
-    //     id: 'bb22', label: '下级平台', type: 'folder', children: [
-    //       { id: 'xvdafa', label: '关键链路', icon: '/img/model/networkLink.svg' },
-    //     ]
-    //   },
-    // ]
   };
 
   _proto.getFiedldMapByMtCodes = function getFiedldMapByMtCodes(mtCodes, type) {
-    var _this = this;
+    var _this4 = this;
 
     var map = {};
     mtCodes.forEach(function (mtCode) {
-      var ciType = _this.mtCiTypeMap[mtCode];
-      map[mtCode] = _this.getFiedldMapByType(ciType, type, mtCode);
+      var ciType = _this4.mtCiTypeMap[mtCode];
+      map[mtCode] = _this4.getFiedldMapByType(ciType, type, mtCode);
     });
     return map;
   };
@@ -160,12 +294,12 @@ var ElementTagTipConfig = /*#__PURE__*/function () {
   };
 
   _proto.getMtMetricModels = function getMtMetricModels(mtCode) {
-    var _this2 = this;
+    var _this5 = this;
 
     var ciType = this.mtCiTypeMap[mtCode];
     var ciTypeModel = this.topo.ciTyeCache.getCiType(ciType);
     var metrics = ciTypeModel.metrics.filter(function (m) {
-      return _this2.mtMetricsMap[mtCode] && !!_this2.mtMetricsMap[mtCode][m.code];
+      return _this5.mtMetricsMap[mtCode] && !!_this5.mtMetricsMap[mtCode][m.code];
     });
     return metrics;
   };