@riil-frontend/component-topology 3.5.0-a.9 → 3.5.2

package/es/hooks/useTopoEventListener.js

@@ -7,13 +7,20 @@ export default function useTopoEventListener(props) {
     return "topo_" + n++;
   }, []);
   useEffect(function () {
-    window.EE.on('topo', eventListenerName, function (data) {
-      if (data.type === type) {
-        onMessage(data.data);
-      }
-    });
+    var EE = window.EE;
+
+    if (EE) {
+      window.EE.on('topo', eventListenerName, function (data) {
+        if (data.type === type) {
+          onMessage(data.data);
+        }
+      });
+    }
+
     return function () {
-      window.EE.removeListener('topo', eventListenerName);
+      if (EE) {
+        window.EE.removeListener('topo', eventListenerName);
+      }
     };
   }, [type, onMessage]);
 }

package/es/index.js

@@ -1,7 +1,8 @@
-import { iconFactory } from '@riil-frontend/component-topology-graph';
+import { iconFactory } from "@riil-frontend/component-topology-graph";
 import Topology from "./core/components/TopoView";
 import BasicTagTipDisplayConfig from "./core/components/DisplaySettingDrawer/ResourceDisplay/BasicConfig";
+import AlarmListPanel from "./core/components/AlarmListPanel";
 import * as htElementUtils from "./utils/htElementUtils";
 export * from "./createTopo";
 export * from "./core/components/titlebar";
-export { Topology, htElementUtils, iconFactory, BasicTagTipDisplayConfig };
+export { Topology, htElementUtils, iconFactory, AlarmListPanel, BasicTagTipDisplayConfig };

package/es/models/topoConfig.js

@@ -452,7 +452,6 @@ export default function (topoApp) {
             }, _callee7);
           }))();
         },
-        switchToEditMode: function switchToEditMode() {},
         switchToViewMode: function switchToViewMode() {
           this.reset();
           dispatch.topoMod.switchToViewMode();

package/es/models/topoMod.js

@@ -585,28 +585,32 @@ export default function (topoApp) {
           var _this8 = this;
 
           return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
-            var id, update, topoPermission, getTopoPermission;
+            var id, update, topoPermission;
             return _regeneratorRuntime.wrap(function _callee11$(_context11) {
               while (1) {
                 switch (_context11.prev = _context11.next) {
                   case 0:
                     id = playload.id, update = playload.update;
                     _context11.prev = 1;
-                    getTopoPermission = topoApp.options.getTopoPermission || topoService.auth.getTopoPermission;
-                    _context11.next = 5;
-                    return getTopoPermission(id);
+                    _context11.next = 4;
+                    return topoService.auth.getTopoPermission(id);
 
-                  case 5:
+                  case 4:
                     topoPermission = _context11.sent;
-                    _context11.next = 11;
+                    _context11.next = 10;
                     break;
 
-                  case 8:
-                    _context11.prev = 8;
+                  case 7:
+                    _context11.prev = 7;
                     _context11.t0 = _context11["catch"](1);
                     rlog.error("\u67E5\u8BE2\u62D3\u6251" + id + "\u7684\u6743\u9650\u5931\u8D25", _context11.t0); // 尚未区分拓扑图不存在还是接口请求报错
 
-                  case 11:
+                  case 10:
+                    if (!topoPermission) {
+                      _context11.next = 19;
+                      break;
+                    }
+
                     _context11.next = 13;
                     return dispatch.functionAuth.checkAuth('createTopo');
 
@@ -626,6 +630,7 @@ export default function (topoApp) {
                   case 18:
                     topoPermission = _context11.t1;
 
+                  case 19:
                     if (update !== false) {
                       _this8.update({
                         topoPermission: topoPermission
@@ -639,7 +644,7 @@ export default function (topoApp) {
                     return _context11.stop();
                 }
               }
-            }, _callee11, null, [[1, 8]]);
+            }, _callee11, null, [[1, 7]]);
           }))();
         }
       };

package/es/topoCenter/components/Topo404.js

