@riil-frontend/component-topology 4.0.0-beta.9 → 4.0.2

package/lib/core/models/TopoGraphView.js

@@ -37,7 +37,9 @@ var TopoGraphView = /*#__PURE__*/function () {
   };
 
   _proto.getHtDataModel = function getHtDataModel() {
-    return this.topoClient.getDataModel();
+    var _this$topoClient;
+
+    return (_this$topoClient = this.topoClient) === null || _this$topoClient === void 0 ? void 0 : _this$topoClient.getDataModel();
   }
   /**
    * 缩放平移整个拓扑以展示所有的图元

package/lib/core/models/attributeFormatter/index.js

@@ -6,8 +6,6 @@ exports.__esModule = true;
 exports["default"] = void 0;
 exports.formatMetric = formatMetric;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
 
 var _utils = require("@riil-frontend/utils");
@@ -37,28 +35,6 @@ function formatMetric(val, metricInfo) {
     return "" + val;
   }
 }
-
-function addLinkMetricUnderlineArrow(metricCode) {
-  var map = {
-    // 总流速和总带宽利用率：双向箭头
-    'interface_totalbps': 'both',
-    'bandwidth_utilization': 'both',
-    // 发送速率和发送带宽利用率：背向取值端口的箭头 指向目的
-    'out_rate': 'to',
-    'out_bandwidth_utilization': 'to',
-    // 接收速率和接收带宽利用率：指向取值端口的箭头 指向源
-    'in_rate': 'from',
-    'in_bandwidth_utilization': 'from'
-  };
-
-  if (map[metricCode]) {
-    return {
-      underlineArrow: map[metricCode]
-    };
-  }
-
-  return {};
-}
 /**
  * 标注值格式化
  */
@@ -100,7 +76,7 @@ var AttributeFormatter = /*#__PURE__*/function () {
       fieldValue = ciData[attrType + "Map"][fieldCode + "_object"].displayName;
     }
 
-    return (0, _extends2["default"])({
+    return {
       type: item.type,
       code: item.code,
       // 属性code
@@ -109,7 +85,7 @@ var AttributeFormatter = /*#__PURE__*/function () {
       value: formatMetric(fieldValue, fieldMeta),
       // 属性值
       originValue: fieldValue
-    }, addLinkMetricUnderlineArrow(fieldCode));
+    };
   };
 
   _proto.attributeTransform = function attributeTransform(item, ciData) {

package/lib/core/models/cache/{CiTyeCache.js → CiTypeCache.js}

@@ -94,8 +94,10 @@ var CiTyeCache = /*#__PURE__*/function () {
                     source_id: '源端口',
                     destination_id: '目的端口'
                   }[attr.code] || attr.name;
+                  var userVisible = ['source_id', 'destination_id'].indexOf(attr.code) !== -1 ? true : attr.userVisible;
                   return (0, _extends2["default"])({}, attr, {
-                    name: name
+                    name: name,
+                    userVisible: userVisible
                   });
                 });
                 var metrics = ciTypeMeta.metrics || [];

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

