@riil-frontend/component-topology 11.0.29 → 11.0.30

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

@@ -6,7 +6,7 @@ import MetricPollingPlugin from "./MetricPollingPlugin";
 import ResourceDetail from "./ResourceDetail";
 export default function ViewerPlugin(props) {
   var topo = props.topo,
-    viewerProps = props.viewerProps;
+      viewerProps = props.viewerProps;
   var store = topo.store;
   useAlarm({
     topo: topo

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

@@ -7,9 +7,9 @@ import SettingButton from "./widgets/SettingButtonWidget";
 import AlarmButton from "./widgets/AlarmButton";
 export default function BasicTools(props) {
   var topo = props.topo,
-    _props$showEditButton = props.showEditButton,
-    showEditButton = _props$showEditButton === void 0 ? true : _props$showEditButton,
-    children = props.children;
+      _props$showEditButton = props.showEditButton,
+      showEditButton = _props$showEditButton === void 0 ? true : _props$showEditButton,
+      children = props.children;
   return /*#__PURE__*/React.createElement(_Box, {
     direction: "row",
     spacing: 8

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

@@ -5,10 +5,10 @@ import styles from "../../../components/titlebar/TitleBar.module.scss";
 import SearchWidget from "./widgets/SearchWidget";
 export default function TopoViewerTitleBar(props) {
   var topo = props.topo,
-    viewerProps = props.viewerProps,
-    showEditButton = props.showEditButton,
-    onEnterEdit = props.onEnterEdit,
-    children = props.children;
+      viewerProps = props.viewerProps,
+      showEditButton = props.showEditButton,
+      onEnterEdit = props.onEnterEdit,
+      children = props.children;
   var ViewerTitlebarRightTools = (viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.ViewerTitlebarRightTools) || ViewerTools;
   return /*#__PURE__*/React.createElement("div", {
     className: classnames(styles.titlebar, styles.titlebarViewMode)

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

@@ -2,11 +2,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import AlarmListShowButton from "./AlarmListShowButton";
 import useEventData from "../../../../hooks/useEventData";
+
 function AlarmButton(props) {
   var topo = props.topo;
+
   var _topo$store$useModel = topo.store.useModel("topoAlarm"),
-    alarmState = _topo$store$useModel[0],
-    alarmDispatchers = _topo$store$useModel[1];
+      alarmState = _topo$store$useModel[0],
+      alarmDispatchers = _topo$store$useModel[1];
+
   var alarmPanelIsOpen = alarmState.alarmPanelIsOpen;
   var alarmData = useEventData({
     topo: topo
@@ -18,4 +21,5 @@ function AlarmButton(props) {
     alarmData: alarmData
   }));
 }
+
 export default AlarmButton;

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

@@ -6,37 +6,39 @@ import React, { useEffect, useRef, useState } from "react";
 import AlarmListPanel from "../../../../components/AlarmListPanel";
 import styles from "./AlarmListShowButton.module.scss";
 var Popup = _Overlay.Popup;
-
 /**
  * 元素拖拽开关
  *
  * @return {any}
  */
+
 export default function AlarmListShowButton(props) {
   var topo = props.topo,
-    style = props.style,
-    offSetLeft = props.offSetLeft,
-    alarmPanelIsOpen = props.alarmPanelIsOpen,
-    alarmData = props.alarmData;
-  // const { AlarmListPanel } = viewerProps;
+      style = props.style,
+      offSetLeft = props.offSetLeft,
+      alarmPanelIsOpen = props.alarmPanelIsOpen,
+      alarmData = props.alarmData; // const { AlarmListPanel } = viewerProps;
+
+  var store = topo.store; // const [alarmState, alarmDispatchers] = store.useModel("topoAlarm");
 
-  var store = topo.store;
-  // const [alarmState, alarmDispatchers] = store.useModel("topoAlarm");
   var _useState = useState(false),
-    visible = _useState[0],
-    setVisible = _useState[1];
+      visible = _useState[0],
+      setVisible = _useState[1];
+
   useEffect(function () {
     setVisible(alarmPanelIsOpen);
-  }, [alarmPanelIsOpen]);
+  }, [alarmPanelIsOpen]); // const { alarmPanelIsOpen,alarmData } = alarmState;
 
-  // const { alarmPanelIsOpen,alarmData } = alarmState;
   var alarmBtn = useRef();
+
   var onVisibleChange = function onVisibleChange(visible) {
     setVisible(visible);
   };
+
   var onClose = function onClose() {
     setVisible(false);
   };
+
   if (offSetLeft) {
     // FIXME 临时兼容业务拓扑
     return /*#__PURE__*/React.createElement(Popup, {
@@ -63,6 +65,7 @@ export default function AlarmListShowButton(props) {
       onClose: onClose
     })));
   }
+
   return /*#__PURE__*/React.createElement(Popup, {
     trigger: /*#__PURE__*/React.createElement(_Button, {
       style: style,
@@ -76,8 +79,7 @@ export default function AlarmListShowButton(props) {
     canCloseByOutSideClick: false,
     canCloseByTrigger: false,
     visible: visible,
-    onVisibleChange: onVisibleChange
-    // offset={[0, 5]}
+    onVisibleChange: onVisibleChange // offset={[0, 5]}
     ,
     triggerType: "click",
     safeNode: function safeNode() {

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

@@ -2,22 +2,26 @@ import _Button from "@alifd/next/es/button";
 import React from 'react';
 import topoPermissonUtil from "../../../../../utils/topoPermissionUtil";
 import styles from "../../../../components/titlebar/TitleBar.module.scss";
-
 /**
  * @return {any}
  */
+
 export default function EditButton(props) {
   var topo = props.topo,
-    onEnterEdit = props.onEnterEdit,
-    style = props.style;
+      onEnterEdit = props.onEnterEdit,
+      style = props.style;
   var store = topo.store;
+
   var _store$useModel = store.useModel('topoMod'),
-    topoState = _store$useModel[0];
+      topoState = _store$useModel[0];
+
   var topoPermission = topoState.topoPermission;
   var show = topo.options.usePermission ? topoPermissonUtil.isEditable(topoPermission) : true;
+
   if (!show) {
     return null;
   }
+
   return /*#__PURE__*/React.createElement(_Button, {
     type: "primary",
     className: styles.button,

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

@@ -5,7 +5,7 @@ import _Icon from "@alifd/next/es/icon";
 import React, { useState, useEffect, useRef, useCallback } from "react";
 export default function MoreButtonMenu(props) {
   var topo = props.topo,
-    style = props.style;
+      style = props.style;
   return /*#__PURE__*/React.createElement("div", {
     style: style
   }, /*#__PURE__*/React.createElement(_Dropdown, {

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

@@ -2,54 +2,58 @@ import _Button from "@alifd/next/es/button";
 import _Icon from "@alifd/next/es/icon";
 import React, { useEffect, useState } from 'react';
 import { TopoEvent } from '@riil-frontend/component-topology-graph';
-
 /**
  * 元素拖拽开关
  *
  * @return {any}
  */
+
 export default function NodesDragSwitch(props) {
   var _topo$view$topoClient;
+
   var topo = props.topo,
-    style = props.style;
+      style = props.style;
   var notifier = (_topo$view$topoClient = topo.view.topoClient) === null || _topo$view$topoClient === void 0 ? void 0 : _topo$view$topoClient.notifier;
+
   var _topo$store$useModel = topo.store.useModel("lock"),
-    lockState = _topo$store$useModel[0],
-    lockDispatchers = _topo$store$useModel[1];
+      lockState = _topo$store$useModel[0],
+      lockDispatchers = _topo$store$useModel[1];
+
   var lock = lockState.lock;
   var topoModState = topo.store.useModelState('topoMod');
-  var graphLoaded = topoModState.graphLoaded;
+  var graphLoaded = topoModState.graphLoaded; // 切换拓扑图后，重置为不可拖拽，与ht保持一致
 
-  // 切换拓扑图后，重置为不可拖拽，与ht保持一致
   useEffect(function () {
     if (!lock) {
       lockDispatchers.setLock(true);
     }
-  }, [graphLoaded]);
+  }, [graphLoaded]); // 初始化时注册事件
 
-  // 初始化时注册事件
   useEffect(function () {
     // 刷新拓扑图后，重置为不可拖拽
     var handleRefresh = function handleRefresh(e) {
       lockDispatchers.setLock(true);
     };
+
     notifier && notifier.on(TopoEvent.EVENT_REFRESH, handleRefresh);
     return function () {
       notifier && notifier.off(TopoEvent.EVENT_REFRESH, handleRefresh);
     };
   }, [notifier]);
+
   var changeLock = function changeLock() {
     var newLock = !lock;
-    lockDispatchers.setLock(newLock);
-    // 开锁状态元素可移动
+    lockDispatchers.setLock(newLock); // 开锁状态元素可移动
+
     topo.getGraphView().setMovableFunc(function (data) {
       return !newLock; // self._graphView.dm().sm().getSelection().size()===1 && !(data instanceof ht.Grid);
-    });
-    // 开锁状态下禁用悬停展示悬浮框，TODO 待迁移走独立
-    topo.attributeMetricDisplay.updateTagsTips();
-    // 开锁状态可移动链路指标位置
+    }); // 开锁状态下禁用悬停展示悬浮框，TODO 待迁移走独立
+
+    topo.attributeMetricDisplay.updateTagsTips(); // 开锁状态可移动链路指标位置
+
     topo.getHtTopo().setEdgeIndicatorCanDrag(!newLock);
   };
+
   var title = lock ? '解锁后可进行拓扑图标的移动' : '锁上后禁用图标移动';
   return /*#__PURE__*/React.createElement(_Button, {
     style: style,

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

@@ -4,11 +4,15 @@ import topoPermissonUtil from "../../../../../utils/topoPermissionUtil";
 export default function NodesDragSwitchWrapper(props) {
   var topo = props.topo;
   var store = topo.store;
+
   var _store$useModel = store.useModel('topoMod'),
-    topoState = _store$useModel[0];
+      topoState = _store$useModel[0];
+
   var topoPermission = topoState.topoPermission;
+
   if (!topoPermissonUtil.isEditable(topoPermission)) {
     return null;
   }
+
   return /*#__PURE__*/React.createElement(NodesDragSwitch, props);
 }

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

@@ -9,46 +9,53 @@ var searchTypes = [{
   label: 'IP地址',
   value: 'ipAddress'
 }];
+
 function SearchWidget(props) {
   var _topo$view$topoClient;
+
   var topo = props.topo,
-    filterProps = props.filterProps;
+      filterProps = props.filterProps;
+
   var _useState = useState('name'),
-    searchType = _useState[0],
-    setSearchType = _useState[1];
+      searchType = _useState[0],
+      setSearchType = _useState[1];
+
   var _useState2 = useState(undefined),
-    searchValue = _useState2[0],
-    setSearchValue = _useState2[1];
+      searchValue = _useState2[0],
+      setSearchValue = _useState2[1];
+
   var onSearch = useCallback(function (value, type) {
     topo.searchElements(type, value);
   }, []);
   var id = topo.id;
-  var notifier = (_topo$view$topoClient = topo.view.topoClient) === null || _topo$view$topoClient === void 0 ? void 0 : _topo$view$topoClient.notifier;
+  var notifier = (_topo$view$topoClient = topo.view.topoClient) === null || _topo$view$topoClient === void 0 ? void 0 : _topo$view$topoClient.notifier; // 切换拓扑图后，重置，与ht保持一致
 
-  // 切换拓扑图后，重置，与ht保持一致
   useEffect(function () {
     setSearchType('name');
     setSearchValue(undefined);
-  }, [id]);
+  }, [id]); // 初始化时注册事件
 
-  // 初始化时注册事件
   useEffect(function () {
     // 刷新拓扑图后，重置
     var reset = function reset() {
       setSearchType('name');
       setSearchValue(undefined);
     };
+
     notifier && notifier.on(TopoEvent.EVENT_REFRESH, reset);
     return function () {
       notifier && notifier.off(TopoEvent.EVENT_REFRESH, reset);
     };
   }, [notifier]);
+
   var onChange = function onChange(value) {
     setSearchValue(value);
+
     if (!value) {
       topo.searchElements(searchType, value);
     }
   };
+
   return /*#__PURE__*/React.createElement(_Search, {
     shape: "simple",
     value: searchValue,
@@ -64,6 +71,7 @@ function SearchWidget(props) {
     }
   });
 }
+
 SearchWidget.propTypes = {
   // 拓扑模型
   topo: PropTypes.any.isRequired

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

@@ -2,24 +2,27 @@ import _Button from "@alifd/next/es/button";
 import _Icon from "@alifd/next/es/icon";
 import React, { useState, useEffect } from 'react';
 import DisplaySettingDrawer from "../../../../components/DisplaySettingDrawer";
-
 /**
  * 设置按钮
  *
  * @return {any}
  */
+
 export default function SettingButton(props) {
   var topo = props.topo,
-    displaySettingProps = props.displaySettingProps,
-    style = props.style,
-    isEditor = props.isEditor,
-    displaySettingRender = props.displaySettingRender;
+      displaySettingProps = props.displaySettingProps,
+      style = props.style,
+      isEditor = props.isEditor,
+      displaySettingRender = props.displaySettingRender;
+
   var _useState = useState(false),
-    visible = _useState[0],
-    setVisible = _useState[1];
+      visible = _useState[0],
+      setVisible = _useState[1];
+
   var changeClick = function changeClick() {
     setVisible(true);
   };
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Button, {
     style: style,
     onClick: changeClick,

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

@@ -1,17 +1,17 @@
 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,
-    isEditor = props.isEditor,
-    displaySettingRender = props.displaySettingRender;
+      viewerProps = props.viewerProps,
+      style = props.style,
+      isEditor = props.isEditor,
+      displaySettingRender = props.displaySettingRender;
   return /*#__PURE__*/React.createElement(SettingButton, {
     topo: topo,
     displaySettingProps: viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.displaySettingProps,

package/es/core/viewer/contextmenu/buildLinkContextmenu.js

@@ -1,8 +1,7 @@
 export default function buildContextMenu(topoApp) {
   return {
     enable: true,
-    items: [
-      // {
+    items: [// {
       //   label: '概览',
       //   id: 'Resource.detail',
       //   icon: '/img/topo/contextmenu/Topology_resources_menu_icon_overview.svg',

package/es/core/viewer/contextmenu/buildNodeContextmenu.js

@@ -2,10 +2,10 @@ export default function buildNodeContextmenu(topoApp) {
   var isResource = function isResource(node) {
     return !!node.isbinding;
   };
+
   return {
     enable: true,
-    items: [
-      // {
+    items: [// {
       //   label: '概览',
       //   id: 'Resource.detail',
       //   icon: '/img/topo/contextmenu/Topology_resources_menu_icon_overview.svg',
@@ -39,14 +39,11 @@ export default function buildNodeContextmenu(topoApp) {
       //     if (!isResource(data)) {
       //       return false;
       //     }
-
       //     const {ciType} = data;
       //     const ciMeta = topoApp.ciTyeCache.getCiType(ciType);
-
       //     if (!ciMeta) {
       //       return false;
       //     }
-
       //     const {domain} = ciMeta;
       //     // 是否有该页签，与资源详情保持一致
       //     const hasTab = domain === 'network' || domain === 'server';
@@ -61,14 +58,11 @@ export default function buildNodeContextmenu(topoApp) {
       //     if (!isResource(data)) {
       //       return false;
       //     }
-
       //     const {ciType} = data;
       //     const ciMeta = topoApp.ciTyeCache.getCiType(ciType);
-
       //     if (!ciMeta) {
       //       return false;
       //     }
-
       //     const {domain} = ciMeta;
       //     // 是否有该页签，与资源详情保持一致
       //     const hasTab = domain === 'network' || domain === 'server';

package/es/createTopo.js

@@ -5,9 +5,8 @@ import getTopoData from "./networkTopo/getTopoData";
 export function createTopo(options) {
   var topoApp = createTopoApp(_extends({
     loadData: getTopoData
-  }, options));
+  }, options)); // 注册内置菜单动作
 
-  // 注册内置菜单动作
   var menuCommands = createMenuCommands(topoApp);
   topoApp.view.contextMenu.registerCommands(menuCommands);
   return topoApp;

package/es/mock/mock.js

@@ -5,10 +5,9 @@ export var topoData = {
     name: '拓扑名字',
     topoType: 'topocenter',
     layout: 'circular' // 布局方式
-  },
 
-  layouts: [
-  // 层级信息，可为空
+  },
+  layouts: [// 层级信息，可为空
   {
     index: 1,
     name: '应用层'
@@ -21,7 +20,6 @@ export var topoData = {
     // 所属层级，来源于HT，为null，为null代表不属于任何层级
     groupId: 14,
     // 所属groupId，来源于HT，可为null，为null代表不属于任何组
-
     attribute: {
       ciType: 'ruijieRouter',
       ciName: '锐捷路由器'
@@ -58,12 +56,12 @@ export var topoData = {
     target: '00000000000122',
     attribute: {
       reltype: 'relation' // 关系relation，链路 link
+
     }
   }],
-
   serialize: '' // HT编辑后生成的数据，无需关心
-};
 
+};
 export var topoCiInfo = {
   data: [{
     code: 'ruijieSwitch',

package/es/networkTopo/components/Link/form.js

@@ -11,41 +11,45 @@ import React, { forwardRef, useState, useImperativeHandle, useEffect, useCallbac
 import { isAvailableArray } from '@riil-frontend/utils';
 import _ from 'lodash';
 import styles from "./index.module.scss";
+
 var mainDs = function mainDs(mainList) {
   if (isAvailableArray(mainList)) {
     return mainList.map(function (_ref) {
       var id = _ref.id,
-        name = _ref.name;
+          name = _ref.name;
       return {
         value: id,
         label: name
       };
     });
   }
+
   return [];
 };
+
 var subDs = function subDs(main, subList) {
   if (main && isAvailableArray(subList)) {
     var _subList$find;
+
     var mainSubList = ((_subList$find = subList.find(function (item) {
       return item.ci.some(function (subCi) {
         return subCi.resourceId === main;
       });
-    })) === null || _subList$find === void 0 ? void 0 : _subList$find.ci) || [];
-    // 可选的子资源为网络接口和聚合接口
-    var InterfaceTypeCodes = ['networkInterface',
-    // 操作系统
+    })) === null || _subList$find === void 0 ? void 0 : _subList$find.ci) || []; // 可选的子资源为网络接口和聚合接口
+
+    var InterfaceTypeCodes = ['networkInterface', // 操作系统
     'winServerInterface', 'linuxServerInterface', 'aixServerInterface', 'hpuxServerInterface'];
     var interfaceList = mainSubList.filter(function (item) {
       var _item$typeCode;
+
       return InterfaceTypeCodes.indexOf(item.typeCode) > -1 || ((_item$typeCode = item.typeCode) === null || _item$typeCode === void 0 ? void 0 : _item$typeCode.endsWith('AggNetworkIf'));
     });
     var list = interfaceList.map(function (_ref2) {
       var id = _ref2.id,
-        typeCode = _ref2.typeCode,
-        _ref2$attributes = _ref2.attributes,
-        displayName = _ref2$attributes.displayName,
-        index = _ref2$attributes.index;
+          typeCode = _ref2.typeCode,
+          _ref2$attributes = _ref2.attributes,
+          displayName = _ref2$attributes.displayName,
+          index = _ref2$attributes.index;
       return {
         value: id,
         label: displayName,
@@ -55,20 +59,25 @@ var subDs = function subDs(main, subList) {
     });
     return _.orderBy(list, ['index']);
   }
+
   return [];
 };
+
 var SelectGroup = /*#__PURE__*/forwardRef(function (_ref3, ref) {
   var mainList = _ref3.mainList,
-    subList = _ref3.subList,
-    value = _ref3.value,
-    onChange = _ref3.onChange,
-    disableMain = _ref3.disableMain;
+      subList = _ref3.subList,
+      value = _ref3.value,
+      onChange = _ref3.onChange,
+      disableMain = _ref3.disableMain;
+
   var _useState = useState(),
-    main = _useState[0],
-    setMain = _useState[1];
+      main = _useState[0],
+      setMain = _useState[1];
+
   var _useState2 = useState(),
-    sub = _useState2[0],
-    setSub = _useState2[1];
+      sub = _useState2[0],
+      setSub = _useState2[1];
+
   var onMainChange = function onMainChange(mainValue) {
     var subValue = null;
     setMain(mainValue);
@@ -78,6 +87,7 @@ var SelectGroup = /*#__PURE__*/forwardRef(function (_ref3, ref) {
       sub: subValue
     });
   };
+
   var onSubChange = function onSubChange(subValue, actionType, item) {
     setSub(subValue);
     onChange({
@@ -86,6 +96,7 @@ var SelectGroup = /*#__PURE__*/forwardRef(function (_ref3, ref) {
       isAgg: item.isAgg
     });
   };
+
   useEffect(function () {
     setMain(value === null || value === void 0 ? void 0 : value.main);
     setSub(value === null || value === void 0 ? void 0 : value.sub);
@@ -94,6 +105,7 @@ var SelectGroup = /*#__PURE__*/forwardRef(function (_ref3, ref) {
     if (!key) {
       return true;
     }
+
     return item.label.toUpperCase().indexOf(key.toUpperCase()) > -1;
   }, []);
   return /*#__PURE__*/React.createElement(_Grid.Row, {
@@ -120,24 +132,27 @@ var SelectGroup = /*#__PURE__*/forwardRef(function (_ref3, ref) {
 });
 var LinkForm = /*#__PURE__*/forwardRef(function (_ref4, ref) {
   var isAddMode = _ref4.isAddMode,
-    link = _ref4.link,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded);
-  var field = _Field.useField();
+      link = _ref4.link,
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded);
+
+  var field = _Field.useField(); // 交换链路起点和链路终点
+
 
-  // 交换链路起点和链路终点
   var onExchange = function onExchange() {
     var _field$getValues = field.getValues(),
-      src = _field$getValues.src,
-      dst = _field$getValues.dst;
+        src = _field$getValues.src,
+        dst = _field$getValues.dst;
+
     field.setValue('src', dst);
     field.setValue('dst', src);
     field.validate(['src', 'dst']);
-  };
+  }; // 校验资源和接口必填
+
 
-  // 校验资源和接口必填
   var pointValidator = function pointValidator(text, value, cb) {
     return value !== null && value !== void 0 && value.main && value !== null && value !== void 0 && value.sub ? cb() : cb(text);
   };
+
   useImperativeHandle(ref, function () {
     return {
       field: field
@@ -146,6 +161,7 @@ var LinkForm = /*#__PURE__*/forwardRef(function (_ref4, ref) {
   useEffect(function () {
     if (link) {
       var _link$sourceObj, _link$interfaceSource, _link$targetObj, _link$interfaceTarget;
+
       var values = {
         name: link.name,
         src: {