@riil-frontend/component-topology 5.0.0-alpha.9 → 5.0.2

package/lib/core/editor/components/settings/propertyViews/edge/CommonEdgePropertyView.js

@@ -113,6 +113,12 @@ function CommonEdgePropertyView(props) {
     placeholder: "\u8BF7\u8F93\u5165",
     style: {
       width: "100%"
+    },
+    onFocus: function onFocus() {
+      topo.historyManager.beginTransaction();
+    },
+    onBlur: function onBlur() {
+      topo.historyManager.endTransaction();
     }
   }))), /*#__PURE__*/_react["default"].createElement("div", {
     style: {
@@ -126,6 +132,14 @@ function CommonEdgePropertyView(props) {
   }, /*#__PURE__*/_react["default"].createElement(_ColorPicker["default"], {
     value: values["styleMap.edge.color"],
     align: "br",
-    onChange: setLineColor
+    onChange: setLineColor,
+    balloonProps: {
+      onFocus: function onFocus() {
+        topo.historyManager.beginTransaction();
+      },
+      onBlur: function onBlur() {
+        topo.historyManager.endTransaction();
+      }
+    }
   })))), extraDisplaySetting))));
 }

package/lib/core/editor/components/settings/propertyViews/group/DataTab/GroupNodeList.js

