@riil-frontend/component-topology 9.0.0-a.2 → 9.0.0-a.20

package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopoCard.js

@@ -17,9 +17,9 @@ export default function LinkTopoCard(props) {
 
   var supportTemplates = (data === null || data === void 0 ? void 0 : (_data$attributes = data.attributes) === null || _data$attributes === void 0 ? void 0 : _data$attributes.support_templates) || ''; // 该资源监控模板
 
-  var isCrucial = data === null || data === void 0 ? void 0 : data.attributes['network_link.is_crucial'];
+  var isCrucial = data === null || data === void 0 ? void 0 : data.attributes['network_link.is_crucial']; //是不是关键链路
 
-  var _useState = useState(-1),
+  var _useState = useState(null),
       openFlow = _useState[0],
       setOpenFlow = _useState[1];
 
@@ -39,7 +39,7 @@ export default function LinkTopoCard(props) {
             case 2:
               checkMenus = _context.sent;
 
-              if (!(checkMenus[0].passed == 'PASS')) {
+              if (!(checkMenus[0].passed == 'PASS' && isCrucial)) {
                 _context.next = 10;
                 break;
               }
@@ -55,12 +55,12 @@ export default function LinkTopoCard(props) {
               //判断是不是有流量分析
               if (isOpen) {
                 setOpenFlow({
-                  name: '跳转关键链路详情',
+                  name: '查看流量构成',
                   url: linkDetailsUrl
                 });
               } else {
                 setOpenFlow({
-                  name: '跳转流量分析配置',
+                  name: '配置流量分析',
                   url: analysisUrl
                 });
               }
@@ -101,7 +101,9 @@ export default function LinkTopoCard(props) {
     })
   }, /*#__PURE__*/React.createElement(LinkTopo, {
     data: data,
-    linkMetricCodes: metricCodes,
+    linkMetricCodes: openFlow && openFlow.name == '查看流量构成' ? metricCodes : metricCodes.filter(function (i) {
+      return i != 'netDelayRatio' && i != 'retansRatio';
+    }),
     openFlow: openFlow
   }));
 }

package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/hooks/useMetricPolling.js

@@ -1,18 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect, useState } from 'react';
 import { useRequest } from 'ahooks';
