@riil-frontend/component-topology 3.3.0 → 3.5.0-a.1

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

@@ -51,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];
@@ -61,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],
@@ -74,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)();
 
@@ -222,6 +228,7 @@ function AddLinkDrawer(props) {
 
             case 6:
               targetPorts = _context3.sent;
+              setSourceIFDoc(sourcePorts.portsDoc);
               connect_type = currentLink.attributes["network_link.connect_type"] === "exit" ? "exit" : "phy";
               setLink({
                 source: {
@@ -249,7 +256,7 @@ function AddLinkDrawer(props) {
                 })
               });
 
-            case 9:
+            case 10:
             case "end":
               return _context3.stop();
           }
@@ -272,23 +279,17 @@ function AddLinkDrawer(props) {
 
   var getCiTypesConnectable = /*#__PURE__*/function () {
     var _ref4 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
-      var notifier, ciTypesConnectable, nodes, ciIds, ciNodes;
+      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.debug("加载哪些ci类型可创建链路-getCiTypesConnectable");
-              // 加载哪些ci类型可创建链路
-
-              _context4.next = 3;
+              _context4.next = 2;
               return _topo["default"].networkLink.getCiTypesConnectable(_ResourceTypeLimit.RESOURCE_LIMIT_TYPES);
 
-            case 3:
+            case 2:
               ciTypesConnectable = _context4.sent;
-              nodes = (0, _htElementUtils.getNodes)(topo.getDataModel()); // rlog.debug("getCiTypesConnectable", nodes);
-              // const tags = topo.getTag();
-              // rlog.debug("加载哪些ci类型可创建链路", ciTypesConnectable, topo, nodes);
-
+              nodes = (0, _htElementUtils.getNodes)(topo.getDataModel());
               ciIds = [];
               ciNodes = [];
               nodes.map(function (node) {
@@ -304,7 +305,7 @@ function AddLinkDrawer(props) {
               setCiIdsConnectable(ciIds);
               return _context4.abrupt("return", ciNodes);
 
-            case 11:
+            case 10:
             case "end":
               return _context4.stop();
           }
@@ -371,15 +372,7 @@ function AddLinkDrawer(props) {
     var htTopo = topo.getHtTopo();
     var _linkNodesRef$current = linkNodesRef.current,
         source = _linkNodesRef$current.source,
-        target = _linkNodesRef$current.target; // rlog.debug(
-    //   "addLinkToGraph",
-    //   source,
-    //   source.getTag(),
-    //   target,
-    //   target.getTag(),
-    //   linkData,
-    //   htTopo
-    // );
+        target = _linkNodesRef$current.target;
 
     try {
       // 获取两个节点间的连线数据列表
@@ -404,10 +397,7 @@ function AddLinkDrawer(props) {
           // rlog.debug("addLinkToGraph-exit-target", target, target.getTag());
           target.a("name", targetName);
         }
-      } //console.log("选中", topo.getGraphView().dm().sm());
-      //console.log("选中", topo.getDataModel().getDataByTag(linkData.id));
-      // TODO 选中
-
+      }
 
       topo.getGraphView().dm().sm().ss(topo.getDataModel().getDataByTag(linkData.id));
     } catch (error) {
@@ -415,16 +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, exportLinkIdList, _yield$editDispatcher, elements, linkData, linkType;
+      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.debug("保存链路信息", data);
+              // rlog.debug("保存链路信息", isAddMode, data);
               setLoading(true);
               parm = {
                 attributes: data
@@ -453,23 +470,19 @@ function AddLinkDrawer(props) {
               result = _context5.sent;
 
             case 13:
-              setLoading(false); // if (result) {
-              //   Message.success("保存成功");
-              // }
-
-              _context5.prev = 14;
+              setLoading(false);
+              linkType = data["network_link.connect_type"];
+              _context5.prev = 15;
 
               if (!result) {
-                _context5.next = 36;
+                _context5.next = 35;
                 break;
               }
 
-              config = topo.resourceConfig.getConfigFromHt(); // rlog.debug("getConfigFromHt", config, topo.resourceConfig);
-
-              console.log("save success", data, result); // 新建后显示到图上
+              config = topo.resourceConfig.getConfigFromHt(); // 新建后显示到图上
 
               if (!isAddMode) {
-                _context5.next = 33;
+                _context5.next = 31;
                 break;
               }
 
@@ -481,7 +494,8 @@ function AddLinkDrawer(props) {
 
               topo.resourceConfig.updateConfig((0, _extends2["default"])({}, config, {
                 exportLinkIdList: exportLinkIdList
-              }));
+              })); // const linkType = data["network_link.connect_type"];
+
               _context5.next = 24;
               return editDispatchers.fetchDataByConfig();
 
@@ -491,46 +505,67 @@ function AddLinkDrawer(props) {
               linkData = elements.find(function (element) {
                 return element.id === result;
               });
-              linkType = data["network_link.connect_type"];
               addLinkToGraph({
                 linkData: (0, _copyUtil.clone)(linkData),
                 linkType: linkType,
                 targetName: data["network_link.destination_ipv4"]
               });
 
-              if (data["network_link.connect_type"] === "exit") {
-                console.log("save success--- data, elements", data, elements);
-              }
-
               _message["default"].success("创建成功");
 
-              _context5.next = 34;
+              _context5.next = 33;
               break;
 
-            case 33:
+            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
+                });
+                topoDispatchers.update({
+                  data: newData
+                });
+              }
+
               _message["default"].success("保存成功");
 
-            case 34:
+            case 33:
               editDispatchers.update({
                 addLinkIsOpen: false,
                 currentLink: null
               });
               topo.linkDynamicStyleExecutor.execute();
 
-            case 36:
-              _context5.next = 40;
+            case 35:
+              _context5.next = 39;
               break;
 
-            case 38:
-              _context5.prev = 38;
-              _context5.t0 = _context5["catch"](14);
+            case 37:
+              _context5.prev = 37;
+              _context5.t0 = _context5["catch"](15);
 
-            case 40:
+            case 39:
             case "end":
               return _context5.stop();
           }
         }
