@riil-frontend/component-topology 3.2.0 → 3.4.1

package/lib/topoCenter/components/editor/propertyViews/edge/addLinkDrawer/AddLinkDrawer.js

@@ -11,6 +11,8 @@ var _drawer = _interopRequireDefault(require("@alifd/next/lib/drawer"));
 
 var _message = _interopRequireDefault(require("@alifd/next/lib/message"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));
@@ -49,6 +51,10 @@ function AddLinkDrawer(props) {
       lineData = props.lineData;
   var store = topo.store;
 
+  var _topo$store$useModel = topo.store.useModel("topoMod"),
+      topoState = _topo$store$useModel[0],
+      topoDispatchers = _topo$store$useModel[1];
+
   var _store$useModel = store.useModel("topoConfig"),
       editState = _store$useModel[0],
       editDispatchers = _store$useModel[1];
@@ -59,8 +65,6 @@ function AddLinkDrawer(props) {
 
   var addLinkIsOpen = editState.addLinkIsOpen,
       currentLink = editState.currentLink;
-  var ciConnectable = linkState.ciConnectable; // rlog.debug("addLinkDrawer--init-addLinkIsOpen", addLinkIsOpen, currentLink);
-  // const [visible, { setTrue, setFalse }] = useBoolean();
 
   var _useState = (0, _react.useState)(),
       link = _useState[0],
@@ -72,12 +76,16 @@ function AddLinkDrawer(props) {
 
   var _useState3 = (0, _react.useState)(false),
       loading = _useState3[0],
-      setLoading = _useState3[1]; // 保存后更新拓扑图状态
+      setLoading = _useState3[1];
+
+  var _useState4 = (0, _react.useState)(),
+      sourceIFDoc = _useState4[0],
+      setSourceIFDoc = _useState4[1]; // 保存后更新拓扑图状态
 
 
-  var _useState4 = (0, _react.useState)([]),
-      ciIdsConnectable = _useState4[0],
-      setCiIdsConnectable = _useState4[1];
+  var _useState5 = (0, _react.useState)([]),
+      ciIdsConnectable = _useState5[0],
+      setCiIdsConnectable = _useState5[1];
 
   var linkNodesRef = (0, _react.useRef)();
 
@@ -93,10 +101,8 @@ function AddLinkDrawer(props) {
 
             case 2:
               result = _context.sent;
-
-              _rlog["default"].debug("端口列表", result); //const list = result[id];
-
-
+              // rlog.debug("端口列表", result);
+              //const list = result[id];
               portsDoc = {};
               ports = result.map(function (item) {
                 var obj = {
@@ -113,7 +119,7 @@ function AddLinkDrawer(props) {
                 portsDoc: portsDoc
               });
 
-            case 7:
+            case 6:
             case "end":
               return _context.stop();
           }
@@ -134,21 +140,20 @@ function AddLinkDrawer(props) {
           switch (_context2.prev = _context2.next) {
             case 0:
               linkNodesRef.current = e; // const { type, data } = e;
-
-              _rlog["default"].debug("接到打开创建链路抽屉信息", e);
+              // rlog.debug("接到打开创建链路抽屉信息", e);
 
               setIsAddMode(true); // setTrue();
 
-              _context2.prev = 3;
-              _context2.next = 6;
+              _context2.prev = 2;
+              _context2.next = 5;
               return getPortsById(e.source._attrObject.id);
 
-            case 6:
+            case 5:
               sourcePorts = _context2.sent;
-              _context2.next = 9;
+              _context2.next = 8;
               return getPortsById(e.target._attrObject.id);
 
-            case 9:
+            case 8:
               targetPorts = _context2.sent;
               source = translationNode(e.source, sourcePorts);
               target = translationNode(e.target, targetPorts);
@@ -170,24 +175,25 @@ function AddLinkDrawer(props) {
                   source_id: "",
                   "network_link.source_device_id": source.id,
                   "network_link.destination_device_id": target.id,
-                  "network_link.actual_bandwidth": null
+                  "network_link.actual_bandwidth": null,
+                  connect_type: target.ciType !== "customNode" ? "phy" : "exit"
                 }
               });
-              _context2.next = 19;
+              _context2.next = 18;
               break;
 
-            case 16:
-              _context2.prev = 16;
-              _context2.t0 = _context2["catch"](3);
+            case 15:
+              _context2.prev = 15;
+              _context2.t0 = _context2["catch"](2);
 
               _rlog["default"].error("出现异常", _context2.t0);
 
-            case 19:
+            case 18:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[3, 16]]);
+      }, _callee2, null, [[2, 15]]);
     }));
 
     return function handleEvent(_x2) {
@@ -195,17 +201,23 @@ function AddLinkDrawer(props) {
     };
   }();
 