@@ -0,0 +1,142 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _utils = require("./utils");
+
+var _topo = require("../../services/topo");
+
+var ElementTagTipConfig = /*#__PURE__*/function () {
+  function ElementTagTipConfig(topo) {
+    this.topoData = void 0;
+    this.mtCodes = void 0;
+    this.mtMetricsMap = void 0;
+    this.mtCiTypeMap = void 0;
+    this.topo = topo;
+  }
+
+  var _proto = ElementTagTipConfig.prototype;
+
+  _proto.init = /*#__PURE__*/function () {
+    var _init = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(topoData) {
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              this.topoData = topoData;
+              this.mtCodes = (0, _utils.getMonitorTemplateCodesFromTopoData)(topoData);
+              _context.next = 4;
+              return (0, _topo.getMetricsByMonitorTemplateCodes)(this.mtCodes);
+
+            case 4:
+              this.mtMetricsMap = _context.sent;
+              this.mtCiTypeMap = (0, _utils.getMtCodeCiTypeMap)(topoData);
+
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, this);
+    }));
+
+    function init(_x) {
+      return _init.apply(this, arguments);
+    }
+
+    return init;
+  }()
+  /**
+   * 获得节点字段配置项map
+   */
+  ;
+
+  _proto.getNodeFiedldMap = function getNodeFiedldMap() {
+    var mtCodes = (0, _utils.getNodeMtCodes)(this.topoData);
+    return this.getFiedldMapByType(mtCodes, 'node');
+  }
+  /**
+   * 获得节点字段配置项map
+   */
+  ;
+
+  _proto.getLinkFidldMap = function getLinkFidldMap() {
+    var mtCodes = (0, _utils.getLinkMtCodes)(this.topoData);
+    return this.getFiedldMapByType(mtCodes, 'link');
+  };
+
+  _proto.getFiedldMapByType = function getFiedldMapByType(mtCodes, type) {
+    var _this = this;
+
+    var map = {};
+    mtCodes.forEach(function (mtCode) {
+      var ciType = _this.mtCiTypeMap[mtCode];
+
+      var attributes = _this.topo.ciTyeCache.getCiType(ciType).attributes.filter(function (attr) {
+        return !!attr.userVisible;
+      });
+
+      var metrics = _this.getMtMetricModels(mtCode);
+
+      var extItems = type === 'node' ? [{
+        lavel: '图片名称',
+        value: 'graph:name'
+      }, {
+        lavel: '资源类型',
+        value: 'ciType:name'
+      }] : [];
+      map[mtCode] = [].concat(extItems, attributes.map(function (item) {
+        return {
+          type: 'attribute',
+          label: item.name,
+          value: "attribute:" + item.code,
+          data: item
+        };
+      }), metrics.map(function (item) {
+        return {
+          type: 'metric',
+          label: item.name,
+          value: "metric:" + item.code,
+          data: item
+        };
+      }));
+    });
+    return map;
+  };
+
+  _proto.getMtMetricModels = function getMtMetricModels(mtCode) {
+    var _this2 = this;
+
+    var ciType = this.mtCiTypeMap[mtCode];
+    var ciTypeModel = this.topo.ciTyeCache.getCiType(ciType);
+    var metrics = ciTypeModel.metrics.filter(function (m) {
+      return !!_this2.mtMetricsMap[mtCode][m.code];
+    });
+    return metrics;
+  };
+
+  _proto.getMtMetricModelMap = function getMtMetricModelMap(mtCode) {
+    var metricModels = this.getMtMetricModelMap(mtCode);
+    var map = {};
+    metricModels.forEach(function (item) {
+      map[item.code] = item;
+    });
+    return map;
+  };
+
+  _proto.getMetricModel = function getMetricModel(mtCode, metricCode) {
+    return this.getMtMetricModelMap(mtCode)[metricCode];
+  };
+
+  return ElementTagTipConfig;
+}();
+
+exports["default"] = ElementTagTipConfig;
+;

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

@@ -0,0 +1,59 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getLinkMtCodes = getLinkMtCodes;
+exports.getMonitorTemplateCodeFromCiData = getMonitorTemplateCodeFromCiData;
+exports.getMonitorTemplateCodesFromTopoData = getMonitorTemplateCodesFromTopoData;
+exports.getMtCodeCiTypeMap = getMtCodeCiTypeMap;
+exports.getMtCodes = getMtCodes;
+exports.getNodeMtCodes = getNodeMtCodes;
+
+/**
+ * 获得监控模板code
+ * @param {*} data 
+ * @returns 
+ */
+function getMonitorTemplateCodeFromCiData(data) {
+  var _data$attributes;
+
+  // eslint-disable-next-line camelcase
+  return (_data$attributes = data.attributes) === null || _data$attributes === void 0 ? void 0 : _data$attributes.support_templates;
+}
+
+function getMtCodes(cis) {
+  var codes = [];
+  cis.forEach(function (ci) {
+    var code = getMonitorTemplateCodeFromCiData(ci);
+
+    if (code && codes.indexOf(code) === -1) {
+      codes.push(code);
+    }
+  });
+  return codes;
+}
+
+function getNodeMtCodes(data) {
+  var nodes = data.nodes;
+  return getMtCodes(nodes);
+}
+
+function getLinkMtCodes(data) {
+  var links = data.links;
+  return getMtCodes(links);
+}
+
+function getMonitorTemplateCodesFromTopoData(data) {
+  return [].concat(getNodeMtCodes(data), getLinkMtCodes(data));
+}
+
+function getMtCodeCiTypeMap(data) {
+  var nodes = data.nodes,
+      links = data.links;
+  var map = {};
+  var cis = [].concat(nodes, links);
+  cis.forEach(function (ci) {
+    var mtCode = getMonitorTemplateCodeFromCiData(ci);
+    map[mtCode] = ci.ciType;
+  });
+  return map;
+}

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