-      }, _callee5, null, [[14, 38]]);
+      }, _callee5, null, [[15, 37]]);
     }));
 
     return function onSave(_x3) {

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

@@ -88,9 +88,7 @@ function EditLinkInfo(props) {
       setConnectEnable = _useState4[1];
 
   var fieldOnChange = function fieldOnChange(name, value) {
-    var newValues = field.getValues();
-
-    _rlog["default"].debug("Field-onChange", newValues, name, value);
+    var newValues = field.getValues(); // rlog.debug("Field-onChange", newValues, name, value);
 
     setValus(newValues);
   };
@@ -140,7 +138,6 @@ function EditLinkInfo(props) {
   };
 
   var connectHandleChange = function connectHandleChange(v) {
-    console.log("connectHandleChange", v);
     field.setValue("connect_type", v);
   };
 
@@ -158,9 +155,8 @@ function EditLinkInfo(props) {
       actualBandwidth = Math.min(sourceRb, targetRb);
     } else {
       actualBandwidth = sourceRb || targetRb;
-    }
+    } // rlog.debug("network_link.actual_bandwidth", actualBandwidth);
 
-    _rlog["default"].debug("network_link.actual_bandwidth", actualBandwidth);
 
     field.setValue("network_link.actual_bandwidth", actualBandwidth);
   };
