@riil-frontend/component-topology 3.5.12 → 3.16.0

package/es/constants/ResourceInfoDisplay.js

@@ -55,6 +55,6 @@ export var DEFAULT_LINK_TAG_COMMON_CONFIG = {
   isCustom: false,
   data: [{
     type: 'metric',
-    code: 'total_flow_rate'
+    code: 'interface_totalbps'
   }]
 };

package/es/core/components/DisplaySettingDrawer/LinkTag.js

@@ -5,7 +5,7 @@ import ResourceDiplayInfoSetting from "../ResourceViewAttributeSetting/Setting";
 import BasicConfig from "./ResourceDisplay/BasicConfig"; // 默认中可配置内容包括总速率、带宽利用率、发送速率、发送带宽利用率、接收速率、接收带宽利用率
 
 var CommonOptions = [{
-  value: 'metric:total_flow_rate',
+  value: 'metric:interface_totalbps',
   label: '总流速'
 }, {
   value: 'metric:bandwidth_utilization',

package/es/core/components/DisplaySettingDrawer/LinkTip.js

@@ -10,7 +10,7 @@ var CommonOptions = [{
   value: 'attribute:destination_id',
   label: '目的端口'
 }, {
-  value: 'metric:total_flow_rate',
+  value: 'metric:interface_totalbps',
   label: '总流速'
 }, {
   value: 'metric:bandwidth_utilization',

package/es/core/editor/components/settings/common/LineType/AlignSetting.module.scss

@@ -0,0 +1,36 @@
+@import "@alifd/next/variables";
+
+.AlignSetting {
+  :global {
+    .#{$css-prefix}divider-ver {
+      background: #EBECF0;
+      margin-right: 3px;
+      height: 16px;
+
+    }
+  }
+
+  .redioBtn {
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    border: none !important;
+    color: #4D6277;
+    padding-left: 6px;
+    margin-right: 3px;
+
+    &:active {
+      background: #F2F7FD !important;
+    }
+
+    &:hover {
+      background: #F2F7FD !important;
+    }
+
+  }
+
+  .selectedTag {
+    background: #F2F7FD;
+  }
+
+}

package/es/core/editor/components/settings/common/LineType/index.js

@@ -0,0 +1,86 @@
+import _Button from "@alifd/next/es/button";
+import _Icon from "@alifd/next/es/icon";
+import _Divider from "@alifd/next/es/divider";
+import React, { useState } from "react";
+import styles from "./AlignSetting.module.scss";
+var TREE_LAYOUT_OPTIONS = [{
+  value: "left",
+  label: "左侧",
+  icon: "tuopu_zuoceduiqi"
+}, {
+  value: "center",
+  label: "居中",
+  icon: "tuopu_shuipingjuzhongduiqi"
+}, {
+  value: "right",
+  label: "右侧",
+  icon: "tuopu_youceduiqi"
+}, {
+  value: "top",
+  label: "顶部",
+  icon: "tuopu_dingbuduiqi"
+}, {
+  value: "middle",
+  label: "中部",
+  icon: "tuopu_chuizhijuzhongduiqi"
+}, {
+  value: "bottom",
+  label: "底部",
+  icon: "tuopu_dibuduiqi"
+}, {
+  value: "divide"
+}, {
+  value: "distributeHorizontal",
+  label: "水平",
+  icon: "tuopu_shuipingdengjianjuduiqi"
+}, {
+  value: "distributeVertical",
+  label: "垂直",
+  icon: "tuopu_chuizhidengjianjuduiqi"
+}];
+
+var AlignSetting = function AlignSetting(props) {
+  var getEdges = props.getEdges,
+      selected = props.selected,
+      onChange = props.onChange;
+
+  var _useState = useState(selected),
+      value = _useState[0],
+      setValue = _useState[1];
+
+  var setLineType = function setLineType(type) {
+    var edges = getEdges();
+    edges.forEach(function (edge) {
+      edge.s('edge.type', 'v.h');
+      edge.s('edge.gap', 5);
+      edge.s('edge.center', true);
+    });
+  };
+
+  var handleChange = function handleChange(data) {
+    console.log("handleChange", data);
+    onChange && onChange(data.value);
+    setValue(data.value);
+    setLineType(data.value);
+  };
+
+  return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.AlignSetting
+  }, TREE_LAYOUT_OPTIONS.map(function (item, index, array) {
+    return item.value === "divide" ? /*#__PURE__*/React.createElement(_Divider, {
+      key: index,
+      direction: "ver"
+    }) : /*#__PURE__*/React.createElement(_Button, {
+      key: index,
+      className: "" + styles.redioBtn,
+      onClick: function onClick() {
+        handleChange(item);
+      }
+    }, /*#__PURE__*/React.createElement(_Icon, {
+      type: item.icon
+    }));
+  }));
+};
+
+export default AlignSetting;

package/es/core/editor/components/settings/common/SizeInput/NodeSizeNumberPicker.js

@@ -23,6 +23,7 @@ export default function NodeSizeNumberPicker(props) {
       setInputValue = _useState[1];
 
   useEffect(function () {
+    console.error(2222, value);
     setInputValue(value);
   }, [value]);
 

package/es/core/editor/components/settings/propertyViews/multipleElements/BatchSetNodeSize/BatchSetNodeSize.js

@@ -0,0 +1,60 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import SizeInput from "../../../common/SizeInput";
+export default function BatchSetNodeSize(props) {
+  var topo = props.topo;
+
+  var _useState = useState(undefined),
+      width = _useState[0],
+      setWidth = _useState[1];
+
+  var _useState2 = useState(undefined),
+      height = _useState2[0],
+      setHeight = _useState2[1];
+
+  var _useState3 = useState(true),
+      lock = _useState3[0],
+      setLock = _useState3[1];
+
+  var handleChange = function handleChange(name, value) {
+    var selection = topo.getSelectionModel().getSelection().toArray();
+    var nodes = selection.filter(function (element) {
+      return element instanceof ht.Node;
+    });
+    console.error('变化了', nodes, name, value); //
+
+    if (lock) {
+      console.error('锁定', value);
+
+      if (name === 'width') {
+        setHeight(undefined);
+      } else {
+        setWidth(undefined);
+      }
+    }
+
+    nodes.forEach(function (node) {
+      if (name === 'width') {
+        node.setWidth(value);
+      } else {
+        node.setHeight(value);
+      }
+    });
+  };
+
+  var onLockChange = function onLockChange(isLock) {
+    setLock(isLock);
+    setWidth(undefined);
+    setHeight(undefined);
+  };
+
+  return /*#__PURE__*/React.createElement(SizeInput, {
+    value: {
+      width: width,
+      height: height
+    },
+    lock: lock,
+    onChange: handleChange,
+    onLockChange: onLockChange
+  });
+}
+;

package/es/core/editor/components/settings/propertyViews/multipleElements/MultipleElementLineType.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import LineType from "../../common/LineType";
+export default function MultipleElementLineType(props) {
+  var topo = props.topo;
+
+  var setLineType = function setLineType(type) {};
+
+  var getEdges = function getEdges() {
+    var selection = topo.getSelectionModel().getSelection().toArray();
+    var edges = selection.filter(function (element) {
+      return element instanceof ht.Edge;
+    });
+    return edges;
+  };
+
+  return /*#__PURE__*/React.createElement(LineType, {
+    getEdges: getEdges,
+    onChange: setLineType
+  });
+}

package/es/core/editor/components/settings/propertyViews/multipleElements/MultipleElementPropertyView.js

@@ -3,10 +3,10 @@ import _Field from "@alifd/next/es/field";
 import _Collapse from "@alifd/next/es/collapse";
 import React, { useState, useEffect } from 'react';
 import AlignSetting from "../../common/AlignSetting";
-import LineType from "../../common/LineType";
-import BatchSetNodeSize from "./BatchSetNodeSize";
+import BatchSetNodeSize from "./BatchSetNodeSize/BatchSetNodeSize";
 import { TPL_TREE } from "../../../../../../utils/template";
 import ViewPropertyView from "../view/ViewPropertyView";
+import MultipleElementLineType from "./MultipleElementLineType";
 var CollapsePanel = _Collapse.Panel;
 /**
  * 多选元素属性面板
@@ -48,6 +48,10 @@ export default function MultipleElementPropertyView(props) {
     return /*#__PURE__*/React.createElement(ViewPropertyView, props);
   }
 
+  var getSelectedElements = function getSelectedElements() {
+    return topo.getSelectionModel().getSelection().toArray();
+  };
+
   return /*#__PURE__*/React.createElement(_Form, {
     field: field,
     labelAlign: "top"
@@ -61,6 +65,6 @@ export default function MultipleElementPropertyView(props) {
     title: "\u5BF9\u9F50\u65B9\u5F0F"
   }, /*#__PURE__*/React.createElement(AlignSetting, {
     onChange: alignOnChange,
-    selected: 'left'
+    selected: "left"
   })))));
 }

