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

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

@@ -19,6 +19,8 @@ var _AlarmListShowButton = _interopRequireDefault(require("./widgets/AlarmListSh
 
 var _SettingButtonWidget = _interopRequireDefault(require("./widgets/SettingButtonWidget"));
 
+var _useEventData = _interopRequireDefault(require("../../../../hooks/useEventData"));
+
 function BasicTools(props) {
   var topo = props.topo,
       _props$showEditButton = props.showEditButton,
@@ -29,8 +31,10 @@ 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 = (0, _useEventData["default"])({
+    topo: topo
+  });
   return /*#__PURE__*/_react["default"].createElement(_box["default"], {
     direction: "row",
     spacing: 8

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

@@ -61,9 +61,11 @@ 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/lib/hooks/useAlarm.js

@@ -24,6 +24,65 @@ function useAlarm(options) {
   (0, _useGraphAlarmDisplay["default"])({
     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["default"].debug('更新风险', {
+      prevRisks: prevRisks,
+      receivedData: receivedData,
+      risks: risks
+    });
+
+    topo.store.getModelDispatchers('topoAlarm').update({
+      risks: risks
+    });
+
+    if (addRisks.length) {
+      topo.alarm.updateState({
+        alarmPanelIsOpen: true
+      });
+    }
+  };
+
   (0, _componentRiilEventEmitter.useCbbEventListener)("topo", {
     name: "topo",
     onMessage: function onMessage(data) {
@@ -31,6 +90,8 @@ function useAlarm(options) {
 
       if (data.type === "alarm") {
         topo.alarm.handleAlarmEvent(data.data);
+      } else if (data.type === "risk") {
+        handleRiskData(data.data);
       }
     }
   });

package/lib/hooks/useEventData.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = useEventData;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+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 (0, _extends2["default"])({}, item, {
+      eventType: 'alarm'
+    });
+  }), (risks || []).map(function (item) {
+    return (0, _extends2["default"])({}, item, {
+      eventType: 'risk'
+    });
+  }));
+  return data;
+}

package/lib/hooks/useGraphAlarmDisplay.js

@@ -11,11 +11,40 @@ var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-ut
 
 var _htElementUtils = require("../utils/htElementUtils");
 
+var _showGraphManageStatusUtil = require("../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 
  */
+
+
 function useGraphAlarmDisplay(options) {
   var topo = options.topo;
   var store = topo.store;
@@ -24,30 +53,47 @@ 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();
-  (0, _react.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;
-        }
+  (0, _react.useEffect)(function () {
+    showAlarm();
+    (0, _showGraphManageStatusUtil.showManageStatus)({
+      topo: topo,
+      resources: resources,
+      isEditMode: isEditMode,
+      graphLoaded: graphLoaded,
+      cisEventLevel: getCisEventLevel()
+    });
+
+    function showAlarm() {
+      if (!graphLoaded || !alarmIsOpened || isEditMode) {
+        return;
+      }
 
-        return true;
-      }); // 将告警级别放入ht元素，便于测试
+      var finalAlarms = getCisEventLevel(); // 将告警级别放入ht元素，便于测试
 
       (0, _htElementUtils.getElements)(topo.getDataModel()).filter(function (item) {
         return !!item.getTag();
@@ -61,8 +107,13 @@ function useGraphAlarmDisplay(options) {
       }); // 更新到ht拓扑
 
       topo.view.loadAlarm(finalAlarms);
-    };
+    }
 
-    showAlarm();
-  }, [graphLoaded, alarmIsOpened, alarmList, resources]);
+    return function () {
+      (0, _showGraphManageStatusUtil.removeManageStatus)({
+        topo: topo,
+        resources: resources
+      });
+    };
+  }, [isEditMode, graphLoaded, resources, alarmIsOpened, alarmList, risks]);
 }

package/lib/hooks/useManageStatus.js

@@ -68,38 +68,4 @@ function useManageStatus(props) {
       }
     }
   });