+  var selectedSourceNodeHandleEvent = function selectedSourceNodeHandleEvent(e) {
+    // rlog.debug("设置了起始节点", e);
+    //const allData = topo.getData();
+    var enableNodes = (0, _htElementUtils.getNodes)(topo.getDataModel());
+    topo.view.topoClient.emitEvent("topo_link_set_connectable_nodes", enableNodes);
+  };
+
   var initEditLineData = /*#__PURE__*/function () {
     var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
       var _currentLink$attribut, _sourcePorts$ports, _currentLink$attribut2, _targetPorts$ports;
 
-      var sourcePorts, targetPorts;
+      var sourcePorts, targetPorts, connect_type;
       return _regenerator["default"].wrap(function _callee3$(_context3) {
         while (1) {
           switch (_context3.prev = _context3.next) {
             case 0:
-              _rlog["default"].debug("编辑链路--当前链路", currentLink);
-
+              console.log("编辑链路--当前链路", currentLink);
               _context3.next = 3;
               return getPortsById(currentLink.source);
 
@@ -216,6 +228,8 @@ function AddLinkDrawer(props) {
 
             case 6:
               targetPorts = _context3.sent;
+              setSourceIFDoc(sourcePorts.portsDoc);
+              connect_type = currentLink.attributes["network_link.connect_type"] === "exit" ? "exit" : "phy";
               setLink({
                 source: {
                   id: currentLink.source,
@@ -232,15 +246,17 @@ function AddLinkDrawer(props) {
                   name: currentLink.attributes["network_link.destination_device_id_object"].displayName,
                   ipAddress: currentLink.attributes["network_link.destination_ipv4"],
                   ciName: (_currentLink$attribut2 = currentLink.attributes.destination_type_object) === null || _currentLink$attribut2 === void 0 ? void 0 : _currentLink$attribut2.displayName,
-                  ciType: currentLink.attributes.destination_type,
+                  ciType: currentLink.attributes.destination_type !== "" ? currentLink.attributes.destination_type : "customNode",
                   interfaceTarget: currentLink.interfaceTarget,
                   ports: (_targetPorts$ports = targetPorts.ports) !== null && _targetPorts$ports !== void 0 ? _targetPorts$ports : [],
                   portsDoc: targetPorts.portsDoc
                 },
-                attributes: currentLink.attributes
+                attributes: (0, _extends2["default"])({}, currentLink.attributes, {
+                  connect_type: connect_type
+                })
               });
 
-            case 8:
+            case 10:
             case "end":
               return _context3.stop();
           }
@@ -254,8 +270,7 @@ function AddLinkDrawer(props) {
   }();
 
   (0, _react.useEffect)(function () {
-    _rlog["default"].debug("useEffect-----currentLink", currentLink);
-
+    // rlog.debug("useEffect-----currentLink", currentLink);
     if (currentLink) {
       setIsAddMode(false);
       initEditLineData();
@@ -264,38 +279,33 @@ function AddLinkDrawer(props) {
 
   var getCiTypesConnectable = /*#__PURE__*/function () {
     var _ref4 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
-      var notifier, ciTypesConnectable, nodes, ciIds;
+      var ciTypesConnectable, nodes, ciIds, ciNodes;
       return _regenerator["default"].wrap(function _callee4$(_context4) {
         while (1) {
           switch (_context4.prev = _context4.next) {
             case 0:
-              notifier = topo.view.topoClient.notifier;
-
-              _rlog["default"].debug("加载哪些ci类型可创建链路-getCiTypesConnectable"); // 加载哪些ci类型可创建链路
-
-
-              _context4.next = 4;
+              _context4.next = 2;
               return _topo["default"].networkLink.getCiTypesConnectable(_ResourceTypeLimit.RESOURCE_LIMIT_TYPES);
 
-            case 4:
+            case 2:
               ciTypesConnectable = _context4.sent;
-              nodes = topo.getNodes(); // const tags = topo.getTag();
-
-              _rlog["default"].debug("加载哪些ci类型可创建链路", ciTypesConnectable, topo, nodes);
-
+              nodes = (0, _htElementUtils.getNodes)(topo.getDataModel());
               ciIds = [];
+              ciNodes = [];
               nodes.map(function (node) {
-                if (ciTypesConnectable[node.ciType] && ["delete", "write"].indexOf(node.operation) >= 0) {
+                // rlog.debug("过滤属性", node.a("operation"));
+                if (ciTypesConnectable[node.a("ciType")] && ["delete", "write"].indexOf(node.a("operation")) >= 0) {
                   ciIds.push(node.id);
+                  ciNodes.push(node);
                 }
               });
               linkDispatchers.update({
                 ciConnectable: ciIds
               });
               setCiIdsConnectable(ciIds);
-              return _context4.abrupt("return", ciIds);
+              return _context4.abrupt("return", ciNodes);
 
-            case 12:
+            case 10:
             case "end":
               return _context4.stop();
           }
@@ -310,40 +320,37 @@ function AddLinkDrawer(props) {
 
 
   (0, _react.useEffect)(function () {
-    var notifier = topo.view.topoClient.notifier;
-
-    _rlog["default"].debug("注册事件"); // 进入划线模式，置灰不可用的节点
-
+    var notifier = topo.view.topoClient.notifier; // rlog.debug("注册事件");
+    // 进入划线模式，置灰不可用的节点
 
     var enterHandleEvent = function enterHandleEvent() {
-      getCiTypesConnectable().then(function (ciIds) {
-        _rlog["default"].debug("设置可连线节点", ciIdsConnectable);
-
-        topo.view.topoClient.emitEvent("topo_link_set_connectable_nodes", ciIds);
+      getCiTypesConnectable().then(function (ciNodes) {
+        // rlog.debug("设置可连线节点", ciIdsConnectable, ciNodes);
+        topo.view.topoClient.emitEvent("topo_link_set_connectable_nodes", ciNodes);
       });
     };
 
     notifier.on(_event["default"].TOPO_LINK_ENTER_CREATE_MODE, enterHandleEvent);
     notifier.on(_event["default"].TOPO_LINK_CREATED, handleEvent);
+    notifier.on(_event["default"].TOPO_LINK_SELECT_SOURCE_NODE, selectedSourceNodeHandleEvent);
     return function () {
       // 取消注册事件
-      _rlog["default"].debug("取消注册事件");
-
+      // rlog.debug("取消注册事件");
       notifier.off(_event["default"].TOPO_LINK_ENTER_CREATE_MODE, enterHandleEvent);
       notifier.off(_event["default"].TOPO_LINK_CREATED, handleEvent);
     };
   }, []);
 
   var translationNode = function translationNode(node, Ports) {
-    var _Ports$ports;
+    var _topo$ciTyeCache$getC, _topo$ciTyeCache$getC2, _attrObject$ciType, _Ports$ports;
 
     var attrObject = node._attrObject;
     return {
       id: attrObject.id,
       name: attrObject.name,
       ipAddress: attrObject.ipAddress,
-      ciName: topo.ciTyeCache.getCiType(attrObject.ciType).displayName,
-      ciType: attrObject.ciType,
+      ciName: (_topo$ciTyeCache$getC = (_topo$ciTyeCache$getC2 = topo.ciTyeCache.getCiType(attrObject.ciType)) === null || _topo$ciTyeCache$getC2 === void 0 ? void 0 : _topo$ciTyeCache$getC2.displayName) !== null && _topo$ciTyeCache$getC !== void 0 ? _topo$ciTyeCache$getC : attrObject.customName,
+      ciType: (_attrObject$ciType = attrObject.ciType) !== null && _attrObject$ciType !== void 0 ? _attrObject$ciType : "customNode",
       ports: (_Ports$ports = Ports.ports) !== null && _Ports$ports !== void 0 ? _Ports$ports : [],
       portsDoc: Ports.portsDoc
     };
@@ -351,8 +358,7 @@ function AddLinkDrawer(props) {
 
   var closeDrawer = function closeDrawer() {
     //editDispatchers.update({ addLinkIsOpen: false });
-    _rlog["default"].debug("关闭");
-
+    // rlog.debug("关闭");
     editDispatchers.update({
       addLinkIsOpen: false,
       currentLink: null
@@ -361,19 +367,18 @@ function AddLinkDrawer(props) {
 
   var addLinkToGraph = function addLinkToGraph(_ref5) {
     var linkData = _ref5.linkData,
-        isAgg = _ref5.isAgg;
+        linkType = _ref5.linkType,
+        targetName = _ref5.targetName;
     var htTopo = topo.getHtTopo();
     var _linkNodesRef$current = linkNodesRef.current,
         source = _linkNodesRef$current.source,
         target = _linkNodesRef$current.target;
 
-    _rlog["default"].debug("addLinkToGraph", source, target, htTopo);
-
     try {
       // 获取两个节点间的连线数据列表
       var edgesInNodes = (0, _htElementUtils.getEdgesBetweenNodes)(source, target);
 
-      if (isAgg) {
+      if (linkType === "agg") {
         // 聚合链路
         if (edgesInNodes.length === 0) {
           htTopo.createEdge(source, target, linkData);
@@ -384,21 +389,15 @@ function AddLinkDrawer(props) {
 
         htTopo.toggleEdgeGroup(source, target, false);
       } else {
-        // 物理、出口链路
+        // 出口链路
         // 有连线组无子连线时，设置连线数据，切换到连线并选中
-        // 注释代码，因为 createEdge 内置该逻辑
-        // const firstEdge = edgesInNodes[0]
-        // if (edgesInNodes.length === 1 && !htTopo.getEdgeData(firstEdge)) {
-        //   htTopo.setEdgeData(firstEdge, linkData);
-        // } else {
-        //   htTopo.createEdge(source, target, linkData);
-        // }
         var edge = htTopo.createEdge(source, target, linkData);
 
-        _rlog["default"].debug("添加链路 绘图", edge); // htTopo.toggleEdgeGroup(source, target, true);
-
-      } // TODO 选中
-
+        if (linkType === "exit" && target.getTag() === undefined) {
+          // rlog.debug("addLinkToGraph-exit-target", target, target.getTag());
+          target.a("name", targetName);
+        }
+      }
 
       topo.getGraphView().dm().sm().ss(topo.getDataModel().getDataByTag(linkData.id));
     } catch (error) {
@@ -406,17 +405,43 @@ function AddLinkDrawer(props) {
     }
   };
 
+  var mergeExitLinkData = function mergeExitLinkData(data, attributes) {
+    return {
+      id: data.id,
+      name: data.name,
+      source: data["network_link.source_device_id"],
+      target: data["network_link.destination_device_id"],
+      operation: data.operation,
+      interfaceSource: data["source_id"],
+      interfaceTarget: data["destination_id"],
+      ciType: data.ciType,
+      attributes: (0, _extends2["default"])({}, attributes, {
+        display_name: data.display_name,
+        name: data.name,
+        "network_link.actual_bandwidth": data["network_link.actual_bandwidth"],
+        "network_link.connect_type": data["network_link.connect_type"],
+        "network_link.destination_ipv4": data["network_link.destination_ipv4"],
+        "network_link.source_device_id": data["network_link.source_device_id"],
+        source_id: data.source_id,
+        support_templates: data.support_templates,
+        use: data.use,
+        source_id_object: {
+          displayName: sourceIFDoc[data.source_id].label
+        }
+      })
+    };
+  };
+
   var onSave = /*#__PURE__*/function () {
     var _ref6 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5(data) {
-      var parm, result, config, _yield$editDispatcher, elements, linkData, isAgg;
+      var parm, result, linkType, config, exportLinkIdList, _yield$editDispatcher, elements, linkData, edge, aobj, target, links, linkAttrKey, newLinkData, newLinks, newData;
 
       return _regenerator["default"].wrap(function _callee5$(_context5) {
         while (1) {
           switch (_context5.prev = _context5.next) {
             case 0:
               //editDispatchers.update({ addLinkIsOpen: false });
-              _rlog["default"].debug("保存链路信息", data);
-
+              // rlog.debug("保存链路信息", isAddMode, data);
               setLoading(true);
               parm = {
                 attributes: data
@@ -424,84 +449,123 @@ function AddLinkDrawer(props) {
               result = null;
 
               if (!isAddMode) {
-                _context5.next = 10;
+                _context5.next = 9;
                 break;
               }
 
-              _context5.next = 7;
+              _context5.next = 6;
               return _server["default"].addLink(parm);
 
-            case 7:
+            case 6:
               result = _context5.sent;
-              _context5.next = 14;
+              _context5.next = 13;
               break;
 
-            case 10:
+            case 9:
               parm.id = currentLink.id;
-              _context5.next = 13;
+              _context5.next = 12;
               return _server["default"].editLink(parm);
 
-            case 13:
+            case 12:
               result = _context5.sent;
 
-            case 14:
-              setLoading(false); // if (result) {
-              //   Message.success("保存成功");
-              // }
-
+            case 13:
+              setLoading(false);
+              linkType = data["network_link.connect_type"];
               _context5.prev = 15;
 
               if (!result) {
-                _context5.next = 26;
+                _context5.next = 35;
                 break;
               }
 
-              config = topo.resourceConfig.getConfigFromHt();
-              topo.resourceConfig.updateConfig(config);
-              _context5.next = 21;
+              config = topo.resourceConfig.getConfigFromHt(); // 新建后显示到图上
+
+              if (!isAddMode) {
+                _context5.next = 31;
+                break;
+              }
+
+              exportLinkIdList = config.exportLinkIdList;
+
+              if (data["network_link.connect_type"] === "exit") {
+                exportLinkIdList.push(result);
+              }
+
+              topo.resourceConfig.updateConfig((0, _extends2["default"])({}, config, {
+                exportLinkIdList: exportLinkIdList
+              })); // const linkType = data["network_link.connect_type"];
+
+              _context5.next = 24;
               return editDispatchers.fetchDataByConfig();
 
-            case 21:
+            case 24:
               _yield$editDispatcher = _context5.sent;
               elements = _yield$editDispatcher.elements;
-              editDispatchers.update({
-                addLinkIsOpen: false,
-                currentLink: null
-              }); // 新建后显示到图上
+              linkData = elements.find(function (element) {
+                return element.id === result;
+              });
+              addLinkToGraph({
+                linkData: (0, _copyUtil.clone)(linkData),
+                linkType: linkType,
+                targetName: data["network_link.destination_ipv4"]
+              });
+
+              _message["default"].success("创建成功");
 
-              if (isAddMode) {
-                _message["default"].success("创建成功");
+              _context5.next = 33;
+              break;
 
-                linkData = elements.find(function (element) {
-                  return element.id === result;
+            case 31:
+              // console.log("保存编辑信息", data, linkType);
+              if (linkType === "exit") {
+                edge = topo.getGraphView().dm().sm().ld();
+                aobj = edge.getAttrObject();
+                edge.setAttrObject((0, _extends2["default"])({}, aobj, data));
+                target = edge.getTarget();
+
+                if (target.getTag() === undefined) {
+                  target.a("name", data["network_link.destination_ipv4"]);
+                }
+
+                links = topoState.data.links;
+                linkAttrKey = links.findIndex(function (item) {
+                  return item.id === aobj.id;
+                });
+                newLinkData = mergeExitLinkData(edge.getAttrObject(), links[linkAttrKey]);
+                newLinks = (0, _copyUtil.clone)(links);
+                newLinks.splice(linkAttrKey, 1, newLinkData);
+                newData = (0, _extends2["default"])({}, topoState.data, {
+                  links: newLinks
                 });
-                isAgg = data["network_link.connect_type"] === "agg";
-                addLinkToGraph({
-                  linkData: (0, _copyUtil.clone)(linkData),
-                  isAgg: isAgg
+                topoDispatchers.update({
+                  data: newData
                 });
-              } else {
-                _message["default"].success("保存成功");
               }
 
+              _message["default"].success("保存成功");
+
+            case 33:
+              editDispatchers.update({
+                addLinkIsOpen: false,
+                currentLink: null
+              });
               topo.linkDynamicStyleExecutor.execute();
 
-            case 26:
-              _context5.next = 31;
+            case 35:
+              _context5.next = 39;
               break;
 
-            case 28:
-              _context5.prev = 28;
+            case 37:
+              _context5.prev = 37;
               _context5.t0 = _context5["catch"](15);
 
-              _rlog["default"].debug("保存链路信息异常", _context5.t0);
-
-            case 31:
+            case 39:
             case "end":
               return _context5.stop();
           }
         }
-      }, _callee5, null, [[15, 28]]);
+      }, _callee5, null, [[15, 37]]);
     }));
 
     return function onSave(_x3) {