@riil-frontend/component-topology 5.0.15 → 5.0.16

package/es/components/BatchAttrMetric/SelectTable.js

@@ -0,0 +1,21 @@
+import React from 'react';
+export default function SelectTable(props) {
+  return /*#__PURE__*/React.createElement(Table, {
+    fixedHeader: true,
+    hasBorder: false,
+    dataSource: tableData,
+    emptyContent: /*#__PURE__*/React.createElement(NoDataPage, {
+      type: "table"
+    }),
+    rowSelection: {
+      selectedRowKeys: selectedRowKeys,
+      onChange: onTableSelect,
+      getProps: function getProps(_ref) {
+        var id = _ref.id;
+        return {
+          disabled: !selectedRowKeys.includes(id) && selectedRowKeys.length >= limit
+        };
+      }
+    }
+  }, columnNodes);
+}

package/es/components/BatchAttrMetric/index.js

@@ -66,7 +66,7 @@ var BatchAttrMetricDrawer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     title: drawerTitle,
     className: styles.drawer,
     width: drawerWidth
-  }, /*#__PURE__*/React.createElement(SettingPage, _extends({}, pageConfig, props, {
+  }, visible && /*#__PURE__*/React.createElement(SettingPage, _extends({}, pageConfig, props, {
     showType: showType,
     cancelCb: setFalse,
     saveCb: function saveCb(values) {

package/es/components/BatchAttrMetric/setting.js

@@ -5,7 +5,7 @@ import _Grid from "@alifd/next/es/grid";
 import _Message from "@alifd/next/es/message";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["defaultSet", "allCiSet", "showType"];
+var _excluded = ["value", "defaultSet", "allCiSet", "showType"];
 import React, { useState, useMemo } from "react";
 import rlog from "@riil-frontend/component-topology-utils/es/rlog";
 import ActionTree from "@riil-frontend/component-action-tree";
@@ -16,7 +16,9 @@ import * as utils from "./utils";
 import styles from "./index.module.scss";
 
 var Setting = function Setting(_ref) {
-  var defaultSet = _ref.defaultSet,
+  var _ref$value = _ref.value,
+      value = _ref$value === void 0 ? {} : _ref$value,
+      defaultSet = _ref.defaultSet,
       allCiSet = _ref.allCiSet,
       showType = _ref.showType,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -24,14 +26,7 @@ var Setting = function Setting(_ref) {
   // const allCiSet = utils.dsTransform(props.allCiSet);
   var limit = props.limit,
       saveCb = props.saveCb,
-      topo = props.topo,
       elementType = props.elementType;
-
-  var _topo$store$useModel = topo.store.useModel("topoMod"),
-      topoState = _topo$store$useModel[0],
-      topoDispatchers = _topo$store$useModel[1];
-
-  var resAndMetrics = topoState.resAndMetrics;
   rlog.debug("Setting-resAndMetrics-allCiSet-elementType", showType, props, elementType);
   rlog.debug("Setting----allCiSet", allCiSet);
 
@@ -43,11 +38,11 @@ var Setting = function Setting(_ref) {
       search = _useState2[0],
       setSearch = _useState2[1];
 
-  var _useState3 = useState(utils.initSelected(allCiSet, showType)),
+  var _useState3 = useState(value),
       selected = _useState3[0],
       setSelected = _useState3[1];
 
-  var selectedRowKeys = selected[ciType];
+  var selectedRowKeys = selected[ciType] || [];
 
   var _RiilHooks$useTableCo = RiilHooks.useTableColumn({
     columns: utils.columns(showType, props.showCiNum)
@@ -71,16 +66,6 @@ var Setting = function Setting(_ref) {
   };
 
   var saveSelected = function saveSelected() {
-    rlog.debug("Setting-saveSelected", allCiSet, selected);
-    var newCiSet = utils.updateCiSetSeleted(selected, allCiSet, showType);
-    var newResAndMetrics = elementType === "node" ? _extends({}, resAndMetrics, {
-      allCiModSet: newCiSet
-    }) : _extends({}, resAndMetrics, {
-      allLinkModSet: newCiSet
-    });
-    topoDispatchers.update({
-      resAndMetrics: newResAndMetrics
-    });
     saveCb(utils.saveTransform(selected));
   };
 

package/es/core/components/ResourceViewAttributeSetting/Setting.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect, useRef, useCallback, useImperativeHandle, forwardRef } from "react";
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useState, useEffect, useRef, useCallback, useImperativeHandle, forwardRef, useMemo } from "react";
 import { TopoEvent } from "@riil-frontend/component-topology-graph";
 import rlog from "@riil-frontend/component-topology-utils/es/rlog";
 import BatchAttrMetricDrawer from "../../../components/BatchAttrMetric";
@@ -70,8 +71,19 @@ var ResourceDiplayInfoSetting = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     };
   });
+  var newValue = useMemo(function () {
+    var d = _extends({}, (value === null || value === void 0 ? void 0 : value.data) || {});
+
+    Object.keys(d).forEach(function (key) {
+      d[key] = (d[key] || []).map(function (item) {
+        return item.code + "-" + item.type;
+      });
+    });
+    return d;
+  }, [value]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BatchAttrMetricDrawer, {
     ref: batchAttrMetric,
+    value: newValue,
     allCiSet: markData,
     limit: limit,
     topo: topo,

package/es/core/models/TopoApp.js

@@ -21,7 +21,7 @@ import PluginManager from "./PluginManager";
 import topoFactory from "./topoFactory";
 import ElementTagTipConfig from "./tagstips/ElementTagTipConfig"; // eslint-disable-next-line no-undef
 
-var version = typeof "5.0.15" === 'string' ? "5.0.15" : null;
+var version = typeof "5.0.16" === 'string' ? "5.0.16" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/es/core/viewer/components/plugins/ResourceDetail/components/WebConsole/WebConsoleContainer.js

@@ -1,11 +1,11 @@
-import React from 'react'; // import WebConsoleForm from './WebConsoleForm/WebConsoleForm'
-
+import React from 'react';
+import DefaultWebConsoleForm from "./WebConsoleForm/WebConsoleForm";
 export default function WebConsoleContainer(props) {
   var _topo$viewProps, _topo$viewProps$viewe;
 
   var data = props.data,
       topo = props.topo;
-  var WebConsoleForm = (_topo$viewProps = topo.viewProps) === null || _topo$viewProps === void 0 ? void 0 : (_topo$viewProps$viewe = _topo$viewProps.viewerProps) === null || _topo$viewProps$viewe === void 0 ? void 0 : _topo$viewProps$viewe.WebConsoleForm;
+  var WebConsoleForm = ((_topo$viewProps = topo.viewProps) === null || _topo$viewProps === void 0 ? void 0 : (_topo$viewProps$viewe = _topo$viewProps.viewerProps) === null || _topo$viewProps$viewe === void 0 ? void 0 : _topo$viewProps$viewe.WebConsoleForm) || DefaultWebConsoleForm;
 
   if (!WebConsoleForm) {
     return null;

package/es/core/viewer/components/plugins/ResourceDetail/components/WebConsole/WebConsoleForm/WebConsoleForm.js

@@ -1,14 +1,107 @@
-import React from 'react';
+import _Loading from "@alifd/next/es/loading";
+import _Button from "@alifd/next/es/button";
+import _Input from "@alifd/next/es/input";
+import _Field from "@alifd/next/es/field";
+import _Form from "@alifd/next/es/form";
+import React, { useState, useEffect } from 'react';
 import useWebConsole from "./hooks/useWebConsole";
+var FormItem = _Form.Item;
 export default function WebConsoleForm(props) {
   var ciId = props.ciId;
+  var ipv4Address = props.ciData.attributes.ipv4_address;
 
   var _useWebConsole = useWebConsole({
-    ciId: ciId
+    ciId: ciId,
+    ipv4Address: ipv4Address
   }),
       queryDataLoading = _useWebConsole.queryDataLoading,
       webConsoleUrl = _useWebConsole.webConsoleUrl,
       save = _useWebConsole.save;
 
-  return /*#__PURE__*/React.createElement("div", null, "WebConsoleForm", webConsoleUrl);
+  var _useState = useState(true),
+      isEdit = _useState[0],
+      handleInput = _useState[1];
+
+  var _useState2 = useState(false),
+      isSave = _useState2[0],
+      handleSaveBtn = _useState2[1];
+
+  var _useState3 = useState(false),
+      isShow = _useState3[0],
+      handleEdit = _useState3[1];
+
+  var field = _Field.useField({
+    autoUnmount: true,
+    values: {},
+    onChange: function onChange(name, value) {
+      field.getValue('url').length > 0 ? handleSaveBtn(false) : handleSaveBtn(true);
+    }
+  });
+
+  useEffect(function () {
+    field.setValue('url', webConsoleUrl);
+  }, [webConsoleUrl]);
+  useEffect(function () {
+    field.getError('url') == null ? handleSaveBtn(false) : handleSaveBtn(true);
+  }, [field.getError('url')]);
+
+  function handleEditLink() {
+    handleInput(false);
+    handleEdit(true);
+  }
+
+  function saveData() {
+    save(field.getValue('url'));
+    handleEdit(function (isShow) {
+      return !isShow;
+    });
+    handleInput(function (isEdit) {
+      return !isEdit;
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(_Loading, {
+    visible: queryDataLoading
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Form, {
+    field: field,
+    labelAlign: "top"
+  }, /*#__PURE__*/React.createElement(FormItem, {
+    style: {
+      'paddingTop': '12px'
+    },
+    label: "\u94FE\u63A5",
+    maxLength: 1000,
+    minmaxLengthMessage: "\u94FE\u63A5\u957F\u5EA6\u4E0D\u80FD\u8D85\u8FC71000\u4E2A\u5B57\u7B26",
+    minmaxLengthTrigger: "onBlur",
+    format: "url",
+    formatMessage: "\u94FE\u63A5\u4E0D\u662F\u5408\u6CD5\u7684URL\u5730\u5740",
+    formatTrigger: "onBlur"
+  }, /*#__PURE__*/React.createElement(_Input, {
+    style: {
+      width: '358px',
+      height: '60px',
+      'bordeRadius': '4px'
+    },
+    name: "url",
+    placeholder: "\u8BF7\u8F93\u5165\u94FE\u63A5\u5730\u5740",
+    trim: true,
+    disabled: isEdit
+  })), /*#__PURE__*/React.createElement(FormItem, null, isShow ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Button, {
+    type: "primary",
+    disabled: isSave,
+    onClick: saveData,
+    name: "baocun"
+  }, "\u4FDD\u5B58")) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Button, {
+    component: "a",
+    type: "primary",
+    onClick: function onClick() {
+      window.open(field.getValue('url'));
+    }
+  }, "\u8BBF\u95EE"), /*#__PURE__*/React.createElement(_Button, {
+    type: "normal",
+    style: {
+      'marginLeft': '10px'
+    },
+    onClick: handleEditLink
+  }, "\u7F16\u8F91\u94FE\u63A5"))))));
 }

package/es/core/viewer/components/plugins/ResourceDetail/components/WebConsole/WebConsoleForm/hooks/useWebConsole.js

@@ -12,7 +12,7 @@ function queryWebConsoleUrlById(_x) {
 
 function _queryWebConsoleUrlById() {
   _queryWebConsoleUrlById = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(id) {
-    var _list$, list;
+    var _list, list;
 
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) {
@@ -24,28 +24,30 @@ function _queryWebConsoleUrlById() {
 
           case 3:
             list = _context2.sent;
-            return _context2.abrupt("return", (_list$ = list[0]) === null || _list$ === void 0 ? void 0 : _list$.webUrl);
+            ;
+            return _context2.abrupt("return", (_list = list[list.length - 1]) === null || _list === void 0 ? void 0 : _list.webUrl);
 
-          case 7:
-            _context2.prev = 7;
+          case 8:
+            _context2.prev = 8;
             _context2.t0 = _context2["catch"](0);
             rlog.error('资源web控制台.加载数据异常', _context2.t0);
 
-          case 10:
+          case 11:
             return _context2.abrupt("return", null);
 
-          case 11:
+          case 12:
           case "end":
             return _context2.stop();
         }
       }
-    }, _callee2, null, [[0, 7]]);
+    }, _callee2, null, [[0, 8]]);
   }));
   return _queryWebConsoleUrlById.apply(this, arguments);
 }
 
 export default function useWebConsole(props) {
   var ciId = props.ciId;
+  var ipv4Address = props.ipv4Address;
 
   var _useState = useState(null),
       webConsoleUrl = _useState[0],
@@ -55,6 +57,12 @@ export default function useWebConsole(props) {
   var requestWebConsoleUrl = useRequest(queryWebConsoleUrlById, {
     manual: true,
     onSuccess: function onSuccess(result) {
+      if (ipv4Address != undefined) {
+        result = result === undefined ? "http://" + ipv4Address : result;
+      } else {
+        result = result === undefined ? null : result;
+      }
+
       setWebConsoleUrl(result);
     }
   });

package/lib/components/BatchAttrMetric/SelectTable.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = SelectTable;
+
+var _react = _interopRequireDefault(require("react"));
+
+function SelectTable(props) {
+  return /*#__PURE__*/_react["default"].createElement(Table, {
+    fixedHeader: true,
+    hasBorder: false,
+    dataSource: tableData,
+    emptyContent: /*#__PURE__*/_react["default"].createElement(NoDataPage, {
+      type: "table"
+    }),
+    rowSelection: {
+      selectedRowKeys: selectedRowKeys,
+      onChange: onTableSelect,
+      getProps: function getProps(_ref) {
+        var id = _ref.id;
+        return {
+          disabled: !selectedRowKeys.includes(id) && selectedRowKeys.length >= limit
+        };
+      }
+    }
+  }, columnNodes);
+}

package/lib/components/BatchAttrMetric/index.js

@@ -83,7 +83,7 @@ var BatchAttrMetricDrawer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     title: drawerTitle,
     className: _indexModule["default"].drawer,
     width: drawerWidth
-  }, /*#__PURE__*/_react["default"].createElement(_setting["default"], (0, _extends2["default"])({}, pageConfig, props, {
+  }, visible && /*#__PURE__*/_react["default"].createElement(_setting["default"], (0, _extends2["default"])({}, pageConfig, props, {
     showType: showType,
     cancelCb: setFalse,
     saveCb: function saveCb(values) {

package/lib/components/BatchAttrMetric/setting.js

@@ -35,29 +35,24 @@ var utils = _interopRequireWildcard(require("./utils"));
 
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
 
-var _excluded = ["defaultSet", "allCiSet", "showType"];
+var _excluded = ["value", "defaultSet", "allCiSet", "showType"];
 
 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; }
 
 var Setting = function Setting(_ref) {
-  var defaultSet = _ref.defaultSet,
+  var _ref$value = _ref.value,
+      value = _ref$value === void 0 ? {} : _ref$value,
+      defaultSet = _ref.defaultSet,
       allCiSet = _ref.allCiSet,
       showType = _ref.showType,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   // const allCiSet = utils.dsTransform(props.allCiSet);
   var limit = props.limit,
       saveCb = props.saveCb,
-      topo = props.topo,
       elementType = props.elementType;
 
-  var _topo$store$useModel = topo.store.useModel("topoMod"),
-      topoState = _topo$store$useModel[0],
-      topoDispatchers = _topo$store$useModel[1];
-
-  var resAndMetrics = topoState.resAndMetrics;
-
   _rlog["default"].debug("Setting-resAndMetrics-allCiSet-elementType", showType, props, elementType);
 
   _rlog["default"].debug("Setting----allCiSet", allCiSet);
@@ -70,11 +65,11 @@ var Setting = function Setting(_ref) {
       search = _useState2[0],
       setSearch = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(utils.initSelected(allCiSet, showType)),
+  var _useState3 = (0, _react.useState)(value),
       selected = _useState3[0],
       setSelected = _useState3[1];
 
-  var selectedRowKeys = selected[ciType];
+  var selectedRowKeys = selected[ciType] || [];
 
   var _RiilHooks$useTableCo = _hooks["default"].useTableColumn({
     columns: utils.columns(showType, props.showCiNum)
@@ -99,17 +94,6 @@ var Setting = function Setting(_ref) {
   };
 
   var saveSelected = function saveSelected() {
-    _rlog["default"].debug("Setting-saveSelected", allCiSet, selected);
-
-    var newCiSet = utils.updateCiSetSeleted(selected, allCiSet, showType);
-    var newResAndMetrics = elementType === "node" ? (0, _extends2["default"])({}, resAndMetrics, {
-      allCiModSet: newCiSet
-    }) : (0, _extends2["default"])({}, resAndMetrics, {
-      allLinkModSet: newCiSet
-    });
-    topoDispatchers.update({
-      resAndMetrics: newResAndMetrics
-    });
     saveCb(utils.saveTransform(selected));
   };
 

package/lib/core/components/ResourceViewAttributeSetting/Setting.js

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _componentTopologyGraph = require("@riil-frontend/component-topology-graph");
@@ -84,8 +86,18 @@ var ResourceDiplayInfoSetting = /*#__PURE__*/(0, _react.forwardRef)(function (pr
       }
     };
   });
+  var newValue = (0, _react.useMemo)(function () {
+    var d = (0, _extends2["default"])({}, (value === null || value === void 0 ? void 0 : value.data) || {});
+    Object.keys(d).forEach(function (key) {
+      d[key] = (d[key] || []).map(function (item) {
+        return item.code + "-" + item.type;
+      });
+    });
+    return d;
+  }, [value]);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_BatchAttrMetric["default"], {
     ref: batchAttrMetric,
+    value: newValue,
     allCiSet: markData,
     limit: limit,
     topo: topo,

package/lib/core/models/TopoApp.js

@@ -50,7 +50,7 @@ var _topoFactory = _interopRequireDefault(require("./topoFactory"));
 var _ElementTagTipConfig = _interopRequireDefault(require("./tagstips/ElementTagTipConfig"));
 
 // eslint-disable-next-line no-undef
-var version = typeof "5.0.15" === 'string' ? "5.0.15" : null;
+var version = typeof "5.0.16" === 'string' ? "5.0.16" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/lib/core/viewer/components/plugins/ResourceDetail/components/WebConsole/WebConsoleContainer.js

@@ -7,13 +7,14 @@ exports["default"] = WebConsoleContainer;
 
 var _react = _interopRequireDefault(require("react"));
 
-// import WebConsoleForm from './WebConsoleForm/WebConsoleForm'
+var _WebConsoleForm = _interopRequireDefault(require("./WebConsoleForm/WebConsoleForm"));
+
 function WebConsoleContainer(props) {
   var _topo$viewProps, _topo$viewProps$viewe;
 
   var data = props.data,
       topo = props.topo;
-  var WebConsoleForm = (_topo$viewProps = topo.viewProps) === null || _topo$viewProps === void 0 ? void 0 : (_topo$viewProps$viewe = _topo$viewProps.viewerProps) === null || _topo$viewProps$viewe === void 0 ? void 0 : _topo$viewProps$viewe.WebConsoleForm;
+  var WebConsoleForm = ((_topo$viewProps = topo.viewProps) === null || _topo$viewProps === void 0 ? void 0 : (_topo$viewProps$viewe = _topo$viewProps.viewerProps) === null || _topo$viewProps$viewe === void 0 ? void 0 : _topo$viewProps$viewe.WebConsoleForm) || _WebConsoleForm["default"];
 
   if (!WebConsoleForm) {
     return null;

package/lib/core/viewer/components/plugins/ResourceDetail/components/WebConsole/WebConsoleForm/WebConsoleForm.js

@@ -5,19 +5,122 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = WebConsoleForm;
 
-var _react = _interopRequireDefault(require("react"));
+var _loading = _interopRequireDefault(require("@alifd/next/lib/loading"));
+
+var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
+
+var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
+
+var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
+
+var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _useWebConsole2 = _interopRequireDefault(require("./hooks/useWebConsole"));
 
+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; }
+
+var FormItem = _form["default"].Item;
+
 function WebConsoleForm(props) {
   var ciId = props.ciId;
+  var ipv4Address = props.ciData.attributes.ipv4_address;
 
   var _useWebConsole = (0, _useWebConsole2["default"])({
-    ciId: ciId
+    ciId: ciId,
+    ipv4Address: ipv4Address
   }),
       queryDataLoading = _useWebConsole.queryDataLoading,
       webConsoleUrl = _useWebConsole.webConsoleUrl,
       save = _useWebConsole.save;
 
-  return /*#__PURE__*/_react["default"].createElement("div", null, "WebConsoleForm", webConsoleUrl);
+  var _useState = (0, _react.useState)(true),
+      isEdit = _useState[0],
+      handleInput = _useState[1];
+
+  var _useState2 = (0, _react.useState)(false),
+      isSave = _useState2[0],
+      handleSaveBtn = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      isShow = _useState3[0],
+      handleEdit = _useState3[1];
+
+  var field = _field["default"].useField({
+    autoUnmount: true,
+    values: {},
+    onChange: function onChange(name, value) {
+      field.getValue('url').length > 0 ? handleSaveBtn(false) : handleSaveBtn(true);
+    }
+  });
+
+  (0, _react.useEffect)(function () {
+    field.setValue('url', webConsoleUrl);
+  }, [webConsoleUrl]);
+  (0, _react.useEffect)(function () {
+    field.getError('url') == null ? handleSaveBtn(false) : handleSaveBtn(true);
+  }, [field.getError('url')]);
+
+  function handleEditLink() {
+    handleInput(false);
+    handleEdit(true);
+  }
+
+  function saveData() {
+    save(field.getValue('url'));
+    handleEdit(function (isShow) {
+      return !isShow;
+    });
+    handleInput(function (isEdit) {
+      return !isEdit;
+    });
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_loading["default"], {
+    visible: queryDataLoading
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_form["default"], {
+    field: field,
+    labelAlign: "top"
+  }, /*#__PURE__*/_react["default"].createElement(FormItem, {
+    style: {
+      'paddingTop': '12px'
+    },
+    label: "\u94FE\u63A5",
+    maxLength: 1000,
+    minmaxLengthMessage: "\u94FE\u63A5\u957F\u5EA6\u4E0D\u80FD\u8D85\u8FC71000\u4E2A\u5B57\u7B26",
+    minmaxLengthTrigger: "onBlur",
+    format: "url",
+    formatMessage: "\u94FE\u63A5\u4E0D\u662F\u5408\u6CD5\u7684URL\u5730\u5740",
+    formatTrigger: "onBlur"
+  }, /*#__PURE__*/_react["default"].createElement(_input["default"], {
+    style: {
+      width: '358px',
+      height: '60px',
+      'bordeRadius': '4px'
+    },
+    name: "url",
+    placeholder: "\u8BF7\u8F93\u5165\u94FE\u63A5\u5730\u5740",
+    trim: true,
+    disabled: isEdit
+  })), /*#__PURE__*/_react["default"].createElement(FormItem, null, isShow ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_button["default"], {
+    type: "primary",
+    disabled: isSave,
+    onClick: saveData,
+    name: "baocun"
+  }, "\u4FDD\u5B58")) : /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_button["default"], {
+    component: "a",
+    type: "primary",
+    onClick: function onClick() {
+      window.open(field.getValue('url'));
+    }
+  }, "\u8BBF\u95EE"), /*#__PURE__*/_react["default"].createElement(_button["default"], {
+    type: "normal",
+    style: {
+      'marginLeft': '10px'
+    },
+    onClick: handleEditLink
+  }, "\u7F16\u8F91\u94FE\u63A5"))))));
 }