@@ -28,6 +28,7 @@ function GroupNodeList(props) {
    */
 
   var handleNodeRemove = function handleNodeRemove(data) {
+    topo.historyManager.beginTransaction();
     var node = data.node;
     node.setParent(null);
     var viewRect = topo.getGraphView().getViewRect();
@@ -36,6 +37,7 @@ function GroupNodeList(props) {
 
     setTimeout(function () {
       node.iv();
+      topo.historyManager.endTransaction();
     }, 50);
   };
 

package/lib/core/editor/components/settings/propertyViews/group/SettingTab/GroupExpandSetting.js

@@ -38,16 +38,19 @@ function GroupExpandSetting(props) {
       setLayout = _useState[1];
 
   var alignOnChange = function alignOnChange(v) {
-    // console.log("setAlignmentBySelectionNodes", v);
+    topo.historyManager.beginTransaction(); // console.log("setAlignmentBySelectionNodes", v);
     // topo.view.topoClient.htTopoClient.setAlignmentBySelectionNodes(v);
+
     onChange("groupAlign", v); // topoEditApi.setAlignmentBySelectionNodes(v);
+
+    topo.historyManager.endTransaction();
   };
 
   var layoutOnChange = function layoutOnChange(v) {
-    // console.log("layoutOnChange", v);
-    setLayout(v); // topo.view.topoClient.htTopoClient.setAlignmentBySelectionNodes(v);
-
-    onChange("layout", v); // topoEditApi.setAlignmentBySelectionNodes(v);
+    topo.historyManager.beginTransaction();
+    setLayout(v);
+    onChange("layout", v);
+    topo.historyManager.endTransaction();
   };
 
   (0, _react.useEffect)(function () {
@@ -80,6 +83,7 @@ function GroupExpandSetting(props) {
       marginBottom: 0
     }
   }, /*#__PURE__*/_react["default"].createElement(_GroupExpandStatus["default"], {
+    topo: topo,
     group: group,
     expanded: expanded,
     setExpanded: function setExpanded(val) {

package/lib/core/editor/components/settings/propertyViews/group/SettingTab/GroupExpandStatus.js

@@ -26,11 +26,19 @@ var list = [{
 
 function GroupExpandStatus(props) {
   var expanded = props.expanded,
-      setExpanded = props.setExpanded;
+      setExpanded = props.setExpanded,
+      topo = props.topo;
+
+  var handleChange = function handleChange(val) {
+    topo.historyManager.beginTransaction();
+    setExpanded(val);
+    topo.historyManager.endTransaction();
+  };
+
   return /*#__PURE__*/_react["default"].createElement(_radio["default"].Group, {
     dataSource: list,
     value: expanded,
-    onChange: setExpanded
+    onChange: handleChange
   });
 }
 

package/lib/core/editor/components/settings/propertyViews/group/SettingTab/Setting.js

@@ -74,6 +74,7 @@ function GroupSetting(props) {
     }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
       label: "\u9ED8\u8BA4\u663E\u793A\u65B9\u5F0F"
     }, /*#__PURE__*/_react["default"].createElement(_GroupExpandStatus["default"], {
+      topo: topo,
       group: group,
       expanded: expanded,
       setExpanded: function setExpanded(val) {
@@ -93,9 +94,13 @@ function GroupSetting(props) {
         height: values.height
       },
       onChange: function onChange(size) {
+        topo.historyManager.beginTransaction();
+
         _onChange("width", size.width);
 
         _onChange("height", size.height);
+
+        topo.historyManager.endTransaction();
       },
       settingRuntimeState: settingRuntimeState
     }))));
@@ -115,7 +120,13 @@ function GroupSetting(props) {
   }), /*#__PURE__*/_react["default"].createElement(_input["default"], {
     name: "attrObject.name",
     maxLength: 30,
-    placeholder: "\u8BF7\u8F93\u5165"
+    placeholder: "\u8BF7\u8F93\u5165",
+    onFocus: function onFocus() {
+      topo.historyManager.beginTransaction();
+    },
+    onBlur: function onBlur() {
+      topo.historyManager.endTransaction();
+    }
   })), expanded ? /*#__PURE__*/_react["default"].createElement(_GroupExpandSetting["default"], {
     id: id,
     group: group,

package/lib/core/editor/components/settings/propertyViews/layer/SettingTab/Setting.js

@@ -19,6 +19,8 @@ var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
 var _AlignSetting = _interopRequireDefault(require("../../../common/AlignSetting"));
 
 var _SpecialCharacterValidateUtil = require("../../../../../../../utils/SpecialCharacterValidateUtil");
@@ -45,7 +47,8 @@ function LayerSettingTab(props) {
         return;
       }
 
-      console.error(values[name], value);
+      _rlog["default"].debug(values[name], value);
+
       var newValues = field.getValues();
 
       _onChange(name, value, newValues);
@@ -57,11 +60,16 @@ function LayerSettingTab(props) {
   }, [values]);
 
   var alignOnChange = function alignOnChange(v) {
-    console.log('setAlignmentBySelectionNodes', v);
+    topo.historyManager.beginTransaction();
+
+    _rlog["default"].debug('setAlignmentBySelectionNodes', v);
+
     topo.view.topoClient.htTopoClient.setAlignmentBySelectionNodes(v);
 
     _onChange('groupAlign', v); // topoEditApi.setAlignmentBySelectionNodes(v);
 
+
+    topo.historyManager.endTransaction();
   };
 
   return /*#__PURE__*/_react["default"].createElement(_form["default"], {
@@ -78,7 +86,13 @@ function LayerSettingTab(props) {
   }), /*#__PURE__*/_react["default"].createElement(_input["default"], {
     name: "styleMap.label",
     maxLength: 30,
-    placeholder: "\u8BF7\u8F93\u5165"
+    placeholder: "\u8BF7\u8F93\u5165",
+    onFocus: function onFocus() {
+      topo.historyManager.beginTransaction();
+    },
+    onBlur: function onBlur() {
+      topo.historyManager.endTransaction();
+    }
   })), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_collapse["default"], {
     defaultExpandedKeys: ['布局', '图片', '对齐方式', '线形'],
     style: {

package/lib/core/editor/components/settings/propertyViews/layer/SettingTab/Setting_bak.js

@@ -66,7 +66,6 @@ var fontStyleUtil = {
         map[key.replace(prefix, "")] = obj[key];
       }
     });
-    console.error(obj, prefix, map);
     return map;
   },
   build: function build(style) {

package/lib/core/editor/components/settings/propertyViews/multipleElements/BatchSetNodeIcon.js

@@ -15,6 +15,7 @@ function BatchSetNodeIcon(props) {
   var topo = props.topo;
 
   var setNodeIcon = function setNodeIcon(iconId) {
+    topo.historyManager.beginTransaction();
     var selection = topo.getSelectionModel().getSelection().toArray();
     var nodes = selection.filter(function (element) {
       return (0, _htElementUtils.isNode)(element) && !(0, _htElementUtils.isGroup)(element);
@@ -22,6 +23,7 @@ function BatchSetNodeIcon(props) {
     nodes.forEach(function (node) {
       node.setImage(iconId);
     });
+    topo.historyManager.endTransaction();
   };
 
   return /*#__PURE__*/_react["default"].createElement(_NodeIconSelect["default"], {

package/lib/core/editor/components/settings/propertyViews/multipleElements/BatchSetNodeSize/BatchSetNodeSize.js

@@ -101,6 +101,7 @@ function BatchSetNodeSize(props) {
       setSize((0, _extends3["default"])({}, size, (_extends2 = {}, _extends2[name] = value, _extends2)));
     }
 
+    topo.historyManager.beginTransaction();
     nodes.forEach(function (node) {
       if (name === 'width') {
         if (lock) {
@@ -120,6 +121,7 @@ function BatchSetNodeSize(props) {
         node.setHeight(value);
       }
     });
+    topo.historyManager.endTransaction();
   };
 
   var onLockChange = function onLockChange(isLock) {

package/lib/core/editor/components/settings/propertyViews/multipleElements/MultipleElementPropertyView.js

@@ -59,10 +59,13 @@ function MultipleElementPropertyView(props) {
 
   var alignOnChange = function alignOnChange(v) {
     console.log('setAlignmentBySelectionNodes', v);
-    topo.view.topoClient.htTopoClient.setAlignmentBySelectionNodes(v);
+    topo.historyManager.beginTransaction();
+    topo.getHtTopo().setAlignmentBySelectionNodes(v);
 
     _onChange('groupAlign', v); // topoEditApi.setAlignmentBySelectionNodes(v);
 
+
+    topo.historyManager.endTransaction();
   }; // TODO 临时方案，满足应用部署拓扑多选元素属性面板不显示对齐
 
 

package/lib/core/editor/components/settings/propertyViews/node/Setting/Setting.js

@@ -87,9 +87,13 @@ function Setting(props) {
       height: values.height
     },
     onChange: function onChange(size) {
+      topo.historyManager.beginTransaction();
+
       _onChange('width', size.width);
 
       _onChange('height', size.height);
+
+      topo.historyManager.endTransaction();
     },
     settingRuntimeState: settingRuntimeState
   }))))));

package/lib/core/editor/components/settings/propertyViews/node/data/Data.js

@@ -5,8 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = Data;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
 var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
 
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -74,18 +78,44 @@ function Data(props) {
   }, [values]);
 
   var setBindType = function setBindType(newBindType) {
+    topo.historyManager.beginTransaction();
+
     _onChange("attrObject.bindType", newBindType);
 
+    topo.historyManager.endTransaction();
+
     if (newBindType === "topo") {//
     }
   };
 
-  var handleBindTopoChange = function handleBindTopoChange(value, data) {
-    // 设置名称为拓扑名称，清空自定义名称
-    node.a("name", data.label);
-    node.a("customName", null);
-    topoEditApi.deleteExLink(node);
-  };
+  var handleBindTopoChange = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(value, data) {
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              topo.historyManager.beginTransaction(); // 设置名称为拓扑名称，清空自定义名称
+
+              node.a("name", data.label);
+              node.a("customName", null);
+              _context.next = 5;
+              return topoEditApi.deleteExLink(node);
+
+            case 5:
+              topo.historyManager.endTransaction();
+
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function handleBindTopoChange(_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }();
 
   var RelateTopoTree = editorProps === null || editorProps === void 0 ? void 0 : editorProps.relateTopoTree;
   return /*#__PURE__*/_react["default"].createElement(_collapse["default"], {

package/lib/core/editor/components/settings/propertyViews/text/TextPropertyView.js

@@ -104,8 +104,15 @@ function TextPropertyView(props) {
       minRows: 4,
       maxRows: 4
     },
-    placeholder: "\u6587\u672C\u8F93\u5165"
+    placeholder: "\u6587\u672C\u8F93\u5165",
+    onFocus: function onFocus() {
+      topo.historyManager.beginTransaction();
+    },
+    onBlur: function onBlur() {
+      topo.historyManager.endTransaction();
+    }
   })), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_TextStyle["default"], {
-    name: "styleMap.textObj"
+    name: "styleMap.textObj",
+    topo: topo
   })))))));
 }

