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

package/es/components/index.module.scss

@@ -27,117 +27,6 @@
   }
 }
 
-.layout-aside-loading {
-  height: 100%;
-
-  :global {
-    .#{$css-prefix}loading-wrap {
-      height: 100%;
-    }
-  }
-
-  .layout-aside {
-    // padding: 12px;
-    height: 100%;
-    position: relative;
-
-    background: #ffffff;
-    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
-    border-radius: 4px;
-    border: 1px solid #dcdee3;
-    padding: 12px;
-    background: $color-white;
-    box-shadow: $shadow-1;
-
-    overflow: auto;
-    border-radius: 4px;
-
-    .tree-tool {
-      width: 100%;
-      padding-bottom: 12px;
-      display: flex;
-      justify-content: space-between;
-
-      .tree-tool-search {
-        flex: 1;
-
-        :global {
-          .#{$css-prefix}select-trigger {
-            min-width: 70px;
-          }
-
-          .#{$css-prefix}select {
-            margin-right: 4px;
-
-            .#{$css-prefix}input.#{$css-prefix}medium {
-              // width: 100%;
-            }
-
-            .#{$css-prefix}select-inner {
-              min-width: 70px !important;
-            }
-          }
-        }
-      }
-
-      .tree-tool-container {
-        margin-left: 4px;
-      }
-
-      .tree-tool-btn {
-        margin-left: 8px;
-        height: 28px;
-        width: 28px;
-        padding-left: 5px;
-        text-align: right;
-      }
-    }
-
-    .tree {
-      // height: 100%; // min-width: 208px;
-      width: 100%;
-
-      :global {
-        ul {
-          li {
-            :global {
-              .#{$css-prefix}tree-node-inner {
-                height: 28px;
-
-                .#{$css-prefix}tree-node-label-wrapper {
-                  .#{$css-prefix}tree-node-label {
-                    width: 100%;
-
-                    .tree-node-label {
-                      width: 100%;
-                      overflow: hidden;
-                      text-overflow: ellipsis;
-                      white-space: nowrap;
-
-                      span:nth-child(3) {
-                        width: 20px;
-                      }
-                    }
-                  }
-                }
-              }
-
-              .#{$css-prefix}node-block .#{$css-prefix}tree-node-inner {
-
-                .#{$css-prefix}disabled,
-                .#{$css-prefix}disabled:hover {
-                  -webkit-text-fill-color: $color-text1-4;
-                  cursor: not-allowed;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .empty {
-      padding-top: 50%;
-    }
-  }
-}
+.empty {
+  background: transparent;
+}

package/es/core/components/AlarmListPanel/index.js

