@riil-frontend/component-topology 3.1.4 → 3.1.7

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

@@ -1,276 +1,2 @@
-import _Drawer from "@alifd/next/es/drawer";
-import _Tab from "@alifd/next/es/tab";
-import _extends from "@babel/runtime/helpers/extends";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _MenuButton from "@alifd/next/es/menu-button";
-import _Search from "@alifd/next/es/search";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { isAvailableArray, dataSearch } from '@riil-frontend/utils';
-import { TopoEvent } from '@riil-frontend/component-topology-graph';
-import service from "../../../../services/overview";
-import styles from "./index.module.scss";
-import ResourceOverview from "./components/ResourceOverview";
-
-function Title(_ref) {
-  var id = _ref.id,
-      name = _ref.name,
-      type = _ref.type,
-      onChange = _ref.onChange,
-      topo = _ref.topo;
-
-  if (type === 'node') {
-    var _useState = 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 = dataSearch(nodes, ['name'], keyword);
-    return /*#__PURE__*/React.createElement(_MenuButton, {
-      text: true,
-      autoWidth: false,
-      size: "large",
-      popupClassName: styles['title-popup'],
-      menuProps: {
-        header: /*#__PURE__*/React.createElement(_Search, {
-          shape: "simple",
-          placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57",
-          className: styles.search,
-          hasClear: true,
-          onChange: function onChange(val) {
-            return !val && setKeyword(val);
-          },
-          onSearch: setKeyword
-        })
-      },
-      label: /*#__PURE__*/React.createElement("div", {
-        className: styles['drawer-title']
-      }, name),
-      onItemClick: function onItemClick(key) {
-        return onChange(nodes.find(function (item) {
-          return item.id === key;
-        }) || '');
-      }
-    }, isAvailableArray(filterNodes) && filterNodes.length ? filterNodes.map(function (item) {
-      return /*#__PURE__*/React.createElement(_MenuButton.Item, {
-        key: item.id,
-        disabled: !item.operation
-      }, item.name);
-    }) : /*#__PURE__*/React.createElement("div", {
-      className: styles['not-data']
-    }, "\u6682\u65E0\u6570\u636E"));
-  } else {
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles['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 = useState(false),
-      visible = _useState2[0],
-      setVisible = _useState2[1];
-
-  var _useState3 = useState({
-    id: '',
-    name: '',
-    type: '',
-    // 类型： node、link
-    ciType: '',
-    ciName: ''
-  }),
-      activeData = _useState3[0],
-      setActiveData = _useState3[1];
-
-  var _useState4 = useState(''),
-      userId = _useState4[0],
-      setUserId = _useState4[1];
-
-  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: []
-      });
-    };
-  }, []); // 解决切换拓扑图隐藏概览
-
-  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 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();
-  }
-
-  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.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 && /*#__PURE__*/React.createElement(_Tab, {
-    className: styles.tab
-  }, /*#__PURE__*/React.createElement(_Tab.Item, {
-    title: "\u8D44\u6E90\u6982\u89C8",
-    key: "1"
-  }, activeData.id && /*#__PURE__*/React.createElement(ResourceOverview, _extends({}, props, activeData, {
-    userId: userId
-  }))))));
-}
-
-export default BaseInfo;
+import ResourceDetailPlugin from "./ResourceDetailPlugin";
+export default ResourceDetailPlugin;

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

@@ -4,7 +4,7 @@ import React from "react";
 import EditButton from "./widgets/EditButton";
 import NodesDragSwitch from "./widgets/NodesDragSwitch";
 import AlarmListShowButton from "./widgets/AlarmListShowButton";