package/lib/core/editor/components/settings/propertyViews/view/BackgroundSize.js

@@ -5,6 +5,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = BackgroundSize;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _NodeSizeInput = _interopRequireDefault(require("../../common/NodeSizeInput/NodeSizeInput"));
@@ -19,13 +23,40 @@ function BackgroundSize(props) {
     topo: topo,
     current: backgroundConfig.current
   });
+
+  var setSize = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(size) {
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              topo.historyManager.beginTransaction();
+              _context.next = 3;
+              return backgroundSizeConfig.setSize(size);
+
+            case 3:
+              topo.historyManager.endTransaction();
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function setSize(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
   return /*#__PURE__*/_react["default"].createElement(_NodeSizeInput["default"], {
     nodeId: backgroundSizeConfig.nodeId,
     value: backgroundSizeConfig.size,
     max: 100000,
     step: 10,
     lockId: "background",
-    onChange: backgroundSizeConfig.setSize,
+    onChange: setSize,
     settingRuntimeState: settingRuntimeState
   });
 }

package/lib/core/editor/components/settings/propertyViews/view/GlobalLayout.js

@@ -25,9 +25,11 @@ function GlobalLayout(props) {
 
   var onChange = function onChange(data) {
     console.log("handleChange", data);
+    topo.historyManager.beginTransaction();
     setLayout(data);
     var layouType = data.id === "toward" ? "" + data.id + data.options.subId : data.id;
     topo.getHtTopo().layoutInTopo(layouType);
+    topo.historyManager.endTransaction();
   };
 
   return /*#__PURE__*/_react["default"].createElement(_LayoutSettings["default"], {

package/lib/core/editor/components/settings/propertyViews/view/GlobalNodeLabelStyle.js

@@ -82,6 +82,12 @@ function GlobalNodeLabelStyle(props) {
     style: {
       width: '100%',
       marginRight: 8
+    },
+    onFocus: function onFocus() {
+      topo.historyManager.beginTransaction();
+    },
+    onBlur: function onBlur() {
+      topo.historyManager.endTransaction();
     }
   }, /*#__PURE__*/_react["default"].createElement(Option, {
     value: "\u5B8B\u4F53"
@@ -118,7 +124,15 @@ function GlobalNodeLabelStyle(props) {
     }
   }, /*#__PURE__*/_react["default"].createElement(_ColorPicker["default"], {
     name: "color",
-    align: "br"
+    align: "br",
+    balloonProps: {
+      onFocus: function onFocus() {
+        topo.historyManager.beginTransaction();
+      },
+      onBlur: function onBlur() {
+        topo.historyManager.endTransaction();
+      }
+    }
   }))))));
 }
 

