@riil-frontend/component-topology 5.0.0-alpha.9 → 5.0.2

package/es/networkTopo/components/editor/propertyViews/edge/addLinkDrawer/components/NetworkLinkForm.js

@@ -0,0 +1,4 @@
+import React from 'react';
+export default function NetworkLinkForm(props) {
+  return /*#__PURE__*/React.createElement("div", null, "LinkForm");
+}

package/es/networkTopo/components/editor/propertyViews/edge/addLinkDrawer/components/editLinkInfo.js

@@ -1,7 +1,7 @@
 import _Button from "@alifd/next/es/button";
 import _NumberPicker from "@alifd/next/es/number-picker";
-import _Select from "@alifd/next/es/select";
 import _Input from "@alifd/next/es/input";
+import _Select from "@alifd/next/es/select";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _Dialog from "@alifd/next/es/dialog";
 import _Field from "@alifd/next/es/field";
@@ -10,15 +10,14 @@ import _Grid from "@alifd/next/es/grid";
 import _Form from "@alifd/next/es/form";
 import _Radio from "@alifd/next/es/radio";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useState, useEffect } from "react";
-import validator from "validator";
-import rlog from "@riil-frontend/component-topology-utils/es/rlog";
+import React, { useState, useEffect } from 'react';
+import rlog from '@riil-frontend/component-topology-utils/es/rlog'; // import LindInfoPreview from "../../link/LindInfoPreview";
+
+import styles from "./index.module.scss";
 var RadioGroup = _Radio.Group;
 var FormItem = _Form.Item;
 var Row = _Grid.Row,
