@riil-frontend/component-topology 5.0.1 → 5.0.3

package/es/core/components/TopoView/topoView.js

@@ -5,7 +5,7 @@ import classnames from 'classnames';
 import TopoGraph, { TopoEvent } from '@riil-frontend/component-topology-graph';
 import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 import useTopoEdit from "../../hooks/useTopoEdit";
-import useSelection from "../../hooks/useSelection";
+import useSelectionListener from "../../hooks/useSelectionListener";
 import showMessage from "../../utils/showMessage";
 import EditorPlugin from "../../editor/components/EditorPlugin";
 import ViewerPlugin from "../../viewer/components/plugins/ViewerPlugin";
@@ -66,12 +66,7 @@ var Topology = function Topology(props) {
       setTData = _useState[1]; // TODO 临时放这里，当前监听内容较多
 
 
-  var _useSelection = useSelection({
-    topo: topo
-  }),
-      initSelection = _useSelection.initSelection,
-      clearSelection = _useSelection.clearSelection;
-
+  useSelectionListener(props);
   useRouterAdapter(props);
   var topoEdit = useTopoEdit({
     topo: topo,
@@ -105,8 +100,6 @@ var Topology = function Topology(props) {
         setConfig: null
       });
     }
-
-    clearSelection();
   }, [topoId, viewState]);
   useEffect(function () {
     // rlog.debug("TopoView.useEffect topoData", topoData);
@@ -115,13 +108,11 @@ var Topology = function Topology(props) {
   useEffect(function () {
     return function () {
       topoDispatchers.reset();
-      clearSelection();
     };
   }, []);
   var onGraphCreated = useCallback(function (topoClient) {
     topo.view.onCreatedView(topoClient);
     rlog.info('TopoView.onGraphCreated');
-    initSelection();
 
     if (onReady) {
       onReady();
@@ -216,10 +207,6 @@ var Topology = function Topology(props) {
         onRefresh(event.data);
         break;
 
-      case TopoEvent.EVENT_EDIT_ENTER:
-        initSelection();
-        break;
-
       case TopoEvent.EVENT_EDIT_EXIT:
         onExitEdit(event.data);
         break;

package/es/core/hooks/ht/useHtDataPropertyChangeListener.js

@@ -4,12 +4,10 @@ export default function useHtDataPropertyChangeListener(props) {
   var topo = props.topo,
       onChange = props.onChange;
 
-  var _topo$store$useModel = topo.store.useModel('topoMod'),
-      topoState = _topo$store$useModel[0],
-      topoDispatchers = _topo$store$useModel[1];
+  var _topo$store$useModelS = topo.store.useModelState('topoMod'),
+      graphLoaded = _topo$store$useModelS.graphLoaded,
+      graphLoaded2 = _topo$store$useModelS.graphLoaded2;
 
-  var graphLoaded = topoState.graphLoaded,
-      graphLoaded2 = topoState.graphLoaded2;
   useEffect(function () {
     var dm = topo.getDataModel();
     var inited = false;

package/es/core/hooks/useSelection.js

@@ -1,13 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { useCallback } from "react";
-import rlog from "@riil-frontend/component-topology-utils/es/rlog";
+import { useCallback, useRef } from 'react';
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 /**
  * Selection
  */
 
 function useSelection(props) {
   var topo = props.topo;
-  var selectionDispatchers = topo.store.useModelDispatchers("selection");
+  var selectionDispatchers = topo.store.useModelDispatchers('selection');
+  var removeListenerRef = useRef(null);
 
   var setSelection = function setSelection(selection) {
     selectionDispatchers.update({
@@ -24,23 +25,22 @@ function useSelection(props) {
 
       setSelection(selectionArr);
     } catch (e) {
-      rlog.error("updateSelection error", e);
+      rlog.error('updateSelection error', e);
     }
   }, []);
-  var initSelection = useCallback(function () {
-    rlog.info("初始化Selection");
-    var dataModel = topo.getDataModel();
-    var selectionModel = topo.getSelectionModel();
-    updateSelection();
-    selectionModel.addSelectionChangeListener(function (e) {
-      rlog.info("selectionChangeListener", e);
+  var initListener = useCallback(function () {
+    rlog.info('Selection initListener');
+
+    function handleSelectionChange(e) {
+      rlog.info('Selection handleSelectionChange', e);
       updateSelection();
-    });
-    dataModel.addDataPropertyChangeListener(function (e) {
+    }
+
+    function handleDataPropertyChange(e) {
       var property = e.property,
           data = e.data;
 
-      if (["position", "childChange", "a:scale"].indexOf(property) !== -1) {
+      if (['position', 'childChange', 'a:scale'].indexOf(property) !== -1) {
         return;
       }
 
@@ -52,14 +52,48 @@ function useSelection(props) {
         // console.info('PropertyChangeListener', e);
         updateSelection();
       }
-    });
+    }
+
+    var dataModel = topo.getDataModel();
+    var selectionModel = topo.getSelectionModel();
+    selectionModel.addSelectionChangeListener(handleSelectionChange);
+    dataModel.addDataPropertyChangeListener(handleDataPropertyChange);
+    return function () {
+      selectionModel.removeSelectionChangeListener(handleSelectionChange);
+      dataModel.removeDataPropertyChangeListener(handleDataPropertyChange);
+    };
+  }, []);
+  var removeListener = useCallback(function (data) {
+    rlog.info('Selection removeListener');
+
+    if (removeListenerRef.current) {
+      removeListenerRef.current();
+      removeListenerRef.current = null;
+    }
+  }, []);
+  var initSelection = useCallback(function () {
+    rlog.info('Selection init');
+
+    if (removeListenerRef.current) {
+      removeListener();
+    }
+
+    updateSelection();
+    removeListenerRef.current = initListener();
+  }, []);
+  var destroySelection = useCallback(function (data) {
+    rlog.info('Selection destroy');
+    removeListener();
+    setSelection([]);
   }, []);
-  var clearSelection = useCallback(function (data) {
+  var resetSelection = useCallback(function (data) {
+    rlog.info('Selection reset');
     setSelection([]);
   }, []);
   return {
     initSelection: initSelection,
-    clearSelection: clearSelection,
+    destroySelection: destroySelection,
+    resetSelection: resetSelection,
     updateSelection: updateSelection // destroy,
 
   };
@@ -79,15 +113,15 @@ var map = {
       styleMap: JSON.parse(JSON.stringify(element.getStyleMap() || {}))
     };
   },
-  "ht.Edge": function htEdge(element) {
+  'ht.Edge': function htEdge(element) {
     return _extends({}, map.common(element));
   },
-  "ht.Group": function htGroup(element) {
-    return _extends({}, map["ht.Node"](element), {
+  'ht.Group': function htGroup(element) {
+    return _extends({}, map['ht.Node'](element), {
       expanded: element.isExpanded()
     });
   },
-  "ht.Node": function htNode(element) {
+  'ht.Node': function htNode(element) {
     return _extends({}, map.common(element), {
       image: element.getImage(),
       width: element.getWidth(),

package/es/core/hooks/useSelectionListener.js

@@ -0,0 +1,35 @@
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
+import { useEffect } from 'react';
+import useSelection from "./useSelection";
+export default function useSelectionListener(props) {
+  var topo = props.topo;
+
+  var _topo$store$useModelS = topo.store.useModelState('topoMod'),
+      graphLoaded = _topo$store$useModelS.graphLoaded,
+      graphLoaded2 = _topo$store$useModelS.graphLoaded2,
+      viewState = _topo$store$useModelS.viewState;
+
+  var isEditMode = viewState === 'edit'; // TODO 临时放这里，当前监听内容较多
+
+  var _useSelection = useSelection({
+    topo: topo
+  }),
+      initSelection = _useSelection.initSelection,
+      destroySelection = _useSelection.destroySelection;
+
+  useEffect(function () {
+    var inited = false;
+    var loaded = graphLoaded || graphLoaded2;
+
+    if (isEditMode && loaded) {
+      initSelection();
+      inited = true;
+    }
+
+    return function () {
+      if (inited) {
+        destroySelection();
+      }
+    };
+  }, [graphLoaded, graphLoaded2, isEditMode]);
+}

package/es/core/models/TopoApp.js

@@ -21,7 +21,7 @@ import PluginManager from "./PluginManager";
 import topoFactory from "./topoFactory";
 import ElementTagTipConfig from "./tagstips/ElementTagTipConfig"; // eslint-disable-next-line no-undef
 
-var version = typeof "5.0.1" === 'string' ? "5.0.1" : null;
+var version = typeof "5.0.3" === 'string' ? "5.0.3" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/es/core/viewer/components/plugins/ResourceDetail/components/ClusterMemberTable.js

@@ -1,6 +1,6 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _Table from "@alifd/next/es/table";
 import _extends from "@babel/runtime/helpers/extends";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
 import TableLayout from '@riil-frontend/component-table-layout';
@@ -11,7 +11,80 @@ import { commonQueryCiDataByIds } from "../../../../../services/cmdb";
 import { queryLatestMetrics } from "../../../../../services/cmdb/metric";
 import styles from "./ClusterMemberTable.module.scss";
 import Link from "../../../../../../components/Link";
-export default function ClusterChildrenTable(props) {
+
+function ClusterMemberTable(props) {
+  var tableProps = props.tableProps,
+      paginationProps = props.paginationProps; // url 处理，UICBB 的地址需截取前缀
+
+  function formatUrl(url) {
+    var _window, _window$location;
+
+    var prefix = '/default/pagecenter';
+
+    if (((_window = window) === null || _window === void 0 ? void 0 : (_window$location = _window.location) === null || _window$location === void 0 ? void 0 : _window$location.pathname.indexOf(prefix)) === 0 && (url === null || url === void 0 ? void 0 : url.indexOf(prefix)) === 0) {
+      return url.split(prefix)[1];
+    } else {
+      return url;
+    }
+  }
+  /**
+  * Table列数据
+  */
+
+
+  var columns = [{
+    id: '1',
+    title: '显示名称',
+    dataIndex: 'attributes.display_name',
+    // sortable: true,
+    lock: true,
+    width: 160,
+    cell: function cell(vallue, index, item) {
+      var link = "/default/pagecenter/resDetail/view/" + item.id + "?resId=" + item.id + "&domainCode=" + item.typeObject.domain + "&title=" + vallue + "&ciCode=" + item.typeCode; // 资源跳转链接
+
+      return /*#__PURE__*/React.createElement(Link, {
+        title: vallue || "",
+        to: formatUrl(link)
+      }, vallue || "-");
+    }
+  }, {
+    id: '2',
+    title: 'IP地址',
+    dataIndex: 'attributes.ipv4_address',
+    width: 120
+  }, {
+    id: '3',
+    title: '成员角色',
+    dataIndex: 'memberRole',
+    width: 120
+  }, {
+    id: '4',
+    title: '资源类型',
+    dataIndex: 'typeObject.displayName',
+    width: 120
+  }];
+  return /*#__PURE__*/React.createElement(TableLayout, {
+    wrapProps: {
+      style: {}
+    },
+    table: /*#__PURE__*/React.createElement(_Table, _extends({}, tableProps, {
+      hasBorder: false,
+      fixedHeader: true,
+      emptyContent: "\u6682\u65E0\u6570\u636E"
+    }), columns.map(function (columnItem) {
+      return /*#__PURE__*/React.createElement(_Table.Column, _extends({
+        key: columnItem.dataIndex
+      }, columnItem));
+    })),
+    pagination: /*#__PURE__*/React.createElement(Pagination, _extends({}, paginationProps, {
+      type: "simple",
+      useDefaultConfig: false,
+      showChecked: false
+    }))
+  });
+}
+
+export default function ClusterMemberTableContainer(props) {
   var data = props.data,
       topo = props.topo;
   var datas = topo.dataModel.useDatas();
@@ -56,12 +129,12 @@ export default function ClusterChildrenTable(props) {
                     });
                     return _extends({}, ci, {
                       typeObject: ciTypeMap[ci.typeCode],
-                      memberRole: topo.dictCache.dictObject.member_role[memberRoleMetric.metricValue]
+                      memberRole: topo.dictCache.dictObject.member_role[memberRoleMetric === null || memberRoleMetric === void 0 ? void 0 : memberRoleMetric.metricValue]
                     });
                   }),
                   total: ciDataResult.totalRecord,
-                  current: 1,
-                  pageSize: 20
+                  current: ciDataResult.pageIndex,
+                  pageSize: pageSize
                 }
               });
 
@@ -85,81 +158,11 @@ export default function ClusterChildrenTable(props) {
     }
   }) // useFilterPlugin(),
   ];
-
-  var _useNextTable = useNextTable(getTableData, {
+  var tableProps = useNextTable(getTableData, {
     refreshDeps: [data],
     plugins: plugins
-  }),
-      tableProps = _useNextTable.tableProps,
-      paginationProps = _useNextTable.paginationProps; // url 处理，UICBB 的地址需截取前缀
-
-
-  function formatUrl(url) {
-    var _window, _window$location;
-
-    var prefix = '/default/pagecenter';
-
-    if (((_window = window) === null || _window === void 0 ? void 0 : (_window$location = _window.location) === null || _window$location === void 0 ? void 0 : _window$location.pathname.indexOf(prefix)) === 0 && (url === null || url === void 0 ? void 0 : url.indexOf(prefix)) === 0) {
-      return url.split(prefix)[1];
-    } else {
-      return url;
-    }
-  }
-  /**
-  * Table列数据
-  */
-
-
-  var columns = [{
-    id: '1',
-    title: '显示名称',
-    dataIndex: 'attributes.display_name',
-    // sortable: true,
-    lock: true,
-    width: 160,
-    cell: function cell(vallue, index, item) {
-      var link = "/default/pagecenter/resDetail/view/" + item.id + "?resId=" + item.id + "&domainCode=" + item.typeObject.domain + "&title=" + vallue + "&ciCode=" + item.typeCode; // 资源跳转链接
-
-      return /*#__PURE__*/React.createElement(Link, {
-        title: vallue || "",
-        to: formatUrl(link)
-      }, vallue || "-");
-    }
-  }, {
-    id: '2',
-    title: 'IP地址',
-    dataIndex: 'attributes.ipv4_address',
-    width: 120
-  }, {
-    id: '3',
-    title: '成员角色',
-    dataIndex: 'memberRole',
-    width: 120
-  }, {
-    id: '4',
-    title: '资源类型',
-    dataIndex: 'typeObject.displayName',
-    width: 120
-  }];
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: styles.container
-  }, /*#__PURE__*/React.createElement(TableLayout, {
-    wrapProps: {
-      style: {}
-    },
-    table: /*#__PURE__*/React.createElement(_Table, _extends({}, tableProps, {
-      hasBorder: false,
-      fixedHeader: true,
-      emptyContent: "\u6682\u65E0\u6570\u636E"
-    }), columns.map(function (columnItem) {
-      return /*#__PURE__*/React.createElement(_Table.Column, _extends({
-        key: columnItem.dataIndex
-      }, columnItem));
-    })),
-    pagination: /*#__PURE__*/React.createElement(Pagination, _extends({}, paginationProps, {
-      type: "simple",
-      useDefaultConfig: false,
-      showChecked: false
-    }))
-  }));
+  }, /*#__PURE__*/React.createElement(ClusterMemberTable, tableProps));
 }

package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/ResourceOverviewMetric.js

@@ -68,7 +68,6 @@ export default function ResourceOverviewMetric(props) {
     var code = itemData.code,
         metricItem = itemData.metricItem,
         list = itemData.list;
-    console.log('formatValue', itemData);
     var format = metricValueFormat({
       value: (_list = list[list.length - 1]) === null || _list === void 0 ? void 0 : _list.metricValue,
       dataType: metricItem.dataType,
@@ -90,9 +89,9 @@ export default function ResourceOverviewMetric(props) {
         value: item.metricValue == -2 ? null : Number(item.metricValue)
       };
     });
-  }
+  } // console.log('ResourceOverviewMetric', data);
+
 
-  console.log('ResourceOverviewMetric', data);
   var content;
 
   if (data.length) {

package/lib/core/components/TopoView/topoView.js

@@ -19,7 +19,7 @@ var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-ut
 
 var _useTopoEdit = _interopRequireDefault(require("../../hooks/useTopoEdit"));
 
-var _useSelection2 = _interopRequireDefault(require("../../hooks/useSelection"));
+var _useSelectionListener = _interopRequireDefault(require("../../hooks/useSelectionListener"));
 
 var _showMessage = _interopRequireDefault(require("../../utils/showMessage"));
 
@@ -99,12 +99,7 @@ var Topology = function Topology(props) {
       setTData = _useState[1]; // TODO 临时放这里，当前监听内容较多
 
 
-  var _useSelection = (0, _useSelection2["default"])({
-    topo: topo
-  }),
-      initSelection = _useSelection.initSelection,
-      clearSelection = _useSelection.clearSelection;
-
+  (0, _useSelectionListener["default"])(props);
   (0, _useRouterAdapter["default"])(props);
   var topoEdit = (0, _useTopoEdit["default"])({
     topo: topo,
@@ -138,8 +133,6 @@ var Topology = function Topology(props) {
         setConfig: null
       });
     }
-
-    clearSelection();
   }, [topoId, viewState]);
   (0, _react.useEffect)(function () {
     // rlog.debug("TopoView.useEffect topoData", topoData);
@@ -148,7 +141,6 @@ var Topology = function Topology(props) {
   (0, _react.useEffect)(function () {
     return function () {
       topoDispatchers.reset();
-      clearSelection();
     };
   }, []);
   var onGraphCreated = (0, _react.useCallback)(function (topoClient) {
@@ -156,8 +148,6 @@ var Topology = function Topology(props) {
 
     _rlog["default"].info('TopoView.onGraphCreated');
 
-    initSelection();
-
     if (onReady) {
       onReady();
     }
@@ -256,10 +246,6 @@ var Topology = function Topology(props) {
         onRefresh(event.data);
         break;
 
-      case _componentTopologyGraph.TopoEvent.EVENT_EDIT_ENTER:
-        initSelection();
-        break;
-
       case _componentTopologyGraph.TopoEvent.EVENT_EDIT_EXIT:
         onExitEdit(event.data);
         break;

package/lib/core/hooks/ht/useHtDataPropertyChangeListener.js

@@ -13,12 +13,10 @@ function useHtDataPropertyChangeListener(props) {
   var topo = props.topo,
       onChange = props.onChange;
 
-  var _topo$store$useModel = topo.store.useModel('topoMod'),
-      topoState = _topo$store$useModel[0],
-      topoDispatchers = _topo$store$useModel[1];
+  var _topo$store$useModelS = topo.store.useModelState('topoMod'),
+      graphLoaded = _topo$store$useModelS.graphLoaded,
+      graphLoaded2 = _topo$store$useModelS.graphLoaded2;
 
-  var graphLoaded = topoState.graphLoaded,
-      graphLoaded2 = topoState.graphLoaded2;
   (0, _react.useEffect)(function () {
     var dm = topo.getDataModel();
     var inited = false;

package/lib/core/hooks/useSelection.js

@@ -16,7 +16,8 @@ var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-ut
  */
 function useSelection(props) {
   var topo = props.topo;
-  var selectionDispatchers = topo.store.useModelDispatchers("selection");
+  var selectionDispatchers = topo.store.useModelDispatchers('selection');
+  var removeListenerRef = (0, _react.useRef)(null);
 
   var setSelection = function setSelection(selection) {
     selectionDispatchers.update({
@@ -33,25 +34,23 @@ function useSelection(props) {
 
       setSelection(selectionArr);
     } catch (e) {
-      _rlog["default"].error("updateSelection error", e);
+      _rlog["default"].error('updateSelection error', e);
     }
   }, []);
-  var initSelection = (0, _react.useCallback)(function () {
-    _rlog["default"].info("初始化Selection");
+  var initListener = (0, _react.useCallback)(function () {
+    _rlog["default"].info('Selection initListener');
 
-    var dataModel = topo.getDataModel();
-    var selectionModel = topo.getSelectionModel();
-    updateSelection();
-    selectionModel.addSelectionChangeListener(function (e) {
-      _rlog["default"].info("selectionChangeListener", e);
+    function handleSelectionChange(e) {
+      _rlog["default"].info('Selection handleSelectionChange', e);
 
       updateSelection();
-    });
-    dataModel.addDataPropertyChangeListener(function (e) {
+    }
+
+    function handleDataPropertyChange(e) {
       var property = e.property,
           data = e.data;
 
-      if (["position", "childChange", "a:scale"].indexOf(property) !== -1) {
+      if (['position', 'childChange', 'a:scale'].indexOf(property) !== -1) {
         return;
       }
 
@@ -63,14 +62,50 @@ function useSelection(props) {
         // console.info('PropertyChangeListener', e);
         updateSelection();
       }
-    });
+    }
+
+    var dataModel = topo.getDataModel();
+    var selectionModel = topo.getSelectionModel();
+    selectionModel.addSelectionChangeListener(handleSelectionChange);
+    dataModel.addDataPropertyChangeListener(handleDataPropertyChange);
+    return function () {
+      selectionModel.removeSelectionChangeListener(handleSelectionChange);
+      dataModel.removeDataPropertyChangeListener(handleDataPropertyChange);
+    };
   }, []);
-  var clearSelection = (0, _react.useCallback)(function (data) {
+  var removeListener = (0, _react.useCallback)(function (data) {
+    _rlog["default"].info('Selection removeListener');
+
+    if (removeListenerRef.current) {
+      removeListenerRef.current();
+      removeListenerRef.current = null;
+    }
+  }, []);
+  var initSelection = (0, _react.useCallback)(function () {
+    _rlog["default"].info('Selection init');
+
+    if (removeListenerRef.current) {
+      removeListener();
+    }
+
+    updateSelection();
+    removeListenerRef.current = initListener();
+  }, []);
+  var destroySelection = (0, _react.useCallback)(function (data) {
+    _rlog["default"].info('Selection destroy');
+
+    removeListener();
+    setSelection([]);
+  }, []);
+  var resetSelection = (0, _react.useCallback)(function (data) {
+    _rlog["default"].info('Selection reset');
+
     setSelection([]);
   }, []);
   return {
     initSelection: initSelection,
-    clearSelection: clearSelection,
+    destroySelection: destroySelection,
+    resetSelection: resetSelection,
     updateSelection: updateSelection // destroy,
 
   };
@@ -90,15 +125,15 @@ var map = {
       styleMap: JSON.parse(JSON.stringify(element.getStyleMap() || {}))
     };
   },
-  "ht.Edge": function htEdge(element) {
+  'ht.Edge': function htEdge(element) {
     return (0, _extends2["default"])({}, map.common(element));
   },
-  "ht.Group": function htGroup(element) {
-    return (0, _extends2["default"])({}, map["ht.Node"](element), {
+  'ht.Group': function htGroup(element) {
+    return (0, _extends2["default"])({}, map['ht.Node'](element), {
       expanded: element.isExpanded()
     });
   },
-  "ht.Node": function htNode(element) {
+  'ht.Node': function htNode(element) {
     return (0, _extends2["default"])({}, map.common(element), {
       image: element.getImage(),
       width: element.getWidth(),