package/lib/core/editor/components/settings/propertyViews/view/hooks/useBackgroundSizeConfig.js

@@ -44,7 +44,6 @@ var _default = function _default(props) {
       return;
     }
 
-    console.error(222, e);
     setSize(topo.view.background.getSize());
   };
 

package/lib/core/editor/components/titlebar/TopoEditorTitleBar.js

@@ -23,6 +23,8 @@ var _TitleWidget = _interopRequireDefault(require("../../../components/titlebar/
 
 var _TitleBarModule = _interopRequireDefault(require("../../../components/titlebar/TitleBar.module.scss"));
 
+var _DebugTools = _interopRequireDefault(require("./widgets/DebugTools"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -83,7 +85,9 @@ function TopoEditorTitleBar(props) {
   }, /*#__PURE__*/_react["default"].createElement(_box["default"], {
     direction: "row",
     spacing: 8
-  }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_DebugTools["default"], {
+    topo: topo
+  }), /*#__PURE__*/_react["default"].createElement(_button["default"], {
     type: "primary",
     className: _TitleBarModule["default"].button,
     onClick: function onClick() {

package/lib/core/editor/components/titlebar/widgets/DebugTools.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = DebugTools;
+
+var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
+
+var _react = _interopRequireDefault(require("react"));
+
+function DebugTools(props) {
+  var topo = props.topo,
+      style = props.style;
+  var debug = topo.viewProps.debug;
+
+  if (!debug) {
+    return null;
+  }
+
+  var printLog = function printLog() {
+    console.info("HistoryManager " + topo.historyManager.toString(), topo.historyManager.getHistories(), topo.historyManager.htHistoryManager.getHistoryIndex());
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: style
+  }, /*#__PURE__*/_react["default"].createElement(_button["default"].Group, null, /*#__PURE__*/_react["default"].createElement(_button["default"], {
+    onClick: function onClick() {
+      return topo.historyManager.undo();
+    }
+  }, "\u56DE\u9000"), /*#__PURE__*/_react["default"].createElement(_button["default"], {
+    onClick: function onClick() {
+      return topo.historyManager.redo();
+    }
+  }, "\u91CD\u505A"), /*#__PURE__*/_react["default"].createElement(_button["default"], {
+    onClick: printLog
+  }, "\u6253\u5370\u65E5\u5FD7")));
+}

package/lib/core/hooks/useAlarm.js

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = useAlarm;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = require("react");
 
 var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
@@ -102,6 +104,21 @@ function useAlarm(options) {
     }
   };
 
+  var handleRelateTopoAlarm = function handleRelateTopoAlarm(data) {
+    var relateTopoAlarm = (0, _extends2["default"])({}, topo.store.getModelState('topoAlarm').relateTopoAlarm);
+    data.forEach(function (item) {
+      relateTopoAlarm[item.topoId] = item.alertLevel;
+    });
+    topo.store.getModelDispatchers('topoAlarm').update({
+      relateTopoAlarm: relateTopoAlarm
+    });
+
+    _rlog["default"].debug("\u5173\u8054\u62D3\u6251\u544A\u8B66\uFF1A\u6536\u5230 " + data.length, {
+      received: data,
+      all: relateTopoAlarm
+    });
+  };
+
   (0, _componentRiilEventEmitter.useCbbEventListener)("topo", {
     name: "topo",
     onMessage: function onMessage(data) {
@@ -111,6 +128,8 @@ function useAlarm(options) {
         topo.alarm.handleAlarmEvent(data.data);
       } else if (data.type === "risk") {
         handleRiskData(data.data);
+      } else if (data.type === "relateTopoAlarm") {
+        handleRelateTopoAlarm(data.data);
       }
     }
   });

package/lib/core/hooks/useGraphAlarmDisplay.js

@@ -60,7 +60,8 @@ function useGraphAlarmDisplay(options) {
 
   var _topo$alarm$useState = topo.alarm.useState(),
       alarmList = _topo$alarm$useState.alarmList,
-      risks = _topo$alarm$useState.risks;
+      risks = _topo$alarm$useState.risks,
+      relateTopoAlarm = _topo$alarm$useState.relateTopoAlarm;
 
   var resources = topo.dataModel.useCis();
 
@@ -110,9 +111,32 @@ function useGraphAlarmDisplay(options) {
           return item.id === element.getTag();
         })) === null || _finalAlarms$find === void 0 ? void 0 : _finalAlarms$find.level;
         element.a('alarmLevel', alarmLevel);
+      });
+      var relateTopoAlarms = Object.keys(relateTopoAlarm).map(function (topoId) {
+        var level = relateTopoAlarm[topoId];
+        var relateTopoNode = topo.getDataModel().getDatas().toArray().find(function (node) {
+          return "" + node.a('bindTopo') === "" + topoId;
+        });
+
+        if (!level || !relateTopoNode) {
+          return null;
+        }
+
+        return {
+          elementId: relateTopoNode.getId(),
+          level: level
+        };
+      }).filter(function (item) {
+        return !!item;
+      });
+
+      _rlog["default"].debug("\u5173\u8054\u62D3\u6251\u544A\u8B66\uFF1A\u63A8\u9001ht " + Object.keys(relateTopoAlarms).length, {
+        all: relateTopoAlarm,
+        graphAlarm: relateTopoAlarms
       }); // 更新到ht拓扑
 
-      topo.view.loadAlarm(finalAlarms);
+
+      topo.view.loadAlarm([].concat(finalAlarms, relateTopoAlarms));
     }
 
     return function () {
@@ -121,5 +145,5 @@ function useGraphAlarmDisplay(options) {
         resources: resources
       });
     };
