@riil-frontend/component-topology 5.0.0-alpha.21 → 5.0.0-alpha.22

package/es/core/models/HistoryManager.js

@@ -55,6 +55,10 @@ export var HistoryManager = /*#__PURE__*/function () {
     var items = [{
       modelName: 'topoMod',
       property: 'data'
+    }, // 拓扑类型
+    {
+      modelName: 'topoMod',
+      property: 'type'
     }, {
       modelName: 'displayConfig',
       property: 'expandAllEdges'

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.0-alpha.21" === 'string' ? "5.0.0-alpha.21" : null;
+var version = typeof "5.0.0-alpha.22" === 'string' ? "5.0.0-alpha.22" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

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

@@ -1,259 +1,61 @@
-import _Drawer from "@alifd/next/es/drawer";
 import _extends from "@babel/runtime/helpers/extends";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { TopoEvent } from '@riil-frontend/component-topology-graph';
-import PropTypes from 'prop-types';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import Tab from "../../../../../components/FullheightTab";
-import service from "../../../../services/overview";
 import ClusterMemberTable from "./components/ClusterMemberTable";
-import Title from "./components/DrawerTitle";
 import ResourceOverview from "./components/ResourceOverview";
 import WebConsole from "./components/WebConsole/WebConsoleContainer";
-import styles from "./index.module.scss"; // 基本信息
+import styles from "./index.module.scss";
+export default function ResourceDetail(props) {
+  var _topo$viewProps, _topo$viewProps$viewe, _topo$viewProps$viewe2;
 
-function ResourceDetail(props) {
   var topo = props.topo,
-      canShow = props.canShow;
-
-  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 _useState = useState(false),
-      visible = _useState[0],
-      setVisible = _useState[1];
-
-  var _useState2 = useState({
-    id: '',
-    name: '',
-    type: '',
-    // 类型： node、link
-    ciType: '',
-    ciName: ''
-  }),
-      activeData = _useState2[0],
-      setActiveData = _useState2[1];
-
-  var _useState3 = useState(''),
-      userId = _useState3[0],
-      setUserId = _useState3[1];
-
-  var resourceData = topo.dataModel.useDataById(activeData.id);
-  useEffect(function () {
-    var notifier = topo.view.topoClient.notifier;
-    notifier.on(TopoEvent.EVENT_DOUBLE_CLICK, openOverview);
-    notifier.on('topo_element_click', changeOverview);
-    return function () {
-      notifier.off(TopoEvent.EVENT_DOUBLE_CLICK, openOverview);
-      notifier.off('topo_element_click', changeOverview); // 清除数据
-
-      topoDispatchers.update({
-        id: '',
-        metricCodes: []
-      });
-    };
-  }, [lock]); // 解决切换拓扑图隐藏概览
-
-  useEffect(function () {
-    setVisible(false); // TODO 其他数据重置
-  }, [topoId]);
-
-  function getUser() {
-    return _getUser.apply(this, arguments);
-  } // select切换
-
-
-  function _getUser() {
-    _getUser = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              setUserId(function (prev) {
-                console.log('获取用户id', prev); // 如果已经获取过，就不再重新获取
-
-                if (!prev) {
-                  _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-                    var res;
-                    return _regeneratorRuntime.wrap(function _callee$(_context) {
-                      while (1) {
-                        switch (_context.prev = _context.next) {
-                          case 0:
-                            _context.next = 2;
-                            return service.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);
+      userId = props.userId,
+      activeData = props.activeData,
+      resourceData = props.resourceData; // {/* <Tab.Item title="操作" key="2">操作</Tab.Item>
+  //     <Tab.Item title="网络信息表" key="3">网络信息表</Tab.Item>
+  //     <Tab.Item title="Web工作台" key="4">Web工作台</Tab.Item> */}
+
+  var tabBodys = [{
+    title: '资源概览',
+    content: /*#__PURE__*/React.createElement(ResourceOverview, _extends({}, props, activeData, {
+      userId: userId
+    }))
+  }, {
+    title: '集群成员',
+    content: /*#__PURE__*/React.createElement(ClusterMemberTable, {
+      data: resourceData,
+      topo: topo
+    }),
+    visible: !!resourceData.cluster
+  }, {
+    title: 'Web工作台',
+    content: /*#__PURE__*/React.createElement(WebConsole, {
+      data: resourceData,
+      topo: topo
+    }),
+    visible: activeData.type === 'node' && ((_topo$viewProps = topo.viewProps) === null || _topo$viewProps === void 0 ? void 0 : (_topo$viewProps$viewe = _topo$viewProps.viewerProps) === null || _topo$viewProps$viewe === void 0 ? void 0 : (_topo$viewProps$viewe2 = _topo$viewProps$viewe.topoContext) === null || _topo$viewProps$viewe2 === void 0 ? void 0 : _topo$viewProps$viewe2.isNetworkTopo)
+  }].filter(function (item) {
+    return item.visible !== false;
+  });
+
+  if (tabBodys.length === 1) {
+    return /*#__PURE__*/React.createElement(ResourceOverview, _extends({}, props, activeData, {
+      userId: userId,
+      style: {
+        overflowY: 'auto',
+        height: '100%'
+      }
     }));
-    return _getUser.apply(this, arguments);
-  }
-
-  function onChangeActive(activeNode) {
-    activeNode && init(_extends({}, 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 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;
-    }
-
-    setActiveData({
-      id: id,
-      name: name,
-      type: {
-        linkGroup: 'link',
-        group: 'node'
-      }[type] || type,
-      ciType: ciType,
-      ciName: ciName
-    }); // 显示隐藏
-
-    targetType === 'doubleClick' && setVisible(true); // userId
-
-    getUser();
   }
 
-  var renderContent = function renderContent() {
-    var _topo$viewProps, _topo$viewProps$viewe, _topo$viewProps$viewe2;
-
-    // {/* <Tab.Item title="操作" key="2">操作</Tab.Item>
-    //     <Tab.Item title="网络信息表" key="3">网络信息表</Tab.Item>
-    //     <Tab.Item title="Web工作台" key="4">Web工作台</Tab.Item> */}
-    var tabBodys = [{
-      title: '资源概览',
-      content: /*#__PURE__*/React.createElement(ResourceOverview, _extends({}, props, activeData, {
-        userId: userId
-      }))
-    }, {
-      title: '集群成员',
-      content: /*#__PURE__*/React.createElement(ClusterMemberTable, {
-        data: resourceData,
-        topo: topo
-      }),
-      visible: resourceData.cluster
-    }, {
-      title: 'Web工作台',
-      content: /*#__PURE__*/React.createElement(WebConsole, {
-        data: resourceData,
-        topo: topo
-      }),
-      visible: activeData.type === 'node' && ((_topo$viewProps = topo.viewProps) === null || _topo$viewProps === void 0 ? void 0 : (_topo$viewProps$viewe = _topo$viewProps.viewerProps) === null || _topo$viewProps$viewe === void 0 ? void 0 : (_topo$viewProps$viewe2 = _topo$viewProps$viewe.topoContext) === null || _topo$viewProps$viewe2 === void 0 ? void 0 : _topo$viewProps$viewe2.isNetworkTopo)
-    }].filter(function (item) {
-      return item.visible !== false;
-    });
-
-    if (tabBodys.length === 1) {
-      return /*#__PURE__*/React.createElement(ResourceOverview, _extends({}, props, activeData, {
-        userId: userId,
-        style: {
-          overflowY: 'auto',
-          height: '100%'
-        }
-      }));
-    }
-
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles.tabContainer
-    }, /*#__PURE__*/React.createElement(Tab, {
-      className: styles.tab
-    }, tabBodys.map(function (item, key) {
-      return /*#__PURE__*/React.createElement(Tab.Item, {
-        title: item.title,
-        key: item.title
-      }, item.content);
-    })));
-  };
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Drawer, {
-    className: styles.baseInfo,
-    closeMode: ['close', 'esc'],
-    visible: visible,
-    title: /*#__PURE__*/React.createElement(Title, _extends({}, activeData, {
-      topo: topo,
-      onChange: onChangeActive
-    })),
-    width: 580,
-    hasMask: false,
-    onClose: function onClose() {
-      return setVisible(false);
-    }
-  }, visible && resourceData && renderContent()));
-}
-
-ResourceDetail.propTypes = {
-  canShow: PropTypes.func
-};
-ResourceDetail.defaultProps = {
-  canShow: function canShow(htElement) {
-    return true;
-  }
-};
-export default ResourceDetail;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.tabContainer
+  }, /*#__PURE__*/React.createElement(Tab, {
+    className: styles.tab
+  }, tabBodys.map(function (item, key) {
+    return /*#__PURE__*/React.createElement(Tab.Item, {
+      title: item.title,
+      key: item.title
+    }, item.content);
+  })));
+}

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

@@ -0,0 +1,256 @@
+import _Drawer from "@alifd/next/es/drawer";
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { TopoEvent } from '@riil-frontend/component-topology-graph';
+import PropTypes from 'prop-types';
+import React, { useEffect, useId, useState } from 'react';
+import Tab from "../../../../../components/FullheightTab";
+import service from "../../../../services/overview";
+import ClusterMemberTable from "./components/ClusterMemberTable";
+import Title from "./components/DrawerTitle";
+import ResourceOverview from "./components/ResourceOverview";
+import WebConsole from "./components/WebConsole/WebConsoleContainer";
+import styles from "./index.module.scss";
+import ResourceDetail from "./ResourceDetail"; // 基本信息
+
+function ResourceDetailDrawer(props) {
+  var topo = props.topo,
+      canShow = props.canShow;
+
+  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 _useState = useState(false),
+      visible = _useState[0],
+      setVisible = _useState[1];
+
+  var _useState2 = useState({
+    id: '',
+    name: '',
+    type: '',
+    // 类型： node、link
+    ciType: '',
+    ciName: ''
+  }),
+      activeData = _useState2[0],
+      setActiveData = _useState2[1];
+
+  var _useState3 = useState(''),
+      userId = _useState3[0],
+      setUserId = _useState3[1];
+
+  var resourceData = topo.dataModel.useDataById(activeData.id);
+  useEffect(function () {
+    var notifier = topo.view.topoClient.notifier;
+    notifier.on(TopoEvent.EVENT_DOUBLE_CLICK, openOverview);
+    notifier.on('topo_element_click', changeOverview);
+    return function () {
+      notifier.off(TopoEvent.EVENT_DOUBLE_CLICK, openOverview);
+      notifier.off('topo_element_click', changeOverview); // 清除数据
+
+      topoDispatchers.update({
+        id: '',
+        metricCodes: []
+      });
+    };
+  }, [lock]); // 解决切换拓扑图隐藏概览
+
+  useEffect(function () {
+    setVisible(false); // TODO 其他数据重置
+  }, [topoId]);
+
+  function getUser() {
+    return _getUser.apply(this, arguments);
+  } // select切换
+
+
+  function _getUser() {
+    _getUser = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              setUserId(function (prev) {
+                console.log('获取用户id', prev); // 如果已经获取过，就不再重新获取
+
+                if (!prev) {
+                  _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+                    var res;
+                    return _regeneratorRuntime.wrap(function _callee$(_context) {
+                      while (1) {
+                        switch (_context.prev = _context.next) {
+                          case 0:
+                            _context.next = 2;
+                            return service.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(_extends({}, 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 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;
+    }
+
+    setActiveData({
+      id: id,
+      name: name,
+      type: {
+        linkGroup: 'link',
+        group: 'node'
+      }[type] || type,
+      ciType: ciType,
+      ciName: ciName
+    }); // 显示隐藏
+
+    targetType === 'doubleClick' && setVisible(true); // userId
+
+    getUser();
+  }
+
+  var renderContent = function renderContent() {
+    var _topo$viewProps, _topo$viewProps$viewe, _topo$viewProps$viewe2;
+
+    // {/* <Tab.Item title="操作" key="2">操作</Tab.Item>
+    //     <Tab.Item title="网络信息表" key="3">网络信息表</Tab.Item>
+    //     <Tab.Item title="Web工作台" key="4">Web工作台</Tab.Item> */}
+    var tabBodys = [{
+      title: '资源概览',
+      content: /*#__PURE__*/React.createElement(ResourceOverview, _extends({}, props, activeData, {
+        userId: userId
+      }))
+    }, {
+      title: '集群成员',
+      content: /*#__PURE__*/React.createElement(ClusterMemberTable, {
+        data: resourceData,
+        topo: topo
+      }),
+      visible: resourceData.cluster
+    }, {
+      title: 'Web工作台',
+      content: /*#__PURE__*/React.createElement(WebConsole, {
+        data: resourceData,
+        topo: topo
+      }),
+      visible: activeData.type === 'node' && ((_topo$viewProps = topo.viewProps) === null || _topo$viewProps === void 0 ? void 0 : (_topo$viewProps$viewe = _topo$viewProps.viewerProps) === null || _topo$viewProps$viewe === void 0 ? void 0 : (_topo$viewProps$viewe2 = _topo$viewProps$viewe.topoContext) === null || _topo$viewProps$viewe2 === void 0 ? void 0 : _topo$viewProps$viewe2.isNetworkTopo)
+    }].filter(function (item) {
+      return item.visible !== false;
+    });
+
+    if (tabBodys.length === 1) {
+      return /*#__PURE__*/React.createElement(ResourceOverview, _extends({}, props, activeData, {
+        userId: userId,
+        style: {
+          overflowY: 'auto',
+          height: '100%'
+        }
+      }));
+    }
+
+    return /*#__PURE__*/React.createElement(ResourceDetail, _extends({}, props, {
+      topo: topo,
+      userId: useId,
+      activeData: activeData,
+      resourceData: resourceData
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Drawer, {
+    className: styles.baseInfo,
+    closeMode: ['close', 'esc'],
+    visible: visible,
+    title: /*#__PURE__*/React.createElement(Title, _extends({}, activeData, {
+      topo: topo,
+      onChange: onChangeActive
+    })),
+    width: 580,
+    hasMask: false,
+    onClose: function onClose() {
+      return setVisible(false);
+    }
+  }, visible && resourceData && renderContent()));
+}
+
+ResourceDetailDrawer.propTypes = {
+  canShow: PropTypes.func
+};
+ResourceDetailDrawer.defaultProps = {
+  canShow: function canShow(htElement) {
+    return true;
+  }
+};
+export default ResourceDetailDrawer;

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import ResourceDetail from "./ResourceDetail";
+import ResourceDetailDrawer from "./ResourceDetailDrawer";
 
 function ResourceDetailPlugin(props) {
   var viewerProps = props.viewerProps;
@@ -11,7 +11,7 @@ function ResourceDetailPlugin(props) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(ResourceDetail, _extends({}, props, resourceDetailProps));
+  return /*#__PURE__*/React.createElement(ResourceDetailDrawer, _extends({}, props, resourceDetailProps));
 }
 
 export default ResourceDetailPlugin;