@riil-frontend/component-topology 3.1.6 → 3.1.7

package/lib/core/viewer/components/plugins/BaseInfo/index.js

@@ -5,296 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _ResourceDetailPlugin = _interopRequireDefault(require("./ResourceDetailPlugin"));
 
-var _drawer = _interopRequireDefault(require("@alifd/next/lib/drawer"));
-
-var _tab = _interopRequireDefault(require("@alifd/next/lib/tab"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-var _menuButton = _interopRequireDefault(require("@alifd/next/lib/menu-button"));
-
-var _search = _interopRequireDefault(require("@alifd/next/lib/search"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _utils = require("@riil-frontend/utils");
-
-var _componentTopologyGraph = require("@riil-frontend/component-topology-graph");
-
-var _overview = _interopRequireDefault(require("../../../../services/overview"));
-
-var _indexModule = _interopRequireDefault(require("./index.module.scss"));
-
-var _ResourceOverview = _interopRequireDefault(require("./components/ResourceOverview"));
-
-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 Title(_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", {
-      className: _indexModule["default"]['drawer-title']
-    }, "\u94FE\u8DEF\u8BE6\u60C5");
-  }
-} // 基本信息
-
-
-function BaseInfo(props) {
-  var topo = props.topo;
-
-  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 _useState2 = (0, _react.useState)(false),
-      visible = _useState2[0],
-      setVisible = _useState2[1];
-
-  var _useState3 = (0, _react.useState)({
-    id: '',
-    name: '',
-    type: '',
-    // 类型： node、link
-    ciType: '',
-    ciName: ''
-  }),
-      activeData = _useState3[0],
-      setActiveData = _useState3[1];
-
-  var _useState4 = (0, _react.useState)(''),
-      userId = _useState4[0],
-      setUserId = _useState4[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: []
-      });
-    };
-  }, []); // 解决切换拓扑图隐藏概览
-
-  (0, _react.useEffect)(function () {
-    setVisible(false); // TODO 其他数据重置
-  }, [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 openOverview(data) {
-    init(data, 'doubleClick');
-  }
-
-  function init(data, targetType) {
-    var _topo$options$resourc;
-
-    console.log('初始化基本信息', data, targetType);
-    var id = data.id,
-        name = data.name,
-        type = data.type,
-        ciType = data.ciType,
-        ciName = data.ciName,
-        operation = data.operation; // 仅展示资源和链路的概览
-
-    if (!['node', 'link', 'linkGroup'].includes(type)) return; // 应用拓扑中没有链路详情
-
-    if ((_topo$options$resourc = topo.options.resourceOverviewDrawer) !== null && _topo$options$resourc !== void 0 && _topo$options$resourc.getData && type === 'link') return; // 没有权限不显示
-
-    if (!operation) return;
-    setActiveData({
-      id: id,
-      name: name,
-      type: type === 'linkGroup' ? 'link' : type,
-      ciType: ciType,
-      ciName: ciName
-    }); // 显示隐藏
-
-    targetType === 'doubleClick' && setVisible(true); // userId
-
-    getUser();
-  }
-
-  (0, _react.useEffect)(function () {
-    console.log('topoData', activeData.ciType, topoModData);
-
-    if (topoModData && activeData !== null && activeData !== void 0 && activeData.id) {
-      var id = activeData.id,
-          ciType = activeData.ciType;
-      var ciTypeMeta;
-
-      if (ciType === 'network_link') {
-        // 网络链路要按链路类型查询属性、指标
-        var linkGroups = topoModData.linkGroups,
-            links = topoModData.links;
-        var link = [].concat(linkGroups, links).find(function (item) {
-          return item.id === id;
-        });
-        var linkConnectType = link.attributes['network_link.connect_type'];
-        ciTypeMeta = topo.ciTyeCache.getNetworkLinkCiType(linkConnectType);
-      } else {
-        ciTypeMeta = topo.ciTyeCache.getCiType(ciType);
-      }
-
-      var _ciTypeMeta = ciTypeMeta,
-          metrics = _ciTypeMeta.metrics; // 同步需要实时展示的指标
-
-      topoDispatchers.update({
-        id: id,
-        metricCodes: metrics.slice(0, 6).map(function (item) {
-          return item.code;
-        }) // 需要展示的关键指标 code
-
-      });
-    }
-  }, [topoModData, activeData]);
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_drawer["default"], {
-    className: _indexModule["default"].baseInfo,
-    closeMode: ['close', 'esc'],
-    visible: visible,
-    title: /*#__PURE__*/_react["default"].createElement(Title, (0, _extends2["default"])({}, activeData, {
-      topo: topo,
-      onChange: onChangeActive
-    })),
-    width: 580,
-    hasMask: false,
-    onClose: function onClose() {
-      return setVisible(false);
-    }
-  }, visible && /*#__PURE__*/_react["default"].createElement(_tab["default"], {
-    className: _indexModule["default"].tab
-  }, /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
-    title: "\u8D44\u6E90\u6982\u89C8",
-    key: "1"
-  }, activeData.id && /*#__PURE__*/_react["default"].createElement(_ResourceOverview["default"], (0, _extends2["default"])({}, props, activeData, {
-    userId: userId
-  }))))));
-}
-
-var _default = BaseInfo;
+var _default = _ResourceDetailPlugin["default"];
 exports["default"] = _default;

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

