@riil-frontend/component-topology 10.0.17 → 10.0.19

package/es/core/editor/config/themes.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 var baseLightTheme = {
   color: '#FFFFFF',
-  globalNodeLabelColor: '#4d6277',
+  globalNodeLabelColor: 'rgba(0, 0, 0, 0.75)',
   globalNodeLabelStyle: {
-    color: '#4d6277'
+    color: 'rgba(0, 0, 0, 0.75)'
   },
   globalEdgeTagStyle: {
     color: '#777B9A',
@@ -13,16 +13,16 @@ var baseLightTheme = {
 
   },
   text: {
-    color: '#4d6277'
+    color: 'rgba(0, 0, 0, 0.75)'
   },
   group: {
     style: {
-      'group.title.background': 'rgba(228, 233, 238, 1)',
+      'group.title.background': '#3E6BB3',
       // 标题背景颜色 #E4E9EE
-      'group.title.color': '#4D6277',
+      'group.title.color': '#FFFFFF',
       // 标题文字颜色
-      'group.background': 'rgba(255, 255, 255, 0.9)',
-      'group.border.color': '#E4E9EE',
+      'group.background': 'rgba(255, 255, 255, 0.50)',
+      'group.border.color': 'rgba(255, 255, 255, 0.50)',
       // 边框颜色
       'group.splitLine': false // 标题底部边框
 
@@ -81,12 +81,12 @@ var THEMES = [_extends({}, baseLightTheme, {
   },
   group: {
     style: {
-      'group.title.background': 'rgba(8,165,244,1)',
+      'group.title.background': 'rgba(0, 85, 214, 0.60)',
       // 标题背景颜色 #08A5F4
       'group.title.color': '#FFFFFF',
       // 标题文字颜色
-      'group.background': 'rgba(29,55,113,0.6)',
-      'group.border.color': 'rgba(8,165,244,0.8)',
+      'group.background': 'rgba(0, 0, 0, 0.30)',
+      'group.border.color': 'rgba(0, 0, 0, 0.30)',
       // 边框颜色
       'group.splitLine': false // 标题底部边框
 
@@ -128,7 +128,7 @@ var THEMES = [_extends({}, baseLightTheme, {
     style: {
       'group.title.background': 'rgba(0,0,0,0.01)',
       // 标题背景颜色 #08A5F4
-      'group.title.color': '#8FECFF',
+      'group.title.color': 'rgba(143, 236, 255, 1)',
       // 标题文字颜色
       'group.title.border.color': '#ffffff',
       // 边框颜色

package/es/core/models/TopoApp.js

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

package/es/core/viewer/components/plugins/ElementDetailDrawer/components/DetailDrawer.js

@@ -0,0 +1,15 @@
+import _Drawer from "@alifd/next/es/drawer";
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import styles from "./DetailDrawer.module.scss";
+
+function DetailDrawer(props) {
+  return /*#__PURE__*/React.createElement(_Drawer, _extends({
+    className: styles.baseInfo,
+    closeMode: ['close', 'esc'],
+    width: 580,
+    hasMask: false
+  }, props));
+}
+
+export default DetailDrawer;

package/es/core/viewer/components/plugins/ElementDetailDrawer/components/DetailDrawer.module.scss

@@ -0,0 +1,16 @@
+@import '~@alifd/next/variables.scss';
+
+.baseInfo {
+  box-shadow: 0px 0px 6px 1px #F2F7FD;
+  .drawer-title{
+    font-size: 16px;
+    font-weight: 500;
+    color: #4D6277;
+  }
+  :global {
+    .#{$css-prefix}drawer-body {
+      height: calc(100% - 49px);
+      padding: 0 24px;
+    }
+  }
+}

package/es/core/viewer/components/plugins/ElementDetailDrawer/hooks/useElementDetailManager.js

@@ -0,0 +1,197 @@
+import React, { useRef } from 'react';
+import { TopoEvent } from '@riil-frontend/component-topology-graph';
+import DefaultDetailContent from "../../ResourceDetail/DefaultDetailContent";
+
+function useElementDetailManager(props) {
+  var topo = props.topo,
+      canShow = props.canShow,
+      resourceDetailProps = props.resourceDetailProps;
+
+  var _topo$store$useModel = topo.store.useModel('resourceDetail'),
+      resourceDetailState = _topo$store$useModel[0],
+      resourceDetailDispatchers = _topo$store$useModel[1];
+
+  var visible = resourceDetailState.visible,
+      id = resourceDetailState.id;
+  var resourceData = topo.dataModel.useDataById(id);
+  var currentHtElementRef = useRef(null);
+
+  function init() {
+    var notifier = topo.view.topoClient.notifier;
+    notifier.on('topo_element_double_click', handleDblClick);
+    notifier.on('topo_element_click', handleClick);
+  }
+
+  function destroy() {
+    var notifier = topo.view.topoClient.notifier;
+    notifier.off('topo_element_double_click', handleDblClick);
+    notifier.off('topo_element_click', handleClick); // 清除数据
+
+    currentHtElementRef.current = null;
+    resourceDetailDispatchers.reset();
+    var topoDispatchers = topo.store.getModelDispatchers('topoBaseInfoOverview');
+    topoDispatchers.update({
+      id: '',
+      metricCodes: []
+    });
+  } // 打开
+
+  /**
+   * 
+   * @param {{id: string, htElement?}} data 
+   * @returns 
+   */
+
+
+  function open(data) {
+    var id = data.id;
+    var resourceData = topo.dataModel.getDataById(id);
+    var htElement = data.htElement || topo.getDataModel().getDataByTag(id); // 如果是资源/链路，没有权限不显示
+
+    if (resourceData) {
+      var operation = resourceData.operation,
+          permission = resourceData.permission;
+
+      if (!operation && !(permission !== null && permission !== void 0 && permission.readable)) {
+        return;
+      }
+    } // 自定义显示方法
+
+
+    if (!canShow(htElement)) {
+      return;
+    }
+
+    var content = getDetailContent({
+      id: id
+    });
+
+    if (content) {
+      resourceDetailDispatchers.update({
+        visible: true,
+        id: id
+      });
+    }
+  }
+
+  function change(data) {
+    open(data);
+  } // 重置
+
+
+  function reset() {
+    currentHtElementRef.current = null;
+    resourceDetailDispatchers.reset();
+    var topoDispatchers = topo.store.getModelDispatchers('topoBaseInfoOverview');
+    topoDispatchers.update({
+      id: '',
+      metricCodes: []
+    });
+  } // 关闭
+
+
+  function close() {
+    currentHtElementRef.current = null;
+    resourceDetailDispatchers.update({
+      visible: false
+    });
+  } // 处理双击元素事件
+
+
+  function handleDblClick(htElement) {
+    var _topo$store$getModelS = topo.store.getModelState("lock"),
+        lock = _topo$store$getModelS.lock;
+
+    if (lock) {
+      open({
+        id: htElement.getTag() || "ht:" + htElement.getId(),
+        htElement: htElement
+      });
+    }
+  } // 单击切换
+
+
+  function handleClick(htElement) {
+    var resourceDetailState = topo.store.getModelState('resourceDetail');
+    var visible = resourceDetailState.visible;
+
+    if (!visible) {
+      return;
+    }
+
+    var data = htElement.getAttrObject();
+    open({
+      id: data.id,
+      htElement: htElement
+    });
+  }
+
+  function getDefaultDetailContent(_ref) {
+    var resourceData = _ref.resourceData,
+        htElement = _ref.htElement;
+
+    // 仅展示资源和链路的概览
+    if (!resourceData) {
+      return;
+    }
+
+    var ciType = resourceData.ciType; // 没有citype不显示
+
+    if (!ciType) return;
+    return DefaultDetailContent;
+  }
+
+  function getDetailContent(_ref2) {
+    var id = _ref2.id;
+
+    if (!id) {
+      return null;
+    }
+
+    var resourceData = topo.dataModel.getDataById(id);
+    var htElement = topo.getDataModel().getDataByTag(id);
+    var widget; // 支持自定义概览
+
+    var _ref3 = resourceDetailProps || {},
+        getCustomDetailContent = _ref3.getCustomDetailContent;
+
+    if (getCustomDetailContent) {
+      widget = getCustomDetailContent({
+        id: id,
+        resourceData: resourceData,
+        htElement: htElement
+      });
+    } // 无自定义使用默认
+
+
+    if (!widget) {
+      widget = getDefaultDetailContent({
+        resourceData: resourceData,
+        htElement: htElement
+      });
+    }
+
+    return widget;
+  }
+
+  var Content = visible && id ? getDetailContent({
+    id: id
+  }) : null;
+  var elementDetailManager = {
+    visible: visible,
+    id: id,
+    resourceData: resourceData,
+    Content: Content,
+    init: init,
+    destroy: destroy,
+    open: open,
+    change: change,
+    reset: reset,
+    close: close,
+    handleDblClick: handleDblClick,
+    handleClick: handleClick
+  };
+  return elementDetailManager;
+}
+
+export default useElementDetailManager;

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

@@ -0,0 +1,63 @@
+import _extends from "@babel/runtime/helpers/extends";
+import PropTypes from 'prop-types';
+import React, { useEffect, useMemo, useState } from 'react';
+import ResourceDetail from "./ResourceDetail";
+import useUserId from "./hooks/useUserId";
+export default function DefaultDetailContent(props) {
+  var topo = props.topo,
+      id = props.id,
+      viewerProps = props.viewerProps,
+      onChangeActive = props.onChangeActive,
+      onClose = props.onClose;
+
+  var _useUserId = useUserId(),
+      userId = _useUserId.userId,
+      fetchUserId = _useUserId.fetchUserId;
+
+  var resourceData = topo.dataModel.useDataById(id);
+  var activeData = 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]);
+  useEffect(function () {
+    fetchUserId();
+  }, []); // 支持自定义概览
+
+  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;
+  }
+
+  if (!userId) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(ResourceDetailWidget, _extends({}, props, {
+    topo: topo,
+    userId: userId,
+    activeData: activeData,
+    resourceData: resourceData,
+    onClose: onClose
+  }));
+}

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

@@ -1,240 +1,54 @@
-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, useMemo, useState } from 'react';
-import service from "../../../../services/overview";
 import Title from "./components/DrawerTitle";
-import styles from "./index.module.scss";
-import ResourceDetail from "./ResourceDetail"; // 基本信息
+import DetailDrawer from "../ElementDetailDrawer/components/DetailDrawer";
+import useElementDetailManager from "../ElementDetailDrawer/hooks/useElementDetailManager";
 
 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 = 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 = useState(''),
-      userId = _useState[0],
-      setUserId = _useState[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: []
-      });
-    };
-  }, [lock]);
+      topoId = _topo$store$useModelS.topoId;
+
+  var elementDetailManager = useElementDetailManager({
+    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;
   useEffect(function () {
+    elementDetailManager.init();
     return function () {
-      resourceDetailDispatchers.reset();
+      elementDetailManager.destroy();
     };
   }, []); // 解决切换拓扑图隐藏概览
 
   useEffect(function () {
-    close(); // TODO 其他数据重置
+    elementDetailManager.reset();
   }, [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 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;
-    }
-
-    return /*#__PURE__*/React.createElement(ResourceDetailWidget, _extends({}, props, {
-      topo: topo,
-      userId: userId,
-      activeData: activeData,
-      resourceData: resourceData,
-      onClose: close
-    }));
-  };
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Drawer, {
-    className: styles.baseInfo,
-    closeMode: ['close', 'esc'],
+  return /*#__PURE__*/React.createElement(DetailDrawer, {
     visible: visible,
-    title: /*#__PURE__*/React.createElement(Title, _extends({}, activeData, {
+    title: visible && /*#__PURE__*/React.createElement(Title, {
+      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.createElement(Content, _extends({}, props, {
+    topo: topo,
+    visible: visible,
+    id: id,
+    viewerProps: viewerProps,
+    onClose: elementDetailManager.close,
+    onChangeActive: elementDetailManager.open
+  })));
 }
 
 ResourceDetailDrawer.propTypes = {