@@ -9,22 +9,17 @@ import rlog from "@riil-frontend/component-topology-utils/es/rlog";
 
 function AlarmListPanel(props, ref) {
   // 传入参数
-  var topo = props.topo;
+  var topo = props.topo,
+      alarmData = props.alarmData,
+      onClose = props.onClose;
 
   var _useState = useState([]),
       alarmList = _useState[0],
-      setAlarmList = _useState[1];
+      setAlarmList = _useState[1]; //const { alarmData } = alarmState;
+  // const onClose = () => {/*  */
+  //   topo.alarm.switchAlarmPopPanel(false);
+  // };
 
-  var _topo$store$useModel = topo.store.useModel("topoAlarm"),
-      alarmState = _topo$store$useModel[0],
-      alarmDispatchers = _topo$store$useModel[1];
-
-  var alarmData = alarmState.alarmData;
-
-  var onClose = function onClose() {
-    // console.log("AlarmListPanel-onClose", alarm);
-    topo.alarm.switchAlarmPopPanel(false);
-  };
 
   useEffect(function () {
     if (alarmData) {

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

@@ -1,5 +1,6 @@
 import _Box from "@alifd/next/es/box";
 import _Form from "@alifd/next/es/form";
+import _extends from "@babel/runtime/helpers/extends";
 import _Field from "@alifd/next/es/field";
 import React, { useEffect, useImperativeHandle, useState } from 'react';
 import rlog from '@riil-frontend/component-topology-utils/es/rlog';
@@ -25,7 +26,9 @@ function DisplaySetting(props, ref) {
       linkTipConfig = _ref.linkTipConfig,
       showEdgeExpandConfig = _ref.showEdgeExpandConfig,
       extraConfig = _ref.extraConfig,
-      showLinkConfig = _ref.showLinkConfig;
+      showLinkConfig = _ref.showLinkConfig,
+      nodeTagProps = _ref.nodeTagProps,
+      nodeTipProps = _ref.nodeTipProps;
 
   var field = _Field.useField({
     autoUnmount: false,
@@ -54,10 +57,10 @@ function DisplaySetting(props, ref) {
       label: "\u8D44\u6E90\u6807\u6CE8",
       helpText: "\u6700\u591A\u652F\u6301\u52FE\u90093\u9879"
     })
-  }, /*#__PURE__*/React.createElement(NodeTag, {
+  }, /*#__PURE__*/React.createElement(NodeTag, _extends({}, nodeTagProps, {
     name: "nodeTag",
     topo: topo
-  })), linkTagConfig && /*#__PURE__*/React.createElement(_Form.Item, {
+  }))), linkTagConfig && /*#__PURE__*/React.createElement(_Form.Item, {
     label: /*#__PURE__*/React.createElement(Label, {
       label: "\u94FE\u8DEF\u6807\u6CE8",
       helpText: "\u6700\u591A\u652F\u6301\u52FE\u90092\u9879"
@@ -72,10 +75,10 @@ function DisplaySetting(props, ref) {
       helpText: "\u6700\u591A\u652F\u6301\u52FE\u90094\u9879"
     }),
     patternTrigger: "onChange"
-  }, /*#__PURE__*/React.createElement(NodeTip, {
+  }, /*#__PURE__*/React.createElement(NodeTip, _extends({}, nodeTipProps, {
     name: "nodeTip",
     topo: topo
-  })), linkTipConfig && /*#__PURE__*/React.createElement(_Form.Item, {
+  }))), linkTipConfig && /*#__PURE__*/React.createElement(_Form.Item, {
     label: /*#__PURE__*/React.createElement(Label, {
       label: "\u94FE\u8DEF\u60AC\u6D6E\u6846",
       helpText: "\u6700\u591A\u652F\u6301\u52FE\u90094\u9879"

package/es/core/components/DisplaySettingDrawer/NodeTag.js

@@ -1,16 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import PropTypes from 'prop-types';
 import { DEFAULT_NODE_TAG_COMMON_CONFIG } from "../../../constants/ResourceInfoDisplay";
 import BasicConfig from "./ResourceDisplay/BasicConfig";
-var CommonOptions = [{
+var defaultCommonOptions = [{
   value: 'graph:name',
   label: '图片名称'
 }, {
   value: 'attribute:display_name',
   label: '显示名称'
-}, {
-  value: 'attribute:ipv4_address',
-  label: 'IP地址'
 }];
 /**
  * 资源标注配置
@@ -19,17 +17,24 @@ var CommonOptions = [{
  */
 
 function NodeTag(props, ref) {
+  var commonOptions = props.commonOptions;
   return /*#__PURE__*/React.createElement(BasicConfig, _extends({
     ref: ref
   }, props, {
     limit: 3,
     elementType: "node",
     showType: "tag",
-    commonOptions: CommonOptions,
+    commonOptions: commonOptions || defaultCommonOptions,
     defaultCommonConfig: DEFAULT_NODE_TAG_COMMON_CONFIG,
     type: "node"
   }));
 }
 
 ;
+NodeTag.propTypes = {
+  commonOptions: PropTypes.array
+};
+NodeTag.defaultProps = {
+  commonOptions: defaultCommonOptions
+};
 export default /*#__PURE__*/React.forwardRef(NodeTag);

package/es/core/components/DisplaySettingDrawer/NodeTip.js

@@ -1,11 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import PropTypes from 'prop-types';
 import { DEFAULT_TIP_COMMON_CONFIG } from "../../../constants/ResourceInfoDisplay";
 import BasicConfig from "./ResourceDisplay/BasicConfig";
-var CommonOptions = [{
-  value: 'attribute:ipv4_address',
-  label: 'IP地址'
-}, {
+var defaultCommonOptions = [{
   value: 'attribute:display_name',
   label: '显示名称'
 }, {
@@ -19,15 +17,22 @@ var CommonOptions = [{
  */
 
 function NodeTip(props, ref) {
+  var commonOptions = props.commonOptions;
   return /*#__PURE__*/React.createElement(BasicConfig, _extends({
     ref: ref
   }, props, {
     limit: 4,
     elementType: "node",
     showType: "tip",
-    commonOptions: CommonOptions,
+    commonOptions: commonOptions || defaultCommonOptions,
     defaultCommonConfig: DEFAULT_TIP_COMMON_CONFIG
   }));
 }
 
+NodeTip.propTypes = {
+  commonOptions: PropTypes.array
+};
+NodeTip.defaultProps = {
+  commonOptions: defaultCommonOptions
+};
 export default /*#__PURE__*/React.forwardRef(NodeTip);

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

@@ -9,32 +9,14 @@ export default (function (props) {
 
   var executeByConfig = /*#__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:
               // 更新节点名称显示隐藏
-              topo.attributeMetricDisplay.updateNodesNameVisible(); // 更新连线展开折叠状态
+              topo.attributeMetricDisplay.updateNodesNameVisible();
 
-              if (displaySettingProps !== null && displaySettingProps !== void 0 && displaySettingProps.showLinkConfig) {
-                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);
-              }
-
-            case 2:
+            case 1:
             case "end":
               return _context.stop();
           }
@@ -74,7 +56,7 @@ export default (function (props) {
               extraOnOk = (displaySettingProps === null || displaySettingProps === void 0 ? void 0 : displaySettingProps.onOk) || (displaySettingProps === null || displaySettingProps === void 0 ? void 0 : displaySettingProps.onDisplaySettingDrawerOk);
 
               if (extraOnOk) {
-                extraOnOk();
+                extraOnOk(displayConfig);
               }
 
             case 11:

package/es/core/components/TopoView/topoView.js

@@ -172,6 +172,7 @@ var Topology = function Topology(props) {
       case TopoEvent.EVENT_DATA_DELETE:
         onDeleteElement(event.data);
         break;
+      // FIXME 保存逻辑优化
 
       case TopoEvent.EVENT_SAVE_TOPO:
         onSaveTopo(event.data);

package/es/core/editor/components/settings/propertyViews/edge/CommonEdgePropertyView.js

@@ -1,16 +1,13 @@
-import _Select from "@alifd/next/es/select";
 import _Form from "@alifd/next/es/form";
 import _NumberPicker from "@alifd/next/es/number-picker";
 import _Field from "@alifd/next/es/field";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _extends from "@babel/runtime/helpers/extends";
 import _Collapse from "@alifd/next/es/collapse";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useState, useEffect } from "react";
-import ColorPicker from "../../../../../../common/components/ColorPicker";
-import LineType from "../../common/LineType";
-import service from "../../../../../../topoCenter/services/link";
 import rlog from "@riil-frontend/component-topology-utils/es/rlog";
+import React, { useEffect, useState } from "react";
+import ColorPicker from "../../../../../../common/components/ColorPicker";
+import BindExitLinkSelect from "../../../../../../topoCenter/components/editor/propertyViews/edge/link/BindExitLinkSelect"; // import LineType from "../../common/LineType";
+
 var CollapsePanel = _Collapse.Panel;
 
 function parseValues(values, edge) {
@@ -25,56 +22,10 @@ export default function CommonEdgePropertyView(props) {
       edge = props.edge,
       values = props.values,
       _onChange = props.onChange,
-      editorProps = props.editorProps;
+      editorProps = props.editorProps,
+      extraDisplaySetting = props.extraDisplaySetting;
   var store = topo.store;
 
-  var _store$useModel = store.useModel("topoConfig"),
-      editState = _store$useModel[0],
-      editDispatchers = _store$useModel[1]; // 可关联出口链路
-
-
-  var _useState = useState([]),
-      associatedlinks = _useState[0],
-      setAssociatedlinks = _useState[1]; // const [isLine, setIsLine] = useState(false);
-
-
-  var getLinkByNodes = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(id) {
-      var result, hasLinkIds, axlink;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.next = 2;
-              return service.queryAssociatedlinks(id);
-
-            case 2:
-              result = _context.sent;
-              hasLinkIds = topo.getLines().map(function (line) {
-                return line.id;
-              });
-              axlink = [];
-              result.data.map(function (exLink) {
-                if (hasLinkIds.indexOf(exLink.id) < 0) {
-                  axlink.push(exLink);
-                }
-              });
-              rlog.debug("出口链路列表", result.data, axlink);
-              setAssociatedlinks(axlink);
-
-            case 8:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-
-    return function getLinkByNodes(_x) {
-      return _ref.apply(this, arguments);
-    };
-  }();
-
   var field = _Field.useField({
     autoUnmount: false,
     values: parseValues(values, edge),
@@ -86,11 +37,6 @@ export default function CommonEdgePropertyView(props) {
     }
   });
 
-  useEffect(function () {
-    console.log("CommonEdgePropertyView-edge", edge, edge.getSource().getTag(), edge.getTarget());
-    var ids = [edge.getSource().getTag(), edge.getTarget().getTag()];
-    getLinkByNodes(ids);
-  }, [edge]);
   useEffect(function () {
     field.setValues(parseValues(values, edge));
   }, [values]);
@@ -103,67 +49,6 @@ export default function CommonEdgePropertyView(props) {
     }));
   };
 
-  var bindExitLink = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(value) {
-      var data, exitLink, aobj, config, exconfig, exportLinkIdList, _yield$editDispatcher, elements;
-
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              data = associatedlinks.find(function (link) {
-                return link.id === value;
-              });
-              rlog.debug("bindExitLink--- v, edge", data, edge);
-              exitLink = {
-                attributes: [],
-                ciType: "network_link",
-                dtype: "link",
-                id: data.id,
-                interfaceSource: data["network_link.source_device_id"],
-                interfaceTarget: data["network_link.destination_device_id"],
-                metrics: [],
-                name: data.name,
-                "network_link.connect_type": "exit",
-                "network_link.destination_ipv4": data["network_link.destination_ipv4"],
-                operation: "delete",
-                connect_type: "exit",
-                source: data.source_id,
-                target: data.destination_id,
-                type: "link"
-              };
-              aobj = edge.getAttrObject();
-              edge.setAttrObject(_extends({}, aobj, exitLink));
-              edge.setTag(data.id);
-              config = topo.resourceConfig.getConfigFromHt();
-              rlog.debug("getConfigFromHt", config, topo.resourceConfig);
-              exconfig = _extends({}, config);
-              exportLinkIdList = config.exportLinkIdList;
-              exportLinkIdList.push(data.id);
-              topo.resourceConfig.updateConfig(_extends({}, config, {
-                exportLinkIdList: exportLinkIdList
-              }));
-              _context2.next = 14;
-              return editDispatchers.fetchDataByConfig();
-
-            case 14:
-              _yield$editDispatcher = _context2.sent;
-              elements = _yield$editDispatcher.elements;
-              rlog.debug("fetchDataByConfig", elements);
-
-            case 17:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    }));
-
-    return function bindExitLink(_x2) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-
   return /*#__PURE__*/React.createElement(_Form, {
     field: field,
     labelAlign: "top"
@@ -215,23 +100,5 @@ export default function CommonEdgePropertyView(props) {
     value: values["styleMap.edge.color"],
     align: "br",
     onChange: setLineColor
-  })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Form.Item, {
-    label: "\u5173\u8054\u51FA\u53E3\u94FE\u8DEF",
-    style: {
-      marginBottom: 0
-    }
-  }, /*#__PURE__*/React.createElement(_Select, {
-    style: {
-      width: 232
-    },
-    disabled: associatedlinks.length < 1,
-    onChange: function onChange(v) {
-      bindExitLink(v);
-    }
-  }, associatedlinks.map(function (item, index) {
-    return /*#__PURE__*/React.createElement(_Select.Option, {
-      value: item.id,
-      key: index
-    }, item.attributes.display_name);
-  }))))))));
+  })))), extraDisplaySetting))));
 }

package/es/core/editor/components/settings/propertyViews/edge/EdgePropertyView.js

@@ -11,7 +11,7 @@ var commonViews = {
  * @return {React.ReactNode || null}
  */
 
-export default function EdgePropertyViewMatch(props) {
+export default function EdgePropertyViewRoute(props) {
   var topo = props.topo,
       values = props.values,
       editorProps = props.editorProps;

package/es/core/editor/components/settings/propertyViews/node/Setting/Setting.js

@@ -50,7 +50,7 @@ export default function Setting(props) {
     key: "\u663E\u793A\u8BBE\u7F6E",
     title: "\u663E\u793A\u8BBE\u7F6E"
   }, /*#__PURE__*/React.createElement(_Form.Item, {
-    label: "\u56FE\u7247\u540D\u79F01"
+    label: "\u56FE\u7247\u540D\u79F0"
   }, /*#__PURE__*/React.createElement(_Input, {
     name: "attrObject.customName"
   })), showImageSetting && /*#__PURE__*/React.createElement(_Form.Item, {

package/es/core/editor/components/settings/propertyViews/node/data/Data.js

@@ -3,7 +3,7 @@ import _Field from "@alifd/next/es/field";
 import _extends from "@babel/runtime/helpers/extends";
 import _Collapse from "@alifd/next/es/collapse";
 import _Select from "@alifd/next/es/select";
-import React, { useEffect } from 'react';
+import React, { useEffect } from "react";
 import useHtElement from "../../../../../../common/hooks/useHtElement";
 import textStyles from "../../../../../../common/text.module.scss";
 import NodeRelateResourceButton from "./NodeRelateResourceButton";
@@ -12,22 +12,22 @@ var CollapsePanel = _Collapse.Panel;
 
 function parseValues(values) {
   return _extends({}, values, {
-    'attrObject.customName': values['attrObject.customName'] || values['attrObject.name'],
-    'attrObject.bindTopo': values['attrObject.bindTopo'] || '' // 解决切换节点时关联拓扑选项未重置
+    "attrObject.customName": values["attrObject.customName"] || values["attrObject.name"],
+    "attrObject.bindTopo": values["attrObject.bindTopo"] || "" // 解决切换节点时关联拓扑选项未重置
 
   });
 }
 
 function getBindType(values) {
   if (values.tag) {
-    return 'resource';
+    return "resource";
   }
 
   if (values.attrObject.bindType) {
     return values.attrObject.bindType;
   }
 
-  return 'none';
+  return "none";
 }
 
 export default function Data(props) {
@@ -57,23 +57,24 @@ export default function Data(props) {
   }, [values]);
 
   var setBindType = function setBindType(newBindType) {
-    _onChange('attrObject.bindType', newBindType);
+    _onChange("attrObject.bindType", newBindType);
 
-    if (newBindType === 'topo') {//
+    if (newBindType === "topo") {//
     }
   };
 
   var handleBindTopoChange = function handleBindTopoChange(value, data) {
     // 设置名称为拓扑名称，清空自定义名称
-    node.a('name', data.label);
-    node.a('customName', null);
+    node.a("name", data.label);
+    node.a("customName", null);
+    topoEditApi.deleteExLink(node);
   };
 
   var RelateTopoTree = editorProps === null || editorProps === void 0 ? void 0 : editorProps.relateTopoTree;
   return /*#__PURE__*/React.createElement(_Collapse, {
-    defaultExpandedKeys: ['相关资源'],
+    defaultExpandedKeys: ["相关资源"],
     style: {
-      border: 'none'
+      border: "none"
     }
   }, /*#__PURE__*/React.createElement(CollapsePanel, {
     key: "\u76F8\u5173\u8D44\u6E90",
@@ -87,7 +88,7 @@ export default function Data(props) {
     name: "bindType",
     value: bindType,
     style: {
-      width: '100%',
+      width: "100%",
       marginRight: 8
     },
     onChange: setBindType
@@ -97,25 +98,25 @@ export default function Data(props) {
     value: "resource"
   }, "\u5173\u8054\u8D44\u6E90"), RelateTopoTree && /*#__PURE__*/React.createElement(Option, {
     value: "topo"
-  }, "\u5173\u8054\u62D3\u6251"))), bindType === 'resource' && /*#__PURE__*/React.createElement(_Form.Item, {
+  }, "\u5173\u8054\u62D3\u6251"))), bindType === "resource" && /*#__PURE__*/React.createElement(_Form.Item, {
     label: "\u5173\u8054\u8D44\u6E90"
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      display: 'flex'
+      display: "flex"
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: textStyles.textEllipsis,
     style: {
       flex: 1,
       paddingRight: 16,
-      color: '#4D6277'
+      color: "#4D6277"
     },
     title: values.tag ? values.name : null
-  }, values.tag ? values.name : '—'), /*#__PURE__*/React.createElement(NodeRelateResourceButton, {
+  }, values.tag ? values.name : "—"), /*#__PURE__*/React.createElement(NodeRelateResourceButton, {
     node: values,
     topo: topo,
     topoEditApi: topoEditApi
-  }))), bindType === 'topo' && RelateTopoTree && /*#__PURE__*/React.createElement(_Form.Item, {
+  }))), bindType === "topo" && RelateTopoTree && /*#__PURE__*/React.createElement(_Form.Item, {
     label: "\u5173\u8054\u62D3\u6251"
   }, /*#__PURE__*/React.createElement(RelateTopoTree, {
     name: "attrObject.bindTopo",