-  (0, _react.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["default"].error('设置监控图标异常', element, error);
-          } // setElementRuntimeStyle(element, 'opacity', showNotMoniteStatus ? 0.3 : undefined)
-
-        } else {
-          (0, _htElementUtils.setElementRuntimeStyle)(element, 'color', showNotMoniteStatus ? '#C9CED2' : undefined);
-        }
-      });
-    }
-  }, [isEditMode, graphLoaded, resources]);
 }

package/lib/hooks/useResourceConfig.js

@@ -21,6 +21,8 @@ var _ResourceConfigUtil = _interopRequireDefault(require("../utils/ResourceConfi
 
 var _htElementUtils = require("../utils/htElementUtils");
 
+var _htElementDataUtil = require("../utils/htElementDataUtil");
+
 function _default(props) {
   var topo = props.topo;
   var store = topo.store;
@@ -277,17 +279,7 @@ function _default(props) {
   }
 
   var getAllNodeResourceIds = function getAllNodeResourceIds() {
-    return (0, _htElementUtils.getNodes)(topo.getDataModel()).filter(function (node) {
-      return !!node.getTag();
-    }).map(function (node) {
-      return node.getTag();
-    });
-  };
-
-  var getAllEdgeResourceIds = function getAllEdgeResourceIds() {
-    return (0, _htElementUtils.getEdges)(topo.getDataModel()).filter(function (node) {
-      return !!node.getTag();
-    }).map(function (node) {
+    return (0, _htElementUtils.getElements)(topo.getDataModel()).filter(_htElementDataUtil.isResourceNodeElement).map(function (node) {
       return node.getTag();
     });
   };
@@ -297,7 +289,9 @@ function _default(props) {
     getConfig: getConfig,
     updateConfig: updateConfig,
     getAllNodeResourceIds: getAllNodeResourceIds,
-    getAllEdgeResourceIds: getAllEdgeResourceIds,
+    getAllEdgeResourceIds: function getAllEdgeResourceIds() {
+      return (0, _htElementDataUtil.getAllEdgeResourceIds)(topo.getDataModel());
+    },
     getViewResources: getViewResources,
     getGroups: getGroups,
     getGroupConfigByElement: _ResourceConfigUtil["default"].getGroupConfigByElement,

package/lib/hooks/useSelection.js

@@ -29,11 +29,7 @@ function useSelection(props) {
       var selectionModel = topo.getSelectionModel();
       var htSelection = selectionModel.getSelection().getArray(); // TODO 对比变更更新
 
-      var selectionArr = htSelection.map(getElementData);
-
-      _rlog["default"].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) {

package/lib/hooks/useTopoEdit.js

@@ -35,6 +35,10 @@ var _useGroupAddResource = _interopRequireDefault(require("./useGroupAddResource
 
 var _topoData = require("../utils/topoData");
 
+var _htElementDataUtil = require("../utils/htElementDataUtil");
+
+var _clusterUtil = require("../utils/clusterUtil");
+
 var useTopoEdit = function useTopoEdit(params) {
   var topo = params.topo,
       topoId = params.topoId,
@@ -132,11 +136,10 @@ var useTopoEdit = function useTopoEdit(params) {
     if (!isLayerTopo && config.layers.length) {
       topoDispatchers.setTopoType(_template.TPL_TREE);
     } // 更新配置
+    // resourceConfig.updateConfig(config);
+    // 更新配置对应的资源、链路
+    // editDispatchers.fetchDataByConfig();
 
-
-    resourceConfig.updateConfig(config); // 更新配置对应的资源、链路
-
-    editDispatchers.fetchDataByConfig();
   };
 
   var deleteLayer = function deleteLayer(layerElement) {
@@ -220,7 +223,7 @@ var useTopoEdit = function useTopoEdit(params) {
       return;
     }
 
-    if (!(0, _htElementUtils.getGroupChildrenNodes)(group).length) {
+    if (!(0, _htElementDataUtil.getGroupChildrenResourceElements)(group).length || (0, _clusterUtil.isClusterHtElement)(group)) {
       doDelete();
       return;
     } // 有子节点时需要确认
@@ -323,6 +326,11 @@ var useTopoEdit = function useTopoEdit(params) {
   var handleDeleteNode = function handleDeleteNode(element) {
     var _topo$options$editor;
 
+    // 集群内成员禁用删除
+    if ((0, _clusterUtil.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);
@@ -419,8 +427,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;
@@ -460,7 +474,7 @@ var useTopoEdit = function useTopoEdit(params) {
               elements = _yield$editDispatcher2.elements;
               // 区域里的子区域及子区域的节点、新增的链路
               nodeElements = (0, _topoData.findGroupChildren)(elements, group);
-              newLinkElements = findNewLinkElements(elements);
+              newLinkElements = findUNExistedLinkElements(elements);
               updateElements = [].concat(nodeElements, newLinkElements);
 
               if (updateElements.length) {
@@ -548,7 +562,7 @@ var useTopoEdit = function useTopoEdit(params) {
 
             case 7:
               _yield$editDispatcher3 = _context11.sent;
-              elements = _yield$editDispatcher3.topoDataTrans;
+              elements = _yield$editDispatcher3.elements;
               saveBind(_componentTopologyGraph.TopoEvent.DATA_TYPE_RESOURCE_COMBO, elements); // 临时放这里，仅拓扑中心有
 
               if (topo.linkDynamicStyleExecutor) {
@@ -571,7 +585,7 @@ var useTopoEdit = function useTopoEdit(params) {
 
   function _addLayerResources() {
     _addLayerResources = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee12(group, newResourceIds) {
-      var _yield$editDispatcher4, elements, newElements, data;
+      var _yield$editDispatcher4, elements, data;
 
       return _regenerator["default"].wrap(function _callee12$(_context12) {
         while (1) {
@@ -587,32 +601,29 @@ var useTopoEdit = function useTopoEdit(params) {
             case 4:
               _yield$editDispatcher4 = _context12.sent;
               elements = _yield$editDispatcher4.elements;
-              newElements = elements.filter(function (element) {
-                return !(0, _htElementUtils.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();
           }
@@ -890,7 +901,7 @@ var useTopoEdit = function useTopoEdit(params) {
 
   var bindNodeResource = /*#__PURE__*/function () {
     var _ref7 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].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 _regenerator["default"].wrap(function _callee8$(_context8) {
         while (1) {
@@ -911,6 +922,7 @@ var useTopoEdit = function useTopoEdit(params) {
               node = topo.getDataModel().getDataById(id); // 节点所属容器
 
               groupElement = node.getParent();
+              htTopo = topo.getHtTopo();
               config = resourceConfig.getConfig();
 
               if (groupElement) {
@@ -935,42 +947,88 @@ 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 = (0, _format.filterElementsByNodeId)(elements, newResId);
+              elements = _yield$editDispatcher.elements;
+              newData = elements.find(function (item) {
+                return item.id === newResId;
+              });
 
-              if (nodeRelatedDatas.length) {
-                _context8.next = 17;
+              if (newData.type === 'group') {
+                newNodeElements = [newData].concat((0, _topoData.findGroupChildren)(elements, newData));
+              } else {
+                newNodeElements = [newData];
+              }
+
+              newLinkElements = findUNExistedLinkElements(elements); // 过滤出关联的节点和连线，通知ht更新
+              // const newDatas = filterElementsByNodeId(elements, newResId);
+
+              newDatas = [].concat(newNodeElements, newLinkElements);
+
+              if (newDatas.length) {
+                _context8.next = 22;
                 break;
               }
 
               _message["default"].error("关联资源失败");
 
+              _rlog["default"].warn("关联资源失败");
+
               return _context8.abrupt("return", false);
 
-            case 17:
-              saveBind(_componentTopologyGraph.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["default"].debug('批量创建元素', newDatas, createElementsData);
+
+              htTopo.createElements(createElementsData);
+              sm = htTopo.getGraphView().sm();
+              dm = htTopo.getGraphView().dm(); // 恢复图标、大小、位置
+
+              newElement = dm.getDataByTag(newData.id);
 
-              _context8.next = 21;
+              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/lib/models/topoAlarm.js

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