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

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

@@ -23,7 +23,7 @@ var _topo = _interopRequireDefault(require("@riil-frontend/component-topology-co
 
 var _ResourceTypeLimit = require("../../../../../../constants/ResourceTypeLimit");
 
-var _ahooks = require("ahooks");
+var _lodash = _interopRequireDefault(require("lodash"));
 
 var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
 
@@ -37,13 +37,14 @@ var _server = _interopRequireDefault(require("./server"));
 
 var _copyUtil = require("../../../../../../utils/copyUtil");
 
+var _linkUtils = require("../../../../../../core/models/utils/linkUtils");
+
 var _htElementUtils = require("../../../../../../utils/htElementUtils");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-// import { Drawer } from "../../../../../../components/Drawer";
 var CollapsePanel = _collapse["default"].Panel;
 
 function AddLinkDrawer(props) {
@@ -80,18 +81,22 @@ function AddLinkDrawer(props) {
 
   var _useState4 = (0, _react.useState)(),
       sourceIFDoc = _useState4[0],
-      setSourceIFDoc = _useState4[1]; // 保存后更新拓扑图状态
+      setSourceIFDoc = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(),
+      targetIFDoc = _useState5[0],
+      setTargetIFDoc = _useState5[1]; // 保存后更新拓扑图状态
 
 
-  var _useState5 = (0, _react.useState)([]),
-      ciIdsConnectable = _useState5[0],
-      setCiIdsConnectable = _useState5[1];
+  var _useState6 = (0, _react.useState)([]),
+      ciIdsConnectable = _useState6[0],
+      setCiIdsConnectable = _useState6[1];
 
   var linkNodesRef = (0, _react.useRef)();
 
   var getPortsById = /*#__PURE__*/function () {
     var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(id) {
-      var result, portsDoc, ports;
+      var result, links, ifTypes, ifDoc, usedPorts, portsDoc, ports;
       return _regenerator["default"].wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
@@ -101,14 +106,41 @@ function AddLinkDrawer(props) {
 
             case 2:
               result = _context.sent;
-              // rlog.debug("端口列表", result);
-              //const list = result[id];
+              _context.next = 5;
+              return _server["default"].queryLinksByNodeId(id);
+
+            case 5:
+              links = _context.sent;
+              ifTypes = result.map(function (item) {
+                return item.type;
+              });
+              console.log("端口类型列表", ifTypes);
+              _context.next = 10;
+              return (0, _linkUtils.getInterfaceObject)(ifTypes);
+
+            case 10:
+              ifDoc = _context.sent;
+              console.log("端口类型字典", ifDoc);
+              usedPorts = [];
+              links.data.map(function (link) {
+                usedPorts.push(link.attributes.destination_id);
+                usedPorts.push(link.attributes.source_id);
+              });
+              usedPorts = _lodash["default"].uniq(usedPorts);
+
+              _rlog["default"].debug("端口列表", result, links); //const list = result[id];
+
+
               portsDoc = {};
               ports = result.map(function (item) {
+                var _ifDoc$item$type$disp, _ifDoc$item$type;
+
                 var obj = {
                   value: item.id,
                   label: item.name,
                   type: item.type,
+                  typeName: (_ifDoc$item$type$disp = (_ifDoc$item$type = ifDoc[item.type]) === null || _ifDoc$item$type === void 0 ? void 0 : _ifDoc$item$type.displayName) !== null && _ifDoc$item$type$disp !== void 0 ? _ifDoc$item$type$disp : "",
+                  disabled: usedPorts.indexOf(item.id) >= 0,
                   ratedBandwidth: parseInt(item.ratedBandwidth, 10)
                 };
                 portsDoc[item.id] = obj;
@@ -119,7 +151,7 @@ function AddLinkDrawer(props) {
                 portsDoc: portsDoc
               });
 
-            case 6:
+            case 19:
             case "end":
               return _context.stop();
           }
@@ -140,28 +172,31 @@ function AddLinkDrawer(props) {
           switch (_context2.prev = _context2.next) {
             case 0:
               linkNodesRef.current = e; // const { type, data } = e;
-              // rlog.debug("接到打开创建链路抽屉信息", e);
+
+              _rlog["default"].debug("接到打开创建链路抽屉信息", e);
 
               setIsAddMode(true); // setTrue();
 
-              _context2.prev = 2;
-              _context2.next = 5;
+              _context2.prev = 3;
+              _context2.next = 6;
               return getPortsById(e.source._attrObject.id);
 
-            case 5:
+            case 6:
               sourcePorts = _context2.sent;
-              _context2.next = 8;
+              _context2.next = 9;
               return getPortsById(e.target._attrObject.id);
 
-            case 8:
+            case 9:
               targetPorts = _context2.sent;
+              setSourceIFDoc(sourcePorts.portsDoc);
+              setTargetIFDoc(targetPorts.portsDoc);
               source = translationNode(e.source, sourcePorts);
               target = translationNode(e.target, targetPorts);
               editDispatchers.update({
                 addLinkIsOpen: true,
                 currentLink: null
               });
-              connect_type = target.ciType !== "customNode" && target.ipAddress ? "phy" : "exit";
+              connect_type = target.ciType !== "customNode" && target.ipAddress && targetPorts.ports.length > 0 ? "phy" : "exit";
               setLink({
                 source: source,
                 target: target,
@@ -180,21 +215,21 @@ function AddLinkDrawer(props) {
                   connect_type: connect_type
                 }
               });
-              _context2.next = 19;
+              _context2.next = 22;
               break;
 
-            case 16:
-              _context2.prev = 16;
-              _context2.t0 = _context2["catch"](2);
+            case 19:
+              _context2.prev = 19;
+              _context2.t0 = _context2["catch"](3);
 
               _rlog["default"].error("出现异常", _context2.t0);
 
-            case 19:
+            case 22:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[2, 16]]);
+      }, _callee2, null, [[3, 19]]);
     }));
 
     return function handleEvent(_x2) {
@@ -230,11 +265,13 @@ function AddLinkDrawer(props) {
             case 6:
               targetPorts = _context3.sent;
               setSourceIFDoc(sourcePorts.portsDoc);
+              setTargetIFDoc(targetPorts.portsDoc);
               connect_type = currentLink.attributes["network_link.connect_type"] === "exit" ? "exit" : "phy";
               setLink({
                 source: {
                   id: currentLink.source,
                   name: currentLink.attributes["network_link.source_device_id_object"].displayName,
+                  ciId: currentLink.attributes["network_link.source_device_id"],
                   ipAddress: currentLink.attributes["network_link.source_ipv4"],
                   ciName: (_currentLink$attribut = currentLink.attributes.source_type_object) === null || _currentLink$attribut === void 0 ? void 0 : _currentLink$attribut.displayName,
                   ciType: currentLink.attributes.source_type,
@@ -245,19 +282,21 @@ function AddLinkDrawer(props) {
                 target: {
                   id: currentLink.target,
                   name: currentLink.attributes["network_link.destination_device_id_object"].displayName,
+                  ciId: currentLink.attributes["network_link.destination_device_id"],
                   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 !== "" ? currentLink.attributes.destination_type : "customNode",
+                  ciType: currentLink.target !== "" ? currentLink.attributes.destination_type : "customNode",
                   interfaceTarget: currentLink.interfaceTarget,
                   ports: (_targetPorts$ports = targetPorts.ports) !== null && _targetPorts$ports !== void 0 ? _targetPorts$ports : [],
                   portsDoc: targetPorts.portsDoc
                 },
                 attributes: (0, _extends2["default"])({}, currentLink.attributes, {
+                  linkId: currentLink.id,
                   connect_type: connect_type
                 })
               });
 
-            case 10:
+            case 11:
             case "end":
               return _context3.stop();
           }
@@ -349,6 +388,7 @@ function AddLinkDrawer(props) {
     return {
       id: attrObject.id,
       name: attrObject.name,
+      ciId: attrObject.id,
       ipAddress: attrObject.ipAddress,
       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",
@@ -395,7 +435,7 @@ function AddLinkDrawer(props) {
         var edge = htTopo.createEdge(source, target, linkData);
 
         if (linkType === "exit" && target.getTag() === undefined) {
-          // rlog.debug("addLinkToGraph-exit-target", target, target.getTag());
+          // rlog.debug("addLinkToGraph-export-target", target, target.getTag());
           target.a("name", targetName);
         }
       }
@@ -406,8 +446,9 @@ function AddLinkDrawer(props) {
     }
   };
 
-  var mergeExitLinkData = function mergeExitLinkData(data, attributes) {
-    return {
+  var mergeExportLinkData = function mergeExportLinkData(data, attributes) {
+    console.log("mergeExportLinkData", data, attributes);
+    return (0, _extends2["default"])({}, attributes, {
       id: data.id,
       name: data.name,
       source: data["network_link.source_device_id"],
@@ -416,7 +457,7 @@ function AddLinkDrawer(props) {
       interfaceSource: data["source_id"],
       interfaceTarget: data["destination_id"],
       ciType: data.ciType,
-      attributes: (0, _extends2["default"])({}, attributes, {
+      attributes: (0, _extends2["default"])({}, attributes.attributes, {
         display_name: data.display_name,
         name: data.name,
         "network_link.actual_bandwidth": data["network_link.actual_bandwidth"],
@@ -428,9 +469,12 @@ function AddLinkDrawer(props) {
         use: data.use,
         source_id_object: {
           displayName: sourceIFDoc[data.source_id].label
+        },
+        destination_id_object: {
+          displayName: targetIFDoc[data.destination_id].label
         }
       })
-    };
+    });
   };
 
   var onSave = /*#__PURE__*/function () {
@@ -476,14 +520,14 @@ function AddLinkDrawer(props) {
               _context5.prev = 15;
 
               if (!result) {
-                _context5.next = 35;
+                _context5.next = 36;
                 break;
               }
 
               config = topo.resourceConfig.getConfigFromHt(); // 新建后显示到图上
 
               if (!isAddMode) {
-                _context5.next = 31;
+                _context5.next = 32;
                 break;
               }
 
@@ -506,6 +550,7 @@ function AddLinkDrawer(props) {
               linkData = elements.find(function (element) {
                 return element.id === result;
               });
+              console.log("创建成功-parm,linkData", parm, linkData);
               addLinkToGraph({
                 linkData: (0, _copyUtil.clone)(linkData),
                 linkType: linkType,
@@ -514,10 +559,10 @@ function AddLinkDrawer(props) {
 
               _message["default"].success("创建成功");
 
-              _context5.next = 33;
+              _context5.next = 34;
               break;
 
-            case 31:
+            case 32:
               // console.log("保存编辑信息", data, linkType);
               if (linkType === "exit") {
                 edge = topo.getGraphView().dm().sm().ld();
@@ -533,7 +578,7 @@ function AddLinkDrawer(props) {
                 linkAttrKey = links.findIndex(function (item) {
                   return item.id === aobj.id;
                 });
-                newLinkData = mergeExitLinkData(edge.getAttrObject(), links[linkAttrKey]);
+                newLinkData = mergeExportLinkData(edge.getAttrObject(), links[linkAttrKey]);
                 newLinks = (0, _copyUtil.clone)(links);
                 newLinks.splice(linkAttrKey, 1, newLinkData);
                 newData = (0, _extends2["default"])({}, topoState.data, {
@@ -546,27 +591,27 @@ function AddLinkDrawer(props) {
 
               _message["default"].success("保存成功");
 
-            case 33:
+            case 34:
               editDispatchers.update({
                 addLinkIsOpen: false,
                 currentLink: null
               });
               topo.linkDynamicStyleExecutor.execute();
 
-            case 35:
-              _context5.next = 39;
+            case 36:
+              _context5.next = 40;
               break;
 
-            case 37:
-              _context5.prev = 37;
+            case 38:
+              _context5.prev = 38;
               _context5.t0 = _context5["catch"](15);
 
-            case 39:
+            case 40:
             case "end":
               return _context5.stop();
           }
         }
-      }, _callee5, null, [[15, 37]]);
+      }, _callee5, null, [[15, 38]]);
     }));
 
     return function onSave(_x3) {

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

@@ -31,6 +31,8 @@ var _radio = _interopRequireDefault(require("@alifd/next/lib/radio"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _validator = _interopRequireDefault(require("validator"));
+
 var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
 
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
@@ -49,27 +51,17 @@ function parseValues(values) {
 }
 
 function EditLinkInfo(props) {
+  var _sourceValue$ipAddres2, _sourceValue$portsDoc5, _sourceValue$portsDoc6, _targetValue$portsDoc5, _targetValue$portsDoc6;
+
   var topo = props.topo,
       lineData = props.lineData,
       onClose = props.onClose,
-      addLinkIsOpen = props.addLinkIsOpen,
       onSave = props.onSave,
       isAdd = props.isAdd,
       loading = props.loading;
-
-  var _topo$store$useModel = topo.store.useModel("topoMod"),
-      topoState = _topo$store$useModel[0],
-      topoDispatchers = _topo$store$useModel[1];
-
-  var _topo$store$useModel2 = topo.store.useModel("topoBizMod"),
-      bizState = _topo$store$useModel2[0],
-      bizDispatchers = _topo$store$useModel2[1]; // const { resAndMetrics } = topoState;
-  // const { resAndMetrics } = bizState;
-
-
   var source = lineData.source,
       target = lineData.target,
-      attributes = lineData.attributes; // rlog.debug("lineData-----init", source, target, targetValue.portsDoc);
+      attributes = lineData.attributes;
 
   var _useState = (0, _react.useState)(attributes),
       valus = _useState[0],
@@ -83,9 +75,9 @@ function EditLinkInfo(props) {
       targetValue = _useState3[0],
       setTarget = _useState3[1];
 
-  var _useState4 = (0, _react.useState)(true),
-      connectEnable = _useState4[0],
-      setConnectEnable = _useState4[1];
+  var _useState4 = (0, _react.useState)(),
+      ratedBandwidth = _useState4[0],
+      setRatedBandwidth = _useState4[1];
 
   var fieldOnChange = function fieldOnChange(name, value) {
     var newValues = field.getValues();
@@ -103,9 +95,6 @@ function EditLinkInfo(props) {
 
   (0, _react.useEffect)(function () {
     setValus(attributes);
-
-    _rlog["default"].debug("useEffect", source, target, attributes);
-
     setSource(source);
     setTarget(target);
     field.setValues(attributes);
@@ -130,7 +119,7 @@ function EditLinkInfo(props) {
 
     if (type === "exit") {
       connect = "exit";
-      support = "m.exit_link";
+      support = "m.export_link";
     }
 
     return {
@@ -141,8 +130,11 @@ function EditLinkInfo(props) {
 
   var connectHandleChange = function connectHandleChange(v) {
     field.setValue("connect_type", v);
+    field.reset("destination_id");
   };
 
+  var getRatedBandwidth = function getRatedBandwidth() {};
+
   var portsHandleChange = function portsHandleChange(type, value) {
     var _sourceValue$portsDoc, _sourceValue$portsDoc2, _targetValue$portsDoc, _targetValue$portsDoc2;
 
@@ -160,28 +152,49 @@ function EditLinkInfo(props) {
     } // rlog.debug("network_link.actual_bandwidth", actualBandwidth);
 
 
+    setRatedBandwidth(actualBandwidth);
     field.setValue("network_link.actual_bandwidth", actualBandwidth);
   };
 
+  var checkName = function checkName(rule, value, callback) {
+    // const { validate, getValue } = field;
+    var displayName = value;
+    var links = topo.getEdges();
+    var usedNames = [];
+    links.map(function (link) {
+      console.log('checkName', link.id, lineData);
+
+      if (link.dtype === "link" && link.name && link.id !== lineData.attributes.linkId) {
+        usedNames.push(link.name);
+      }
+    });
+
+    if (usedNames.indexOf(displayName) >= 0) {
+      console.log("setError", checkName, usedNames, displayName); // field.setError("display_name", "链路名称重复");
+
+      return callback("链路名称重复");
+    } else {
+      return callback();
+    }
+  };
+
   var saveHandleChange = function saveHandleChange() {
     field.validate(function (errors, values) {
       if (errors) {
-        _rlog["default"].debug("saveHandleChange-error", errors, values);
+        _rlog["default"].error("saveHandleChange-error", errors, values);
       } else {
         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);
-
         var sourceId = valus["source_id"];
         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 destination_ipv4 = valus["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 destination_ipv4 = (_targetValue$ipAddres = targetValue.ipAddress) !== null && _targetValue$ipAddres !== void 0 ? _targetValue$ipAddres : valus["network_link.destination_ipv4"];
         var obj = {
           display_name: valus["display_name"],
           // 链路名称
-          name: valus["display_name"],
+          name: isAdd ? valus["display_name"] : attributes["name"],
           // 链路名称
           "network_link.source_ipv4": (_sourceValue$ipAddres = sourceValue.ipAddress) !== null && _sourceValue$ipAddres !== void 0 ? _sourceValue$ipAddres : valus["network_link.source_ipv4"],
           // 源IP
@@ -220,6 +233,17 @@ function EditLinkInfo(props) {
           obj["destination_type"] = "";
         }
 
+        if (isAdd) {
+          obj["network_link.network_category"] = "CAN";
+          obj["network_link.work_mode"] = "AandS"; // 工作模式
+
+          obj.rated_bandwidth = ratedBandwidth; // 额定带宽
+
+          obj["network_link.role"] = "master";
+        }
+
+        console.log("保存数据-obj", obj);
+
         if (isAdd) {
           onSave(obj);
         } else {
@@ -291,17 +315,16 @@ function EditLinkInfo(props) {
   }, /*#__PURE__*/_react["default"].createElement(FormItem, (0, _extends2["default"])({}, formItemLayout, {
     labelAlign: labelAlign,
     label: "\u6E90\u8282\u70B9IP"
-  }), sourceValue.ipAddress ? /*#__PURE__*/_react["default"].createElement("div", {
+  }), /*#__PURE__*/_react["default"].createElement("div", {
     className: _indexModule["default"].label
-  }, sourceValue.ipAddress) : /*#__PURE__*/_react["default"].createElement(_input["default"], {
-    placeholder: "\u8BF7\u8F93\u5165",
-    name: "network_link.source_ipv4",
-    maxLength: 128
-  }))), /*#__PURE__*/_react["default"].createElement(Col, {
+  }, (_sourceValue$ipAddres2 = sourceValue.ipAddress) !== null && _sourceValue$ipAddres2 !== void 0 ? _sourceValue$ipAddres2 : '-'))), /*#__PURE__*/_react["default"].createElement(Col, {
     span: "12"
   }, /*#__PURE__*/_react["default"].createElement(FormItem, (0, _extends2["default"])({}, formItemLayout, {
     labelAlign: labelAlign,
-    label: "\u76EE\u7684\u8282\u70B9IP"
+    label: "\u76EE\u7684\u8282\u70B9IP",
+    pattern: /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/,
+    patternTrigger: "onBlur",
+    patternMessage: "IP\u5730\u5740\u683C\u5F0F\u4E0D\u6B63\u786E"
   }), targetIpComp(target)))), /*#__PURE__*/_react["default"].createElement(Row, {
     gutter: "16"
   }, /*#__PURE__*/_react["default"].createElement(Col, {
@@ -311,7 +334,7 @@ function EditLinkInfo(props) {
     label: "\u6E90\u7AEF\u53E3",
     required: true,
     requiredMessage: "\u6E90\u7AEF\u53E3\u4E0D\u80FD\u4E3A\u7A7A"
-  }), sourceValue.ipAddress ? /*#__PURE__*/_react["default"].createElement(_select["default"], {
+  }), sourceValue.ciId ? /*#__PURE__*/_react["default"].createElement(_select["default"], {
     name: "source_id",
     disabled: sourceValue.ports.length === 0,
     className: _indexModule["default"].selectList,
@@ -343,14 +366,14 @@ function EditLinkInfo(props) {
     label: "\u8D44\u6E90\u7C7B\u578B"
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: _indexModule["default"].label
-  }, sourceValue.ciName))), /*#__PURE__*/_react["default"].createElement(Col, {
+  }, (_sourceValue$portsDoc5 = (_sourceValue$portsDoc6 = sourceValue.portsDoc[valus.source_id]) === null || _sourceValue$portsDoc6 === void 0 ? void 0 : _sourceValue$portsDoc6.typeName) !== null && _sourceValue$portsDoc5 !== void 0 ? _sourceValue$portsDoc5 : sourceValue.ciName))), /*#__PURE__*/_react["default"].createElement(Col, {
     span: "12"
   }, /*#__PURE__*/_react["default"].createElement(FormItem, (0, _extends2["default"])({}, formItemLayout, {
     labelAlign: labelAlign,
     label: "\u8D44\u6E90\u7C7B\u578B"
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: _indexModule["default"].label
-  }, targetValue.ciName)))), /*#__PURE__*/_react["default"].createElement(Row, {
+  }, (_targetValue$portsDoc5 = (_targetValue$portsDoc6 = targetValue.portsDoc[valus.destination_id]) === null || _targetValue$portsDoc6 === void 0 ? void 0 : _targetValue$portsDoc6.typeName) !== null && _targetValue$portsDoc5 !== void 0 ? _targetValue$portsDoc5 : targetValue.ciName)))), /*#__PURE__*/_react["default"].createElement(Row, {
     gutter: "16"
   }, /*#__PURE__*/_react["default"].createElement(Col, {
     span: "24"
@@ -362,7 +385,8 @@ function EditLinkInfo(props) {
     requiredTrigger: "onBlur",
     pattern: /^[^'"\\%]+[^'"\\%]*[^'"\\%]*$/,
     patternTrigger: "onBlur",
-    patternMessage: "\u4E0D\u5141\u8BB8\u8F93\u5165\u2018\u3001\u201C\u3001\\\u3001%"
+    patternMessage: "\u4E0D\u5141\u8BB8\u8F93\u5165\u2018\u3001\u201C\u3001\\\u3001%",
+    validator: checkName
   }), /*#__PURE__*/_react["default"].createElement(_input["default"], {
     placeholder: "\u8BF7\u8F93\u5165",
     name: "display_name",
@@ -382,7 +406,7 @@ function EditLinkInfo(props) {
   }, /*#__PURE__*/_react["default"].createElement(_radio["default"], {
     id: "phy",
     value: "phy",
-    disabled: target.ciType === "customNode" || !targetValue.ipAddress
+    disabled: target.ciType === "customNode" || !targetValue.ipAddress || targetValue.ports.length === 0
   }, "\u7269\u7406/\u805A\u5408"), /*#__PURE__*/_react["default"].createElement(_radio["default"], {
     id: "exit",
     value: "exit"

package/lib/topoCenter/components/editor/propertyViews/edge/addLinkDrawer/index.module.scss

@@ -1,3 +1,12 @@
+@import '~@alifd/next/variables.scss';
+
 .drawer {
   width: 504px;
+
+  :global {
+    .#{$css-prefix}drawer-body {
+      padding: 20px 24px 50px 20px;
+    }
+  }
+
 }