@riil-frontend/component-topology 8.0.10 → 9.0.0-a.10

package/es/core/event/topoEventListener.js

@@ -0,0 +1,22 @@
+var n = 0;
+export 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/es/core/hooks/useAlarm.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import { useEffect } from "react";
 import rlog from "@riil-frontend/component-topology-utils/es/rlog";
-import { useCbbEventListener } from "@riil-frontend/component-riil-event-emitter";
 import useGraphAlarmDisplay from "./useGraphAlarmDisplay";
+import useTopoEventListener from "./useTopoEventListener";
 /**
  * 
  * 
@@ -104,20 +104,26 @@ export default function useAlarm(options) {
       received: data,
       all: relateTopoAlarm
     });
-  };
+  }; // 订阅消息
+
 
-  useCbbEventListener("topo", {
-    name: "topo",
+  useTopoEventListener({
+    type: 'alarm',
     onMessage: function onMessage(data) {
       rlog.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);
+    }
+  });
+  useTopoEventListener({
+    type: 'risk',
+    onMessage: function onMessage(data) {
+      handleRiskData(data);
+    }
+  });
+  useTopoEventListener({
+    type: 'relateTopoAlarm',
+    onMessage: function onMessage(data) {
+      handleRelateTopoAlarm(data);
     }
   });
 }

package/es/core/hooks/useTopoEventListener.js

@@ -1,26 +1,12 @@
-import { useEffect, useMemo } from 'react';
-var n = 0;
+import { useEffect } from 'react';
+import { createTopoEventListener } from "../event/topoEventListener";
 export default function useTopoEventListener(props) {
   var type = props.type,
       onMessage = props.onMessage;
-  var eventListenerName = useMemo(function () {
-    return "topo_" + n++;
-  }, []);
   useEffect(function () {
-    var EE = window.EE;
-
-    if (EE) {
-      window.EE.on('topo', eventListenerName, function (data) {
-        if (data.type === type) {
-          onMessage(data.data);
-        }
-      });
-    }
-
+    var listener = createTopoEventListener(type, onMessage);
     return function () {
-      if (EE) {
-        window.EE.removeListener('topo', eventListenerName);
-      }
+      listener.close();
     };
   }, [type, onMessage]);
 }

package/es/core/models/Alarm.js

@@ -5,9 +5,8 @@ import topoService from "@riil-frontend/component-topology-common/es/services/to
 import rlog from "@riil-frontend/component-topology-utils/es/rlog";
 import { EE } from "@riil-frontend/component-riil-event-emitter";
 import { isAvailableArray } from "@riil-frontend/utils";
+import { createTopoEventListener } from "../event/topoEventListener";
 
-// import moment from "moment";
-// import { alarmListDemo } from "./mocks";
 var Alarm = /*#__PURE__*/function () {
   function Alarm() {
     this.topo = void 0;
@@ -375,8 +374,6 @@ var Alarm = /*#__PURE__*/function () {
   /*#__PURE__*/
   function () {
     var _openTopoAlarm = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6(id) {
-      var _this2 = this;
-
       var _this$getState2, alarmOpening, topoAlarmIsOpen, alarmDispatchers;
 
       return _regeneratorRuntime.wrap(function _callee6$(_context6) {
@@ -409,17 +406,12 @@ var Alarm = /*#__PURE__*/function () {
             case 10:
               this.secretKey = _context6.sent;
               // rlog.debug("openTopoAlarm 获取初始化告警-------------------开始");
-              EE.on("topo", "topo", function (data, other) {
-                rlog.debug("openTopoAlarm 获取初始化告警------收到信息", data);
-
-                _this2.handleAlarmEvent(data);
-              });
               this.updateState({
                 alarmOpening: false,
                 alarmIsOpened: true
               });
 
-            case 13:
+            case 12:
             case "end":
               return _context6.stop();
           }
@@ -463,16 +455,15 @@ var Alarm = /*#__PURE__*/function () {
             case 3:
               this.currentTopoId = null;
               rlog.debug("useAlarm.useEffect 告警WebSocket 结束");
-              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/es/core/models/TopoApp.js

@@ -24,7 +24,7 @@ import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
 import SelectionModel from "./SelectionModel";
 import CiCache from "./cache/CiCache"; // eslint-disable-next-line no-undef
 
-var version = typeof "8.0.10" === 'string' ? "8.0.10" : null;
+var version = typeof "9.0.0-a.10" === 'string' ? "9.0.0-a.10" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

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

@@ -21,6 +21,13 @@ export default {
         visible: false,
         id: null // 资源id
 
+      };
+    },
+    close: function close() {
+      return {
+        visible: false,
+        id: null // 资源id
+
       };
     }
   },

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

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

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

@@ -29,7 +29,8 @@ import useCiAttrAndMetricData from "./useCiAttrAndMetricData";
 import Configurator from "./components/Configurator";
 import { formatMetric } from "../../../../../../models/attributeFormatter";
 import LinkTopoCard from "./components/LinkTopo/LinkTopoCard";
-import EventsCard from "./EventsCard"; // url 处理，UICBB 的地址需截取前缀
+import EventsCard from "./EventsCard";
+import { checkMenu, isOpenFlow, queryLastestValue } from "./components/LinkTopo/services"; // url 处理，UICBB 的地址需截取前缀
 
 function formatUrl(url) {
   var _window, _window$location;
@@ -133,7 +134,8 @@ export default function ResourceOverview(props) {
     isMonite: data.manageStatus !== 0,
     ciTypeMeta: ciTypeMeta,
     topo: topo,
-    resourceOverviewProps: resourceOverviewProps
+    resourceOverviewProps: resourceOverviewProps,
+    resourceData: data
   }),
       monitorMetricModels = _useMetricModels.metricModels;
 
@@ -690,7 +692,7 @@ export default function ResourceOverview(props) {
     _metricColChange = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8(col) {
       var _col2, _col3;
 
-      var codes, endTime, params, _ref5, times, metricList;
+      var codes, endTime, params, _ref5, times, metricList, newMetricList, metricLists;
 
       return _regeneratorRuntime.wrap(function _callee8$(_context8) {
         while (1) {
@@ -738,7 +740,17 @@ export default function ResourceOverview(props) {
 
             case 11:
               metricList = _context8.sent;
-              rlog.debug('metricColChange', metricList, monitorMetricModels);
+              _context8.next = 14;
+              return queryMetricList({
+                'name': data.attributes.display_name
+              }, {
+                'id': data.attributes.name
+              });
+
+            case 14:
+              newMetricList = _context8.sent;
+              metricLists = metricList.concat(getNewMetricList(newMetricList));
+              rlog.debug('metricColChange', metricLists, monitorMetricModels);
               setMetric(col.map(function (item, key) {
                 return {
                   code: item.dataIndex,
@@ -748,7 +760,7 @@ export default function ResourceOverview(props) {
                   metricItem: monitorMetricModels.find(function (m_item) {
                     return m_item.code === item.dataIndex;
                   }),
-                  list: metricList.filter(function (m_item) {
+                  list: metricLists.filter(function (m_item) {
                     return m_item.metricCode === item.dataIndex;
                   })
                 };
@@ -763,7 +775,7 @@ export default function ResourceOverview(props) {
                 }, 60000);
               }
 
-            case 16:
+            case 20:
             case "end":
               return _context8.stop();
           }
@@ -773,6 +785,87 @@ export default function ResourceOverview(props) {
     return _metricColChange.apply(this, arguments);
   }
 
+  function queryMetricList(_x9, _x10) {
+    return _queryMetricList.apply(this, arguments);
+  }
+
+  function _queryMetricList() {
+    _queryMetricList = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9(data, param) {
+      var checkMenus, isOpen, list;
+      return _regeneratorRuntime.wrap(function _callee9$(_context9) {
+        while (1) {
+          switch (_context9.prev = _context9.next) {
+            case 0:
+              if (!(ciType !== 'network_link')) {
+                _context9.next = 2;
+                break;
+              }
+
+              return _context9.abrupt("return", []);
+
+            case 2:
+              _context9.next = 4;
+              return checkMenu();
+
+            case 4:
+              checkMenus = _context9.sent;
+
+              if (!(checkMenus[0].passed == 'PASS')) {
+                _context9.next = 14;
+                break;
+              }
+
+              _context9.next = 8;
+              return isOpenFlow(data);
+
+            case 8:
+              isOpen = _context9.sent;
+
+              if (!isOpen) {
+                _context9.next = 14;
+                break;
+              }
+
+              _context9.next = 12;
+              return queryLastestValue(param);
+
+            case 12:
+              list = _context9.sent;
+              return _context9.abrupt("return", list);
+
+            case 14:
+              return _context9.abrupt("return", []);
+
+            case 15:
+            case "end":
+              return _context9.stop();
+          }
+        }
+      }, _callee9);
+    }));
+    return _queryMetricList.apply(this, arguments);
+  }
+
+  var getNewMetricList = function getNewMetricList(data) {
+    return [{
+      errorMsg: null,
+      mainCiId: "netDelayRatio",
+      metricCode: "netDelayRatio",
+      metricValue: data.upNetDelayRatio + ' ms' + '|' + data.downNetDelayRatio + ' ms',
+      subCiId: '',
+      subCiType: null,
+      mainCiType: null
+    }, {
+      errorMsg: null,
+      mainCiId: "retansRatio",
+      metricCode: "retansRatio",
+      metricValue: data.upRetransRatio + ' %' + '|' + data.downRetansRatio + ' %',
+      subCiId: '',
+      subCiType: null,
+      mainCiType: null
+    }];
+  };
+
   var defaultCols = useMemo(function () {
     var baseInfo = [];
     var keyIndicators = [];

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

@@ -6,7 +6,8 @@ import useMetricPolling from "./hooks/useMetricPolling";
 import styles from "./LinkTopo.module.scss";
 export default function LinkTopo(props) {
   var data = props.data,
-      linkMetricCodes = props.linkMetricCodes;
+      linkMetricCodes = props.linkMetricCodes,
+      openFlow = props.openFlow;
   var metricData = useMetricPolling({
     linkCi: data,
     linkMetricCodes: linkMetricCodes
@@ -19,5 +20,7 @@ export default function LinkTopo(props) {
     ,
     isNarrow: true,
     jumpto: getHistory().push
-  }, metricData)));
+  }, metricData, {
+    openFlow: openFlow
+  })));
 }

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

@@ -1,7 +1,10 @@
-import React from 'react';
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useEffect, useState } from 'react';
 import BlockBox from "../../BlockBox";
 import Configurator from "../Configurator";
 import LinkTopo from "./LinkTopo";
+import { isOpenFlow, checkMenu } from "./services";
 export default function LinkTopoCard(props) {
   var _data$attributes;
 
@@ -14,7 +17,76 @@ 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(null),
+      openFlow = _useState[0],
+      setOpenFlow = _useState[1];
+
+  var analysisUrl = "../../default/trafficControl/linkConfigure?id=" + data.attributes.name + "&num=0";
+  var linkDetailsUrl = "/default/pagecenter/linkDetail/view/" + data.id + "?resId=" + data.id + "&domainCode=network&title=" + data.attributes.name + "&ciCode=network_link&tabByComType=uicbb-res-crucial-link-flow";
+
+  var isOpenFlows = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var checkMenus, isOpen;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return checkMenu();
+
+            case 2:
+              checkMenus = _context.sent;
+
+              if (!(checkMenus[0].passed == 'PASS' && isCrucial)) {
+                _context.next = 10;
+                break;
+              }
+
+              _context.next = 6;
+              return isOpenFlow({
+                'name': data.attributes.display_name
+              });
+
+            case 6:
+              isOpen = _context.sent;
+
+              //判断是不是有流量分析
+              if (isOpen) {
+                setOpenFlow({
+                  name: '查看流量构成',
+                  url: linkDetailsUrl
+                });
+              } else {
+                setOpenFlow({
+                  name: '配置流量分析',
+                  url: analysisUrl
+                });
+              }
+
+              _context.next = 11;
+              break;
+
+            case 10:
+              setOpenFlow(null);
+
+            case 11:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function isOpenFlows() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  useEffect(function () {
+    isOpenFlows();
+  }, [data]);
   return /*#__PURE__*/React.createElement(BlockBox, {
     headerTitle: "\u8FD0\u884C\u60C5\u51B5",
     headerExtra: /*#__PURE__*/React.createElement(Configurator, {
@@ -29,6 +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,24 +1,62 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect, useState } from 'react';
 import { useRequest } from 'ahooks';
-import { queryLinkInterfacesLatestMetrics, queryLinkLatestMetrics } from "../services";
+import { queryLinkInterfacesLatestMetrics, queryLinkLatestMetrics, queryLastestValue } 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 = ['netDelayRatio', 'retansRatio'];
+  var oldCodes = [];
+  var newCodes = [];
+  linkMetricCodes.map(function (item) {
+    arr.indexOf(item) > -1 ? newCodes.push(item) : oldCodes.push(item);
+  });
 
   var _useState = useState({
     sourceMetrics: null,
     destinationMetrics: null,
     // 链路指标列表
     linkMetrics: [],
-    linkMetricsTs: null
+    linkMetricsTs: null,
+    linkOther: []
   }),
       data = _useState[0],
-      setData = _useState[1]; // 轮询hooks
+      setData = _useState[1];
+
+  var queryLastestValues = useRequest(queryLastestValue, {
+    pollingInterval: 1000 * 15,
+    pollingWhenHidden: false,
+    debounceInterval: 200,
+    manual: true,
+    onSuccess: function onSuccess(result) {
+      var datas = {
+        linkOther: []
+      };
+
+      if (newCodes.includes('netDelayRatio')) {
+        datas.linkOther.push({
+          'code': 'netDelayRatio',
+          'name': '下行RTT时延',
+          'ts': result.time,
+          'value': result.upNetDelayRatio + ' ms' + '|' + result.downNetDelayRatio + ' ms'
+        });
+      }
 
+      if (newCodes.includes('retansRatio')) {
+        datas.linkOther.push({
+          'code': 'retansRatio',
+          'name': '重传率',
+          'ts': result.time,
+          'value': result.upRetransRatio + ' %' + '|' + result.downRetansRatio + ' %'
+        });
+      }
+
+      setData(_extends({}, data, datas));
+    }
+  }); // 轮询hooks
 
   var queryLinkMetricsRequest = useRequest(queryLinkLatestMetrics, {
     pollingInterval: 60 * 1000,
@@ -40,16 +78,22 @@ export default function useMetricPolling(_ref) {
       rlog.info('链路拓扑指标轮询 queryInterfaceMetricsRequest 结果', result);
     }
   });
-  var linkMetricCodesStr = linkMetricCodes.map(function (item) {
+  var linkMetricCodesStr = oldCodes.map(function (item) {
     return item;
   }).sort().join(',');
   useEffect(function () {
     if (linkId) {
       rlog.info('链路拓扑指标轮询 切换', {
         linkCi: linkCi,
-        linkMetricCodes: linkMetricCodes
+        oldCodes: oldCodes
       });
-      queryLinkMetricsRequest.run(linkCi, linkMetricCodes);
+      queryLinkMetricsRequest.run(linkCi, oldCodes);
+
+      if (newCodes.length > 0) {
+        queryLastestValues.run({
+          'id': linkCi.attributes.name
+        });
+      }
     }
 
     return function () {};

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

@@ -132,6 +132,10 @@ function _queryLinkLatestMetrics() {
 export function queryLinkInterfacesLatestMetrics(_x5) {
   return _queryLinkInterfacesLatestMetrics.apply(this, arguments);
 }
+/**
+ * @name  checkMenu 判断当前流量监控权限
+ * @returns  
+ */
 
 function _queryLinkInterfacesLatestMetrics() {
   _queryLinkInterfacesLatestMetrics = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(linkCi) {
@@ -207,4 +211,80 @@ function _queryLinkInterfacesLatestMetrics() {
     }, _callee4);
   }));
   return _queryLinkInterfacesLatestMetrics.apply(this, arguments);
+}
+
+export function checkMenu() {
+  return _checkMenu.apply(this, arguments);
+}
+/**
+ * @name  isOpenFlow 是否配置流量分析
+ * @returns  
+ */
+
+function _checkMenu() {
+  _checkMenu = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            return _context5.abrupt("return", request.post('/authorization/v1/api/authority/check/checkMenuAuthentication', [{
+              "url": "/default/trafficControl"
+            }]));
+
+          case 1:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee5);
+  }));
+  return _checkMenu.apply(this, arguments);
+}
+
+export function isOpenFlow(_x6) {
+  return _isOpenFlow.apply(this, arguments);
+}
+/**
+ * @name  isOpenFlow 查指标值
+ * @returns  
+ */
+
+function _isOpenFlow() {
+  _isOpenFlow = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6(params) {
+    return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            return _context6.abrupt("return", request.post('/flow/v1/api/link/isOpenFlowMonitorByName', params));
+
+          case 1:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee6);
+  }));
+  return _isOpenFlow.apply(this, arguments);
+}
+
+export function queryLastestValue(_x7) {
+  return _queryLastestValue.apply(this, arguments);
+}
+
+function _queryLastestValue() {
+  _queryLastestValue = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7(params) {
+    return _regeneratorRuntime.wrap(function _callee7$(_context7) {
+      while (1) {
+        switch (_context7.prev = _context7.next) {
+          case 0:
+            return _context7.abrupt("return", request.post('/flow/v1/api/LinkAnalyse/queryLastestValue', params));
+
+          case 1:
+          case "end":
+            return _context7.stop();
+        }
+      }
+    }, _callee7);
+  }));
+  return _queryLastestValue.apply(this, arguments);
 }