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

package/es/core/components/AlarmListPanel/index.js

@@ -18,6 +18,7 @@ function AlarmListPanel(props, ref) {
   var alarmListProps = useAlarmList({
     alarmData: alarmData
   });
+  var alarmLink = topo.isCMPTopo ? '/default/cmp/gradAlarm' : '/default/alarmCenter/alarmList';
   return /*#__PURE__*/React.createElement("div", {
     className: styles.AlarmListPanel,
     id: "AlarmListPanel"
@@ -35,7 +36,7 @@ function AlarmListPanel(props, ref) {
       onClick: onClose
     }, /*#__PURE__*/React.createElement(Link, {
       className: styles.listTitleLink,
-      to: "/default/alarmCenter/alarmList"
+      to: alarmLink
     }, "\u67E5\u770B\u6240\u6709\u544A\u8B66"))),
     extra:
     /*#__PURE__*/

package/es/core/hooks/useGraphAlarmDisplay.js

@@ -3,11 +3,12 @@ import rlog from "@riil-frontend/component-topology-utils/es/rlog";
 import { getElements } from "../../utils/htElementUtils";
 import { removeManageStatus, showManageStatus } from "../utils/showGraphManageStatusUtil";
 import useCmpLinkAlarm from "./useCmpLinkAlarm";
+import useLinkAlarmDisplay from "./useLinkAlarmDisplay";
 /**
  * 获取ci的最高告警级别
- * @param {Array} alarmList 
- * @param {*} risks 
- * @returns 
+ * @param {Array} alarmList
+ * @param {*} risks
+ * @returns
  */
 
 function getCiAlarmLevelMap(alarmList) {
@@ -40,9 +41,9 @@ function getGraphCiElementAlarmLevels(resources, alarmList) {
 }
 /**
  * 获得关联拓扑节点告警级别
- * @param {*} topo 
- * @param {*} relateTopoAlarm 
- * @returns 
+ * @param {*} topo
+ * @param {*} relateTopoAlarm
+ * @returns
  */
 
 
@@ -50,7 +51,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) {
@@ -70,18 +71,18 @@ function getRelateTopoNodeAlarmLevels(topo, relateTopoAlarm) {
 function getGraphElementAlarmLevels(resources) {}
 /**
  * 告警显示到ht拓扑
- * 
- * @param {*} options 
+ *
+ * @param {*} options
  */
 
 
 export default 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,
@@ -99,12 +100,28 @@ export default function useGraphAlarmDisplay(options) {
       cmpLinkRunStatus = _useCmpLinkAlarm.cmpLinkRunStatus,
       addCmpLinkOfflineStatusForDisplayLineColor = _useCmpLinkAlarm.addCmpLinkOfflineStatusForDisplayLineColor;
 
-  var resources = useMemo(function () {
+  var cmpRes = useMemo(function () {
     return addCmpLinkOfflineStatusForDisplayLineColor(oldResources, cmpLinkRunStatus);
-  }, [oldResources, cmpLinkRunStatus]); // ci告警级别
+  }, [oldResources, cmpLinkRunStatus]); // 拓扑链路特殊处理
+
+  var _useLinkAlarmDisplay = useLinkAlarmDisplay({
+    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 = 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 {
@@ -124,6 +141,16 @@ export default 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;
@@ -150,17 +177,17 @@ export default 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.debug('推送告警 => ht', {
+      rlog.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/es/core/hooks/useLinkAlarmDisplay.js

@@ -0,0 +1,163 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { useEffect, useState, useMemo } from "react";
+import { useRequest } from "ahooks";
+import _ from "lodash";
+import DictCache from "../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 _.intersection(linkDevDoc[item], alarms).length > 0;
+  }).map(function (item) {
+    return {
+      id: item,
+      level: 1
+    };
+  });
+  ;
+}
+/**
+ * 处理链路显示
+ * @param {*} props
+ * @returns
+ */
+
+
+export default function useLinkAlarmDisplay(props) {
+  var topo = props.topo,
+      resources = props.resources,
+      graphLoaded = props.graphLoaded,
+      alarmList = props.alarmList;
+
+  var _useState = useState(getLinkDev(resources).linkIds),
+      linkIds = _useState[0],
+      setLinkIds = _useState[1];
+
+  var _useState2 = useState([]),
+      linkRunStatus = _useState2[0],
+      setLinkRunStatus = _useState2[1];
+
+  var _useState3 = useState(getLinkDev(resources).linkDevDoc),
+      linkDev = _useState3[0],
+      setLinkDev = _useState3[1];
+
+  console.log("alarmList----------sssss", alarmList);
+  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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(ids) {
+      var _yield$Promise$all, ciMetricsResult;
+
+      return _regeneratorRuntime.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.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 = 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;
+
+  useEffect(function () {
+    if (graphLoaded) {
+      run(linkIds);
+    }
+  }, [graphLoaded, linkIds]);
+  return {
+    linkRunStatus: linkRunStatus,
+    getlinkAlarmLevels: getlinkAlarmLevels
+  };
+}

package/es/core/hooks/useManageStatus.js

@@ -2,6 +2,7 @@ import { rlog } from '@riil-frontend/component-topology-utils';
 import { useEffect } from 'react';
 import useTopoEventListener from "./useTopoEventListener";
 ht.Default.setImage('resource.subIcon.unMoniter', '/img/topo/alarmStatusIcon/未监控.svg');
+ht.Default.setImage('resource.link.linkbreak', '/img/topo/link-break.svg');
 /**
  * 监听监控状态推送
  * 节点、连线监控状态置灰

package/es/core/hooks/usePolling.js

@@ -1,15 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { useEffect } from 'react';
-import { useRequest } from 'ahooks';
-import _ from 'lodash';
-import Logger from 'loglevel';
-import { useCbbEventListener } from '@riil-frontend/component-riil-event-emitter';
+import { useEffect } from "react";
+import { useRequest } from "ahooks";
+import _ from "lodash";
+import Logger from "loglevel";
+import { useCbbEventListener } from "@riil-frontend/component-riil-event-emitter";
 import DictCache from "../models/cache/DictCache";
 import useCiAttributeChange from "./useCiAttributeChange";
 import useHtDataPropertyChangeListener from "./ht/useHtDataPropertyChangeListener";
-var rlog = Logger.getLogger('topo');
+var rlog = Logger.getLogger("topo");
 /**
  * 轮询获取指标hooks
  * @param {*} props
@@ -21,15 +21,15 @@ var usePolling = function usePolling(props) {
   useCiAttributeChange({
     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}
    */
 
@@ -37,7 +37,7 @@ var usePolling = function usePolling(props) {
     return _fetchData.apply(this, arguments);
   }
   /**
-   * 
+   *
    * @returns {{id, attributes: object[], metrics: object[]}[]} 属性和指标
    */
 
@@ -53,7 +53,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 _extends({}, data, {
@@ -85,9 +85,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([_extends({}, 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([_extends({}, 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 = _extends({}, ciData, {
@@ -107,7 +160,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) {
@@ -122,7 +175,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 {
@@ -212,7 +266,7 @@ var usePolling = function usePolling(props) {
 
   useEffect(function () {
     if (topo.options.enableDefaultMetricLoader) {
-      rlog.debug('usePolling.useEffect: 开始轮询', {
+      rlog.debug("usePolling.useEffect: 开始轮询", {
         pollingSwitch: pollingSwitch,
         resIdsList: resIdsList,
         resourceOverviewState: resourceOverviewState,
@@ -223,16 +277,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]); // 属性变更监听更新
 
-  useCbbEventListener('topo', {
-    name: 'topo',
+  useCbbEventListener("topo", {
+    name: "topo",
     onMessage: function onMessage(message) {
-      if (message.type === 'attribute') {
+      if (message.type === "attribute") {
         var data = message.data;
       }
     }
@@ -243,8 +297,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/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 "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/es/core/models/utils/linkUtils.js

@@ -57,6 +57,7 @@ export function mergeLinksData(links, linkCis, nodes, ciMap, interfaceDoc) {
 
 
     return _extends({}, link, {
+      breakState: false,
       attributes: _extends({}, attributes, {
         // 源/目的设备
         "network_link.source_device_id_object": {

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

@@ -395,7 +395,8 @@ export default function (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:
@@ -425,11 +426,7 @@ export default function (topoApp) {
                   rlog.info('topoMod.initTopoData 初始化拓扑图数据完成. 耗时: ', endTime.diff(startTime, 'seconds', true));
                   topoApp.options.onLoad();
 
-                  _this3.update({
-                    loading: false
-                  });
-
-                case 62:
+                case 61:
                 case "end":
                   return _context4.stop();
               }

package/es/core/utils/edgeUtil.js

@@ -41,7 +41,7 @@ export var updateEdgeExpanded = function updateEdgeExpanded(topo) {
     htTopo.toggleAllEdgeGroups(false);
     rlog.debug("updateEdgeExpanded 折叠");
   } else {
-    htTopo.toggleAllEdgeGroups(true);
+    //htTopo.toggleAllEdgeGroups(true);
     showLinkByConfig({
       topo: topo,
       showType: expandAllEdges,

package/es/core/utils/graphLinkUtil.js

@@ -11,6 +11,7 @@ export 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/lib/core/components/AlarmListPanel/index.js

@@ -39,6 +39,7 @@ function AlarmListPanel(props, ref) {
   var alarmListProps = (0, _useAlarmList["default"])({
     alarmData: alarmData
   });
+  var alarmLink = topo.isCMPTopo ? '/default/cmp/gradAlarm' : '/default/alarmCenter/alarmList';
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _indexModule["default"].AlarmListPanel,
     id: "AlarmListPanel"
@@ -56,7 +57,7 @@ function AlarmListPanel(props, ref) {
       onClick: onClose
     }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
       className: _indexModule["default"].listTitleLink,
-      to: "/default/alarmCenter/alarmList"
+      to: alarmLink
     }, "\u67E5\u770B\u6240\u6709\u544A\u8B66"))),
     extra:
     /*#__PURE__*/