@riil-frontend/component-topology 10.0.17 → 10.0.19

package/lib/core/viewer/components/plugins/ResourceDetail/ResourceDetailDrawer.js

@@ -5,258 +5,66 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _drawer = _interopRequireDefault(require("@alifd/next/lib/drawer"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-var _componentTopologyGraph = require("@riil-frontend/component-topology-graph");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _overview = _interopRequireDefault(require("../../../../services/overview"));
-
 var _DrawerTitle = _interopRequireDefault(require("./components/DrawerTitle"));
 
-var _indexModule = _interopRequireDefault(require("./index.module.scss"));
+var _DetailDrawer = _interopRequireDefault(require("../ElementDetailDrawer/components/DetailDrawer"));
 
-var _ResourceDetail = _interopRequireDefault(require("./ResourceDetail"));
+var _useElementDetailManager = _interopRequireDefault(require("../ElementDetailDrawer/hooks/useElementDetailManager"));
 
 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; }
 
-// 基本信息
 function ResourceDetailDrawer(props) {
   var topo = props.topo,
       canShow = props.canShow,
       viewerProps = props.viewerProps;
 
-  var _topo$store$useModel = topo.store.useModel('topoBaseInfoOverview'),
-      topoState = _topo$store$useModel[0],
-      topoDispatchers = _topo$store$useModel[1];
-
   var _topo$store$useModelS = topo.store.useModelState('topoMod'),
-      topoId = _topo$store$useModelS.topoId,
-      topoModData = _topo$store$useModelS.data;
-
-  var _topo$store$useModelS2 = topo.store.useModelState("lock"),
-      lock = _topo$store$useModelS2.lock;
-
-  var _topo$store$useModel2 = topo.store.useModel('resourceDetail'),
-      resourceDetailState = _topo$store$useModel2[0],
-      resourceDetailDispatchers = _topo$store$useModel2[1];
-
-  var visible = resourceDetailState.visible,
-      id = resourceDetailState.id;
-  var resourceData = topo.dataModel.useDataById(id);
-  var activeData = (0, _react.useMemo)(function () {
-    return resourceData ? {
-      id: resourceData.id,
-      name: resourceData.name,
-      type: resourceData.type === 'node' ? 'node' : 'link',
-      // 类型： node、link
-      ciType: resourceData.ciType,
-      ciName: resourceData.ciName
-    } : {
-      id: '',
-      name: '',
-      type: '',
-      // 类型： node、link
-      ciType: '',
-      ciName: ''
-    };
-  }, [resourceData]);
-
-  var _useState = (0, _react.useState)(''),
-      userId = _useState[0],
-      setUserId = _useState[1];
-
-  (0, _react.useEffect)(function () {
-    var notifier = topo.view.topoClient.notifier;
-    notifier.on(_componentTopologyGraph.TopoEvent.EVENT_DOUBLE_CLICK, openOverview);
-    notifier.on('topo_element_click', changeOverview);
-    return function () {
-      notifier.off(_componentTopologyGraph.TopoEvent.EVENT_DOUBLE_CLICK, openOverview);
-      notifier.off('topo_element_click', changeOverview); // 清除数据
-
-      topoDispatchers.update({
-        id: '',
-        metricCodes: []
-      });
-    };
-  }, [lock]);
+      topoId = _topo$store$useModelS.topoId;
+
+  var elementDetailManager = (0, _useElementDetailManager["default"])({
+    topo: topo,
+    canShow: canShow,
+    resourceDetailProps: viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.resourceDetailProps
+  });
+  var visible = elementDetailManager.visible,
+      id = elementDetailManager.id,
+      resourceData = elementDetailManager.resourceData,
+      Content = elementDetailManager.Content;
   (0, _react.useEffect)(function () {
+    elementDetailManager.init();
     return function () {
-      resourceDetailDispatchers.reset();
+      elementDetailManager.destroy();
     };
   }, []); // 解决切换拓扑图隐藏概览
 
   (0, _react.useEffect)(function () {
-    close(); // TODO 其他数据重置
+    elementDetailManager.reset();
   }, [topoId]);
-
-  function getUser() {
-    return _getUser.apply(this, arguments);
-  } // select切换
-
-
-  function _getUser() {
-    _getUser = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-      return _regenerator["default"].wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              setUserId(function (prev) {
-                // console.log('获取用户id', prev);
-                // 如果已经获取过，就不再重新获取
-                if (!prev) {
-                  (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-                    var res;
-                    return _regenerator["default"].wrap(function _callee$(_context) {
-                      while (1) {
-                        switch (_context.prev = _context.next) {
-                          case 0:
-                            _context.next = 2;
-                            return _overview["default"].getUserId();
-
-                          case 2:
-                            res = _context.sent;
-                            setUserId((res === null || res === void 0 ? void 0 : res.user_id) || '');
-
-                          case 4:
-                          case "end":
-                            return _context.stop();
-                        }
-                      }
-                    }, _callee);
-                  }))();
-                }
-
-                return prev;
-              });
-
-            case 1:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    }));
-    return _getUser.apply(this, arguments);
-  }
-
-  function onChangeActive(activeNode) {
-    activeNode && init((0, _extends2["default"])({}, activeNode, {
-      type: 'node'
-    }), 'select');
-  } // 单击切换
-
-
-  function changeOverview(node) {
-    var data = node.getAttrObject();
-    init(data, 'click');
-  }
-
-  function openOverviewByHtElement(element) {
-    openOverview(element.getAttrObject());
-  } // 双击打开
-
-
-  function openOverview(data) {
-    if (lock) {
-      init(data, 'doubleClick');
-    }
-  }
-
-  function close() {
-    resourceDetailDispatchers.update({
-      visible: false
-    });
-  }
-
-  function init(data, targetType) {
-    // console.log('初始化基本信息', data, targetType);
-    var id = data.id,
-        name = data.name,
-        type = data.type,
-        ciType = data.ciType,
-        ciName = data.ciName; // 仅展示资源和链路的概览
-
-    var resourceData = topo.dataModel.getDataById(id);
-
-    if (!resourceData) {
-      return;
-    }
-
-    var operation = resourceData.operation,
-        permission = resourceData.permission;
-    if ( // 没有权限不显示
-    !operation && !(permission !== null && permission !== void 0 && permission.readable) || // 没有citype不显示
-    !ciType) return;
-    var htElement = topo.getDataModel().getDataByTag(id);
-
-    if (!canShow(htElement)) {
-      return;
-    } // 显示隐藏
-
-
-    if (targetType === 'doubleClick') {
-      resourceDetailDispatchers.update({
-        visible: true,
-        id: id
-      });
-    } else {
-      resourceDetailDispatchers.update({
-        id: id
-      });
-    } // userId
-
-
-    getUser();
-  }
-
-  var renderContent = function renderContent() {
-    // 支持自定义概览
-    var _ref = (viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.resourceDetailProps) || {},
-        getResourceDetail = _ref.getResourceDetail;
-
-    var ResourceDetailWidget;
-
-    if (getResourceDetail) {
-      ResourceDetailWidget = getResourceDetail(resourceData);
-    }
-
-    if (!ResourceDetailWidget) {
-      ResourceDetailWidget = _ResourceDetail["default"];
-    }
-
-    return /*#__PURE__*/_react["default"].createElement(ResourceDetailWidget, (0, _extends2["default"])({}, props, {
-      topo: topo,
-      userId: userId,
-      activeData: activeData,
-      resourceData: resourceData,
-      onClose: close
-    }));
-  };
-
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_drawer["default"], {
-    className: _indexModule["default"].baseInfo,
-    closeMode: ['close', 'esc'],
+  return /*#__PURE__*/_react["default"].createElement(_DetailDrawer["default"], {
     visible: visible,
-    title: /*#__PURE__*/_react["default"].createElement(_DrawerTitle["default"], (0, _extends2["default"])({}, activeData, {
+    title: visible && /*#__PURE__*/_react["default"].createElement(_DrawerTitle["default"], {
+      id: id,
+      data: resourceData,
       topo: topo,
-      onChange: onChangeActive
-    })),
-    width: 580,
-    hasMask: false,
-    onClose: close
-  }, visible && resourceData && renderContent()));
+      onChange: elementDetailManager.open
+    }),
+    onClose: elementDetailManager.close
+  }, visible && /*#__PURE__*/_react["default"].createElement(Content, (0, _extends2["default"])({}, props, {
+    topo: topo,
+    visible: visible,
+    id: id,
+    viewerProps: viewerProps,
+    onClose: elementDetailManager.close,
+    onChangeActive: elementDetailManager.open
+  })));
 }
 
 ResourceDetailDrawer.propTypes = {

package/lib/core/viewer/components/plugins/ResourceDetail/components/DrawerTitle.js

@@ -19,62 +19,80 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-function Title(_ref) {
+function NodeDrawerTitle(_ref) {
   var id = _ref.id,
-      name = _ref.name,
-      type = _ref.type,
       onChange = _ref.onChange,
       topo = _ref.topo;
 
-  if (type === 'node') {
-    var _useState = (0, _react.useState)(''),
-        keyword = _useState[0],
-        setKeyword = _useState[1];
-
-    var nodes = topo.store.getModelState('topoMod').data.nodes; // 查询资源列表
-
-    nodes = nodes.filter(function (item) {
-      return item.id !== id;
-    });
-    if (!nodes.length) return name;
-    var filterNodes = (0, _utils.dataSearch)(nodes, ['name'], keyword);
-    return /*#__PURE__*/_react["default"].createElement(_menuButton["default"], {
-      text: true,
-      autoWidth: false,
-      size: "large",
-      popupClassName: _indexModule["default"]['title-popup'],
-      menuProps: {
-        header: /*#__PURE__*/_react["default"].createElement(_search["default"], {
-          shape: "simple",
-          placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57",
-          className: _indexModule["default"].search,
-          hasClear: true,
-          onChange: function onChange(val) {
-            return !val && setKeyword(val);
-          },
-          onSearch: setKeyword
-        })
-      },
-      label: /*#__PURE__*/_react["default"].createElement("div", {
-        className: _indexModule["default"]['drawer-title']
-      }, name),
-      onItemClick: function onItemClick(key) {
-        return onChange(nodes.find(function (item) {
-          return item.id === key;
-        }) || '');
-      }
-    }, (0, _utils.isAvailableArray)(filterNodes) && filterNodes.length ? filterNodes.map(function (item) {
-      return /*#__PURE__*/_react["default"].createElement(_menuButton["default"].Item, {
-        key: item.id,
-        disabled: !item.operation
-      }, item.name);
-    }) : /*#__PURE__*/_react["default"].createElement("div", {
-      className: _indexModule["default"]['not-data']
-    }, "\u6682\u65E0\u6570\u636E"));
-  } else {
-    return /*#__PURE__*/_react["default"].createElement("div", {
+  var _useState = (0, _react.useState)(''),
+      keyword = _useState[0],
+      setKeyword = _useState[1];
+
+  var resourceData = topo.dataModel.useDataById(id);
+  var name = resourceData === null || resourceData === void 0 ? void 0 : resourceData.name;
+  var nodes = topo.store.getModelState('topoMod').data.nodes; // 查询资源列表
+
+  nodes = nodes.filter(function (item) {
+    return item.id !== id;
+  });
+  if (!nodes.length) return name;
+  var filterNodes = (0, _utils.dataSearch)(nodes, ['name'], keyword);
+  return /*#__PURE__*/_react["default"].createElement(_menuButton["default"], {
+    text: true,
+    autoWidth: false,
+    size: "large",
+    popupClassName: _indexModule["default"]['title-popup'],
+    menuProps: {
+      header: /*#__PURE__*/_react["default"].createElement(_search["default"], {
+        shape: "simple",
+        placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57",
+        className: _indexModule["default"].search,
+        hasClear: true,
+        onChange: function onChange(val) {
+          return !val && setKeyword(val);
+        },
+        onSearch: setKeyword
+      })
+    },
+    label: /*#__PURE__*/_react["default"].createElement("div", {
       className: _indexModule["default"]['drawer-title']
-    }, "\u94FE\u8DEF\u8BE6\u60C5");
+    }, name),
+    onItemClick: function onItemClick(key) {
+      return onChange({
+        id: key
+      });
+    }
+  }, (0, _utils.isAvailableArray)(filterNodes) && filterNodes.length ? filterNodes.map(function (item) {
+    return /*#__PURE__*/_react["default"].createElement(_menuButton["default"].Item, {
+      key: item.id,
+      disabled: !item.operation
+    }, item.name);
+  }) : /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"]['not-data']
+  }, "\u6682\u65E0\u6570\u636E"));
+}
+
+function LinkDrawerTitle(_ref2) {
+  var id = _ref2.id,
+      onChange = _ref2.onChange,
+      topo = _ref2.topo;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"]['drawer-title']
+  }, "\u94FE\u8DEF\u8BE6\u60C5");
+}
+
+function Title(props) {
+  var id = props.id,
+      data = props.data,
+      onChange = props.onChange,
+      topo = props.topo;
+
+  if (!id) {
+    return null;
+  } else if ((data === null || data === void 0 ? void 0 : data.type) === 'node') {
+    return /*#__PURE__*/_react["default"].createElement(NodeDrawerTitle, props);
+  } else {
+    return /*#__PURE__*/_react["default"].createElement(LinkDrawerTitle, props);
   }
 }
 