@@ -17,7 +17,7 @@ var _NodesDragSwitch = _interopRequireDefault(require("./widgets/NodesDragSwitch
 
 var _AlarmListShowButton = _interopRequireDefault(require("./widgets/AlarmListShowButton"));
 
-var _SettingButton = _interopRequireDefault(require("./widgets/SettingButton"));
+var _SettingButtonWidget = _interopRequireDefault(require("./widgets/SettingButtonWidget"));
 
 function BasicTools(props) {
   var topo = props.topo,
@@ -31,7 +31,7 @@ function BasicTools(props) {
     topo: topo
   }, props)), /*#__PURE__*/_react["default"].createElement(_AlarmListShowButton["default"], (0, _extends2["default"])({
     topo: topo
-  }, props)), /*#__PURE__*/_react["default"].createElement(_SettingButton["default"], props), /*#__PURE__*/_react["default"].createElement(_NodesDragSwitch["default"], (0, _extends2["default"])({
+  }, props)), /*#__PURE__*/_react["default"].createElement(_SettingButtonWidget["default"], props), /*#__PURE__*/_react["default"].createElement(_NodesDragSwitch["default"], (0, _extends2["default"])({
     topo: topo
   }, props)), children);
 }

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

@@ -24,9 +24,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 function SettingButton(props) {
   var topo = props.topo,
-      viewerProps = props.viewerProps,
+      displaySettingProps = props.displaySettingProps,
       style = props.style;
-  var id = topo.id;
 
   var _useState = (0, _react.useState)(false),
       visible = _useState[0],
@@ -44,7 +43,7 @@ function SettingButton(props) {
   })), /*#__PURE__*/_react["default"].createElement(_DisplaySettingDrawer["default"], {
     visible: visible,
     topo: topo,
-    viewerProps: viewerProps,
+    displaySettingProps: displaySettingProps,
     onClose: function onClose() {
       setVisible(false);
     }

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

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = SettingButtonWidget;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SettingButton = _interopRequireDefault(require("./SettingButton"));
+
+/**
+ * 设置按钮
+ *
+ * @return {any}
+ */
+function SettingButtonWidget(props) {
+  var topo = props.topo,
+      viewerProps = props.viewerProps,
+      style = props.style;
+  return /*#__PURE__*/_react["default"].createElement(_SettingButton["default"], {
+    topo: topo,
+    displaySettingProps: viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.displaySettingProps,
+    style: style
+  });
+}
+
+;

package/lib/topoCenter/components/TopoView.js

@@ -70,10 +70,9 @@ function NetworkTopologyCore(props) {
       plugins: [],
       // 右侧工具栏按钮
       ViewerTitlebarRightTools: _ViewerTools["default"],
-      showLinkConfig: true,
-      // 是否显示链路相关配置
-      onDisplaySettingDrawerOk: function onDisplaySettingDrawerOk() {},
-      displaySettingDrawerProps: {
+      displaySettingProps: {
+        showLinkConfig: true,
+        // 是否显示链路相关配置
         linkTagConfig: function linkTagConfig(params) {
           return /*#__PURE__*/_react["default"].createElement(_LinkTag["default"], params);
         },

package/lib/topoCenter/models/TopoCenter.js

@@ -42,12 +42,16 @@ var TopoCenter = /*#__PURE__*/function (_TopoApp) {
     }, options, {
       usePermission: true,
       storeModels: (0, _extends2["default"])({}, _store["default"], options.storeModels),
-      // 默认链路标注/悬浮框显示配置
-      defaultLinkTagTipConfig: {
-        tag: _ResourceInfoDisplay.DEFAULT_LINK_TAG_COMMON_CONFIG,
-        tip: _ResourceInfoDisplay.DEFAULT_TIP_COMMON_CONFIG
+      tagTip: {
+        // 默认链路标注/悬浮框显示配置
+        getDefaultLinkTagConfig: function getDefaultLinkTagConfig() {
+          return _ResourceInfoDisplay.DEFAULT_LINK_TAG_COMMON_CONFIG;
+        },
+        getDefaultLinkTipConfig: function getDefaultLinkTipConfig() {
+          return _ResourceInfoDisplay.DEFAULT_TIP_COMMON_CONFIG;
+        },
+        ExtElementTagTipBuilder: _LinkTagsTipsBuilder["default"]
       },
-      ExtElementTagTipBuilder: _LinkTagsTipsBuilder["default"],
       onSwitchToEditModeBegin: function () {
         var _onSwitchToEditModeBegin = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(topo) {
           var topoDispatchers;

package/package.json

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