@@ -170,7 +166,7 @@ function EditLinkInfo(props) {
       if (errors) {
         _rlog["default"].debug("saveHandleChange-error", errors, values);
       } else {
-        var _valus$destination_id, _sourceValue$portsDoc3, _sourceValue$portsDoc4, _targetValue$portsDoc3, _targetValue$portsDoc4, _sourceValue$ipAddres, _targetValue$ipAddres, _targetValue$id;
+        var _valus$destination_id, _sourceValue$portsDoc3, _sourceValue$portsDoc4, _targetValue$portsDoc3, _targetValue$portsDoc4, _targetValue$ipAddres, _sourceValue$ipAddres, _targetValue$id;
 
         _rlog["default"].debug("saveHandleChange", valus, source, target);
 
@@ -178,7 +174,8 @@ function EditLinkInfo(props) {
         var destinationId = (_valus$destination_id = valus["destination_id"]) !== null && _valus$destination_id !== void 0 ? _valus$destination_id : "";
         var sourceType = (_sourceValue$portsDoc3 = (_sourceValue$portsDoc4 = sourceValue.portsDoc[sourceId]) === null || _sourceValue$portsDoc4 === void 0 ? void 0 : _sourceValue$portsDoc4.type) !== null && _sourceValue$portsDoc3 !== void 0 ? _sourceValue$portsDoc3 : "";
         var destinationType = (_targetValue$portsDoc3 = (_targetValue$portsDoc4 = targetValue.portsDoc[destinationId]) === null || _targetValue$portsDoc4 === void 0 ? void 0 : _targetValue$portsDoc4.type) !== null && _targetValue$portsDoc3 !== void 0 ? _targetValue$portsDoc3 : "";
-        var typeJudge = linkTypeJudge(sourceType, destinationType, valus["connect_type"]);
+        var typeJudge = linkTypeJudge(sourceType, destinationType, valus["network_link.connect_type"]);
+        var destination_ipv4 = valus["network_link.connect_type"] !== "exit" ? (_targetValue$ipAddres = targetValue.ipAddress) !== null && _targetValue$ipAddres !== void 0 ? _targetValue$ipAddres : valus["network_link.destination_ipv4"] : valus["network_link.destination_ipv4"];
         var obj = {
           display_name: valus["display_name"],
           // 链路名称
@@ -186,7 +183,7 @@ function EditLinkInfo(props) {
           // 链路名称
           "network_link.source_ipv4": (_sourceValue$ipAddres = sourceValue.ipAddress) !== null && _sourceValue$ipAddres !== void 0 ? _sourceValue$ipAddres : valus["network_link.source_ipv4"],
           // 源IP
-          "network_link.destination_ipv4": (_targetValue$ipAddres = targetValue.ipAddress) !== null && _targetValue$ipAddres !== void 0 ? _targetValue$ipAddres : valus["network_link.destination_ipv4"],
+          "network_link.destination_ipv4": destination_ipv4,
           // 目的IP
           // source_id, // 源端口
           // destination_id, // 目的端口
@@ -255,6 +252,16 @@ function EditLinkInfo(props) {
     });
   };
 
+  var targetIpComp = function targetIpComp(targetValue) {
+    return targetValue.ipAddress && targetValue.ciType !== "customNode" ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: _indexModule["default"].label
+    }, targetValue.ipAddress) : /*#__PURE__*/_react["default"].createElement(_input["default"], {
+      placeholder: "\u8BF7\u8F93\u5165",
+      name: "network_link.destination_ipv4",
+      maxLength: 128
+    });
+  };
+
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _indexModule["default"].editForm
   }, /*#__PURE__*/_react["default"].createElement(_form["default"], {
@@ -293,13 +300,7 @@ function EditLinkInfo(props) {
   }, /*#__PURE__*/_react["default"].createElement(FormItem, (0, _extends2["default"])({}, formItemLayout, {
     labelAlign: labelAlign,
     label: "\u76EE\u7684\u8282\u70B9IP"
-  }), targetValue.ipAddress ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: _indexModule["default"].label
-  }, targetValue.ipAddress) : /*#__PURE__*/_react["default"].createElement(_input["default"], {
-    placeholder: "\u8BF7\u8F93\u5165",
-    name: "network_link.destination_ipv4",
-    maxLength: 128
-  })))), /*#__PURE__*/_react["default"].createElement(Row, {
+  }), targetIpComp(target)))), /*#__PURE__*/_react["default"].createElement(Row, {
     gutter: "16"
   }, /*#__PURE__*/_react["default"].createElement(Col, {
     span: "12"

package/lib/topoCenter/hooks/editor/useDeleteEdges.js

@@ -182,6 +182,8 @@ var _default = function _default(_ref) {
     } else {
       htTopo.deleteEdge(edge);
     }
+
+    topo.linkDynamicStyleExecutor.execute();
   };
 
   var deleteEdges = function deleteEdges(edges) {

package/lib/topoCenter/services/link.js

@@ -163,42 +163,50 @@ var _default = {
    *
    * @param {array} ciIds
    */
-  queryAssociatedlinks: function queryAssociatedlinks(ids) {
+  queryAssociatedlinks: function queryAssociatedlinks(ids, type) {
     return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
-      var idtxt, parm, jsonParm, result;
+      var stag, ttag, condition, parm, jsonParm, result;
       return _regenerator["default"].wrap(function _callee5$(_context5) {
         while (1) {
           switch (_context5.prev = _context5.next) {
             case 0:
-              idtxt = "'" + ids[0] + "','" + ids[1] + "'";
+              // const idtxt = `'${ids[0]}','${ids[1]}'`;
+              stag = ids[0];
+              ttag = ids[1];
+              condition = "type('network_link') && network_link.connect_type = 'exit' && network_link.source_device_id ='" + stag + "'";
+
+              if (ttag) {
+                condition = "type('network_link') && network_link.connect_type = 'exit' && network_link.source_device_id ='" + stag + "' && network_link.destination_device_id='" + ttag + "'";
+              }
+
               parm = {
-                condition: "type('network_link') && network_link.connect_type = 'exit' && network_link.source_device_id in [" + idtxt + "]",
+                condition: condition,
                 sort: "name asc",
                 currentPage: 1,
-                pageSize: 20
+                pageSize: 99
               };
               jsonParm = JSON.stringify(parm);
-              console.log("queryAssociatedlinks", ids, idtxt, parm, jsonParm);
-              _context5.prev = 4;
-              _context5.next = 7;
+              console.log("queryAssociatedlinks", ids, parm, jsonParm);
+              _context5.prev = 7;
+              _context5.next = 10;
               return (0, _componentTopologyCommon.getRequest)().post("/mdc/v1/api/cmdb/commonQueryCiData", jsonParm);
 
-            case 7:
+            case 10:
               result = _context5.sent;
               return _context5.abrupt("return", result);
 
-            case 11:
-              _context5.prev = 11;
-              _context5.t0 = _context5["catch"](4);
+            case 14:
+              _context5.prev = 14;
+              _context5.t0 = _context5["catch"](7);
 
               _rlog["default"].error("查询可关联链路", _context5.t0);
 
-            case 14:
+            case 17:
             case "end":
               return _context5.stop();
           }
         }
-      }, _callee5, null, [[4, 11]]);
+      }, _callee5, null, [[7, 14]]);
     }))();
   }
 };