-    Col = _Grid.Col; // import LindInfoPreview from "../../link/LindInfoPreview";
-
-import styles from "./index.module.scss";
+    Col = _Grid.Col;
 
 function parseValues(values) {
   return _extends({}, values);
@@ -32,7 +31,7 @@ function parseValues(values) {
 
 
 export default function EditLinkInfo(props) {
-  var _sourceValue$ipAddres2, _sourceValue$portsDoc5, _sourceValue$portsDoc6, _targetValue$portsDoc5, _targetValue$portsDoc6;
+  var _field$getValue, _field$getValue2, _sourceValue$portsDoc5, _sourceValue$portsDoc6, _targetValue$portsDoc5, _targetValue$portsDoc6;
 
   var topo = props.topo,
       lineData = props.lineData,
@@ -60,16 +59,18 @@ export default function EditLinkInfo(props) {
       ratedBandwidth = _useState4[0],
       setRatedBandwidth = _useState4[1];
 
-  var fieldOnChange = function fieldOnChange(name, value) {
-    var newValues = field.getValues();
-    rlog.debug("Field-onChange", newValues, name, value);
-    setValus(newValues);
-  };
-
   var field = _Field.useField({
     autoUnmount: false,
     values: parseValues(attributes),
-    onChange: fieldOnChange
+    onChange: function onChange(name, value) {
+      var newValues = field.getValues();
+      rlog.debug('Field-onChange', newValues, name, value);
+      setValus(newValues);
+
+      if (name === 'network_link.destination_ipv4') {
+        setDisplayNames(newValues);
+      }
+    }
   });
 
   useEffect(function () {
@@ -77,49 +78,69 @@ export default function EditLinkInfo(props) {
     setSource(source);
     setTarget(target);
     field.setValues(attributes);
-  }, [source, target, field, attributes]); // const [editState, editDispatchers] = store.useModel("topoConfig");
-
-  var labelAlign = "top";
+  }, [source, target, field, attributes]);
+  var labelAlign = 'top';
   var formItemLayout = {
     labelCol: {
       fixedSpan: 4
     }
   };
 
-  var linkTypeJudge = function linkTypeJudge(sourceType, destinationType, type) {
-    // console.log("linkTypeJudge", sourceType, destinationType, type);
-    var connect = "phy";
-    var support = "m.physical_link";
-
-    if (sourceType === "network.agg_interface" && destinationType === sourceType) {
-      connect = "agg";
-      support = "m.agg_link";
+  var setDisplayNames = function setDisplayNames(vals) {
+    if (!isAdd) {
+      return;
     }
 
-    if (type === "exit") {
-      connect = "exit";
-      support = "m.export_link";
+    var newValues = vals || field.getValues();
+    var destDeviceId = newValues['network_link.destination_device_id'];
+    var sourceIp = newValues['network_link.source_device_ipv4'];
+    var targetIp = destDeviceId ? newValues['network_link.destination_device_ipv4'] : newValues['network_link.destination_ipv4'];
+
+    if (sourceIp && targetIp) {
+      var obj = [{
+        reg: /FastEthernet/g,
+        Abbreviation: 'Fa '
+      }, {
+        reg: /TwoGigabitEthernet/g,
+        Abbreviation: 'Tw '
+      }, {
+        reg: /FiveGigabitEthernet/g,
+        Abbreviation: 'Fi '
+      }, {
+        reg: /TenGigabitEthernet/g,
+        Abbreviation: 'Te '
+      }, {
+        reg: /TwentyFiveGigE/g,
+        Abbreviation: 'Twe '
+      }, {
+        reg: /FortyGigabitEthernet/g,
+        Abbreviation: 'Fo '
+      }, {
+        reg: /XGigabitEthernet/g,
+        Abbreviation: 'Te '
+      }, {
+        reg: /Ten-GigabitEthernet/g,
+        Abbreviation: 'Te '
+      }, {
+        reg: /GigabitEthernet/g,
+        Abbreviation: 'Gi '
+      }];
+      var displayName = sourceIp + (sourceValue.portsDoc[newValues['source_id']] ? '(' + sourceValue.portsDoc[newValues['source_id']].label + ')' : '') + ' - ' + targetIp + (targetValue.portsDoc[newValues['destination_id']] ? '(' + targetValue.portsDoc[newValues['destination_id']].label + ')' : '');
+      obj.filter(function (node) {
+        return node.reg.test(displayName);
+      }).forEach(function (node) {
+        displayName = displayName.replace(node.reg, node.Abbreviation);
+      });
+      field.setValue('display_name', displayName);
     }
-
-    return {
-      connect: connect,
-      support: support
-    };
   };
 
-  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;
 
     var nowValues = field.getValues();
-    var sourceId = nowValues["source_id"];
-    var targetId = nowValues["destination_id"];
+    var sourceId = nowValues['source_id'];
+    var targetId = nowValues['destination_id'];
     var sourceRb = (_sourceValue$portsDoc = (_sourceValue$portsDoc2 = sourceValue.portsDoc[sourceId]) === null || _sourceValue$portsDoc2 === void 0 ? void 0 : _sourceValue$portsDoc2.ratedBandwidth) !== null && _sourceValue$portsDoc !== void 0 ? _sourceValue$portsDoc : 0;
     var targetRb = (_targetValue$portsDoc = (_targetValue$portsDoc2 = targetValue.portsDoc[targetId]) === null || _targetValue$portsDoc2 === void 0 ? void 0 : _targetValue$portsDoc2.ratedBandwidth) !== null && _targetValue$portsDoc !== void 0 ? _targetValue$portsDoc : 0;
     var actualBandwidth = 0;
@@ -132,7 +153,8 @@ export default function EditLinkInfo(props) {
 
 
     setRatedBandwidth(actualBandwidth);
-    field.setValue("network_link.actual_bandwidth", actualBandwidth);
+    field.setValue('network_link.actual_bandwidth', actualBandwidth);
+    setDisplayNames();
   };
 
   var checkName = function checkName(rule, value, callback) {
@@ -142,7 +164,7 @@ export default function EditLinkInfo(props) {
     var usedNames = [];
     links.map(function (link) {
       // console.log('checkName',link.id,lineData)
-      if (link.dtype === "link" && link.name && link.id !== lineData.attributes.linkId) {
+      if (link.dtype === 'link' && link.name && link.id !== lineData.attributes.linkId) {
         usedNames.push(link.name);
       }
     });
@@ -150,7 +172,7 @@ export default function EditLinkInfo(props) {
     if (usedNames.indexOf(displayName) >= 0) {
       // console.log("setError", checkName, usedNames, displayName);
       // field.setError("display_name", "链路名称重复");
-      return callback("链路名称重复");
+      return callback('链路名称重复');
     } else {
       return callback();
     }
@@ -159,75 +181,80 @@ export default function EditLinkInfo(props) {
   var saveHandleChange = function saveHandleChange() {
     field.validate(function (errors, values) {
       if (errors) {
-        rlog.error("saveHandleChange-error", errors, values);
+        rlog.error('saveHandleChange-error', errors, values);
       } else {
-        var _valus$destination_id, _sourceValue$portsDoc3, _sourceValue$portsDoc4, _targetValue$portsDoc3, _targetValue$portsDoc4, _targetValue$ipAddres, _sourceValue$ipAddres, _targetValue$id;
-
-        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 = (_targetValue$ipAddres = targetValue.ipAddress) !== null && _targetValue$ipAddres !== void 0 ? _targetValue$ipAddres : valus["network_link.destination_ipv4"];
+        var _valus$destination_id, _targetValue$id;
+
+        var sourceId = valus.source_id;
+        var destinationId = (_valus$destination_id = valus.destination_id) !== null && _valus$destination_id !== void 0 ? _valus$destination_id : '';
         var obj = {
-          display_name: valus["display_name"],
+          display_name: values.display_name,
           // 链路名称
-          name: isAdd ? valus["display_name"] : attributes["name"],
+          name: values.display_name,
           // 链路名称
-          "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": destination_ipv4,
-          // 目的IP
+          'network_link.source_device_id': sourceValue.id,
+          // 必须
+          'network_link.source_device_ipv4': valus['network_link.source_device_ipv4'],
+          // 必须
           // source_id, // 源端口
-          // destination_id, // 目的端口
-          "network_link.actual_bandwidth": valus["network_link.actual_bandwidth"],
-          // 实际带宽
-          use: valus["use"],
-          // 用途
           // source_type, // 必须
-          // destination_type, // 必须
-          "network_link.source_device_id": sourceValue.id,
-          // 必须
-          "network_link.destination_device_id": (_targetValue$id = targetValue.id) !== null && _targetValue$id !== void 0 ? _targetValue$id : "",
+          'network_link.source_ipv4': valus['network_link.source_ipv4'],
+          // 源IP
+          'network_link.destination_device_id': (_targetValue$id = targetValue.id) !== null && _targetValue$id !== void 0 ? _targetValue$id : '',
           // 必须
-          "network_link.connect_type": typeJudge.connect,
+          'network_link.destination_device_ipv4': valus['network_link.destination_device_ipv4'],
           // 必须
-          support_templates: typeJudge.support
+          // destination_id, // 目的端口
+          // destination_type, // 必须
+          'network_link.destination_ipv4': valus['network_link.destination_ipv4'],
+          // 目的IP
+          'network_link.actual_bandwidth': valus['network_link.actual_bandwidth'],
+          // 实际带宽
+          use: valus.use,
+          // 用途
+          'network_link.connect_type': valus['network_link.connect_type'] // 必须
+
         };
 
-        if (sourceId !== "") {
-          obj["source_id"] = sourceId; // 源端口
+        if (sourceId !== '') {
+          var _sourceValue$portsDoc3, _sourceValue$portsDoc4;
 
-          obj["source_type"] = sourceType;
+          obj['source_id'] = sourceId; // 源端口
+
+          obj['source_type'] = (_sourceValue$portsDoc3 = (_sourceValue$portsDoc4 = sourceValue.portsDoc[sourceId]) === null || _sourceValue$portsDoc4 === void 0 ? void 0 : _sourceValue$portsDoc4.type) !== null && _sourceValue$portsDoc3 !== void 0 ? _sourceValue$portsDoc3 : '';
         }
 
-        if (destinationId !== "") {
-          obj["destination_id"] = destinationId; // 目的端口
+        if (destinationId) {
+          var _targetValue$portsDoc3, _targetValue$portsDoc4;
+
+          obj['destination_id'] = destinationId; // 目的端口
 
-          obj["destination_type"] = destinationType;
+          obj['destination_type'] = (_targetValue$portsDoc3 = (_targetValue$portsDoc4 = targetValue.portsDoc[destinationId]) === null || _targetValue$portsDoc4 === void 0 ? void 0 : _targetValue$portsDoc4.type) !== null && _targetValue$portsDoc3 !== void 0 ? _targetValue$portsDoc3 : '';
         } else {
-          obj["destination_id"] = ""; // 目的端口
+          obj['destination_id'] = ''; // 目的端口
 
-          obj["destination_type"] = "";
+          obj['destination_type'] = 'ip';
         }
 
+        console.log('保存数据-obj', obj);
+
         if (isAdd) {
-          obj["network_link.network_category"] = "CAN";
-          obj["network_link.work_mode"] = "AandS"; // 工作模式
+          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) {
+          obj['network_link.role'] = 'master';
+          Object.assign(obj, {
+            'network_link.is_crucial': false,
+            support_templates: 'm.ethernet_link',
+            'network_link.connect_type': 'phy'
+          });
           onSave(obj);
         } else {
           _Dialog.confirm({
-            title: "提示",
-            content: "链路信息已修改，是否保存修改内容？",
+            title: '提示',
+            content: '链路信息已修改，是否保存修改内容？',
             onOk: function () {
               var _onOk = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
                 return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -256,18 +283,6 @@ export default function EditLinkInfo(props) {
     });
   };
 
-  var targetIpComp = function targetIpComp(targetValue) {
-    return targetValue.ipAddress && targetValue.ciType !== "customNode" ? /*#__PURE__*/React.createElement("div", {
-      className: styles.label
-    }, targetValue.ipAddress) : /*#__PURE__*/React.createElement(_Input, {
-      placeholder: "\u8BF7\u8F93\u5165",
-      name: "network_link.destination_ipv4",
-      maxLength: 128
-    });
-  }; // 目的没编辑/删除权限时，在添加链路抽屉中链接方式默认出口，物理/聚合置灰不可选
-
-
-  var disableCreatePhyAggLink = target.ciType === "customNode" || !targetValue.ipAddress || targetValue.ports.length === 0 || !lineData.target || isAdd && !(lineData.target.ciData.permission.writeable || lineData.target.ciData.permission.deleteable);
   return /*#__PURE__*/React.createElement("div", {
     className: styles.editForm
   }, /*#__PURE__*/React.createElement(_Form, {
@@ -297,7 +312,7 @@ export default function EditLinkInfo(props) {
     label: "\u6E90\u8282\u70B9IP"
   }), /*#__PURE__*/React.createElement("div", {
     className: styles.label
-  }, (_sourceValue$ipAddres2 = sourceValue.ipAddress) !== null && _sourceValue$ipAddres2 !== void 0 ? _sourceValue$ipAddres2 : "-"))), /*#__PURE__*/React.createElement(Col, {
+  }, (_field$getValue = field.getValue('network_link.source_device_ipv4')) !== null && _field$getValue !== void 0 ? _field$getValue : '-'))), /*#__PURE__*/React.createElement(Col, {
     span: "12"
   }, /*#__PURE__*/React.createElement(FormItem, _extends({}, formItemLayout, {
     labelAlign: labelAlign,
@@ -305,7 +320,9 @@ export default function EditLinkInfo(props) {
     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.createElement(Row, {
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.label
+  }, (_field$getValue2 = field.getValue('network_link.destination_device_ipv4')) !== null && _field$getValue2 !== void 0 ? _field$getValue2 : '-')))), /*#__PURE__*/React.createElement(Row, {
     gutter: "16"
   }, /*#__PURE__*/React.createElement(Col, {
     span: "12"
@@ -319,25 +336,53 @@ export default function EditLinkInfo(props) {
     disabled: sourceValue.ports.length === 0,
     className: styles.selectList,
     onChange: function onChange(v) {
-      portsHandleChange("source_id", v);
+      portsHandleChange('source_id', v);
     },
     dataSource: sourceValue.ports
-  }) : "-")), /*#__PURE__*/React.createElement(Col, {
+  }) : '-')), /*#__PURE__*/React.createElement(Col, {
     span: "12"
   }, /*#__PURE__*/React.createElement(FormItem, _extends({}, formItemLayout, {
     labelAlign: labelAlign,
     label: "\u76EE\u7684\u7AEF\u53E3",
-    required: valus["connect_type"] !== "exit",
+    required: !!field.getValue('network_link.destination_device_id'),
     requiredMessage: "\u76EE\u7684\u7AEF\u53E3\u4E0D\u80FD\u4E3A\u7A7A"
-  }), targetValue.ipAddress ? /*#__PURE__*/React.createElement(_Select, {
-    name: "destination_id",
-    disabled: targetValue.ports.length === 0,
+  }), field.getValue('network_link.destination_device_id') ? /*#__PURE__*/React.createElement(_Select, {
+    name: "destination_id" // disabled={targetValue.ports.length === 0}
+    ,
     className: styles.selectList,
     onChange: function onChange(v) {
-      portsHandleChange("destination_id", v);
+      portsHandleChange('destination_id', v);
     },
     dataSource: targetValue.ports
-  }) : "-"))), /*#__PURE__*/React.createElement(Row, {
+  }) : '-'))), /*#__PURE__*/React.createElement(Row, {
+    gutter: "16"
+  }, /*#__PURE__*/React.createElement(Col, {
+    span: "12"
+  }, /*#__PURE__*/React.createElement(FormItem, _extends({}, formItemLayout, {
+    labelAlign: labelAlign,
+    label: "\u6E90\u7AEFIP",
+    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"
+  }), /*#__PURE__*/React.createElement(_Input, {
+    placeholder: "\u8BF7\u8F93\u5165",
+    name: "network_link.source_ipv4",
+    maxLength: 128
+  }))), /*#__PURE__*/React.createElement(Col, {
+    span: "12"
+  }, /*#__PURE__*/React.createElement(FormItem, _extends({}, formItemLayout, {
+    labelAlign: labelAlign,
+    label: "\u76EE\u7684\u7AEFIP",
+    required: !field.getValue('network_link.destination_device_id'),
+    requiredMessage: "\u76EE\u7684\u7AEFIP\u4E0D\u80FD\u4E3A\u7A7A",
+    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"
+  }), /*#__PURE__*/React.createElement(_Input, {
+    placeholder: "\u8BF7\u8F93\u5165",
+    name: "network_link.destination_ipv4",
+    maxLength: 128
+  })))), /*#__PURE__*/React.createElement(Row, {
     gutter: "16"
   }, /*#__PURE__*/React.createElement(Col, {
     span: "12"
@@ -353,7 +398,7 @@ export default function EditLinkInfo(props) {
     label: "\u8D44\u6E90\u7C7B\u578B"
   }), /*#__PURE__*/React.createElement("div", {
     className: styles.label
-  }, (_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.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.id ? '网络接口' : 'IP地址')))), /*#__PURE__*/React.createElement(Row, {
     gutter: "16"
   }, /*#__PURE__*/React.createElement(Col, {
     span: "24"
@@ -375,33 +420,13 @@ export default function EditLinkInfo(props) {
     gutter: "16"
   }, /*#__PURE__*/React.createElement(Col, {
     span: "24"
-  }, /*#__PURE__*/React.createElement(FormItem, _extends({}, formItemLayout, {
-    labelAlign: labelAlign,
-    label: "\u94FE\u63A5\u65B9\u5F0F"
-  }), /*#__PURE__*/React.createElement(RadioGroup, {
-    name: "connect_type",
-    disabled: !isAdd,
-    onChange: function onChange(v) {
-      connectHandleChange(v);
-    }
-  }, /*#__PURE__*/React.createElement(_Radio, {
-    id: "phy",
-    value: "phy",
-    disabled: disableCreatePhyAggLink
-  }, "\u7269\u7406/\u805A\u5408"), /*#__PURE__*/React.createElement(_Radio, {
-    id: "exit",
-    value: "exit"
-  }, "\u51FA\u53E3"))))), /*#__PURE__*/React.createElement(Row, {
-    gutter: "16"
-  }, /*#__PURE__*/React.createElement(Col, {
-    span: "24"
   }, /*#__PURE__*/React.createElement(FormItem, _extends({}, formItemLayout, {
     labelAlign: labelAlign,
     label: "\u5B9E\u9645\u5E26\u5BBD\uFF08Mbps\uFF09"
   }), /*#__PURE__*/React.createElement(_NumberPicker, {
     hasTrigger: false,
     style: {
-      width: "100%"
+      width: '100%'
     },
     max: 1000000,
     name: "network_link.actual_bandwidth",
@@ -415,7 +440,7 @@ export default function EditLinkInfo(props) {
     label: "\u7528\u9014"
   }), /*#__PURE__*/React.createElement(_Input.TextArea, {
     style: {
-      width: "100%"
+      width: '100%'
     },
     name: "use",
     placeholder: "\u8BF7\u8F93\u5165",
@@ -424,11 +449,10 @@ export default function EditLinkInfo(props) {
     className: styles.footer
   }, /*#__PURE__*/React.createElement(_Button, {
     className: styles.button,
-    disabled: !sourceValue.ipAddress,
     type: "primary",
     loading: loading,
     onClick: saveHandleChange
-  }, isAdd ? "确定" : "保存"), /*#__PURE__*/React.createElement(_Button, {
+  }, isAdd ? '确定' : '保存'), /*#__PURE__*/React.createElement(_Button, {
     className: styles.button,
     onClick: onClose
   }, "\u53D6\u6D88")));

package/es/networkTopo/components/editor/propertyViews/edge/addLinkDrawer/hooks/useAddLink.js

@@ -0,0 +1,104 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { useRef, useState } from 'react';
+import topoService from '@riil-frontend/component-topology-common/es/services/topo';
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
+import { getNodes } from "../../../../../../../utils/htElementUtils";
+import { getCiTypes } from "../../../../../../../utils/topoData";
+export default function useAddLink(props) {
+  var topo = props.topo;
+  var store = topo.store;
+
+  var _useState = useState(false),
+      loadingConnectableNodes = _useState[0],
+      setLoadingConnectableNodes = _useState[1];
+
+  var linkDispatchers = store.useModelDispatchers('topoLinkMod');
+  var htNodesConnectableRef = useRef(null);
+
+  var getCiTypesConnectable = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var ciNodes, ciTypes, ciTypesConnectable, nodes, ciIds, isWriteable;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              ciNodes = [];
+              setLoadingConnectableNodes(true);
+              _context.prev = 2;
+              ciTypes = getCiTypes(topo.dataModel.getData());
+              _context.next = 6;
+              return topoService.networkLink.getCiTypesConnectable(ciTypes);
+
+            case 6:
+              ciTypesConnectable = _context.sent;
+              nodes = getNodes(topo.getDataModel());
+              ciIds = [];
+
+              isWriteable = function isWriteable(node) {
+                var _node$a;
+
+                return ['delete', 'write'].indexOf(node.a('operation')) >= 0 || ((_node$a = node.a('permission')) === null || _node$a === void 0 ? void 0 : _node$a.writeable);
+              };
+
+              nodes.forEach(function (node) {
+                // rlog.debug("过滤属性", node.a("operation"));
+                if (ciTypesConnectable[node.a('ciType')] && isWriteable(node)) {
+                  ciIds.push(node.id);
+                  ciNodes.push(node);
+                }
+              });
+              linkDispatchers.update({
+                ciConnectable: ciIds
+              });
+              _context.next = 17;
+              break;
+
+            case 14:
+              _context.prev = 14;
+              _context.t0 = _context["catch"](2);
+              rlog.error('查询可创建链路节点失败', _context.t0);
+
+            case 17:
+              setLoadingConnectableNodes(false);
+              return _context.abrupt("return", ciNodes);
+
+            case 19:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[2, 14]]);
+    }));
+
+    return function getCiTypesConnectable() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  function setConnectableNodes(ciNodes) {
+    topo.historyManager.setDisabled(true);
+    topo.view.topoClient.emitEvent('topo_link_set_connectable_nodes', ciNodes);
+    topo.historyManager.setDisabled(false);
+  } // 进入划线模式，置灰不可用的节点
+
+
+  function enterAddLinkMode() {
+    getCiTypesConnectable().then(function (ciNodes) {
+      // rlog.debug("设置可连线节点", ciIdsConnectable, ciNodes);
+      htNodesConnectableRef.current = ciNodes;
+      setConnectableNodes(ciNodes);
+    });
+  }
+
+  function resetConnectableNodes() {
+    rlog.info('选择第二个节点，重置置灰', htNodesConnectableRef.current);
+    setConnectableNodes(htNodesConnectableRef.current);
+  }
+
+  return {
+    enterAddLinkMode: enterAddLinkMode,
+    loadingConnectableNodes: loadingConnectableNodes,
+    resetConnectableNodes: resetConnectableNodes
+  };
+}

package/es/networkTopo/components/editor/propertyViews/edge/link/BindExitLinkSelect.js

@@ -1,5 +1,6 @@
 import _Form from "@alifd/next/es/form";
 import _Select from "@alifd/next/es/select";
+import _Loading from "@alifd/next/es/loading";
 import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
@@ -21,7 +22,11 @@ export default function BindExitLinkSelect(props) {
 
   var _useState = useState([]),
       associatedlinks = _useState[0],
-      setAssociatedlinks = _useState[1]; // const [isLine, setIsLine] = useState(false);
+      setAssociatedlinks = _useState[1];
+
+  var _useState2 = useState(false),
+      loading = _useState2[0],
+      setLoading = _useState2[1]; // const [isLine, setIsLine] = useState(false);
 
 
   var getLinkByNodes = /*#__PURE__*/function () {
@@ -75,6 +80,8 @@ export default function BindExitLinkSelect(props) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
+              topo.historyManager.beginTransaction();
+              setLoading(true);
               data = associatedlinks.find(function (link) {
                 return link.id === value;
               });
@@ -88,10 +95,8 @@ export default function BindExitLinkSelect(props) {
                 interfaceTarget: data.attributes["network_link.destination_device_id"],
                 metrics: [],
                 name: data.attributes.name,
-                "network_link.connect_type": "exit",
                 "network_link.destination_ipv4": data.attributes["network_link.destination_ipv4"],
                 operation: "delete",
-                connect_type: "exit",
                 source: data.attributes.source_id,
                 target: data.attributes.destination_id,
                 type: "link"
@@ -104,10 +109,10 @@ export default function BindExitLinkSelect(props) {
               topo.resourceConfig.updateConfig(_extends({}, config, {
                 exportLinkIdList: exportLinkIdList
               }));
-              _context2.next = 11;
+              _context2.next = 13;
               return editDispatchers.fetchDataByConfig();
 
-            case 11:
+            case 13:
               _yield$editDispatcher = _context2.sent;
               elements = _yield$editDispatcher.elements;
               target = edge.getTarget();
@@ -121,8 +126,10 @@ export default function BindExitLinkSelect(props) {
               edge.setTag(data.id);
               console.log("bindExitLink------------", target, target.getTag(), data["network_link.destination_ipv4"], exitLink);
               rlog.debug("fetchDataByConfig", elements);
+              setLoading(false);
+              topo.historyManager.endTransaction();
 
-            case 20:
+            case 24:
             case "end":
               return _context2.stop();
           }
@@ -140,7 +147,10 @@ export default function BindExitLinkSelect(props) {
     style: {
       marginBottom: 0
     }
-  }, /*#__PURE__*/React.createElement(_Select, {
+  }, /*#__PURE__*/React.createElement(_Loading, {
+    visible: loading,
+    fullScreen: true
+  }), /*#__PURE__*/React.createElement(_Select, {
     style: {
       width: 232
     },