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

package/lib/core/hooks/useCanvasTheme.js

@@ -36,6 +36,11 @@ var themeMap = [{
   label: '深色',
   color: '#031425',
   toolsTheme: 'black'
+}, {
+  name: 'poly',
+  label: 'Poly',
+  toolsTheme: 'black',
+  backgroundImage: '/img/topo/themes/poly.png'
 }].reduce(function (map, item) {
   var _extends2;
 
@@ -52,6 +57,7 @@ function useCanvasTheme(props) {
 
   var themeConfig = themeMap[themeName || 'white'];
   var canvasColor = hideBackgroundColor ? null : themeConfig.color;
+  var canvasbackgroundImage = hideBackgroundColor ? null : themeConfig.backgroundImage;
   (0, _react.useEffect)(function () {
     // 设置
     if (graphLoaded && themeConfig) {
@@ -74,6 +80,7 @@ function useCanvasTheme(props) {
     }
   }, [graphLoaded, canvasColor]);
   return {
-    canvasColor: canvasColor
+    canvasColor: canvasColor,
+    canvasbackgroundImage: canvasbackgroundImage
   };
 }

package/lib/core/hooks/useTopoEventListener.js

@@ -5,29 +5,15 @@ exports["default"] = useTopoEventListener;
 
 var _react = require("react");
 
-var n = 0;
+var _topoEventListener = require("../event/topoEventListener");
 
 function useTopoEventListener(props) {
   var type = props.type,
       onMessage = props.onMessage;
-  var eventListenerName = (0, _react.useMemo)(function () {
-    return "topo_" + n++;
-  }, []);
   (0, _react.useEffect)(function () {
-    var EE = window.EE;
-
-    if (EE) {
-      window.EE.on('topo', eventListenerName, function (data) {
-        if (data.type === type) {
-          onMessage(data.data);
-        }
-      });
-    }
-
+    var listener = (0, _topoEventListener.createTopoEventListener)(type, onMessage);
     return function () {
-      if (EE) {
-        window.EE.removeListener('topo', eventListenerName);
-      }
+      listener.close();
     };
   }, [type, onMessage]);
 }

package/lib/core/models/Alarm.js

@@ -19,8 +19,8 @@ var _componentRiilEventEmitter = require("@riil-frontend/component-riil-event-em
 
 var _utils = require("@riil-frontend/utils");
 
-// import moment from "moment";
-// import { alarmListDemo } from "./mocks";
+var _topoEventListener = require("../event/topoEventListener");
+
 var Alarm = /*#__PURE__*/function () {
   function Alarm() {
     this.topo = void 0;
@@ -394,8 +394,6 @@ var Alarm = /*#__PURE__*/function () {
   /*#__PURE__*/
   function () {
     var _openTopoAlarm = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6(id) {
-      var _this2 = this;
-
       var _this$getState2, alarmOpening, topoAlarmIsOpen, alarmDispatchers;
 
       return _regenerator["default"].wrap(function _callee6$(_context6) {
@@ -427,20 +425,13 @@ var Alarm = /*#__PURE__*/function () {
 
             case 10:
               this.secretKey = _context6.sent;
-
               // rlog.debug("openTopoAlarm 获取初始化告警-------------------开始");
-              _componentRiilEventEmitter.EE.on("topo", "topo", function (data, other) {
-                _rlog["default"].debug("openTopoAlarm 获取初始化告警------收到信息", data);
-
-                _this2.handleAlarmEvent(data);
-              });
-
               this.updateState({
                 alarmOpening: false,
                 alarmIsOpened: true
               });
 
-            case 13:
+            case 12:
             case "end":
               return _context6.stop();
           }
@@ -486,17 +477,15 @@ var Alarm = /*#__PURE__*/function () {
 
               _rlog["default"].debug("useAlarm.useEffect 告警WebSocket 结束");
 
-              _componentRiilEventEmitter.EE.removeListener("topo", "topo");
-
               this.updateState({
                 topoAlarmIsOpen: false,
                 alarmOpening: false,
                 alarmPanelIsOpen: false
               });
-              _context7.next = 9;
+              _context7.next = 8;
               return this.topo.serverApi.closeTopoAlarm(id, this.secretKey);
 
-            case 9:
+            case 8:
             case "end":
               return _context7.stop();
           }

package/lib/core/models/TopoApp.js

@@ -56,7 +56,7 @@ var _SelectionModel = _interopRequireDefault(require("./SelectionModel"));
 var _CiCache = _interopRequireDefault(require("./cache/CiCache"));
 
 // eslint-disable-next-line no-undef
-var version = typeof "9.0.0-a.2" === 'string' ? "9.0.0-a.2" : null;
+var version = typeof "9.0.0-a.20" === 'string' ? "9.0.0-a.20" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/lib/core/store/models/viewer/resourceDetail.js

@@ -29,6 +29,13 @@ var _default = {
         visible: false,
         id: null // 资源id
 
+      };
+    },
+    close: function close() {
+      return {
+        visible: false,
+        id: null // 资源id
+
       };
     }
   },

package/lib/core/test/Test.js

@@ -27,6 +27,58 @@ var Test = /*#__PURE__*/function () {
   _proto.onReady = function onReady() {// TODO 待移除测试代码
     // this.iconManage.openUpload()
     // this.topo.store.getModelDispatchers('linkDynamicStyleConfig').open({type: 'networkLink'});
+  }
+  /**
+   * 关联IP示例代码
+   */
+  ;
+
+  _proto.createExportLink = function createExportLink() {
+    var htTopo = this.topo.getHtTopo();
+    var dm = htTopo.getGraphView().dm(); // 设置节点关联IP
+
+    var nodeElement = htTopo.getGraphView().sm().fd();
+    var ip = {
+      'id': 'ip_1.1.1.1',
+      'name': '1.1.1.1',
+      customName: null,
+      // 'groupId': null,
+      // 'groupTag': null,
+      'ipAddress': '1.1.1.1',
+      // 'attributes': [],
+      // 'metrics': [],
+      'type': 'node' // 'dtype': 'device'
+
+    };
+    nodeElement.a(ip);
+    nodeElement.setTag('ip_1.1.1.1');
+    var link = {
+      'id': '0000000019b462d1',
+      'name': '172.17.160.116(Gi2/2/0/1) - 172.27.130.13(Gi 0/9)',
+      'source': '00000000029f9411',
+      'target': 'ip_1.1.1.1',
+      'operation': 'delete',
+      'interfaceSource': '0000000018080aee',
+      'interfaceTarget': '000000000341b015',
+      'ciType': 'network_link',
+      'attributes': [],
+      'manageStatus': 0,
+      'permission': {
+        'readable': true,
+        'writeable': true,
+        'deleteable': true
+      },
+      'metrics': [],
+      'type': 'link',
+      'dtype': 'link'
+    };
+    var createElementsData = {
+      groups: [],
+      nodes: [],
+      links: [link],
+      linkGroups: []
+    };
+    htTopo.createElements(createElementsData);
   };
 
   return Test;

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

@@ -98,9 +98,7 @@ function ResourceDetailDrawer(props) {
   }, []); // 解决切换拓扑图隐藏概览
 
   (0, _react.useEffect)(function () {
-    resourceDetailDispatchers.update({
-      visible: false
-    }); // TODO 其他数据重置
+    close(); // TODO 其他数据重置
   }, [topoId]);
 
   function getUser() {
@@ -176,6 +174,12 @@ function ResourceDetailDrawer(props) {
     }
   }
 
+  function close() {
+    resourceDetailDispatchers.update({
+      visible: false
+    });
+  }
+
   function init(data, targetType) {
     // console.log('初始化基本信息', data, targetType);
     var id = data.id,
@@ -236,7 +240,8 @@ function ResourceDetailDrawer(props) {
       topo: topo,
       userId: userId,
       activeData: activeData,
-      resourceData: resourceData
+      resourceData: resourceData,
+      onClose: close
     }));
   };
 
@@ -250,11 +255,7 @@ function ResourceDetailDrawer(props) {
     })),
     width: 580,
     hasMask: false,
-    onClose: function onClose() {
-      return resourceDetailDispatchers.update({
-        visible: false
-      });
-    }
+    onClose: close
   }, visible && resourceData && renderContent()));
 }
 

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

@@ -53,8 +53,6 @@ var _LinkTopoCard = _interopRequireDefault(require("./components/LinkTopo/LinkTo
 
 var _EventsCard = _interopRequireDefault(require("./EventsCard"));
 
-var _services2 = require("./components/LinkTopo/services");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -726,7 +724,7 @@ function ResourceOverview(props) {
     _metricColChange = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8(col) {
       var _col2, _col3;
 
-      var codes, endTime, params, _ref5, times, metricList, newMetricList, metricLists;
+      var codes, endTime, params, _ref5, times, metricList, metricLists;
 
       return _regenerator["default"].wrap(function _callee8$(_context8) {
         while (1) {
@@ -774,14 +772,7 @@ function ResourceOverview(props) {
 
             case 11:
               metricList = _context8.sent;
-              _context8.next = 14;
-              return (0, _services2.queryLastestValue)({
-                'id': data.attributes.name
-              });
-
-            case 14:
-              newMetricList = _context8.sent;
-              metricLists = metricList.concat(getNewMetricList(newMetricList));
+              metricLists = metricList.concat(getNewMetricList());
 
               _rlog.rlog.debug('metricColChange', metricLists, monitorMetricModels);
 
@@ -809,7 +800,7 @@ function ResourceOverview(props) {
                 }, 60000);
               }
 
-            case 20:
+            case 17:
             case "end":
               return _context8.stop();
           }
@@ -819,36 +810,20 @@ function ResourceOverview(props) {
     return _metricColChange.apply(this, arguments);
   }
 
-  var getNewMetricList = function getNewMetricList(data) {
+  var getNewMetricList = function getNewMetricList() {
     return [{
       errorMsg: null,
-      mainCiId: "downNetDelayRatio",
-      metricCode: "downNetDelayRatio",
-      metricValue: data.downNetDelayRatio,
-      subCiId: '',
-      subCiType: null,
-      mainCiType: null
-    }, {
-      errorMsg: null,
-      mainCiId: "downRetansRatio",
-      metricCode: "downRetansRatio",
-      metricValue: data.downRetansRatio,
-      subCiId: '',
-      subCiType: null,
-      mainCiType: null
-    }, {
-      errorMsg: null,
-      mainCiId: "upNetDelayRatio",
-      metricCode: "upNetDelayRatio",
-      metricValue: data.upNetDelayRatio,
+      mainCiId: "netDelayRatio",
+      metricCode: "netDelayRatio",
+      metricValue: '0',
       subCiId: '',
       subCiType: null,
       mainCiType: null
     }, {
       errorMsg: null,
-      mainCiId: "upRetransRatio",
-      metricCode: "upRetransRatio",
-      metricValue: data.upRetransRatio,
+      mainCiId: "retansRatio",
+      metricCode: "retansRatio",
+      metricValue: '0',
       subCiId: '',
       subCiType: null,
       mainCiType: null

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

@@ -25,6 +25,20 @@ function LinkTopo(props) {
     linkCi: data,
     linkMetricCodes: linkMetricCodes
   });
+  var linkMetrics = [].concat(metricData.linkMetrics, metricData.linkOther);
+  var linkMetricsList = [];
+
+  if (linkMetrics.length > 0) {
+    linkMetricCodes.forEach(function (e) {
+      var linkMetricsData = linkMetrics.filter(function (i) {
+        return e == i.code;
+      });
+      if (linkMetricsData.length > 0) linkMetricsList.push(linkMetricsData[0]);
+    });
+    metricData.linkMetrics = linkMetricsList;
+    metricData.linkOther = [];
+  }
+
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _LinkTopoModule["default"].container
   }, /*#__PURE__*/_react["default"].createElement(_componentCrucialLinkTopo["default"], (0, _extends2["default"])({

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

@@ -35,9 +35,9 @@ 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 = (0, _react.useState)(-1),
+  var _useState = (0, _react.useState)(null),
       openFlow = _useState[0],
       setOpenFlow = _useState[1];
 
@@ -57,7 +57,7 @@ function LinkTopoCard(props) {
             case 2:
               checkMenus = _context.sent;
 
-              if (!(checkMenus[0].passed == 'PASS')) {
+              if (!(checkMenus[0].passed == 'PASS' && isCrucial)) {
                 _context.next = 10;
                 break;
               }
@@ -73,12 +73,12 @@ function LinkTopoCard(props) {
               //判断是不是有流量分析
               if (isOpen) {
                 setOpenFlow({
-                  name: '跳转关键链路详情',
+                  name: '查看流量构成',
                   url: linkDetailsUrl
                 });
               } else {
                 setOpenFlow({
-                  name: '跳转流量分析配置',
+                  name: '配置流量分析',
                   url: analysisUrl
                 });
               }
@@ -119,7 +119,9 @@ function LinkTopoCard(props) {
     })
   }, /*#__PURE__*/_react["default"].createElement(_LinkTopo["default"], {
     data: data,
-    linkMetricCodes: metricCodes,
+    linkMetricCodes: openFlow && openFlow.name == '查看流量构成' ? metricCodes : metricCodes.filter(function (i) {
+      return i != 'netDelayRatio' && i != 'retansRatio';
+    }),
     openFlow: openFlow
   }));
 }

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

@@ -24,11 +24,11 @@ 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 = (0, _react.useState)({
@@ -42,53 +42,15 @@ function useMetricPolling(_ref) {
       data = _useState[0],
       setData = _useState[1];
 
-  var queryLastestValues = (0, _ahooks.useRequest)(_services.queryLastestValue, {
+  var queryLastestValues = (0, _ahooks.useRequest)(_services.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((0, _extends2["default"])({}, data, datas));
+      setData((0, _extends2["default"])({}, data, {
+        linkOther: result
+      }));
     }
   }); // 轮询hooks
 
@@ -114,27 +76,38 @@ function useMetricPolling(_ref) {
       _rlog["default"].info('链路拓扑指标轮询 queryInterfaceMetricsRequest 结果', result);
     }
   });
-  var linkMetricCodesStr = oldCodes.map(function (item) {
+  var linkMetricCodesStr = codes.map(function (item) {
     return item;
   }).sort().join(',');
   (0, _react.useEffect)(function () {
     if (linkId) {
       _rlog["default"].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(',');
+  (0, _react.useEffect)(function () {
+    if (linkId) {
+      _rlog["default"].info('链路拓扑指标勾选rtt|重传率 轮询', {
+        linkCi: linkCi,
+        retansRatioNetDelayRatioCodes: retansRatioNetDelayRatioCodes
+      });
+
+      queryLastestValues.run({
+        'id': linkCi.attributes.name
+      }, retansRatioNetDelayRatioCodes);
+    }
+
+    return function () {};
+  }, [linkId, retansRatioNetDelayRatioCodesStr]);
   (0, _react.useEffect)(function () {
     if (linkId) {
       _rlog["default"].info('链路拓扑指标轮询 queryInterfaceMetricsRequest 开始', {

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

@@ -10,6 +10,7 @@ exports.queryLastestValue = queryLastestValue;
 exports.queryLatestMetrics = queryLatestMetrics;
 exports.queryLinkInterfacesLatestMetrics = queryLinkInterfacesLatestMetrics;
 exports.queryLinkLatestMetrics = queryLinkLatestMetrics;
+exports.queryRetansRatioNetDelayRatio = queryRetansRatioNetDelayRatio;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -276,7 +277,7 @@ function isOpenFlow(_x6) {
   return _isOpenFlow.apply(this, arguments);
 }
 /**
- * @name  isOpenFlow 查指标值
+ * @name  queryLastestValue 查指标值
  * @returns  
  */
 
@@ -319,4 +320,60 @@ function _queryLastestValue() {
     }, _callee7);
   }));
   return _queryLastestValue.apply(this, arguments);
+}
+
+function queryRetansRatioNetDelayRatio(_x8, _x9) {
+  return _queryRetansRatioNetDelayRatio.apply(this, arguments);
+}
+
+function _queryRetansRatioNetDelayRatio() {
+  _queryRetansRatioNetDelayRatio = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8(params, retansRatioNetDelayRatioCodes) {
+    var result, linkOther;
+    return _regenerator["default"].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);
 }