-import { queryLinkInterfacesLatestMetrics, queryLinkLatestMetrics, queryLastestValue } from "../services";
+import { queryLinkInterfacesLatestMetrics, queryLinkLatestMetrics, queryRetansRatioNetDelayRatio } from "../services";
 import rlog from '@riil-frontend/component-topology-utils/es/rlog'; // 资源节点上方色块展示资源的发送速率发送带宽利用率、接收速率发送接收利用率、总错包数
 
 export default function useMetricPolling(_ref) {
   var linkCi = _ref.linkCi,
       linkMetricCodes = _ref.linkMetricCodes;
   var linkId = linkCi.id;
-  var arr = ['downNetDelayRatio', 'downRetansRatio', 'upNetDelayRatio', 'upRetransRatio'];
-  var oldCodes = [];
-  var newCodes = [];
+  var arr = ['netDelayRatio', 'retansRatio'];
+  var codes = [];
+  var retansRatioNetDelayRatioCodes = [];
   linkMetricCodes.map(function (item) {
-    arr.indexOf(item) > -1 ? newCodes.push(item) : oldCodes.push(item);
+    arr.indexOf(item) > -1 ? retansRatioNetDelayRatioCodes.push(item) : codes.push(item);
   });
 
   var _useState = useState({
@@ -26,53 +26,15 @@ export default function useMetricPolling(_ref) {
       data = _useState[0],
       setData = _useState[1];
 
-  var queryLastestValues = useRequest(queryLastestValue, {
+  var queryLastestValues = useRequest(queryRetansRatioNetDelayRatio, {
     pollingInterval: 1000 * 15,
     pollingWhenHidden: false,
     debounceInterval: 200,
     manual: true,
     onSuccess: function onSuccess(result) {
-      var datas = {
-        linkOther: []
-      };
-
-      if (newCodes.includes('downNetDelayRatio')) {
-        datas.linkOther.push({
-          'code': 'downNetDelayRatio',
-          'name': '下行RTT时延',
-          'ts': result.time,
-          'value': result.downNetDelayRatio + ' ms'
-        });
-      }
-
-      if (newCodes.includes('downRetansRatio')) {
-        datas.linkOther.push({
-          'code': 'downRetansRatio',
-          'name': '下行重传率',
-          'ts': result.time,
-          'value': result.downRetansRatio + ' %'
-        });
-      }
-
-      if (newCodes.includes('upNetDelayRatio')) {
-        datas.linkOther.push({
-          'code': 'upNetDelayRatio',
-          'name': '上行RTT时延',
-          'ts': result.time,
-          'value': result.upNetDelayRatio + ' ms'
-        });
-      }
-
-      if (newCodes.includes('upRetransRatio')) {
-        datas.linkOther.push({
-          'code': 'upRetransRatio',
-          'name': '上行重传率',
-          'ts': result.time,
-          'value': result.upRetransRatio + ' %'
-        });
-      }
-
-      setData(_extends({}, data, datas));
+      setData(_extends({}, data, {
+        linkOther: result
+      }));
     }
   }); // 轮询hooks
 
@@ -96,26 +58,36 @@ export default function useMetricPolling(_ref) {
       rlog.info('链路拓扑指标轮询 queryInterfaceMetricsRequest 结果', result);
     }
   });
-  var linkMetricCodesStr = oldCodes.map(function (item) {
+  var linkMetricCodesStr = codes.map(function (item) {
     return item;
   }).sort().join(',');
   useEffect(function () {
     if (linkId) {
       rlog.info('链路拓扑指标轮询 切换', {
         linkCi: linkCi,
-        oldCodes: oldCodes
+        codes: codes
       });
-      queryLinkMetricsRequest.run(linkCi, oldCodes);
-
-      if (newCodes.length > 0) {
-        queryLastestValues.run({
-          'id': linkCi.attributes.name
-        });
-      }
+      queryLinkMetricsRequest.run(linkCi, codes);
     }
 
     return function () {};
   }, [linkId, linkMetricCodesStr]);
+  var retansRatioNetDelayRatioCodesStr = retansRatioNetDelayRatioCodes.map(function (item) {
+    return item;
+  }).sort().join(',');
+  useEffect(function () {
+    if (linkId) {
+      rlog.info('链路拓扑指标勾选rtt|重传率 轮询', {
+        linkCi: linkCi,
+        retansRatioNetDelayRatioCodes: retansRatioNetDelayRatioCodes
+      });
+      queryLastestValues.run({
+        'id': linkCi.attributes.name
+      }, retansRatioNetDelayRatioCodes);
+    }
+
+    return function () {};
+  }, [linkId, retansRatioNetDelayRatioCodesStr]);
   useEffect(function () {
     if (linkId) {
       rlog.info('链路拓扑指标轮询 queryInterfaceMetricsRequest 开始', {

package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/services/index.js

@@ -245,7 +245,7 @@ export function isOpenFlow(_x6) {
   return _isOpenFlow.apply(this, arguments);
 }
 /**
- * @name  isOpenFlow 查指标值
+ * @name  queryLastestValue 查指标值
  * @returns  
  */
 
@@ -287,4 +287,60 @@ function _queryLastestValue() {
     }, _callee7);
   }));
   return _queryLastestValue.apply(this, arguments);
+}
+
+export function queryRetansRatioNetDelayRatio(_x8, _x9) {
+  return _queryRetansRatioNetDelayRatio.apply(this, arguments);
+}
+
+function _queryRetansRatioNetDelayRatio() {
+  _queryRetansRatioNetDelayRatio = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8(params, retansRatioNetDelayRatioCodes) {
+    var result, linkOther;
+    return _regeneratorRuntime.wrap(function _callee8$(_context8) {
+      while (1) {
+        switch (_context8.prev = _context8.next) {
+          case 0:
+            if (retansRatioNetDelayRatioCodes.length) {
+              _context8.next = 2;
+              break;
+            }
+
+            return _context8.abrupt("return", []);
+
+          case 2:
+            _context8.next = 4;
+            return queryLastestValue(params);
+
+          case 4:
+            result = _context8.sent;
+            linkOther = [];
+
+            if (retansRatioNetDelayRatioCodes.includes('netDelayRatio')) {
+              linkOther.push({
+                'code': 'netDelayRatio',
+                'name': 'RTT时延',
+                'ts': result.time,
+                'value': (result.upNetDelayRatio * 1).toFixed(2) + ' ms' + '|' + (result.downNetDelayRatio * 1).toFixed(2) + ' ms'
+              });
+            }
+
+            if (retansRatioNetDelayRatioCodes.includes('retansRatio')) {
+              linkOther.push({
+                'code': 'retansRatio',
+                'name': '重传率',
+                'ts': result.time,
+                'value': result.upRetransRatio + ' %' + '|' + result.downRetansRatio + ' %'
+              });
+            }
+
+            return _context8.abrupt("return", linkOther);
+
+          case 9:
+          case "end":
+            return _context8.stop();
+        }
+      }
+    }, _callee8);
+  }));
+  return _queryRetansRatioNetDelayRatio.apply(this, arguments);
 }

package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/hooks/useMetricModels.js

@@ -3,7 +3,6 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useRequest } from 'ahooks';
 import { useEffect, useState } from 'react';
 import { queryCiMonitorMetricCodes } from "../../../getCiDisplayMetricModels";
-import { checkMenu, isOpenFlow } from "../components/LinkTopo/services";
 /**
  * 概览指标定义
  * @param {*} props
@@ -35,7 +34,7 @@ var useMetricModels = function useMetricModels(props) {
 
   function _fetchData() {
     _fetchData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var monitorMetrics, ciMonitorMetricModels, checkMenus, isOpen, displayMetricModels, _metricCodes;
+      var monitorMetrics, ciMonitorMetricModels, displayMetricModels, _metricCodes;
 
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -51,67 +50,29 @@ var useMetricModels = function useMetricModels(props) {
                   return item === m.code;
                 });
               });
-              _context.next = 6;
-              return checkMenu();
 
-            case 6:
-              checkMenus = _context.sent;
-
-              if (!(checkMenus[0].passed == 'PASS' && resourceData.attributes.display_name && resourceData.attributes['network_link.is_crucial'])) {
-                _context.next = 12;
-                break;
-              }
-
-              _context.next = 10;
-              return isOpenFlow({
-                'name': resourceData.attributes.display_name
-              });
-
-            case 10:
-              isOpen = _context.sent;
-
-              //
-              if (isOpen) {
-                ciMonitorMetricModels.push({
-                  changeValue: null,
-                  code: "downNetDelayRatio",
-                  id: "downNetDelayRatio",
-                  isGoldMetric: true,
-                  key: null,
-                  name: "下行RTT时延",
-                  unit: "ms"
-                });
-                ciMonitorMetricModels.push({
-                  changeValue: null,
-                  code: "downRetansRatio",
-                  id: "downRetansRatio",
-                  isGoldMetric: true,
-                  key: null,
-                  name: "下行重传率",
-                  unit: "%"
-                });
-                ciMonitorMetricModels.push({
+              if (resourceData.attributes['network_link.is_crucial']) {
+                ciMonitorMetricModels.unshift({
                   changeValue: null,
-                  code: "upNetDelayRatio",
-                  id: "upNetDelayRatio",
+                  code: "netDelayRatio",
+                  id: "netDelayRatio",
                   isGoldMetric: true,
                   key: null,
-                  name: "上行RTT时延",
+                  name: "RTT时延",
                   unit: "ms"
                 });
-                ciMonitorMetricModels.push({
+                ciMonitorMetricModels.unshift({
                   changeValue: null,
-                  code: "upRetransRatio",
-                  id: "upRetransRatio",
+                  code: "retansRatio",
+                  id: "retansRatio",
                   isGoldMetric: true,
                   key: null,
-                  name: "上行重传率",
+                  name: "重传率",
                   unit: "%"
                 });
-              }
+              } // 未监控不显示指标，临时在这里处理
+
 
-            case 12:
-              // 未监控不显示指标，临时在这里处理
               if (!isMonite) {
                 ciMonitorMetricModels = [];
               }
@@ -143,7 +104,7 @@ var useMetricModels = function useMetricModels(props) {
 
               return _context.abrupt("return", displayMetricModels);
 
-            case 17:
+            case 10:
             case "end":
               return _context.stop();
           }

package/es/networkTopo/models/LinkDynamicStyleExecutor.js

@@ -5,15 +5,15 @@ import { getLinksBetweenNodes } from "../utils/linkUtil"; // network_link.actual
 
 function calcEdgeWidth(actualBandwidth) {
   if (!actualBandwidth) {
-    return 2;
+    return 3;
   } else if (actualBandwidth <= 100) {
-    return 2;
-  } else if (actualBandwidth <= 1000) {
     return 3;
-  } else if (actualBandwidth <= 10000) {
+  } else if (actualBandwidth <= 1000) {
     return 4;
-  } else if (actualBandwidth > 10000) {
+  } else if (actualBandwidth <= 10000) {
     return 5;
+  } else if (actualBandwidth > 10000) {
+    return 6;
   }
 }
 

package/lib/components/VerticalIconTab/VerticalIconTab.module.scss

@@ -3,8 +3,8 @@
 
 .tabs {
   height: 100%;
-
-}
+  display: flex;
+} 
 
 // 导航
 .nav {
@@ -49,17 +49,23 @@
 
 // 标签页内容区
 .content {
-  width: 260px;
+  // width: 260px;
   height: 100%;
   border-left: none !important;
-  border-right: 1px solid var(--tab-wrapped-border-line-color);
   transition: width .1s linear;
+  overflow: initial !important;
 
   :global {
     .#{$css-prefix}tabs-tabpane {
-      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 1;
+      // width: 250px;
       height: 100%;
       overflow: auto;
+      background: #FFF;
+      border-right: 1px solid var(--tab-wrapped-border-line-color);
     }
   }
 

package/lib/core/components/TopoView/GraphViewPanel.js

@@ -26,7 +26,8 @@ function GraphViewPanel(props) {
     themeName: themeName,
     hideBackgroundColor: hideBackgroundColor
   }),
-      canvasColor = _useCanvasTheme.canvasColor;
+      canvasColor = _useCanvasTheme.canvasColor,
+      canvasbackgroundImage = _useCanvasTheme.canvasbackgroundImage;
 
   (0, _react.useEffect)(function () {
     // eslint-disable-next-line no-underscore-dangle
@@ -45,7 +46,7 @@ function GraphViewPanel(props) {
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _TopoViewModule["default"].viewPanel,
     style: {
-      background: canvasColor
+      background: canvasColor || "url(" + canvasbackgroundImage + ")"
     },
     onFocus: onFocus
   }, props.children);

package/lib/core/editor/components/BackgroundView/index.module.scss

@@ -1,8 +1,11 @@
 @import "~@alifd/next/variables.scss";
 
 .background-view {
+  width: 260px;
   padding: 16px;
   background: #fff;
+  height: 100%;
+  overflow: auto;
   .option {
     text-align: right;
     button {

package/lib/core/editor/components/Sidebar/Sidebar.module.scss

@@ -1,19 +1,19 @@
 .sidebar {
   // border-right: 1px solid #E6E7EB;
   position: relative;
-  width: 60px;
+  // width: 60px;
 
   .tabsContainer {
-    position: absolute;
-    width: 60px;
+    // position: absolute;
+    // left: 0;
+    // top: 0;
+    // z-index: 1;
+    // width: 60px;
     height: 100%;
-    left: 0;
-    top: 0;
-    z-index: 1;
     background: #FFF;
 
     &.expanded {
-      width: 320px;
+      // width: 320px;
     }
   }
 }

package/lib/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.js

@@ -36,7 +36,7 @@ function CanvasPanel(props) {
     }, /*#__PURE__*/_react["default"].createElement(_tag["default"].Selectable, {
       className: _CanvasPanelModule["default"].tag,
       style: {
-        background: item.color
+        background: item.color || "url(" + item.backgroundImageThumbnail + ")"
       },
       checked: item.name === canvasThemeName,
       onChange: function onChange(checked) {

package/lib/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.module.scss

@@ -1,6 +1,7 @@
 @import "~@alifd/next/variables.scss";
 
   .canvasToggle {
+    width: 260px;
     display: flex;
     flex-wrap: wrap;
     .canvas {

package/lib/core/editor/components/Sidebar/views/ComponentPanel.js

@@ -46,7 +46,7 @@ function ComponentPanel(props) {
   return /*#__PURE__*/_react["default"].createElement("div", {
     ref: divRef,
     style: {
-      width: '100%',
+      width: '260px',
       height: '100%'
     }
   });

package/lib/core/editor/components/Sidebar/views/ImagePanel/ImagePanel.js

@@ -46,7 +46,8 @@ function ImagePanel(props) {
     accordion: true,
     defaultExpandedKeys: ['资源图片'],
     style: {
-      border: 'none'
+      border: 'none',
+      minWidth: '300px'
     },
     fullheight: true,
     noContentPadding: true

package/lib/core/editor/components/Sidebar/views/LinkPanel.js

@@ -46,7 +46,7 @@ function LinkPanel(props) {
   return /*#__PURE__*/_react["default"].createElement("div", {
     ref: divRef,
     style: {
-      width: '100%',
+      width: '260px',
       height: '100%'
     }
   });

package/lib/core/editor/config/themes.js

@@ -30,7 +30,9 @@ var baseLightTheme = {
       'group.title.color': '#4D6277',
       // 标题文字颜色
       'group.background': 'rgba(255, 255, 255, 0.9)',
-      'group.border.color': '#E4E9EE' // 边框颜色
+      'group.border.color': '#E4E9EE',
+      // 边框颜色
+      'group.splitLine': false // 标题底部边框
 
     }
   },
@@ -92,7 +94,56 @@ var THEMES = [(0, _extends2["default"])({}, baseLightTheme, {
       'group.title.color': '#FFFFFF',
       // 标题文字颜色
       'group.background': 'rgba(29,55,113,0.6)',
-      'group.border.color': 'rgba(8,165,244,0.8)' // 边框颜色
+      'group.border.color': 'rgba(8,165,244,0.8)',
+      // 边框颜色
+      'group.splitLine': false // 标题底部边框
+
+    }
+  },
+  cluster: {
+    style: {
+      'group.title.color': '#FFFFFF',
+      // 标题文字颜色
+      'group.title.background': 'rgba(14,44,69,1)',
+      // 标题背景颜色 #0E2C45
+      'group.background': 'rgba(14,44,69,1)',
+      // #0E2C45
+      'group.border.color': '#08A5F4',
+      // 边框颜色
+      'group.border.radius': 3
+    }
+  }
+}, {
+  name: 'poly',
+  label: 'Poly',
+  toolsTheme: 'black',
+  backgroundImage: '/img/topo/themes/poly.png',
+  backgroundImageThumbnail: '/img/topo/themes/poly_thumbnail.png',
+  globalNodeLabelStyle: {
+    color: '#ffffff'
+  },
+  globalEdgeTagStyle: {
+    color: '#E4E9EE',
+    background: 'rgba(6, 54, 88, 1)',
+    // 背景色，不传使用默认内置 @V1.2 index.js:1 #063658 
+    borderColor: '#08A5F4' // 边框颜色，不传使用默认内置。用于主题切换 @V1.2
+
+  },
+  text: {
+    color: '#ffffff'
+  },
+  group: {
+    style: {
+      'group.title.background': 'rgba(0,0,0,0.01)',
+      // 标题背景颜色 #08A5F4
+      'group.title.color': '#8FECFF',
+      // 标题文字颜色
+      'group.title.border.color': '#ffffff',
+      // 边框颜色
+      'group.background': 'rgba(0,0,0,0.01)',
+      'group.border.color': '#ffffff',
+      // 边框颜色
+      'group.splitLine': true // 标题底部边框
 
     }
   },

package/lib/core/event/topoEventListener.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.createTopoEventListener = createTopoEventListener;
+var n = 0;
+
+function createTopoEventListener(type, onMessage) {
+  var eventListenerName = "topo_" + n++;
+  var EE = window.EE;
+
+  if (EE) {
+    EE.on('topo', eventListenerName, function (data) {
+      if (data.type === type) {
+        onMessage(data.data);
+      }
+    });
+  }
+
+  return {
+    eventListenerName: eventListenerName,
+    close: function close() {
+      if (EE) {
+        window.EE.removeListener('topo', eventListenerName);
+      }
+    }
+  };
+}

package/lib/core/hooks/useAlarm.js

@@ -11,10 +11,10 @@ var _react = require("react");
 
 var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
 
-var _componentRiilEventEmitter = require("@riil-frontend/component-riil-event-emitter");
-
 var _useGraphAlarmDisplay = _interopRequireDefault(require("./useGraphAlarmDisplay"));
 
+var _useTopoEventListener = _interopRequireDefault(require("./useTopoEventListener"));
+
 /**
  * 
  * 
@@ -117,20 +117,27 @@ function useAlarm(options) {
       received: data,
       all: relateTopoAlarm
     });
-  };
+  }; // 订阅消息
 
-  (0, _componentRiilEventEmitter.useCbbEventListener)("topo", {
-    name: "topo",
+
+  (0, _useTopoEventListener["default"])({
+    type: 'alarm',
     onMessage: function onMessage(data) {
       _rlog["default"].debug("Topoget--AlertMesage------------", topo, data);
 
-      if (data.type === "alarm") {
-        topo.alarm.handleAlarmEvent(data.data);
-      } else if (data.type === "risk") {
-        handleRiskData(data.data);
-      } else if (data.type === "relateTopoAlarm") {
-        handleRelateTopoAlarm(data.data);
-      }
+      topo.alarm.handleAlarmEvent(data);
+    }
+  });
+  (0, _useTopoEventListener["default"])({
+    type: 'risk',
+    onMessage: function onMessage(data) {
+      handleRiskData(data);
+    }
+  });
+  (0, _useTopoEventListener["default"])({
+    type: 'relateTopoAlarm',
+    onMessage: function onMessage(data) {
+      handleRelateTopoAlarm(data);
     }
   });
 }