@@ -1,10 +1,12 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import NodataPage from '@riil-frontend/component-topology-common/es/components/NoDataPage/index';
+import classNames from 'classnames';
 import styles from "../../components/index.module.scss";
 export default function Topo404(props) {
+  var className = props.className;
   return /*#__PURE__*/React.createElement(NodataPage, {
     imgSize: "large",
-    className: styles.empty,
+    className: classNames(styles.empty, className),
     statusCode: "\u6B64\u62D3\u6251\u56FE\u65E0\u6CD5\u8BBF\u95EE\uFF0C\u53EF\u80FD\u5DF2\u88AB\u5220\u9664"
   });
 }

package/es/topoCenter/components/TopoNoPermission.js

@@ -1,12 +1,14 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import NodataPage from '@riil-frontend/component-topology-common/es/components/NoDataPage/index';
+import classNames from 'classnames';
 import styles from "../../components/index.module.scss";
 export default function TopoNoPermission(props) {
+  var className = props.className;
   return /*#__PURE__*/React.createElement(NodataPage, {
     statusCode: "\u6CA1\u6709\u6743\u9650\u8BBF\u95EE\u6B64\u62D3\u6251\u56FE",
     imgSrc: "/img/topo/noPageAuthority.png",
     imgSize: "large",
-    className: styles.empty
+    className: classNames(styles.empty, className)
   });
 }
 ;

package/es/topoCenter/components/TopoView.js

@@ -1,8 +1,8 @@
 import _Loading from "@alifd/next/es/loading";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["topo", "titleBar", "onEnterEdit"];
+var _excluded = ["topo", "titleBar", "onEnterEdit", "nodataPage", "notfoundPageProps", "noPermissionPageProps"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import NodataPage from "@riil-frontend/component-topology-common/es/components/NoDataPage/index";
@@ -24,6 +24,9 @@ function NetworkTopologyCore(props) {
   var topo = props.topo,
       titleBar = props.titleBar,
       onEnterEdit = props.onEnterEdit,
+      nodataPage = props.nodataPage,
+      notfoundPageProps = props.notfoundPageProps,
+      noPermissionPageProps = props.noPermissionPageProps,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
   var topoState = topo.store.useModelState("topoMod");
@@ -39,12 +42,78 @@ function NetworkTopologyCore(props) {
   });
 
   var renderTopoView = function renderTopoView() {
+    var hancleDisplaySettingOk = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(config) {
+        var edgeFlowConfig;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                // 单多链路切换
+                if (config.expandAllEdges) {
+                  topo.getHtTopo().expandAllEdgeGroups();
+                } else {
+                  topo.getHtTopo().collapseAllEdgeGroups();
+                } // 更新连线流动效果
+
+
+                edgeFlowConfig = config.edgeFlow ? {
+                  type: config.edgeFlow,
+                  // 必填，支持传送带drip、光点point、箭头arrow
+                  direction: config.edgeFlowDirection || 'from' // 流动方向，可为空，默认源到目的
+
+                } : null;
+                topo.getHtTopo().setGlobalEdgeFlow(edgeFlowConfig); // 更新链路动态样式
+
+                if (topo.linkDynamicStyleExecutor) {
+                  topo.linkDynamicStyleExecutor.execute();
+                }
+
+              case 4:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function hancleDisplaySettingOk(_x) {
+        return _ref.apply(this, arguments);
+      };
+    }();
+
     var viewerProps = _extends({}, props.viewerProps, {
       plugins: [],
       // 右侧工具栏按钮
       ViewerTitlebarRightTools: ViewerTools,
       displaySettingProps: {
-        showLinkConfig: true,
+        // 资源标注选项配置
+        nodeTagProps: {
+          commonOptions: [{
+            value: 'graph:name',
+            label: '图片名称'
+          }, {
+            value: 'attribute:display_name',
+            label: '显示名称'
+          }, {
+            value: 'attribute:ipv4_address',
+            label: 'IP地址'
+          }]
+        },
+        // 资源悬浮框选项配置
+        nodeTipProps: {
+          commonOptions: [{
+            value: 'attribute:ipv4_address',
+            label: 'IP地址'
+          }, {
+            value: 'attribute:display_name',
+            label: '显示名称'
+          }, {
+            value: 'ciType:display_name',
+            label: '资源类型'
+          }]
+        },
+        showLinkConfig: false,
         // 是否显示链路相关配置
         linkTagConfig: function linkTagConfig(params) {
           return /*#__PURE__*/React.createElement(LinkTag, params);
@@ -54,34 +123,10 @@ function NetworkTopologyCore(props) {
         },
         showEdgeExpandConfig: true,
         // 是否显示连线展开折叠配置
-        // 额外配置
+        // TODO 额外配置，单多链路切换、动态效果迁移到这里
         // extraConfig: () => <div>1111</div>,
         // 点击回调
-        onOk: function () {
-          var _onOk = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-            return _regeneratorRuntime.wrap(function _callee$(_context) {
-              while (1) {
-                switch (_context.prev = _context.next) {
-                  case 0:
-                    // 更新链路动态样式
-                    if (topo.linkDynamicStyleExecutor) {
-                      topo.linkDynamicStyleExecutor.execute();
-                    }
-
-                  case 1:
-                  case "end":
-                    return _context.stop();
-                }
-              }
-            }, _callee);
-          }));
-
-          function onOk() {
-            return _onOk.apply(this, arguments);
-          }
-
-          return onOk;
-        }()
+        onOk: hancleDisplaySettingOk
       }
     });
 
