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

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

@@ -82,8 +82,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 _extends({}, attr, {
-                    name: name
+                    name: name,
+                    userVisible: userVisible
                   });
                 });
                 var metrics = ciTypeMeta.metrics || [];

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

@@ -0,0 +1,132 @@
+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";
+
+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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(topoData) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              this.topoData = topoData;
+              this.mtCodes = getMonitorTemplateCodesFromTopoData(topoData);
+              _context.next = 4;
+              return getMetricsByMonitorTemplateCodes(this.mtCodes);
+
+            case 4:
+              this.mtMetricsMap = _context.sent;
+              this.mtCiTypeMap = 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 = getNodeMtCodes(this.topoData);
+    return this.getFiedldMapByType(mtCodes, 'node');
+  }
+  /**
+   * 获得节点字段配置项map
+   */
+  ;
+
+  _proto.getLinkFidldMap = function getLinkFidldMap() {
+    var mtCodes = 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;
+}();
+
+export { ElementTagTipConfig as default };
+;

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

@@ -0,0 +1,44 @@
+/**
+ * 获得监控模板code
+ * @param {*} data 
+ * @returns 
+ */
+export 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;
+}
+export function getMtCodes(cis) {
+  var codes = [];
+  cis.forEach(function (ci) {
+    var code = getMonitorTemplateCodeFromCiData(ci);
+
+    if (code && codes.indexOf(code) === -1) {
+      codes.push(code);
+    }
+  });
+  return codes;
+}
+export function getNodeMtCodes(data) {
+  var nodes = data.nodes;
+  return getMtCodes(nodes);
+}
+export function getLinkMtCodes(data) {
+  var links = data.links;
+  return getMtCodes(links);
+}
+export function getMonitorTemplateCodesFromTopoData(data) {
+  return [].concat(getNodeMtCodes(data), getLinkMtCodes(data));
+}
+export 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/es/core/models/utils/linkUtils.js

@@ -136,7 +136,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/es/core/services/topo.js

@@ -0,0 +1,30 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { request } from '@riil-frontend/component-topology-utils';
+export function getMetricsByMonitorTemplateCodes(_x) {
+  return _getMetricsByMonitorTemplateCodes.apply(this, arguments);
+}
+
+function _getMetricsByMonitorTemplateCodes() {
+  _getMetricsByMonitorTemplateCodes = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(mtCodes) {
+    var result;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return 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/es/core/utils/edgeUtil.js

@@ -1,8 +1,10 @@
+import rlog from "@riil-frontend/component-topology-utils/es/rlog";
 /**
  * 根据配置更新连线展开折叠状态
  * 
  * @param {*} topo 
  */
+
 export var updateEdgeExpanded = function updateEdgeExpanded(topo) {
   var htTopo = topo.getHtTopo();
 
@@ -15,7 +17,13 @@ export var updateEdgeExpanded = function updateEdgeExpanded(topo) {
 
   if (expandAllEdges === false) {
     htTopo.collapseAllEdgeGroups();
+    rlog.debug('updateEdgeExpanded 折叠');
   } else {
     htTopo.expandAllEdgeGroups();
+    rlog.debug('updateEdgeExpanded 展开');
+  }
+
+  if (topo.linkDynamicStyleExecutor) {
+    topo.linkDynamicStyleExecutor.execute();
   }
 };

package/es/core/utils/graphLinkUtil.js

@@ -0,0 +1,22 @@
+import { getEdges } from "../../utils/htElementUtils";
+/**
+ * 链路另一端变更后更新另一端，另一端不存在删除线
+ * @param {*} topo 
+ */
+
+export function fixLink(topo) {
+  var linkDatas = topo.dataModel.getEdges();
+  var dm = topo.getHtTopo().getGraphView().dm();
+  var edges = 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/es/core/viewer/components/plugins/ResourceDetail/ResourceDetail.js

@@ -204,7 +204,7 @@ function ResourceDetail(props) {
     return tabBodys.length === 1 ? /*#__PURE__*/React.createElement(ResourceOverview, _extends({}, props, activeData, {
       userId: userId,
       style: {
-        'overflow-y': 'auto',
+        overflowY: 'auto',
         height: '100%'
       }
     })) : /*#__PURE__*/React.createElement(Tab, {

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

@@ -10,6 +10,7 @@ import useSortablePlugin from '@ahooksjs/use-sortable-plugin';
 import { commonQueryCiDataByIds } from "../../../../../services/cmdb";
 import { queryLatestMetrics } from "../../../../../services/cmdb/metric";
 import styles from "./ClusterMemberTable.module.scss";
+import Link from "../../../../../../components/Link";
 export default function ClusterChildrenTable(props) {
   var data = props.data,
       topo = props.topo;
@@ -90,7 +91,20 @@ export default 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列数据
   */
@@ -102,7 +116,15 @@ export default 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.createElement(Link, {
+        title: vallue || "",
+        to: formatUrl(link)
+      }, vallue || "-");
+    }
   }, {
     id: '2',
     title: 'IP地址',

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

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

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

@@ -16,14 +16,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.createElement("div", {
     className: styles.item,
-    style: style || {},
-    key: key
+    style: style || {}
   }, /*#__PURE__*/React.createElement("span", {
     className: styles.label
   }, label + '：'), /*#__PURE__*/React.createElement("span", {
@@ -35,109 +33,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.createElement(AttributeItem, {
       key: dataIndex,
-      label: title // style={style || {}}
-      // contentTitle={data[objKey]}
-
+      dataIndex: dataIndex,
+      label: title,
+      contentTitle: contentTitle
     }, value || "-");
   });
 } // 基本信息

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

@@ -10,18 +10,28 @@ export default 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.createElement(BlockBox, {
     headerTitle: "\u57FA\u672C\u4FE1\u606F",
-    headerExtra: headerExtra ? headerExtra(props) : ciType === 'network_link' && /*#__PURE__*/React.createElement(SingleResourceStrategyLink, {
+    headerExtra: /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex'
+      }
+    }, !isAppTopo && ciType === 'network_link' ? /*#__PURE__*/React.createElement("div", {
+      style: {
+        lineHeight: '28px'
+      }
+    }, /*#__PURE__*/React.createElement(SingleResourceStrategyLink, {
       id: id,
       ciType: ciType,
       name: name
-    })
+    })) : '', headerExtra ? headerExtra(props) : '')
   }, loading ? /*#__PURE__*/React.createElement(_Loading, {
     style: {
       width: '100%',