-  }, [isEditMode, graphLoaded, resources, alarmSwitch, alarmList, risks]);
+  }, [isEditMode, graphLoaded, resources, alarmSwitch, alarmList, risks, relateTopoAlarm]);
 }

package/lib/core/hooks/useResourceConfig.js

@@ -61,7 +61,8 @@ function _default(props) {
     return {
       resources: config.resources,
       groups: config.groups,
-      exportLinkIdList: config.exportLinkIdList
+      exportLinkIdList: config.exportLinkIdList,
+      relateTopoIdList: config.relateTopoIdList
     };
   };
 

package/lib/core/hooks/useRouterAdapter.js

@@ -3,6 +3,8 @@
 exports.__esModule = true;
 exports["default"] = useRouterAdapter;
 
+var _componentTopologyUtils = require("@riil-frontend/component-topology-utils");
+
 var _Link = require("../../components/Link");
 
 /**
@@ -10,10 +12,15 @@ var _Link = require("../../components/Link");
  * @param {*} props 
  */
 function useRouterAdapter(props) {
-  var topoContext = props.topoContext;
+  var topoContext = props.topoContext,
+      history = props.history;
   var Link = topoContext.Link;
 
   if (Link) {
     (0, _Link.setLink)(Link);
   }
+
+  if (history) {
+    (0, _componentTopologyUtils.setHistory)(history);
+  }
 }