@@ -157,7 +157,9 @@ function _getLinksDetail() {
           case 10:
             interfaceCis = _context2.sent;
             _context2.next = 13;
-            return getInterfaceObject(interfaceTypes);
+            return getInterfaceObject(interfaceTypes.filter(function (item) {
+              return item !== 'ip';
+            }));
 
           case 13:
             interfaceDoc = _context2.sent;

package/lib/core/services/topo.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.getMetricsByMonitorTemplateCodes = getMetricsByMonitorTemplateCodes;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _componentTopologyUtils = require("@riil-frontend/component-topology-utils");
+
+function getMetricsByMonitorTemplateCodes(_x) {
+  return _getMetricsByMonitorTemplateCodes.apply(this, arguments);
+}
+
+function _getMetricsByMonitorTemplateCodes() {
+  _getMetricsByMonitorTemplateCodes = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(mtCodes) {
+    var result;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return _componentTopologyUtils.request.post('/topo/v1/api/attributes/metricByTemplateCode', mtCodes);
+
+          case 2:
+            result = _context.sent;
+            return _context.abrupt("return", result);
+
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _getMetricsByMonitorTemplateCodes.apply(this, arguments);
+}

package/lib/core/utils/edgeUtil.js

@@ -1,8 +1,12 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.updateEdgeExpanded = void 0;
 
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
 /**
  * 根据配置更新连线展开折叠状态
  * 
@@ -20,8 +24,16 @@ var updateEdgeExpanded = function updateEdgeExpanded(topo) {
 
   if (expandAllEdges === false) {
     htTopo.collapseAllEdgeGroups();
+
+    _rlog["default"].debug('updateEdgeExpanded 折叠');
   } else {
     htTopo.expandAllEdgeGroups();
+
+    _rlog["default"].debug('updateEdgeExpanded 展开');
+  }
+
+  if (topo.linkDynamicStyleExecutor) {
+    topo.linkDynamicStyleExecutor.execute();
   }
 };
 

package/lib/core/utils/graphLinkUtil.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.fixLink = fixLink;
+
+var _htElementUtils = require("../../utils/htElementUtils");
+
+/**
+ * 链路另一端变更后更新另一端，另一端不存在删除线
+ * @param {*} topo 
+ */
+function fixLink(topo) {
+  var linkDatas = topo.dataModel.getEdges();
+  var dm = topo.getHtTopo().getGraphView().dm();
+  var edges = (0, _htElementUtils.getEdges)(dm);
+  edges.forEach(function (edge) {
+    var source = edge.getSource();
+    var linkData = linkDatas.find(function (data) {
+      return data.id === edge.getTag();
+    });
+
+    if (linkData && source.getTag() !== linkData.source) {
+      var node = dm.getDataByTag(linkData.source);
+      edge.setSource(node);
+    }
+  });
+}

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

@@ -228,7 +228,7 @@ function ResourceDetail(props) {
     return tabBodys.length === 1 ? /*#__PURE__*/_react["default"].createElement(_ResourceOverview["default"], (0, _extends2["default"])({}, props, activeData, {
       userId: userId,
       style: {
-        'overflow-y': 'auto',
+        overflowY: 'auto',
         height: '100%'
       }
     })) : /*#__PURE__*/_react["default"].createElement(_FullheightTab["default"], {

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

@@ -29,6 +29,8 @@ var _metric = require("../../../../../services/cmdb/metric");
 
 var _ClusterMemberTableModule = _interopRequireDefault(require("./ClusterMemberTable.module.scss"));
 
+var _Link = _interopRequireDefault(require("../../../../../../components/Link"));
+
 function ClusterChildrenTable(props) {
   var data = props.data,
       topo = props.topo;
@@ -109,7 +111,20 @@ function ClusterChildrenTable(props) {
     plugins: plugins
   }),
       tableProps = _useNextTable.tableProps,
-      paginationProps = _useNextTable.paginationProps;
+      paginationProps = _useNextTable.paginationProps; // url 处理，UICBB 的地址需截取前缀
+
+
+  function formatUrl(url) {
+    var _window, _window$location;
+
+    var prefix = '/default/pagecenter';
+
+    if (((_window = window) === null || _window === void 0 ? void 0 : (_window$location = _window.location) === null || _window$location === void 0 ? void 0 : _window$location.pathname.indexOf(prefix)) === 0 && (url === null || url === void 0 ? void 0 : url.indexOf(prefix)) === 0) {
+      return url.split(prefix)[1];
+    } else {
+      return url;
+    }
+  }
   /**
   * Table列数据
   */
@@ -121,7 +136,15 @@ function ClusterChildrenTable(props) {
     dataIndex: 'attributes.display_name',
     // sortable: true,
     lock: true,
-    width: 160
+    width: 160,
+    cell: function cell(vallue, index, item) {
+      var link = "/default/pagecenter/resDetail/view/" + item.id + "?resId=" + item.id + "&domainCode=" + item.typeObject.domain + "&title=" + vallue + "&ciCode=" + item.typeCode; // 资源跳转链接
+
+      return /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+        title: vallue || "",
+        to: formatUrl(link)
+      }, vallue || "-");
+    }
   }, {
     id: '2',
     title: 'IP地址',

package/lib/core/viewer/components/plugins/ResourceDetail/components/ClusterMemberTable.module.scss

@@ -4,7 +4,7 @@
 
   :global {
     .pagination-content > div {
-      padding-bottom: 0;
+      padding-bottom: 16px;
     }
   }
 }

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

@@ -25,14 +25,12 @@ function formatUrl(url) {
 
 function AttributeItem(props) {
   var style = props.style,
-      key = props.key,
       label = props.label,
       contentTitle = props.contentTitle,
       children = props.children;
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _indexModule["default"].item,
-    style: style || {},
-    key: key
+    style: style || {}
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: _indexModule["default"].label
   }, label + '：'), /*#__PURE__*/_react["default"].createElement("span", {
@@ -44,109 +42,17 @@ function AttributeItem(props) {
 function BaseInfoContent(props) {
   var topo = props.topo,
       type = props.type,
-      data = props.data; // const itemCols = {
-  //   node: [
-  //     {
-  //       label: "资源名称：",
-  //       objKey: "resource",
-  //       render(valueData, key) {
-  //         const { display_name, link } = valueData;
-  //         return (
-  //           <AttributeItem
-  //             key={key}
-  //             label="资源名称："
-  //             contentTitle={display_name}
-  //           >
-  //             {valueData ? (
-  //               <Link className={styles.link} to={formatUrl(link)}>
-  //                 {display_name || "-"}
-  //               </Link>
-  //             ) : (
-  //               "-"
-  //             )}
-  //           </AttributeItem>
-  //         );
-  //       },
-  //     },
-  //     {
-  //       label: "IP地址：",
-  //       objKey: "ipv4_address",
-  //     },
-  //     {
-  //       label: "资产编号：",
-  //       objKey: "asset_number",
-  //     },
-  //     {
-  //       label: "资源类型：",
-  //       objKey: "ciName",
-  //     },
-  //     {
-  //       label: "资源位置：",
-  //       objKey: "res_address",
-  //     },
-  //     // {
-  //     //   label: '负责人：',
-  //     //   objKey: 'principal'
-  //     // },
-  //   ],
-  //   link: [
-  //     {
-  //       label: "链路带宽：",
-  //       objKey: "rated_bandwidth",
-  //       style: { width: "100%" },
-  //     },
-  //     {
-  //       label: "源IP地址：",
-  //       objKey: "source_ipv4",
-  //     },
-  //     {
-  //       label: "目的IP地址：",
-  //       objKey: "destination_ipv4",
-  //     },
-  //     {
-  //       label: "源端口：",
-  //       objKey: "source_Interface",
-  //     },
-  //     {
-  //       label: "目的端口：",
-  //       objKey: "destination_Interface",
-  //     },
-  //     {
-  //       label: "连接方式：",
-  //       objKey: "network_link.connect_type",
-  //     },
-  //   ],
-  // };
-  // return (
-  //   <>
-  //     {itemCols[type]?.map(({ label, objKey, style, render }, key) => {
-  //       return data[objKey] === false ? (
-  //         ""
-  //       ) : render ? (
-  //         render(data[objKey], key)
-  //       ) : (
-  //         <AttributeItem
-  //           key={key}
-  //           label={label}
-  //           style={style || {}}
-  //           contentTitle={data[objKey]}
-  //         >
-  //           {data[objKey] || "-"}
-  //         </AttributeItem>
-  //       );
-  //     })}
-  //   </>
-  // );
-
+      data = props.data;
   return data.map(function (_ref) {
     var dataIndex = _ref.dataIndex,
         title = _ref.title,
-        value = _ref.value;
+        value = _ref.value,
+        contentTitle = _ref.contentTitle;
     return /*#__PURE__*/_react["default"].createElement(AttributeItem, {
       key: dataIndex,
-      label: title // style={style || {}}
-      // contentTitle={data[objKey]}
-
+      dataIndex: dataIndex,
+      label: title,
+      contentTitle: contentTitle
     }, value || "-");
   });
 } // 基本信息

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

@@ -22,18 +22,28 @@ function BaseInfoBlock(props) {
       ciTypeMeta = props.ciTypeMeta,
       headerExtra = props.headerExtra,
       renderContent = props.renderContent,
-      baseInfo = props.baseInfo;
+      baseInfo = props.baseInfo,
+      isAppTopo = props.isAppTopo;
   var id = data.id,
       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: headerExtra ? headerExtra(props) : ciType === 'network_link' && /*#__PURE__*/_react["default"].createElement(_SingleResourceStrategyLink["default"], {
+    headerExtra: /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex'
+      }
+    }, !isAppTopo && ciType === 'network_link' ? /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        lineHeight: '28px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_SingleResourceStrategyLink["default"], {
       id: id,
       ciType: ciType,
       name: name
-    })
+    })) : '', headerExtra ? headerExtra(props) : '')
   }, loading ? /*#__PURE__*/_react["default"].createElement(_loading["default"], {
     style: {
       width: '100%',