@@ -100,7 +145,7 @@ function NetworkTopologyCore(props) {
 
   var renderContent = function renderContent() {
     if (!loading && !topoId) {
-      return /*#__PURE__*/React.createElement(NodataPage, {
+      return nodataPage || /*#__PURE__*/React.createElement(NodataPage, {
         imgSize: "large",
         className: styles.empty
       });
@@ -114,11 +159,11 @@ function NetworkTopologyCore(props) {
     if (!loading) {
       // 加载完成后
       if (topoPermission && !topoPermissonUtil.isReadable(topoPermission)) {
-        return /*#__PURE__*/React.createElement(TopoNoPermission, null);
+        return /*#__PURE__*/React.createElement(TopoNoPermission, noPermissionPageProps);
       }
 
       if (!topoData) {
-        return /*#__PURE__*/React.createElement(Topo404, null);
+        return /*#__PURE__*/React.createElement(Topo404, notfoundPageProps);
       }
     }
 

package/es/topoCenter/components/Topology.js

@@ -7,6 +7,7 @@ import EdgeGroupPropertyView from "./editor/propertyViews/edge/EdgeGroupProperty
 import LinkPropertyView from "./editor/propertyViews/edge/LinkPropertyView";
 import AddLinkDrawer from "./editor/propertyViews/edge/addLinkDrawer/AddLinkDrawer";
 import useTopoEdit from "../hooks/useTopoEdit";
+import EdgePropertyView from "./editor/propertyViews/edge/EdgePropertyView";
 export default function NetworkTopologyFull(props) {
   var topo = props.topo,
       customEditorProps = props.editorProps,
@@ -22,6 +23,7 @@ export default function NetworkTopologyFull(props) {
     },
     // 连线属性面板
     edgePropertyViews: {
+      edge: EdgePropertyView,
       link: LinkPropertyView,
       edgeGroup: EdgeGroupPropertyView
     },

package/es/topoCenter/components/editor/propertyViews/edge/EdgePropertyView.js

@@ -0,0 +1,10 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import CommonEdgePropertyView from "../../../../../core/editor/components/settings/propertyViews/edge/CommonEdgePropertyView";
+import BindExitLinkSelect from "./link/BindExitLinkSelect";
+export default function EdgePropertyView(props) {
+  var extraDisplaySetting = /*#__PURE__*/React.createElement(BindExitLinkSelect, props);
+  return /*#__PURE__*/React.createElement(CommonEdgePropertyView, _extends({}, props, {
+    extraDisplaySetting: extraDisplaySetting
+  }));
+}

package/es/topoCenter/components/editor/propertyViews/edge/LinkPropertyView/Data/index.js

@@ -3,28 +3,13 @@ import React from "react";
 import LindInfoPreview from "../../link/LinkInfoPreview";
 import styles from "../../link/LinkInfoPreview.module.scss";
 import rlog from "@riil-frontend/component-topology-utils/es/rlog";
-import { getLinkPermission } from "../../../../../../utils/linPermissionUtil";
 import { useState, useEffect } from "react";
 export default function LinkDataTab(props) {
-  var topo = props.topo,
-      edge = props.edge;
-  var nodes = topo.dataModel.getNodes();
-
-  var _useState = useState(),
-      link = _useState[0],
-      setLink = _useState[1]; // 节点间只有连线组时，显示连线组的数据
+  var _link$permission;
 
-
-  var _topo$store$useModelS = topo.store.useModelState("topoMod").data,
-      links = _topo$store$useModelS.links,
-      linkGroups = _topo$store$useModelS.linkGroups;
-  var linkData = [].concat(links, linkGroups).find(function (item) {
-    return item.id === edge.getTag();
-  });
-  useEffect(function () {
-    setLink(linkData);
-  }, [edge, linkData]);
-  var permission = getLinkPermission(edge, nodes, link);
+  var topo = props.topo,
+      edge = props.edge,
+      link = props.link;
 
   var _topo$store$useModel = topo.store.useModel("topoConfig"),
       editState = _topo$store$useModel[0],
@@ -48,7 +33,7 @@ export default function LinkDataTab(props) {
   }, /*#__PURE__*/React.createElement(_Button, {
     className: styles.button,
     type: "primary",
-    disabled: !permission.writeable,
+    disabled: !(link !== null && link !== void 0 && (_link$permission = link.permission) !== null && _link$permission !== void 0 && _link$permission.writeable),
     onClick: openEditLinkDrawer
   }, "\u7F16\u8F91")));
 }

package/es/topoCenter/components/editor/propertyViews/edge/LinkPropertyView/LinkPropertyView.js

@@ -1,10 +1,9 @@
 import _Tab from "@alifd/next/es/tab";
+import _extends from "@babel/runtime/helpers/extends";
 import React from "react";
 import TabView from "../../../../../../core/editor/components/settings/common/tab/TabView";
 import Data from "./Data";
 import Setting from "./Setting";
-import { getLinkPermission } from "../../../../../../topoCenter/utils/linPermissionUtil.js";
-import { getNodes } from "../../../../../../utils/htElementUtils.js";
 export default function LinkPropertyView(props) {
   var edge = props.edge,
       topo = props.topo; // 无权限不显示数据页签
@@ -14,18 +13,25 @@ export default function LinkPropertyView(props) {
       linkGroups = _topo$store$useModelS.linkGroups;
   var link = [].concat(links, linkGroups).find(function (item) {
     return item.id === edge.getTag();
-  }); // console.log("LinkPropertyView--getLinkPermission", links, link);
+  });
+  console.log('LinkPropertyView', link);
 
-  var operation = getLinkPermission(edge, topo.getNodes(topo.dataModel), link);
+  if (link) {
+    var readable = link.permission.readable;
 
-  if (!operation) {
+    if (!readable) {
+      return /*#__PURE__*/React.createElement(Setting, props);
+    }
+  } else {
     return /*#__PURE__*/React.createElement(Setting, props);
   }
 
   return /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
     title: "\u6570\u636E",
     key: "1"
-  }, /*#__PURE__*/React.createElement(Data, props)), /*#__PURE__*/React.createElement(_Tab.Item, {
+  }, /*#__PURE__*/React.createElement(Data, _extends({}, props, {
+    link: link
+  }))), /*#__PURE__*/React.createElement(_Tab.Item, {
     title: "\u8BBE\u7F6E",
     key: "2"
   }, /*#__PURE__*/React.createElement(Setting, props)));