@riil-frontend/component-topology 13.0.0-dev.15 → 13.0.0-dev.17

package/lib/core/hooks/useGraphAlarmDisplay.js

@@ -15,11 +15,13 @@ var _showGraphManageStatusUtil = require("../utils/showGraphManageStatusUtil");
 
 var _useCmpLinkAlarm2 = _interopRequireDefault(require("./useCmpLinkAlarm"));
 
+var _useLinkAlarmDisplay2 = _interopRequireDefault(require("./useLinkAlarmDisplay"));
+
 /**
  * 获取ci的最高告警级别
- * @param {Array} alarmList 
- * @param {*} risks 
- * @returns 
+ * @param {Array} alarmList
+ * @param {*} risks
+ * @returns
  */
 function getCiAlarmLevelMap(alarmList) {
   var ciIdLevelMap = {};
@@ -51,9 +53,9 @@ function getGraphCiElementAlarmLevels(resources, alarmList) {
 }
 /**
  * 获得关联拓扑节点告警级别
- * @param {*} topo 
- * @param {*} relateTopoAlarm 
- * @returns 
+ * @param {*} topo
+ * @param {*} relateTopoAlarm
+ * @returns
  */
 
 
@@ -61,7 +63,7 @@ function getRelateTopoNodeAlarmLevels(topo, relateTopoAlarm) {
   return Object.keys(relateTopoAlarm).map(function (topoId) {
     var level = relateTopoAlarm[topoId];
     var relateTopoNode = topo.getDataModel().getDatas().toArray().find(function (node) {
-      return "" + node.a('bindTopo') === "" + topoId;
+      return "" + node.a("bindTopo") === "" + topoId;
     });
 
     if (!level || !relateTopoNode) {
@@ -81,18 +83,18 @@ function getRelateTopoNodeAlarmLevels(topo, relateTopoAlarm) {
 function getGraphElementAlarmLevels(resources) {}
 /**
  * 告警显示到ht拓扑
- * 
- * @param {*} options 
+ *
+ * @param {*} options
  */
 
 
 function useGraphAlarmDisplay(options) {
   var topo = options.topo,
       alarmSwitch = options.alarmSwitch;
-  var topoState = topo.store.useModelState('topoMod');
+  var topoState = topo.store.useModelState("topoMod");
   var graphLoaded = topoState.graphLoaded,
       viewState = topoState.viewState;
-  var isEditMode = viewState === 'edit';
+  var isEditMode = viewState === "edit";
 
   var _topo$alarm$useState = topo.alarm.useState(),
       alarmList = _topo$alarm$useState.alarmList,
@@ -110,12 +112,28 @@ function useGraphAlarmDisplay(options) {
       cmpLinkRunStatus = _useCmpLinkAlarm.cmpLinkRunStatus,
       addCmpLinkOfflineStatusForDisplayLineColor = _useCmpLinkAlarm.addCmpLinkOfflineStatusForDisplayLineColor;
 
-  var resources = (0, _react.useMemo)(function () {
+  var cmpRes = (0, _react.useMemo)(function () {
     return addCmpLinkOfflineStatusForDisplayLineColor(oldResources, cmpLinkRunStatus);
-  }, [oldResources, cmpLinkRunStatus]); // ci告警级别
+  }, [oldResources, cmpLinkRunStatus]); // 拓扑链路特殊处理
+
+  var _useLinkAlarmDisplay = (0, _useLinkAlarmDisplay2["default"])({
+    topo: topo,
+    resources: cmpRes,
+    graphLoaded: graphLoaded,
+    alarmList: alarmList
+  }),
+      linkRunStatus = _useLinkAlarmDisplay.linkRunStatus,
+      getlinkAlarmLevels = _useLinkAlarmDisplay.getlinkAlarmLevels; // const resources = useMemo(() => addLinkOfflineStatusForDisplayLineColor(cmpRes, linkRunStatus), [cmpRes, linkRunStatus])
+
+
+  var linkAlarmLevels = getlinkAlarmLevels(alarmList, cmpRes); // 排除掉处于断开状态的链路
+
+  var resources = cmpRes.filter(function (item) {
+    return !item.breakState;
+  }); // ci告警级别
 
   var cisEventLevel = (0, _react.useMemo)(function () {
-    var levels = [].concat(alarmList || [], cmpLinkAlarmLevels, risks.map(function (item) {
+    var levels = [].concat(alarmList || [], cmpLinkAlarmLevels, linkAlarmLevels, risks.map(function (item) {
       var _item$resourceId;
 
       return {
@@ -135,6 +153,16 @@ function useGraphAlarmDisplay(options) {
       alarmSwitch: alarmSwitch,
       cisEventLevel: cisEventLevel
     });
+    setOffLinkColor();
+
+    function setOffLinkColor() {
+      oldResources.forEach(function (item) {
+        if (item.breakState) {
+          var element = topo.getDataModel().getDataByTag(item.id);
+          element === null || element === void 0 ? void 0 : element.s("edge.color", "#C9CED2");
+        }
+      });
+    }
 
     function showAlarm() {
       var _topo$historyManager, _topo$historyManager2;
@@ -161,19 +189,19 @@ function useGraphAlarmDisplay(options) {
         var alarmLevel = (_elementsAlarmLevels$ = elementsAlarmLevels.find(function (item) {
           return item.id === element.getTag() || item.elementId === element.getId();
         })) === null || _elementsAlarmLevels$ === void 0 ? void 0 : _elementsAlarmLevels$.level;
-        element.a('alarmLevel', alarmLevel);
+        element.a("alarmLevel", alarmLevel);
       });
 
-      _rlog["default"].debug('推送告警 => ht', {
+      _rlog["default"].debug("推送告警 => ht", {
         alarms: elementsAlarmLevels,
         relateTopoAlarmMap: relateTopoAlarm,
         relateTopoAlarms: relateTopoAlarms
       }); // 更新到ht拓扑
 
 
-      (_topo$historyManager = topo.historyManager) === null || _topo$historyManager === void 0 ? void 0 : _topo$historyManager.setDisabled(true, '推送告警');
+      (_topo$historyManager = topo.historyManager) === null || _topo$historyManager === void 0 ? void 0 : _topo$historyManager.setDisabled(true, "推送告警");
       topo.view.loadAlarm(elementsAlarmLevels);
-      (_topo$historyManager2 = topo.historyManager) === null || _topo$historyManager2 === void 0 ? void 0 : _topo$historyManager2.setDisabled(false, '推送告警');
+      (_topo$historyManager2 = topo.historyManager) === null || _topo$historyManager2 === void 0 ? void 0 : _topo$historyManager2.setDisabled(false, "推送告警");
     }
 
     return function () {

package/lib/core/hooks/useLinkAlarmDisplay.js

@@ -0,0 +1,175 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = useLinkAlarmDisplay;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = require("react");
+
+var _ahooks = require("ahooks");
+
+var _lodash = _interopRequireDefault(require("lodash"));
+
+var _DictCache = _interopRequireDefault(require("../models/cache/DictCache"));
+
+function getLinkDev(datas) {
+  console.log("datas------------------", datas);
+  var linkDevDoc = {};
+  var linkIds = datas.filter(function (item) {
+    return item.ciType === "network_link";
+  }).map(function (item) {
+    linkDevDoc[item.id] = [item.source, item.target];
+    return item.id;
+  });
+  return {
+    linkIds: linkIds,
+    linkDevDoc: linkDevDoc
+  };
+}
+
+function getlinkAlarmLevels(alarmList, resources) {
+  var _getLinkDev = getLinkDev(resources),
+      linkDevDoc = _getLinkDev.linkDevDoc;
+
+  console.log("linkAlarmLevels-----------1", linkDevDoc, alarmList);
+
+  if (!alarmList) {
+    return [];
+  }
+
+  var alarms = alarmList.filter(function (alarm) {
+    return alarm.obj.alertTypeCode === "availAlert";
+  }).map(function (item) {
+    return item.id;
+  });
+  return Object.keys(linkDevDoc).filter(function (item) {
+    return _lodash["default"].intersection(linkDevDoc[item], alarms).length > 0;
+  }).map(function (item) {
+    return {
+      id: item,
+      level: 1
+    };
+  });
+  ;
+}
+/**
+ * 处理链路显示
+ * @param {*} props
+ * @returns
+ */
+
+
+function useLinkAlarmDisplay(props) {
+  var topo = props.topo,
+      resources = props.resources,
+      graphLoaded = props.graphLoaded,
+      alarmList = props.alarmList;
+
+  var _useState = (0, _react.useState)(getLinkDev(resources).linkIds),
+      linkIds = _useState[0],
+      setLinkIds = _useState[1];
+
+  var _useState2 = (0, _react.useState)([]),
+      linkRunStatus = _useState2[0],
+      setLinkRunStatus = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(getLinkDev(resources).linkDevDoc),
+      linkDev = _useState3[0],
+      setLinkDev = _useState3[1];
+
+  console.log("alarmList----------sssss", alarmList);
+  (0, _react.useEffect)(function () {
+    var ids = getLinkDev(resources).linkIds;
+
+    if (linkIds.join(",") !== ids.join(",")) {
+      setLinkIds(ids);
+    }
+  }, [resources]);
+
+  function getLinkRunStatus(_x) {
+    return _getLinkRunStatus.apply(this, arguments);
+  } // 轮询hooks
+
+
+  function _getLinkRunStatus() {
+    _getLinkRunStatus = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(ids) {
+      var _yield$Promise$all, ciMetricsResult;
+
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (ids.length) {
+              _context.next = 2;
+              break;
+            }
+
+            return _context.abrupt("return", []);
+
+          case 2:
+            _context.t0 = Promise;
+            _context.t1 = // 查询指标值
+            topo.serverApi.ciInfo.batchQueryCiInfo({
+              ciId: [],
+              codes: ["run_status", "remote_ping_status"],
+              relationId: ids.map(function (id) {
+                return {
+                  ciId: id,
+                  operation: "delete"
+                };
+              })
+            });
+            _context.next = 6;
+            return _DictCache["default"].init();
+
+          case 6:
+            _context.t2 = _context.sent;
+            _context.t3 = [_context.t1, _context.t2];
+            _context.next = 10;
+            return _context.t0.all.call(_context.t0, _context.t3);
+
+          case 10:
+            _yield$Promise$all = _context.sent;
+            ciMetricsResult = _yield$Promise$all[0];
+            console.log("getLinkRunStatus", ciMetricsResult);
+            return _context.abrupt("return", ciMetricsResult);
+
+          case 14:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return _getLinkRunStatus.apply(this, arguments);
+  }
+
+  var _useRequest = (0, _ahooks.useRequest)(getLinkRunStatus, {
+    pollingInterval: 60 * 1000,
+    pollingWhenHidden: false,
+    // debounceInterval: 200,
+    manual: true,
+    onSuccess: function onSuccess(result) {
+      setLinkRunStatus(result.map(function (item) {
+        return {
+          id: item.id,
+          runStatus: item.metrics.run_status
+        };
+      }));
+    }
+  }),
+      run = _useRequest.run;
+
+  (0, _react.useEffect)(function () {
+    if (graphLoaded) {
+      run(linkIds);
+    }
+  }, [graphLoaded, linkIds]);
+  return {
+    linkRunStatus: linkRunStatus,
+    getlinkAlarmLevels: getlinkAlarmLevels
+  };
+}

package/lib/core/hooks/useManageStatus.js

@@ -12,6 +12,7 @@ var _react = require("react");
 var _useTopoEventListener = _interopRequireDefault(require("./useTopoEventListener"));
 
 ht.Default.setImage('resource.subIcon.unMoniter', '/img/topo/alarmStatusIcon/未监控.svg');
+ht.Default.setImage('resource.link.linkbreak', '/img/topo/link-break.svg');
 /**
  * 监听监控状态推送
  * 节点、连线监控状态置灰

package/lib/core/hooks/usePolling.js

@@ -27,7 +27,7 @@ var _useCiAttributeChange = _interopRequireDefault(require("./useCiAttributeChan
 
 var _useHtDataPropertyChangeListener = _interopRequireDefault(require("./ht/useHtDataPropertyChangeListener"));
 
-var rlog = _loglevel["default"].getLogger('topo');
+var rlog = _loglevel["default"].getLogger("topo");
 /**
  * 轮询获取指标hooks
  * @param {*} props
@@ -40,15 +40,15 @@ var usePolling = function usePolling(props) {
   (0, _useCiAttributeChange["default"])({
     topo: topo
   });
-  var bizState = store.useModelState('topoBizMod');
+  var bizState = store.useModelState("topoBizMod");
   var resAndMetrics = bizState.resAndMetrics,
       pollingSwitch = bizState.pollingSwitch;
-  var displayConfig = topo.store.useModelState('displayConfig');
-  var resourceOverviewState = topo.store.useModelState('topoBaseInfoOverview');
+  var displayConfig = topo.store.useModelState("displayConfig");
+  var resourceOverviewState = topo.store.useModelState("topoBaseInfoOverview");
   var resIdsList = resAndMetrics === null || resAndMetrics === void 0 ? void 0 : resAndMetrics.resIdsList;
   /**
    * 查询拓扑图资源的属性指标
-   * 
+   *
    * @returns {array}
    */
 
@@ -56,7 +56,7 @@ var usePolling = function usePolling(props) {
     return _fetchData.apply(this, arguments);
   }
   /**
-   * 
+   *
    * @returns {{id, attributes: object[], metrics: object[]}[]} 属性和指标
    */
 
@@ -72,7 +72,7 @@ var usePolling = function usePolling(props) {
               var ipv6 = data.attributeMap.ipv6_address;
 
               if (!ipv6 && data.attributeMap.ipv6_address_list) {
-                ipv6 = (data.attributeMap.ipv6_address_list || '').split(',')[0];
+                ipv6 = (data.attributeMap.ipv6_address_list || "").split(",")[0];
               }
 
               return (0, _extends2["default"])({}, data, {
@@ -104,9 +104,62 @@ var usePolling = function usePolling(props) {
               // 合并属性、指标
               var _topo$dataModel$getDa = topo.dataModel.getData(),
                   nodes = _topo$dataModel$getDa.nodes,
-                  links = _topo$dataModel$getDa.links;
-
-              return [].concat(nodes, links).filter(function (item) {
+                  links = _topo$dataModel$getDa.links; // console.log('fetchData-mergeData',ciMetricsResult, nodes, links)
+              // 判断通断状态
+
+
+              var breakLinks = links.filter(function (item) {
+                return item.ciType === "network_link";
+              }).map(function (link) {
+                console.log("fetchData-mergeData", link);
+                var breakFlag = false;
+                ciMetricsResult.forEach(function (item) {
+                  if (item.id === link.id) {
+                    if (item.metrics.hasOwnProperty("run_status")) {
+                      if (item.metrics.run_status !== "1") {
+                        breakFlag = true;
+                      }
+                    }
+
+                    if (link.attributes["network_link.is_crucial"] && item.metrics.hasOwnProperty("remote_ping_status")) {
+                      if (item.metrics.remote_ping_status !== "1") {
+                        breakFlag = true;
+                      }
+                    }
+                  }
+                });
+                var element = topo.getDataModel().getDataByTag(link.id);
+
+                if (!element) {
+                  return;
+                }
+
+                if (breakFlag) {
+                  console.log("link.setNodeStyleIcon-breakFlag", element);
+                  topo.getHtTopo().setNodeStyleIcon(element, {
+                    styleIcon: "linkbreak",
+                    position: 17,
+                    icon: "resource.link.linkbreak"
+                  });
+                  topo.dataModel.updateData([(0, _extends2["default"])({}, link, {
+                    breakState: true
+                  })]);
+                  element === null || element === void 0 ? void 0 : element.s("edge.color", "#C9CED2");
+                  return link.id; //element.a('linkbreak',true);
+                } else {
+                  // 恢复状态
+                  element.removeStyleIcon("linkbreak");
+                  topo.dataModel.updateData([(0, _extends2["default"])({}, link, {
+                    breakState: false
+                  })]);
+                  element === null || element === void 0 ? void 0 : element.a('linkbreak', false);
+                  return undefined; // topo.getHtTopo().setNodeStyleIcon(element, { styleIcon: 'linkbreak',position: 17, icon: 'resource.link.linkbreak' });
+                }
+              });
+              console.log('link-break', breakLinks, links);
+              return [].concat(nodes, links.filter(function (link) {
+                return !breakLinks.includes(link.id);
+              })).filter(function (item) {
                 return !!item.ciType;
               }).map(function (ciData) {
                 var resultData = (0, _extends2["default"])({}, ciData, {
@@ -125,7 +178,7 @@ var usePolling = function usePolling(props) {
               });
             };
 
-            _topo$store$getModelS = topo.store.getModelState('topoBizMod').resAndMetrics, resIdsList = _topo$store$getModelS.resIdsList, nodeIdsList = _topo$store$getModelS.nodeIdsList; // rlog.debug('根据ci的id获取属性的值-getCiArrByIds', resIdsList, metrics);
+            _topo$store$getModelS = topo.store.getModelState("topoBizMod").resAndMetrics, resIdsList = _topo$store$getModelS.resIdsList, nodeIdsList = _topo$store$getModelS.nodeIdsList; // rlog.debug('根据ci的id获取属性的值-getCiArrByIds', resIdsList, metrics);
             // 无资源，不查询
 
             if (resIdsList.length) {
@@ -140,7 +193,8 @@ var usePolling = function usePolling(props) {
             codes = topo.attributeMetricDisplay.getResourceMetricCodes();
             param = {
               ciId: nodeIdsList,
-              codes: codes,
+              codes: [].concat(codes, ["run_status", "remote_ping_status"]),
+              // 判断链路通断状态
               // 过滤掉不需要查询的
               relationId: topo.attributeMetricDisplay.getEdges().map(function (edge) {
                 return {
@@ -230,7 +284,7 @@ var usePolling = function usePolling(props) {
 
   (0, _react.useEffect)(function () {
     if (topo.options.enableDefaultMetricLoader) {
-      rlog.debug('usePolling.useEffect: 开始轮询', {
+      rlog.debug("usePolling.useEffect: 开始轮询", {
         pollingSwitch: pollingSwitch,
         resIdsList: resIdsList,
         resourceOverviewState: resourceOverviewState,
@@ -241,16 +295,16 @@ var usePolling = function usePolling(props) {
 
     return function () {
       if (loading) {
-        rlog.debug('usePolling.useEffect: 结束轮询', resAndMetrics);
+        rlog.debug("usePolling.useEffect: 结束轮询", resAndMetrics);
         stopPoll();
       }
     };
   }, [pollingSwitch, resIdsList, displayConfig, resourceOverviewState.id, resourceOverviewState.metricCodes]); // 属性变更监听更新
 
-  (0, _componentRiilEventEmitter.useCbbEventListener)('topo', {
-    name: 'topo',
+  (0, _componentRiilEventEmitter.useCbbEventListener)("topo", {
+    name: "topo",
     onMessage: function onMessage(message) {
-      if (message.type === 'attribute') {
+      if (message.type === "attribute") {
         var data = message.data;
       }
     }
@@ -261,8 +315,8 @@ var usePolling = function usePolling(props) {
     onChange: function onChange(e) {
       var property = e.property,
           data = e.data;
-      var isGroupExpandedChanged = data instanceof ht.Group && property === 'expanded';
-      var isEdgeExpandedChanged = data instanceof ht.Edge && property === 'edge.expanded';
+      var isGroupExpandedChanged = data instanceof ht.Group && property === "expanded";
+      var isEdgeExpandedChanged = data instanceof ht.Edge && property === "edge.expanded";
 
       if (isGroupExpandedChanged || isEdgeExpandedChanged) {
         topo.attributeMetricDisplay.updateTagsTips();

package/lib/core/models/TopoApp.js

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

package/lib/core/models/utils/linkUtils.js

@@ -81,6 +81,7 @@ function mergeLinksData(links, linkCis, nodes, ciMap, interfaceDoc) {
     var attributes = (0, _extends2["default"])({}, linkCi === null || linkCi === void 0 ? void 0 : linkCi.attributes); // 翻译
 
     return (0, _extends2["default"])({}, link, {
+      breakState: false,
       attributes: (0, _extends2["default"])({}, attributes, {
         // 源/目的设备
         "network_link.source_device_id_object": {

package/lib/core/store/models/topoMod.js

@@ -415,7 +415,8 @@ function _default(topoApp) {
                     globalConfig: extraConfig,
                     type: (_result$config = result.config) === null || _result$config === void 0 ? void 0 : _result$config.showType,
                     topoData: topoData,
-                    resAndMetrics: resAndMetrics
+                    resAndMetrics: resAndMetrics,
+                    loading: false
                   });
 
                 case 47:
@@ -447,11 +448,7 @@ function _default(topoApp) {
 
                   topoApp.options.onLoad();
 
-                  _this3.update({
-                    loading: false
-                  });
-
-                case 62:
+                case 61:
                 case "end":
                   return _context4.stop();
               }

package/lib/core/utils/edgeUtil.js

@@ -53,7 +53,7 @@ var updateEdgeExpanded = function updateEdgeExpanded(topo) {
 
     _rlog["default"].debug("updateEdgeExpanded 折叠");
   } else {
-    htTopo.toggleAllEdgeGroups(true);
+    //htTopo.toggleAllEdgeGroups(true);
     (0, _linkUtils.showLinkByConfig)({
       topo: topo,
       showType: expandAllEdges,

package/lib/core/utils/graphLinkUtil.js

@@ -16,6 +16,7 @@ function fixLink(topo) {
   edges.forEach(function (edge) {
     var source = edge.getSource();
     var target = edge.getTarget();
+    console.log('fixLink', edge, source, target);
     var linkData = linkDatas.find(function (data) {
       return data.id === edge.getTag();
     }); // TODO 判断两端互相切换

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riil-frontend/component-topology",
-  "version": "13.0.0-dev.15",
+  "version": "13.0.0-dev.17",
   "description": "拓扑",
   "scripts": {
     "start": "build-scripts start",
@@ -123,6 +123,6 @@
     "access": "public"
   },
   "license": "MIT",
-  "homepage": "https://unpkg.com/@riil-frontend/component-topology@13.0.0-dev.15/build/index.html",
+  "homepage": "https://unpkg.com/@riil-frontend/component-topology@13.0.0-dev.17/build/index.html",
   "gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
 }