@riil-frontend/component-topology 4.0.0-beta.9 → 4.0.2

package/es/core/viewer/components/titlebar/BasicTools.js

@@ -5,6 +5,7 @@ import EditButton from "./widgets/EditButton";
 import NodesDragSwitch from "./widgets/NodesDragSwitch";
 import AlarmListShowButton from "./widgets/AlarmListShowButton";
 import SettingButton from "./widgets/SettingButtonWidget";
+import useEventData from "../../../../hooks/useEventData";
 export default function BasicTools(props) {
   var topo = props.topo,
       _props$showEditButton = props.showEditButton,
@@ -15,8 +16,10 @@ export default function BasicTools(props) {
       alarmState = _topo$store$useModel[0],
       alarmDispatchers = _topo$store$useModel[1];
 
-  var alarmPanelIsOpen = alarmState.alarmPanelIsOpen,
-      alarmData = alarmState.alarmData;
+  var alarmPanelIsOpen = alarmState.alarmPanelIsOpen;
+  var alarmData = useEventData({
+    topo: topo
+  });
   return /*#__PURE__*/React.createElement(_Box, {
     direction: "row",
     spacing: 8

package/es/core/viewer/components/titlebar/widgets/NodesDragSwitch.js

@@ -47,9 +47,11 @@ export default function NodesDragSwitch(props) {
 
     topo.getGraphView().setMovableFunc(function (data) {
       return !newLock; // self._graphView.dm().sm().getSelection().size()===1 && !(data instanceof ht.Grid);
-    }); // 开锁状态下禁用悬停展示悬浮框
+    }); // 开锁状态下禁用悬停展示悬浮框，TODO 待迁移走独立
 
-    topo.attributeMetricDisplay.updateTagsTips();
+    topo.attributeMetricDisplay.updateTagsTips(); // 开锁状态可移动链路指标位置
+
+    topo.getHtTopo().setEdgeIndicatorCanDrag(!newLock);
   };
 
   var title = lock ? '解锁后可进行拓扑图标的移动' : '锁上后禁用图标移动';

package/es/hooks/useAlarm.js

@@ -14,6 +14,63 @@ export default function useAlarm(options) {
   useGraphAlarmDisplay({
     topo: topo
   });
+
+  var handleRiskData = function handleRiskData(receivedData) {
+    var _risks;
+
+    // 非在活状态：
+    // 已修复 recovered
+    // 已关闭 closed
+    var prevRisks = topo.store.getModelState('topoAlarm').risks;
+
+    var isLiveRisk = function isLiveRisk(data) {
+      return ['recovered', 'closed'].indexOf(data.status) === -1;
+    };
+
+    var hasCiPermission = function hasCiPermission(data) {
+      var _data$resourceId;
+
+      var ciId = (_data$resourceId = data.resourceId) !== null && _data$resourceId !== void 0 ? _data$resourceId : data.ciId;
+      var ci = topo.dataModel.getDataById(ciId);
+      return ci && ci.operation;
+    }; // 合并
+
+
+    var risks = prevRisks.map(function (risk) {
+      var newRisk = receivedData.find(function (item) {
+        return item.id === risk.id;
+      });
+      return newRisk || risk;
+    }); // 新的
+
+    var addRisks = receivedData.filter(function (risk) {
+      return !prevRisks.find(function (item) {
+        return item.id === risk.id;
+      });
+    }).filter(hasCiPermission);
+
+    (_risks = risks).push.apply(_risks, addRisks); // 过滤掉无权限、非在活的
+
+
+    risks = risks.filter(isLiveRisk).filter(hasCiPermission).sort(function (a, b) {
+      return a.executeTime - b.executeTime;
+    });
+    rlog.debug('更新风险', {
+      prevRisks: prevRisks,
+      receivedData: receivedData,
+      risks: risks
+    });
+    topo.store.getModelDispatchers('topoAlarm').update({
+      risks: risks
+    });
+
+    if (addRisks.length) {
+      topo.alarm.updateState({
+        alarmPanelIsOpen: true
+      });
+    }
+  };
+
   useCbbEventListener("topo", {
     name: "topo",
     onMessage: function onMessage(data) {
@@ -21,6 +78,8 @@ export default function useAlarm(options) {
 
       if (data.type === "alarm") {
         topo.alarm.handleAlarmEvent(data.data);
+      } else if (data.type === "risk") {
+        handleRiskData(data.data);
       }
     }
   });

package/es/hooks/useEventData.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/extends";
+export default function useEventData(props) {
+  var topo = props.topo;
+  var topoDatas = topo.dataModel.useDatas();
+
+  var _topo$store$useModelS = topo.store.useModelState('topoAlarm'),
+      risks = _topo$store$useModelS.risks,
+      alarmData = _topo$store$useModelS.alarmData;
+
+  var data = [].concat((alarmData || []).map(function (item) {
+    return _extends({}, item, {
+      eventType: 'alarm'
+    });
+  }), (risks || []).map(function (item) {
+    return _extends({}, item, {
+      eventType: 'risk'
+    });
+  }));
+  return data;
+}

package/es/hooks/useGraphAlarmDisplay.js

@@ -1,12 +1,40 @@
 import { useEffect } from "react";
 import rlog from "@riil-frontend/component-topology-utils/es/rlog";
 import { getElements } from "../utils/htElementUtils";
+import { removeManageStatus, showManageStatus } from "../utils/showGraphManageStatusUtil";
+
+function getCiAlarmLevels(alarmList, risks) {
+  var ciIdLevelMap = {};
+  [].concat(alarmList, risks.map(function (item) {
+    var _item$resourceId;
+
+    return {
+      id: (_item$resourceId = item.resourceId) !== null && _item$resourceId !== void 0 ? _item$resourceId : item.ciId,
+      level: 5
+    };
+  })).forEach(function (item) {
+    var level = ciIdLevelMap[item.id]; // 优先显示高等级告警。值小的等级高
+
+    if (!level || item.level < level) {
+      level = item.level;
+    }
+
+    ciIdLevelMap[item.id] = level;
+  });
+  return Object.keys(ciIdLevelMap).map(function (id) {
+    return {
+      id: id,
+      level: ciIdLevelMap[id]
+    };
+  });
+}
 /**
  * 告警显示到ht拓扑
  * 
  * @param {*} options 
  */
 
+
 export default function useGraphAlarmDisplay(options) {
   var topo = options.topo;
   var store = topo.store;
@@ -15,30 +43,47 @@ export default function useGraphAlarmDisplay(options) {
       topoState = _topo$store$useModel[0],
       topoDispatchers = _topo$store$useModel[1];
 
-  var graphLoaded = topoState.graphLoaded;
+  var graphLoaded = topoState.graphLoaded,
+      viewState = topoState.viewState;
+  var isEditMode = viewState === 'edit';
 
   var _topo$alarm$useState = topo.alarm.useState(),
       alarmIsOpened = _topo$alarm$useState.alarmIsOpened,
-      alarmList = _topo$alarm$useState.alarmList;
+      alarmList = _topo$alarm$useState.alarmList,
+      risks = _topo$alarm$useState.risks;
 
   var resources = topo.dataModel.useCis();
-  useEffect(function () {
-    var showAlarm = function showAlarm() {
-      if (!graphLoaded || !alarmList || !alarmIsOpened) {
-        return;
+
+  function getCisEventLevel() {
+    return getCiAlarmLevels(alarmList || [], risks).filter(function (alarm) {
+      var resource = resources.find(function (item) {
+        return item.id === alarm.id;
+      });
+
+      if (!resource) {
+        return false;
       }
 
-      var finalAlarms = alarmList.filter(function (alarm) {
-        var resource = resources.find(function (item) {
-          return item.id === alarm.id;
-        }); // 未监控不显示告警
+      return true;
+    });
+  }
 
-        if (!resource || resource.manageStatus === 0) {
-          return false;
-        }
+  useEffect(function () {
+    showAlarm();
+    showManageStatus({
+      topo: topo,
+      resources: resources,
+      isEditMode: isEditMode,
+      graphLoaded: graphLoaded,
+      cisEventLevel: getCisEventLevel()
+    });
 
-        return true;
-      }); // 将告警级别放入ht元素，便于测试
+    function showAlarm() {
+      if (!graphLoaded || !alarmIsOpened || isEditMode) {
+        return;
+      }
+
+      var finalAlarms = getCisEventLevel(); // 将告警级别放入ht元素，便于测试
 
       getElements(topo.getDataModel()).filter(function (item) {
         return !!item.getTag();
@@ -52,8 +97,13 @@ export default function useGraphAlarmDisplay(options) {
       }); // 更新到ht拓扑
 
       topo.view.loadAlarm(finalAlarms);
-    };
+    }
 
-    showAlarm();
-  }, [graphLoaded, alarmIsOpened, alarmList, resources]);
+    return function () {
+      removeManageStatus({
+        topo: topo,
+        resources: resources
+      });
+    };
+  }, [isEditMode, graphLoaded, resources, alarmIsOpened, alarmList, risks]);
 }

package/es/hooks/useManageStatus.js

@@ -57,38 +57,4 @@ export default function useManageStatus(props) {
       }
     }
   });
-  useEffect(function () {
-    // 首次加载和监控状态变化后，更新节点和连线置灰状态
-    if (!isEditMode && graphLoaded) {
-      resources.forEach(function (resource) {
-        var type = resource.type,
-            id = resource.id,
-            manageStatus = resource.manageStatus,
-            permission = resource.permission;
-        var isNotMonite = manageStatus === 0;
-        var readable = !!(permission !== null && permission !== void 0 && permission.readable);
-        var showNotMoniteStatus = isNotMonite && readable;
-        var element = topo.getDataModel().getDataByTag(id);
-        if (!element) return;
-
-        if (type === 'node') {
-          try {
-            if (showNotMoniteStatus) {
-              topo.getHtTopo().setNodeStyleIcon(element, {
-                styleIcon: 'unMoniter',
-                icon: 'resource.subIcon.unMoniter'
-              });
-            } else {
-              element.removeStyleIcon('unMoniter');
-            }
-          } catch (error) {
-            rlog.error('设置监控图标异常', element, error);
-          } // setElementRuntimeStyle(element, 'opacity', showNotMoniteStatus ? 0.3 : undefined)
-
-        } else {
-          setElementRuntimeStyle(element, 'color', showNotMoniteStatus ? '#C9CED2' : undefined);
-        }
-      });
-    }
-  }, [isEditMode, graphLoaded, resources]);
 }

package/es/hooks/useResourceConfig.js

@@ -5,7 +5,8 @@ import { useMemo, useState, useEffect } from 'react';
 import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 import { DEFAULT_GROUP } from "../utils/template";
 import ResourceConfigUtil from "../utils/ResourceConfigUtil";
-import { getEdges, getNodes } from "../utils/htElementUtils";
+import { getEdges, getElements, getNodes } from "../utils/htElementUtils";
+import { getAllEdgeResourceIds as _getAllEdgeResourceIds, isResourceNodeElement } from "../utils/htElementDataUtil";
 export default function (props) {
   var topo = props.topo;
   var store = topo.store;
@@ -262,17 +263,7 @@ export default function (props) {
   }
 
   var getAllNodeResourceIds = function getAllNodeResourceIds() {
-    return getNodes(topo.getDataModel()).filter(function (node) {
-      return !!node.getTag();
-    }).map(function (node) {
-      return node.getTag();
-    });
-  };
-
-  var getAllEdgeResourceIds = function getAllEdgeResourceIds() {
-    return getEdges(topo.getDataModel()).filter(function (node) {
-      return !!node.getTag();
-    }).map(function (node) {
+    return getElements(topo.getDataModel()).filter(isResourceNodeElement).map(function (node) {
       return node.getTag();
     });
   };
@@ -282,7 +273,9 @@ export default function (props) {
     getConfig: getConfig,
     updateConfig: updateConfig,
     getAllNodeResourceIds: getAllNodeResourceIds,
-    getAllEdgeResourceIds: getAllEdgeResourceIds,
+    getAllEdgeResourceIds: function getAllEdgeResourceIds() {
+      return _getAllEdgeResourceIds(topo.getDataModel());
+    },
     getViewResources: getViewResources,
     getGroups: getGroups,
     getGroupConfigByElement: ResourceConfigUtil.getGroupConfigByElement,

package/es/hooks/useSelection.js

@@ -20,10 +20,8 @@ function useSelection(props) {
       var selectionModel = topo.getSelectionModel();
       var htSelection = selectionModel.getSelection().getArray(); // TODO 对比变更更新
 
-      var selectionArr = htSelection.map(getElementData);
-      rlog.info("updateSelection", selectionArr.map(function (element) {
-        return element.id;
-      }));
+      var selectionArr = htSelection.map(getElementData); // rlog.info("updateSelection", selectionArr.map((element) => element.id));
+
       setSelection(selectionArr);
     } catch (e) {
       rlog.error("updateSelection error", e);

package/es/hooks/useTopoEdit.js

@@ -9,10 +9,12 @@ import { TopoEvent } from "@riil-frontend/component-topology-graph";
 import { filterElementsByNodeId } from "../utils/format";
 import { TPL_BLANK, TPL_TREE } from "../utils/template";
 import topoPermissonUtil from "../utils/topoPermissionUtil";
-import { getElements, getGroupChildrenNodes, getGroupElementByTag, isEdge, isExistedElement, isGroup, isLayer, isNode } from "../utils/htElementUtils";
+import { getElements, getGroupElementByTag, isEdge, isExistedElement, isGroup, isLayer, isNode } from "../utils/htElementUtils";
 import useResourceConfig from "./useResourceConfig";
 import useGroupAddResource from "./useGroupAddResource";
 import { findGroupChildren } from "../utils/topoData";
+import { getGroupChildrenResourceElements } from "../utils/htElementDataUtil";
+import { isClusterHtElement, isClusterMemberHtElement } from "../utils/clusterUtil";
 
 var useTopoEdit = function useTopoEdit(params) {
   var topo = params.topo,
@@ -108,11 +110,10 @@ var useTopoEdit = function useTopoEdit(params) {
     if (!isLayerTopo && config.layers.length) {
       topoDispatchers.setTopoType(TPL_TREE);
     } // 更新配置
+    // resourceConfig.updateConfig(config);
+    // 更新配置对应的资源、链路
+    // editDispatchers.fetchDataByConfig();
 
-
-    resourceConfig.updateConfig(config); // 更新配置对应的资源、链路
-
-    editDispatchers.fetchDataByConfig();
   };
 
   var deleteLayer = function deleteLayer(layerElement) {
@@ -194,7 +195,7 @@ var useTopoEdit = function useTopoEdit(params) {
       return;
     }
 
-    if (!getGroupChildrenNodes(group).length) {
+    if (!getGroupChildrenResourceElements(group).length || isClusterHtElement(group)) {
       doDelete();
       return;
     } // 有子节点时需要确认
@@ -295,6 +296,11 @@ var useTopoEdit = function useTopoEdit(params) {
   var handleDeleteNode = function handleDeleteNode(element) {
     var _topo$options$editor;
 
+    // 集群内成员禁用删除
+    if (isClusterMemberHtElement(element)) {
+      return;
+    }
+
     var data = element.getAttrObject(); // eslint-disable-next-line no-case-declarations
 
     var nodeDeleteable = params.nodeDeleteable || ((_topo$options$editor = topo.options.editor) === null || _topo$options$editor === void 0 ? void 0 : _topo$options$editor.nodeDeleteable);
@@ -390,8 +396,14 @@ var useTopoEdit = function useTopoEdit(params) {
       }
     }
   };
+  /**
+   * 获得未存在的连线元素
+   * @param {*} elements 
+   * @returns 
+   */
+
 
-  function findNewLinkElements(elements) {
+  function findUNExistedLinkElements(elements) {
     var existedLinkIds = resourceConfig.getAllEdgeResourceIds();
     var newLinkElements = elements.filter(function (element) {
       return (element.type === "link" || element.type === "linkGroup") && existedLinkIds.indexOf(element.id) === -1;
@@ -429,7 +441,7 @@ var useTopoEdit = function useTopoEdit(params) {
               elements = _yield$editDispatcher2.elements;
               // 区域里的子区域及子区域的节点、新增的链路
               nodeElements = findGroupChildren(elements, group);
-              newLinkElements = findNewLinkElements(elements);
+              newLinkElements = findUNExistedLinkElements(elements);
               updateElements = [].concat(nodeElements, newLinkElements);
 
               if (updateElements.length) {
@@ -517,7 +529,7 @@ var useTopoEdit = function useTopoEdit(params) {
 
             case 7:
               _yield$editDispatcher3 = _context11.sent;
-              elements = _yield$editDispatcher3.topoDataTrans;
+              elements = _yield$editDispatcher3.elements;
               saveBind(TopoEvent.DATA_TYPE_RESOURCE_COMBO, elements); // 临时放这里，仅拓扑中心有
 
               if (topo.linkDynamicStyleExecutor) {
@@ -540,7 +552,7 @@ var useTopoEdit = function useTopoEdit(params) {
 
   function _addLayerResources() {
     _addLayerResources = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12(group, newResourceIds) {
-      var _yield$editDispatcher4, elements, newElements, data;
+      var _yield$editDispatcher4, elements, data;
 
       return _regeneratorRuntime.wrap(function _callee12$(_context12) {
         while (1) {
@@ -556,32 +568,29 @@ var useTopoEdit = function useTopoEdit(params) {
             case 4:
               _yield$editDispatcher4 = _context12.sent;
               elements = _yield$editDispatcher4.elements;
-              newElements = elements.filter(function (element) {
-                return !isExistedElement(topo.getDataModel(), element);
-              }); // 过滤出新增的资源和链路
-
+              // 过滤出新增的资源和链路
               data = {
-                groups: newElements.filter(function (ele) {
+                groups: elements.filter(function (ele) {
                   return ele.type === 'group';
                 }),
-                nodes: newElements.filter(function (ele) {
+                nodes: elements.filter(function (ele) {
                   return ele.type === 'node';
                 }),
-                lines: newElements.filter(function (ele) {
+                lines: elements.filter(function (ele) {
                   return ele.type === 'link';
                 })
               }; // 添加到分层
 
-              _context12.next = 10;
-              return topo.addElements(data);
+              _context12.next = 9;
+              return topo.updateElements(data);
 
-            case 10:
+            case 9:
               // 临时放这里，仅拓扑中心有
               if (topo.linkDynamicStyleExecutor) {
                 topo.linkDynamicStyleExecutor.execute();
               }
 
-            case 11:
+            case 10:
             case "end":
               return _context12.stop();
           }
@@ -855,7 +864,7 @@ var useTopoEdit = function useTopoEdit(params) {
 
   var bindNodeResource = /*#__PURE__*/function () {
     var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8(params) {
-      var id, oldResId, newResId, node, groupElement, config, groupId, groupTag, _yield$editDispatcher, elements, nodeRelatedDatas, replaceOrAddRes;
+      var id, oldResId, newResId, node, groupElement, htTopo, config, groupId, groupTag, _yield$editDispatcher, elements, newData, newNodeElements, newLinkElements, newDatas, createElementsData, sm, dm, newElement, replaceOrAddRes;
 
       return _regeneratorRuntime.wrap(function _callee8$(_context8) {
         while (1) {
@@ -874,6 +883,7 @@ var useTopoEdit = function useTopoEdit(params) {
               node = topo.getDataModel().getDataById(id); // 节点所属容器
 
               groupElement = node.getParent();
+              htTopo = topo.getHtTopo();
               config = resourceConfig.getConfig();
 
               if (groupElement) {
@@ -898,42 +908,85 @@ var useTopoEdit = function useTopoEdit(params) {
                 config.resources = replaceOrAddRes(config.resources, oldResId, newResId);
               }
 
-              _context8.next = 9;
+              _context8.next = 10;
               return resourceConfig.updateConfig(config);
 
-            case 9:
-              _context8.next = 11;
+            case 10:
+              _context8.next = 12;
               return editDispatchers.fetchDataByConfig();
 
-            case 11:
+            case 12:
               _yield$editDispatcher = _context8.sent;
-              elements = _yield$editDispatcher.topoDataTrans;
-              // 过滤出关联的节点和连线，通知ht更新
-              nodeRelatedDatas = filterElementsByNodeId(elements, newResId);
+              elements = _yield$editDispatcher.elements;
+              newData = elements.find(function (item) {
+                return item.id === newResId;
+              });
+
+              if (newData.type === 'group') {
+                newNodeElements = [newData].concat(findGroupChildren(elements, newData));
+              } else {
+                newNodeElements = [newData];
+              }
+
+              newLinkElements = findUNExistedLinkElements(elements); // 过滤出关联的节点和连线，通知ht更新
+              // const newDatas = filterElementsByNodeId(elements, newResId);
 
-              if (nodeRelatedDatas.length) {
-                _context8.next = 17;
+              newDatas = [].concat(newNodeElements, newLinkElements);
+
+              if (newDatas.length) {
+                _context8.next = 22;
                 break;
               }
 
               _Message.error("关联资源失败");
 
+              rlog.warn("关联资源失败");
               return _context8.abrupt("return", false);
 
-            case 17:
-              saveBind(TopoEvent.DATA_TYPE_RESOURCE_SINGLE, nodeRelatedDatas);
-              node.a("customName", null); // 删除关联在节点上的出口链路
+            case 22:
+              createElementsData = {
+                groups: newDatas.filter(function (item) {
+                  return item.type === 'group';
+                }),
+                nodes: newDatas.filter(function (item) {
+                  return item.type === 'node';
+                }),
+                links: newDatas.filter(function (item) {
+                  return item.type === 'link';
+                }),
+                linkGroups: newDatas.filter(function (item) {
+                  return item.type === 'linkGroup';
+                })
+              };
+              rlog.debug('批量创建元素', newDatas, createElementsData);
+              htTopo.createElements(createElementsData);
+              sm = htTopo.getGraphView().sm();
+              dm = htTopo.getGraphView().dm(); // 恢复图标、大小、位置
 
-              _context8.next = 21;
+              newElement = dm.getDataByTag(newData.id);
+
+              if (newElement) {
+                newElement.setSize(node.getSize());
+                newElement.setPosition(node.getPosition());
+                newElement.setImage(node.getImage());
+              }
+
+              sm.setSelection([newElement]); // 移除旧节点
+
+              dm.remove(node); // saveBind(TopoEvent.DATA_TYPE_RESOURCE_SINGLE, newDatas);
+              // node.a("customName", null);
+              // 删除关联在节点上的出口链路
+
+              _context8.next = 33;
               return deleteExLink(node);
 
-            case 21:
+            case 33:
               // 临时放这里，仅拓扑中心有
               if (topo.linkDynamicStyleExecutor) {
                 topo.linkDynamicStyleExecutor.execute();
               }
 
-            case 22:
+            case 34:
             case "end":
               return _context8.stop();
           }

package/es/models/topoAlarm.js

@@ -13,13 +13,15 @@ export default function (topo) {
   return {
     // 定义 model 的初始 state
     state: {
-      currentTopoId: undefined,
+      events: [],
       alarmOpening: false,
       alarmIsOpened: true,
       alarmRecord: [],
       alarmDoc: {},
       alarmDatas: [],
-      alarmPanelIsOpen: false
+      alarmPanelIsOpen: false,
+      risks: [],
+      currentTopoId: undefined
     },
     // 定义改变该模型状态的纯函数
     reducers: {
@@ -40,7 +42,9 @@ export default function (topo) {
                   case 0:
                     _this.update({
                       alarmDoc: {},
-                      alarmRecord: []
+                      alarmList: [],
+                      alarmRecord: [],
+                      risks: []
                     });
 
                     return _context.abrupt("return", "resetAlarmDoc Over");
@@ -181,11 +185,6 @@ export default function (topo) {
                         return null;
                       }
                     }));
-                    _context2.next = 11;
-                    return _this2.filterElementAlarmsByManageStatus(alarmlist);
-
-                  case 11:
-                    alarmlist = _context2.sent;
                     eqFlag = _.isEqual(_.sortBy(alarmlist), _.sortBy(currentAlarmList));
                     rlog.debug("告警归档结束", eqFlag, currentAlarmList, alarmlist, doc, record);
 
@@ -200,7 +199,7 @@ export default function (topo) {
                       alarmlist: alarmlist
                     });
 
-                  case 16:
+                  case 13:
                   case "end":
                     return _context2.stop();
                 }