package/lib/core/viewer/components/plugins/ResourceDetail/hooks/useUserId.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _overview = _interopRequireDefault(require("../../../../../services/overview"));
+
+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; }
+
+function useUserId(props) {
+  var _useState = (0, _react.useState)(''),
+      userId = _useState[0],
+      setUserId = _useState[1];
+
+  function fetchUserId() {
+    return _fetchUserId.apply(this, arguments);
+  }
+
+  function _fetchUserId() {
+    _fetchUserId = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              setUserId(function (prev) {
+                // console.log('获取用户id', prev);
+                // 如果已经获取过，就不再重新获取
+                if (!prev) {
+                  (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+                    var res;
+                    return _regenerator["default"].wrap(function _callee$(_context) {
+                      while (1) {
+                        switch (_context.prev = _context.next) {
+                          case 0:
+                            _context.next = 2;
+                            return _overview["default"].getUserId();
+
+                          case 2:
+                            res = _context.sent;
+                            setUserId((res === null || res === void 0 ? void 0 : res.user_id) || '');
+
+                          case 4:
+                          case "end":
+                            return _context.stop();
+                        }
+                      }
+                    }, _callee);
+                  }))();
+                }
+
+                return prev;
+              });
+
+            case 1:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+    return _fetchUserId.apply(this, arguments);
+  }
+
+  return {
+    fetchUserId: fetchUserId,
+    userId: userId
+  };
+}
+
+var _default = useUserId;
+exports["default"] = _default;

package/lib/style.js

@@ -4,9 +4,9 @@ require('@alifd/next/lib/message/style');
 require('@riil-frontend/component-topology-utils/lib/style');
 require('@riil-frontend/component-riil-event-emitter/lib/style');
 require('@riil-frontend/utils/lib/style');
-require('@alifd/next/lib/drawer/style');
 require('@alifd/next/lib/menu-button/style');
 require('@alifd/next/lib/search/style');
+require('@alifd/next/lib/drawer/style');
 require('@alifd/next/lib/tab/style');
 require('@alifd/next/lib/table/style');
 require('@riil-frontend/component-table-layout/lib/style');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riil-frontend/component-topology",
-  "version": "10.0.17",
+  "version": "10.0.19",
   "description": "拓扑",
   "scripts": {
     "start": "build-scripts start",
@@ -116,6 +116,6 @@
     "access": "public"
   },
   "license": "MIT",
-  "homepage": "https://unpkg.com/@riil-frontend/component-topology@10.0.17/build/index.html",
+  "homepage": "https://unpkg.com/@riil-frontend/component-topology@10.0.19/build/index.html",
   "gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
 }