package/es/core/models/TopoApp.js

@@ -20,7 +20,7 @@ import { updateEdgeExpanded } from "../utils/edgeUtil";
 import PluginManager from "./PluginManager";
 import topoFactory from "./topoFactory"; // eslint-disable-next-line no-undef
 
-var version = typeof "3.5.12" === 'string' ? "3.5.12" : null;
+var version = typeof "3.16.0" === 'string' ? "3.16.0" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

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

@@ -29,25 +29,20 @@ export function formatMetric(val, metricInfo) {
 function addLinkMetricUnderlineArrow(metricCode) {
   var map = {
     // 总流速和总带宽利用率：双向箭头
-    'link.total_flow_rate': 'both',
-    'link.bandwidth_utilization': 'both',
+    'interface_totalbps': 'both',
+    'bandwidth_utilization': 'both',
     // 发送速率和发送带宽利用率：背向取值端口的箭头 指向目的
-    'link.out_rate': 'to',
-    'link.out_bandwidth_utilization': 'to',
+    'out_rate': 'to',
+    'out_bandwidth_utilization': 'to',
     // 接收速率和接收带宽利用率：指向取值端口的箭头 指向源
-    'link.in_rate': 'from',
-    'link.in_bandwidth_utilization': 'from'
+    'in_rate': 'from',
+    'in_bandwidth_utilization': 'from'
   };
-  var codes = Object.keys(map);
 
-  for (var i = 0; i < codes.length; i++) {
-    var code = codes[i];
-
-    if (metricCode.endsWith(code)) {
-      return {
-        underlineArrow: map[code]
-      };
-    }
+  if (map[metricCode]) {
+    return {
+      underlineArrow: map[metricCode]
+    };
   }
 
   return {};

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

@@ -146,13 +146,13 @@ var CiTyeCache = /*#__PURE__*/function () {
     var model = null;
     types.forEach(function (type) {
       if (type.id === connectType) {
-        var metrics = ciType.metrics // 物理链路移除：ping状态、专线连通状态
+        var metrics = ciType.metrics // 仅出口链路有：ping状态、专线连通状态
         .filter(function (metric) {
           if (connectType === 'exit') {
             return true;
           }
 
-          return ['network_dedicated_line_status', 'ping_status'].indexOf(metric.code) === -1;
+          return ['icmp_discards_rate', 'ping_status'].indexOf(metric.code) === -1;
         }) // 按链路类型过滤对应指标
         .filter(function (metric) {
           return !excludeMetricPprefixs.filter(function (excludeMetricPprefix) {

package/es/hooks/useManageStatus.js

@@ -33,7 +33,9 @@ export default function useManageStatus(props) {
       topoState = _topo$store$useModel[0],
       topoDispatchers = _topo$store$useModel[1];
 
-  var graphLoaded = topoState.graphLoaded;
+  var graphLoaded = topoState.graphLoaded,
+      viewState = topoState.viewState;
+  var isEditMode = viewState === 'edit';
   var resources = topo.dataModel.useCis();
   useTopoEventListener({
     type: 'manageStatus',
@@ -55,7 +57,7 @@ export default function useManageStatus(props) {
   });
   useEffect(function () {
     // 首次加载和监控状态变化后，更新节点和连线置灰状态
-    if (graphLoaded) {
+    if (!isEditMode && graphLoaded) {
       resources.forEach(function (resource) {
         var type = resource.type,
             id = resource.id,
@@ -74,5 +76,5 @@ export default function useManageStatus(props) {
         }
       });
     }
-  }, [graphLoaded, resources]);
+  }, [isEditMode, graphLoaded, resources]);
 }

package/es/topoCenter/components/editor/propertyViews/edge/LinkPropertyView/Setting/index.js

@@ -3,7 +3,7 @@ import _Field from "@alifd/next/es/field";
 import _extends from "@babel/runtime/helpers/extends";
 import _Collapse from "@alifd/next/es/collapse";
 import React, { useEffect } from "react";
-// import LineType from '../../../../../../../core/editor/components/settings/common/LineType';
+import LineType from "../../../../../../../core/editor/components/settings/common/LineType";
 var CollapsePanel = _Collapse.Panel;
 
 function parseValues(values) {
@@ -33,12 +33,14 @@ export default function LinkSetting(props) {
     field: field,
     labelAlign: "top"
   }, /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(_Collapse, {
-    defaultExpandedKeys: ["显示设置"],
+    defaultExpandedKeys: ["线形"],
     style: {
       border: "none"
     }
   }, /*#__PURE__*/React.createElement(CollapsePanel, {
-    key: "\u663E\u793A\u8BBE\u7F6E",
-    title: "\u663E\u793A\u8BBE\u7F6E"
-  }))));
+    key: "\u7EBF\u5F62",
+    title: "\u7EBF\u5F62"
+  }, /*#__PURE__*/React.createElement(LineType, {
+    topo: topo
+  })))));
 }

package/es/topoCenter/models/LinkTagsTipsBuilder.js

@@ -4,13 +4,12 @@ import _extends from "@babel/runtime/helpers/extends";
  * 连线组标注、悬浮框数据构建
  */
 import rlog from '@riil-frontend/component-topology-utils/es/rlog';
-import groupBy from 'lodash/groupBy';
-import { getEdgeGroupByNodeTags, getEdgeGroups } from "../../utils/htElementUtils";
+import { getEdgeGroups } from "../../utils/htElementUtils";
 import AttributeFormatter from "../../core/models/attributeFormatter"; // 参与计算的链路指标
 
 var metrics = [// 总流速
 {
-  code: 'total_flow_rate',
+  code: 'interface_totalbps',
   calcType: 'sum'
 }, // 带宽利用率
 {
@@ -35,10 +34,6 @@ var metrics = [// 总流速
   calcType: 'sum',
   showWhenSameSource: true
 }];
-var connectTypePrefixMap = {
-  phy: 'physical_link.',
-  exit: 'export_link.'
-};
 var calcFnMap = {
   sum: function sum(values) {
     return values.reduce(function (total, val) {
@@ -87,11 +82,6 @@ var LinkTagsTipsBuilder = /*#__PURE__*/function () {
     var edgeGroupsTagsTips = groups.map(function (_ref) {
       var groupId = _ref.groupId,
           linkChildren = _ref.children;
-      console.error(1111, {
-        ciConfigs: ciConfigs,
-        linkChildren: linkChildren,
-        data: data
-      });
       var config = ciConfigs.find(function (item) {
         return item.id === linkChildren[0].id;
       });
@@ -101,10 +91,7 @@ var LinkTagsTipsBuilder = /*#__PURE__*/function () {
         linkChildren: linkChildren,
         data: data
       });
-    }); // console.error({
-    //   noParentLinks, groupMap, edgeGroups: edgeGroupsTagsTips, ciTagsAndTips, data
-    // })
-    // 获得连线组及子链路
+    }); // 获得连线组及子链路
     // 关联聚合链路、无子链路 时返回null
 
     function getGroupInfo(group) {
@@ -158,30 +145,27 @@ var LinkTagsTipsBuilder = /*#__PURE__*/function () {
         config = _ref2.config,
         linkChildren = _ref2.linkChildren,
         data = _ref2.data;
-    var connectTypes = ['physical_link.', 'export_link.'];
-
-    var replaceMetricConfigCode = function replaceMetricConfigCode(item) {
-      var code = item.code;
-      connectTypes.forEach(function (prefix) {
-        code = code.replace(prefix, 'physical_link.');
-      });
-      return _extends({}, item, {
-        code: code
-      });
-    }; // 查询配置，过滤不在范围内的属性
-
 
+    // 查询配置，过滤不在范围内的属性
     var finalConfig = _extends({}, config, {
       tags: config.tags.filter(function (item) {
         return _this2.filterField(item, linkChildren);
-      }).map(replaceMetricConfigCode),
+      }),
       tips: config.tips.filter(function (item) {
         return _this2.filterField(item, linkChildren);
-      }).map(replaceMetricConfigCode)
+      })
     }); // 构造数据，计算指标值
 
 
-    var mergeData = this.buildData(data, linkChildren); // 构造标注、悬浮框数据
+    var mergeData = this.buildData(data, linkChildren);
+    rlog.debug('buildEdgeGroupTagTagsAndTips', {
+      groupId: groupId,
+      config: config,
+      linkChildren: linkChildren,
+      data: data,
+      finalConfig: finalConfig,
+      mergeData: mergeData
+    }); // 构造标注、悬浮框数据
 
     var formatter = new AttributeFormatter(this.topo);
     return {
@@ -195,7 +179,7 @@ var LinkTagsTipsBuilder = /*#__PURE__*/function () {
 
   _proto.filterField = function filterField(item, linkChildren) {
     var fieldConfig = metrics.find(function (m) {
-      return item.code.endsWith("." + m.code);
+      return item.code === m.code;
     });
 
     if (item.type !== 'metric' || !fieldConfig) {
@@ -233,11 +217,9 @@ var LinkTagsTipsBuilder = /*#__PURE__*/function () {
     metrics.forEach(function (m) {
       try {
         var values = linkChildrenData.map(function (linkData) {
-          var connectType = linkData.attributeMap['network_link.connect_type'];
-          var metricCode = "" + connectTypePrefixMap[connectType] + m.code;
-          return linkData.metricMap[metricCode];
+          return linkData.metricMap[m.code];
         });
-        mergeData.metricMap["physical_link." + m.code] = calcFnMap[m.calcType](values);
+        mergeData.metricMap[m.code] = calcFnMap[m.calcType](values);
       } catch (error) {
         rlog.warn('连线组指标计算异常', error);
       }

package/es/utils/ResourceConfigUtil.js

@@ -1,3 +1,4 @@
+import rlog from "@riil-frontend/component-topology-utils/es/rlog";
 import sortBy from "lodash/sortBy";
 import { getEdges, getGroupChildrenNodes, getGroups, getLayerChildrenNodes, getLayers, getNodes } from "./htElementUtils";
 /**
@@ -49,18 +50,21 @@ function getResourceConfigFromHt(topo) {
 
   var exportLinkIdList = [];
   var edges = getEdges(dataModel);
-  console.log(" 查询出口链路列表-edges", edges, dataModel);
+  rlog.debug(" 查询出口链路列表-edges", edges, dataModel);
   edges.forEach(function (edge) {
-    var edgeData = htTopo.getEdgeData(edge); // eslint-disable-next-line no-underscore-dangle
+    var edgeData = htTopo.getEdgeData(edge); // 有组无子连线返回null
 
-    var id = edgeData._attrObject.id;
+    if (edgeData) {
+      // eslint-disable-next-line no-underscore-dangle
+      var id = edgeData._attrObject.id;
 
-    if (id) {
-      var linkData = topo.dataModel.getDataById(id);
-      var connectType = linkData !== null && linkData !== void 0 && linkData.attributes ? linkData === null || linkData === void 0 ? void 0 : linkData.attributes["network_link.connect_type"] : undefined;
+      if (id) {
+        var linkData = topo.dataModel.getDataById(id);
+        var connectType = linkData !== null && linkData !== void 0 && linkData.attributes ? linkData === null || linkData === void 0 ? void 0 : linkData.attributes["network_link.connect_type"] : undefined;
 
-      if (connectType === "exit" && !exportLinkIdList.includes(id)) {
-        exportLinkIdList.push(id);
+        if (connectType === "exit" && !exportLinkIdList.includes(id)) {
+          exportLinkIdList.push(id);
+        }
       }
     }
   });

package/es/utils/clusterUtil.js

@@ -0,0 +1,39 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/**
+ * 集群处理工具类
+ */
+export function isCluster(node) {
+  return !!node.cluster;
+}
+export function buildClusterGroups(nodes) {
+  return nodes.filter(isCluster).map(function (g) {
+    return _extends({
+      tag: null,
+      parentId: g.groupId,
+      parentTag: g.groupTag
+    }, g);
+  });
+}
+/**
+ * 集群的节点 groupId 设置为所在集群id、groupTag设为空。所属集群不存在不处理
+ * 
+ * @param {*} node 
+ * @param {*} groups 
+ */
+
+export function processClusterChildNode(node, groups) {
+  var ownerId = node.ownerId;
+  var ownerExisted = ownerId && groups.find(function (group) {
+    return group.id === ownerId;
+  });
+
+  if (!ownerId || !ownerExisted) {
+    return node;
+  }
+
+  return _extends({}, node, {
+    groupId: ownerId,
+    groupTag: null
+  });
+}

package/es/utils/topoData.js

@@ -10,6 +10,7 @@ import buildEditorContextMenu from "../core/editor/contextmenu/buildContextmenu"
 import mergeContextmenu from "../core/common/contextmenu/mergeContextmenu";
 import { getEditorIcons } from "../core/common/icons/icon";
 import { getBackgroundImageUrl } from "../core/utils/backgroundUtil";
+import { buildClusterGroups, isCluster, processClusterChildNode } from "./clusterUtil";
 /**
  * 查找数组中对应key的值为value的元素并返回,只查找第一个符合的元素
  * @param {Array} arr 数组
@@ -362,9 +363,15 @@ export var combTopoData = function combTopoData(_ref3) {
     engine: engine
   }); // group
 
-  var groups = formatGroups((_result$groups = result.groups) !== null && _result$groups !== void 0 ? _result$groups : []); // nodes
+  var groups = formatGroups([].concat((_result$groups = result.groups) !== null && _result$groups !== void 0 ? _result$groups : [], buildClusterGroups(result.nodes))); // nodes
 
-  var nodes = result.nodes.map(function (node) {
+  var nodes = result.nodes // 过滤集群
+  .filter(function (node) {
+    return !isCluster(node);
+  }) // 修正集群节点数据
+  .map(function (node) {
+    return processClusterChildNode(node, groups);
+  }).map(function (node) {
     return tfNode(engine, node);
   }); // links
 

package/lib/constants/ResourceInfoDisplay.js

@@ -65,7 +65,7 @@ var DEFAULT_LINK_TAG_COMMON_CONFIG = {
   isCustom: false,
   data: [{
     type: 'metric',
-    code: 'total_flow_rate'
+    code: 'interface_totalbps'
   }]
 };
 exports.DEFAULT_LINK_TAG_COMMON_CONFIG = DEFAULT_LINK_TAG_COMMON_CONFIG;

package/lib/core/components/DisplaySettingDrawer/LinkTag.js

@@ -17,7 +17,7 @@ var _BasicConfig = _interopRequireDefault(require("./ResourceDisplay/BasicConfig
 
 // 默认中可配置内容包括总速率、带宽利用率、发送速率、发送带宽利用率、接收速率、接收带宽利用率
 var CommonOptions = [{
-  value: 'metric:total_flow_rate',
+  value: 'metric:interface_totalbps',
   label: '总流速'
 }, {
   value: 'metric:bandwidth_utilization',

package/lib/core/components/DisplaySettingDrawer/LinkTip.js

@@ -21,7 +21,7 @@ var CommonOptions = [{
   value: 'attribute:destination_id',
   label: '目的端口'
 }, {
-  value: 'metric:total_flow_rate',
+  value: 'metric:interface_totalbps',
   label: '总流速'
 }, {
   value: 'metric:bandwidth_utilization',