-import SettingButton from "./widgets/SettingButton";
+import SettingButton from "./widgets/SettingButtonWidget";
 export default function BasicTools(props) {
   var topo = props.topo,
       _props$showEditButton = props.showEditButton,

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

@@ -1,6 +1,6 @@
 import _Button from "@alifd/next/es/button";
 import _Icon from "@alifd/next/es/icon";
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import DisplaySettingDrawer from "../../../../components/DisplaySettingDrawer";
 /**
  * 设置按钮
@@ -10,9 +10,8 @@ import DisplaySettingDrawer from "../../../../components/DisplaySettingDrawer";
 
 export default function SettingButton(props) {
   var topo = props.topo,
-      viewerProps = props.viewerProps,
+      displaySettingProps = props.displaySettingProps,
       style = props.style;
-  var id = topo.id;
 
   var _useState = useState(false),
       visible = _useState[0],
@@ -30,7 +29,7 @@ export default function SettingButton(props) {
   })), /*#__PURE__*/React.createElement(DisplaySettingDrawer, {
     visible: visible,
     topo: topo,
-    viewerProps: viewerProps,
+    displaySettingProps: displaySettingProps,
     onClose: function onClose() {
       setVisible(false);
     }

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import SettingButton from "./SettingButton";
+/**
+ * 设置按钮
+ *
+ * @return {any}
+ */
+
+export default function SettingButtonWidget(props) {
+  var topo = props.topo,
+      viewerProps = props.viewerProps,
+      style = props.style;
+  return /*#__PURE__*/React.createElement(SettingButton, {
+    topo: topo,
+    displaySettingProps: viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.displaySettingProps,
+    style: style
+  });
+}
+;

package/es/topoCenter/components/TopoView.js

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

package/es/topoCenter/models/TopoCenter.js

@@ -23,12 +23,16 @@ var TopoCenter = /*#__PURE__*/function (_TopoApp) {
     }, options, {
       usePermission: true,
       storeModels: _extends({}, customStoreModels, options.storeModels),
-      // 默认链路标注/悬浮框显示配置
-      defaultLinkTagTipConfig: {
-        tag: DEFAULT_LINK_TAG_COMMON_CONFIG,
-        tip: DEFAULT_TIP_COMMON_CONFIG
+      tagTip: {
+        // 默认链路标注/悬浮框显示配置
+        getDefaultLinkTagConfig: function getDefaultLinkTagConfig() {
+          return DEFAULT_LINK_TAG_COMMON_CONFIG;
+        },
+        getDefaultLinkTipConfig: function getDefaultLinkTipConfig() {
+          return DEFAULT_TIP_COMMON_CONFIG;
+        },
+        ExtElementTagTipBuilder: LinkTagsTipsBuilder
       },
-      ExtElementTagTipBuilder: LinkTagsTipsBuilder,
       onSwitchToEditModeBegin: function () {
         var _onSwitchToEditModeBegin = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(topo) {
           var topoDispatchers;

package/lib/core/components/DisplaySettingDrawer/DisplaySetting.js

@@ -37,16 +37,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 function DisplaySetting(props, ref) {
   var topo = props.topo,
-      viewerProps = props.viewerProps;
+      displaySettingProps = props.displaySettingProps;
   var displayConfig = topo.store.getModelState('displayConfig');
 
-  var _ref = (viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.displaySettingDrawerProps) || {},
+  var _ref = displaySettingProps || {},
       linkTagConfig = _ref.linkTagConfig,
       linkTipConfig = _ref.linkTipConfig,
       showEdgeExpandConfig = _ref.showEdgeExpandConfig,
-      extraConfig = _ref.extraConfig;
-
-  var showLinkConfig = !!(viewerProps !== null && viewerProps !== void 0 && viewerProps.showLinkConfig);
+      extraConfig = _ref.extraConfig,
+      showLinkConfig = _ref.showLinkConfig;
 
   var field = _field["default"].useField({
     autoUnmount: false,

package/lib/core/components/DisplaySettingDrawer/DisplaySettingDrawer.js

@@ -28,7 +28,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function DisplaySettingDrawer(props) {
   var visible = props.visible,
       topo = props.topo,
-      viewerProps = props.viewerProps,
+      displaySettingProps = props.displaySettingProps,
       onClose = props.onClose;
   var settingRef = (0, _react.useRef)();
 
@@ -95,7 +95,7 @@ function DisplaySettingDrawer(props) {
   }, visible && /*#__PURE__*/_react["default"].createElement(_DisplaySetting["default"], {
     ref: settingRef,
     topo: topo,
-    viewerProps: viewerProps
+    displaySettingProps: displaySettingProps
   }));
 }
 

package/lib/core/components/DisplaySettingDrawer/hooks/useDisplaySetting.js

@@ -15,7 +15,7 @@ var _topo = _interopRequireDefault(require("@riil-frontend/component-topology-co
 
 var _default = function _default(props) {
   var topo = props.topo,
-      viewerProps = props.viewerProps,
+      displaySettingProps = props.displaySettingProps,
       settingRef = props.settingRef;
 
   var executeByConfig = /*#__PURE__*/function () {
@@ -28,7 +28,7 @@ var _default = function _default(props) {
               // 更新节点名称显示隐藏
               topo.attributeMetricDisplay.updateNodesNameVisible(); // 更新连线展开折叠状态
 
-              if (viewerProps !== null && viewerProps !== void 0 && viewerProps.showLinkConfig) {
+              if (displaySettingProps !== null && displaySettingProps !== void 0 && displaySettingProps.showLinkConfig) {
                 if (config.expandAllEdges) {
                   topo.getHtTopo().expandAllEdgeGroups();
                 } else {
@@ -60,7 +60,7 @@ var _default = function _default(props) {
 
   var save = /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-      var _viewerProps$displayS;
+      var _displaySettingProps$;
 
       var values, prevDisplayConfig, displayConfig, displayConfigDispatchers, extraOnOk;
       return _regenerator["default"].wrap(function _callee2$(_context2) {
@@ -84,7 +84,7 @@ var _default = function _default(props) {
               displayConfigDispatchers.update(displayConfig); // 按配置执行
 
               executeByConfig(displayConfig);
-              extraOnOk = (viewerProps === null || viewerProps === void 0 ? void 0 : (_viewerProps$displayS = viewerProps.displaySettingDrawerProps) === null || _viewerProps$displayS === void 0 ? void 0 : _viewerProps$displayS.onOk) || (viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.onDisplaySettingDrawerOk);
+              extraOnOk = (displaySettingProps === null || displaySettingProps === void 0 ? void 0 : (_displaySettingProps$ = displaySettingProps.displaySettingProps) === null || _displaySettingProps$ === void 0 ? void 0 : _displaySettingProps$.onOk) || (displaySettingProps === null || displaySettingProps === void 0 ? void 0 : displaySettingProps.onDisplaySettingDrawerOk);
 
               if (extraOnOk) {
                 extraOnOk();