package/lib/topoCenter/store/topoTreeMod.js

@@ -7,6 +7,8 @@ exports["default"] = _default;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _message = _interopRequireDefault(require("@alifd/next/lib/message"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -15,8 +17,6 @@ var _topo = _interopRequireDefault(require("@riil-frontend/component-topology-co
 
 var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
 
-var _topoMocks = require("../../utils/topoMocks");
-
 var _tree = require("../../utils/tree");
 
 var clone = function clone(data) {
@@ -33,7 +33,6 @@ function _default(topoApp) {
       treeData: [],
       // 是否加载数据
       loaded: false,
-      topoInteData: _topoMocks.topoInteData,
       selectedNode: [],
       defId: '',
       drawVisible: false,
@@ -280,25 +279,13 @@ function _default(topoApp) {
 
                   case 4:
                     resTreeData = _context5.sent;
+                    _context5.next = 7;
+                    return _this4.refreshTree();
 
-                    _this4.refreshTree(); // let treeData = clone(state.topoTreeMod.treeData);
-                    // loopTree(
-                    //   treeData,
-                    //   conditions,
-                    //   (parent, index, arr) => {
-                    //     arr[index].showDefault = true;
-                    //   }
-                    // );
-                    //
-                    // treeData = formatTree(treeData, state.functionAuth.permissions);
-                    //
-                    // this.update({
-                    //   treeData,
-                    //   defId: conditions,
-                    // });
-
+                  case 7:
+                    _message["default"].success('设置成功');
 
-                  case 6:
+                  case 8:
                   case "end":
                     return _context5.stop();
                 }

package/lib/topoCenter/utils/linPermissionUtil.js

@@ -23,14 +23,13 @@ var isWriteable = function isWriteable(link, source, target, linkType) {
 
 function getLinkPermission(edge, nodes, link) {
   var source = nodes.find(function (node) {
-    return node.id === edge.source;
+    return node.id === edge.getSource().getTag();
   });
   var target = nodes.find(function (node) {
-    return node.id === edge.target;
+    return node.id === edge.getTarget().getTag();
   }); // console.log("getLinkPermission", edge, source, target, link);
 
-  var linkType = link.attributes["network_link.connect_type"]; //TODO 这里的逻辑因为 出口链路 可能需要调整
-
+  var linkType = link ? link.attributes["network_link.connect_type"] : edge.a("network_link.connect_type");
   return {
     readable: (source === null || source === void 0 ? void 0 : source.operation) || (target === null || target === void 0 ? void 0 : target.operation),
     writeable: isWriteable(edge, source, target, linkType),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riil-frontend/component-topology",
-  "version": "3.3.0",
+  "version": "3.5.0-a.1",
   "description": "拓扑",
   "scripts": {
     "start": "build-scripts start",
@@ -68,7 +68,7 @@
     "@riil-frontend/component-table-filter-tags": "latest",
     "@riil-frontend/component-table-layout": "^2.0.2",
     "@riil-frontend/component-topology-common": "^1.0.9",
-    "@riil-frontend/component-topology-graph": "^2.6.0",
+    "@riil-frontend/component-topology-graph": "^2.7.0-a.1",
     "@riil-frontend/css": "^2.0.2",
     "@riil-frontend/hooks": "latest",
     "@riil-frontend/next-collapse": "^1.0.1-a.0",
@@ -110,6 +110,6 @@
     "access": "public"
   },
   "license": "MIT",
-  "homepage": "https://unpkg.com/@riil-frontend/component-topology@3.3.0/build/index.html",
+  "homepage": "https://unpkg.com/@riil-frontend/component-topology@3.5.0-a.1/build/index.html",
   "gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
 }