@devops-flow/devops-flow-pipeline-detail 0.0.37

package/es/components/common/teambition/deploy-group-dialog/add-host/index.js

@@ -0,0 +1,994 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useState, useEffect, Fragment, useRef, useCallback } from 'react';
+import { Dropdown, Menu, Button, Message, Form, Select, Dialog, Field, Radio, Result, Balloon, Input } from '@teamix/ui';
+import { YunxiaoIcon, SearchIcon, Title, ButtonIcon } from '@alife/devops-ui';
+import { format } from "../../duration";
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import exceed from "../../../../../utils/apimap";
+import tools, { intervalEnterTime, getFeature } from "../../../../../utils";
+import track from "../../../../../utils/track";
+import AddServiceConnection from "../../flow-engine/dialogs/addServiceConnection";
+import CreateServiceConnection from "../../service-connection-create";
+import HostTable from "../host-table";
+import intl from "../../../../../locale";
+import "./index.scss";
+import helplink from "../../../../../utils/helplink";
+var scGrayEnable = window.YUNXIAO_COMMON.serviceConnectionGrayRegion === 'true'; // 是否灰度
+var Tooltip = Balloon.Tooltip;
+var tooltip = function tooltip(text, trigger) {
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    align: "tr",
+    trigger: trigger
+  }, text);
+};
+var FormItem = Form.Item;
+var RadioGroup = Radio.Group;
+var ECS_MANAGED = 'ECS_MANAGED';
+var ecsAliyun = {
+  value: 'ECS_ALIYUN',
+  label: intl.get({
+    id: 'rdc-tb-cd-assets.components.common.teambition.deploy-group-dialog.add-host.AddDirectly',
+    defaultMessage: '直接添加'
+  })
+};
+var ecsLabel = {
+  value: 'ECS_LABEL',
+  label: intl.get({
+    id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.AddTags',
+    defaultMessage: '标签方式添加'
+  })
+};
+var ecsManaged = {
+  value: ECS_MANAGED,
+  label: intl.get({
+    id: 'rdc-tb-cd-assets.components.common.teambition.deploy-group-dialog.add-host.EcsManaged',
+    defaultMessage: '混合云托管'
+  })
+};
+var staragent = {
+  value: 'ECS_ALIYUN',
+  label: intl.get({
+    id: 'rdc-tb-cd-assets.components.common.teambition.deploy-group-dialog.add-host.installStaragent',
+    defaultMessage: '直接添加'
+  })
+};
+var listPublicMachineAddTypeForDeploy = [staragent, getFeature('deploy.esc.managed') && ecsManaged].filter(Boolean);
+var listEcsAddTypeForDeploy = [ecsAliyun, getFeature('deploy.ecs.tag') && ecsLabel].filter(Boolean);
+var listEcsAddTypeForBuild = [ecsAliyun];
+var Header = function Header(props) {
+  var prefix = 'add-host-title';
+  var _ref = props || {},
+    text = _ref.text,
+    sortKey = _ref.sortKey,
+    setSortKey = _ref.setSortKey,
+    searchVal = _ref.searchVal,
+    setSearchVal = _ref.setSearchVal,
+    placeholder = _ref.placeholder;
+  return /*#__PURE__*/React.createElement("div", {
+    className: prefix
+  }, /*#__PURE__*/React.createElement("span", {
+    className: prefix + "-text"
+  }, text), /*#__PURE__*/React.createElement("div", {
+    className: prefix + "-ops"
+  }, /*#__PURE__*/React.createElement(SearchIcon, {
+    direction: "rtl",
+    placeholder: placeholder,
+    onChange: setSearchVal,
+    value: searchVal
+  }), /*#__PURE__*/React.createElement(Dropdown, {
+    trigger: /*#__PURE__*/React.createElement(ButtonIcon, {
+      name: "filter-line",
+      type: sortKey === 'all' ? 'normal' : 'primary'
+    }),
+    triggerType: "click",
+    align: "tr br",
+    offset: [0, 5]
+  }, /*#__PURE__*/React.createElement(Menu, {
+    size: "small",
+    onSelect: function onSelect(_ref2) {
+      var key = _ref2[0];
+      return setSortKey(key);
+    },
+    selectMode: "single",
+    selectedKeys: sortKey
+  }, /*#__PURE__*/React.createElement(Menu.Item, {
+    key: "all"
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.All',
+    defaultMessage: '全部'
+  })), /*#__PURE__*/React.createElement(Menu.Item, {
+    key: "unused"
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.NotUsed',
+    defaultMessage: '未使用'
+  }))))));
+};
+var compare = function compare(prop) {
+  return function (obj1, obj2) {
+    var val1 = obj1[prop];
+    var val2 = obj2[prop];
+    if (val1 < val2) {
+      return 1;
+    } else if (val1 > val2) {
+      return -1;
+    }
+    return 0;
+  };
+};
+var timer = null;
+var DEFAULT_REMAIN_TIME = 900;
+var connCreateable = {
+  permission: 'tb.role.serviceConnection.create',
+  sc: 'ecs',
+  scType: 'ecs',
+  scTypeName: intl.get({
+    id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.AlibabaCloudEcs',
+    defaultMessage: '阿里云ECS'
+  })
+};
+var connDeleteable = {
+  permission: 'tb.role.serviceConnection.admin'
+};
+var unusedMachines = function unusedMachines(allMachines, groupId) {
+  return allMachines.filter(function (_ref3) {
+    var machineGroupId = _ref3.machineGroupId;
+    return !machineGroupId || groupId && machineGroupId.toString().includes(groupId);
+  });
+};
+var prefix = 'add-host';
+var AddHost = function AddHost(props) {
+  var scField = Field.useField();
+  var demoEcsField = props.demoEcsField;
+  var init = demoEcsField.init;
+  var _useState = useState('all'),
+    sortKey = _useState[0],
+    setSortKey = _useState[1];
+  var _useState2 = useState(),
+    searchVal = _useState2[0],
+    setSearchVal = _useState2[1];
+  var _useState3 = useState(DEFAULT_REMAIN_TIME),
+    remainTime = _useState3[0],
+    setRemainTime = _useState3[1];
+  var _useState4 = useState(''),
+    addMachineCommand = _useState4[0],
+    setAddMachineCommand = _useState4[1];
+  var _ref4 = props || {},
+    setHostInstanceIds = _ref4.setHostInstanceIds,
+    type = _ref4.type,
+    connections = _ref4.connections,
+    regions = _ref4.regions,
+    ecsAddType = _ref4.ecsAddType,
+    ecsLabelKey = _ref4.ecsLabelKey,
+    ecsLabelValue = _ref4.ecsLabelValue,
+    ecsLabelKeyList = _ref4.ecsLabelKeyList,
+    ecsLabelValueList = _ref4.ecsLabelValueList,
+    serviceConnectionId = _ref4.serviceConnectionId,
+    aliyunRegionId = _ref4.aliyunRegionId,
+    hostTableList = _ref4.hostTableList,
+    groupId = _ref4.groupId,
+    hostInstanceIds = _ref4.hostInstanceIds,
+    disabled = _ref4.disabled,
+    newly = _ref4.newly,
+    purpose = _ref4.purpose,
+    trackConfig = _ref4.trackConfig,
+    mode = _ref4.mode,
+    _ref4$style = _ref4.style,
+    style = _ref4$style === void 0 ? {} : _ref4$style,
+    onRefresh = _ref4.onRefresh;
+  var _ref5 = props || {},
+    cheangeRegionId = _ref5.cheangeRegionId,
+    cheangeConnectionId = _ref5.cheangeConnectionId,
+    getConnections = _ref5.getConnections,
+    selectEcsAddType = _ref5.selectEcsAddType,
+    changeEcsLabelKey = _ref5.changeEcsLabelKey,
+    changeEcsLabelValue = _ref5.changeEcsLabelValue;
+  var demoEcsRegions = [{
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.Shanghai',
+      defaultMessage: '上海'
+    }),
+    value: 'cn-shanghai'
+  }, {
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.Hangzhou',
+      defaultMessage: '杭州'
+    }),
+    value: 'cn-hangzhou'
+  }];
+  var _useState5 = useState([]),
+    tableList = _useState5[0],
+    setTableList = _useState5[1];
+  var _useState6 = useState(),
+    scData = _useState6[0],
+    setScData = _useState6[1];
+  var _useState7 = useState(false),
+    serviceConnectionVisible = _useState7[0],
+    setServiceConnectionVisible = _useState7[1];
+  var _useState8 = useState(false),
+    serviceConnectionLoading = _useState8[0],
+    setServiceConnectionLoading = _useState8[1];
+  var canDelete = useRef(false);
+  var canCreate = useRef(false);
+  var _getConnections = useCallback(function () {
+    getConnections(true);
+  }, [getConnections]);
+  var getAddMachineCommand = function getAddMachineCommand() {
+    if (timer) clearInterval(timer);
+    var mark = true;
+    var fetch = /*#__PURE__*/function () {
+      var _ref6 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var _yield$exceed$fetch, object, successful;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return exceed.fetch({
+                api: 'SaMachine.getCommand',
+                data: {
+                  purpose: purpose || 'DEPLOY_GROUP'
+                }
+              });
+            case 2:
+              _yield$exceed$fetch = _context.sent;
+              object = _yield$exceed$fetch.object;
+              successful = _yield$exceed$fetch.successful;
+              if (successful) {
+                _context.next = 7;
+                break;
+              }
+              return _context.abrupt("return");
+            case 7:
+              setAddMachineCommand(object);
+              mark = false;
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function fetch() {
+        return _ref6.apply(this, arguments);
+      };
+    }();
+    if (mark) fetch();
+    timer = setInterval(function () {
+      setRemainTime(function (v) {
+        if (v === 0) {
+          fetch();
+        }
+        return v === 0 ? DEFAULT_REMAIN_TIME : --v;
+      });
+    }, 1000);
+  };
+  var onCreateConn = function onCreateConn() {
+    track(_extends({
+      action: 'create service authorization',
+      page: 'ecs add host',
+      daysinceenterflow: intervalEnterTime()
+    }, trackConfig));
+    var openedWindow = window.open('/aliyun/oauth/ram/authorization?redirectRam=true&scType=ecs');
+    var windowChecker = setInterval(function () {
+      if (openedWindow.location.pathname === '/ram/aliyun/success') {
+        window.clearInterval(windowChecker);
+        if (openedWindow.location.pathname === '/ram/aliyun/success') {
+          Message.success({
+            title: intl.get({
+              id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.ServiceAuthorizationCreated',
+              defaultMessage: '服务授权创建成功'
+            })
+          });
+        }
+        getConnections(true);
+        if (!openedWindow.closed) {
+          openedWindow.close();
+        }
+      }
+    }, 500);
+  };
+  var _setSearchVal = function _setSearchVal(v) {
+    var _unusedMachines = unusedMachines(hostTableList, groupId);
+    var list = sortKey === 'unused' ? _unusedMachines : hostTableList;
+    var res = v === '' ? list : list.filter(function (item) {
+      var instanceId = item.instanceId,
+        instanceName = item.instanceName,
+        ipAddress = item.ipAddress;
+      return instanceId.includes(v) || instanceName.includes(v) || ipAddress.includes(v);
+    });
+    setSearchVal(v);
+    setTableList(res);
+  };
+  var _setSortKey = function _setSortKey(v) {
+    var res;
+    if (v === 'all') res = hostTableList;
+    if (v === 'unused') {
+      res = unusedMachines(hostTableList, groupId);
+    }
+    if (searchVal) {
+      res = res.filter(function (item) {
+        var instanceId = item.instanceId,
+          instanceName = item.instanceName,
+          ipAddress = item.ipAddress;
+        return [ipAddress, instanceId, instanceName].some(function (h) {
+          return h.includes(searchVal);
+        });
+      });
+    }
+    setSortKey(v);
+    setTableList(res);
+  };
+  var onSaveConn = function onSaveConn() {
+    setServiceConnectionLoading(true);
+    var _scField$getValues = scField.getValues(),
+      _cb = _scField$getValues._cb;
+    if (_cb) {
+      _cb().then(function (data) {
+        var value = data.value;
+        cheangeConnectionId(value);
+        getConnections();
+        setServiceConnectionVisible(false);
+        setServiceConnectionLoading(false);
+      })["catch"](function () {
+        setServiceConnectionLoading(false);
+      });
+    }
+  };
+  var onDeleteConn = function onDeleteConn() {
+    if (scData && scData.id === serviceConnectionId) {
+      cheangeConnectionId('');
+    }
+    getConnections(true);
+  };
+  var onSelectConn = function onSelectConn(scId) {
+    cheangeConnectionId(scId);
+    getConnections();
+  };
+  useEffect(function () {
+    if (type === 'PUBLIC_MACHINE' && ecsAddType != ECS_MANAGED) getAddMachineCommand();
+  }, [type, ecsAddType]);
+  useEffect(function () {
+    setTableList(sortKey === 'all' ? hostTableList : unusedMachines(hostTableList, groupId));
+  }, [hostTableList.length, type]);
+  useEffect(function () {
+    var permissions = [connCreateable.permission, connDeleteable.permission];
+    tools.checkPermission(permissions, '', 'pipeline').then(function (permissionMap) {
+      canDelete.current = permissionMap[connDeleteable.permission];
+      canCreate.current = permissionMap[connCreateable.permission];
+    });
+  }, []);
+  var getHostPrompt = /*#__PURE__*/React.createElement("div", {
+    className: prefix + "-host"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: prefix + "-host-text"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "item"
+  }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+    type: "info-fill",
+    style: {
+      color: 'var(--color-brand1-6, #1b9aee)',
+      fontSize: 16,
+      marginRight: 5
+    }
+  }), intl.get({
+    id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.HowToImportANew',
+    defaultMessage: '如何导入新机器到'
+  }), /*#__PURE__*/React.createElement("span", {
+    style: !(tableList || []).length ? {
+      color: 'var(--color-brand1-6, #1b9aee)'
+    } : {}
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.ToAddList',
+    defaultMessage: '「可添加列表」'
+  })), "?"), /*#__PURE__*/React.createElement("div", {
+    className: "item"
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.CopyTheFollowingCommandTo',
+    defaultMessage: '1.请复制下列命令到需要添加的主机上，该命令运行'
+  }), ' ', /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--color-brand1-6, #1b9aee)'
+    }
+  }, format(remainTime)), ' ', intl.get({
+    id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.AfterExpiration',
+    defaultMessage: '后过期'
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "item"
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.AfterMinutesOfExecutionThe',
+    defaultMessage: '2.执行1-2分钟后，新机器会自动导入「可添加列表」里'
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: prefix + "-host-ops"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "content"
+  }, addMachineCommand), /*#__PURE__*/React.createElement("div", {
+    className: "copy"
+  }, /*#__PURE__*/React.createElement(CopyToClipboard, {
+    text: addMachineCommand,
+    onCopy: function onCopy() {
+      return Message.success({
+        title: intl.get({
+          id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.CommandHasBeenCopiedTo',
+          defaultMessage: '命令已复制到粘贴板'
+        })
+      });
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    text: true,
+    type: "normal",
+    onClick: function onClick() {
+      track(_extends({
+        action: 'copy add host code',
+        page: 'public_machine add host',
+        daysinceenterflow: intervalEnterTime()
+      }, trackConfig));
+    }
+  }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+    type: "copy-line"
+  }), intl.get({
+    id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.Copy',
+    defaultMessage: '复制'
+  }))))));
+  var onViewConn = /*#__PURE__*/function () {
+    var _ref7 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(e, id) {
+      var _yield$exceed$fetch2, object, successful;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            e.stopPropagation();
+            _context2.next = 3;
+            return exceed.fetch({
+              api: 'ServiceConnection.get',
+              data: {
+                id: id
+              }
+            });
+          case 3:
+            _yield$exceed$fetch2 = _context2.sent;
+            object = _yield$exceed$fetch2.object;
+            successful = _yield$exceed$fetch2.successful;
+            if (successful) {
+              _context2.next = 8;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 8:
+            setScData(object);
+            setServiceConnectionVisible(true);
+          case 10:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function onViewConn(_x, _x2) {
+      return _ref7.apply(this, arguments);
+    };
+  }();
+  var getHostTable = function getHostTable() {
+    var empty = type === 'ECS' || ecsAddType === ECS_MANAGED ? intl.get({
+      id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.NoHostInformation',
+      defaultMessage: '没有相关主机信息'
+    }) : intl.get({
+      id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.NoHostInformation1',
+      defaultMessage: '暂无主机，请按下方提示添加自有主机'
+    });
+    if (type === 'ECS') {
+      empty = !aliyunRegionId ? intl.get({
+        id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.SelectARegionFirst',
+        defaultMessage: '请先选择地区'
+      }) : empty;
+    }
+    if (ECS_MANAGED === ecsAddType) {
+      empty = !aliyunRegionId ? intl.get({
+        id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.SelectARegionFirst',
+        defaultMessage: '请先选择地区'
+      }) : empty;
+    }
+    return /*#__PURE__*/React.createElement(HostTable, {
+      dataSource: tableList,
+      groupId: groupId,
+      type: type,
+      newly: newly,
+      onChange: setHostInstanceIds,
+      selectedRowKeys: hostInstanceIds,
+      style: {
+        marginBottom: 20
+      },
+      emptyContent: /*#__PURE__*/React.createElement(Result, {
+        img: "none",
+        desc: newly && empty,
+        theme: "yunxiao",
+        imageTheme: "yunxiao",
+        size: "small"
+      }),
+      onRefresh: onRefresh,
+      purpose: purpose,
+      ecsAddType: ecsAddType
+    });
+  };
+  var getHeader = function getHeader() {
+    var onClick = function onClick() {
+      window.open('https://ecs-buy.aliyun.com/wizard/#/prepay');
+      track(_extends({
+        action: 'create aliyun serve',
+        page: 'ecs add host',
+        type: 'aliyun-ecs'
+      }, trackConfig));
+    };
+    var text = /*#__PURE__*/React.createElement(React.Fragment, null, intl.get({
+      id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.ListOfAvailableHosts',
+      defaultMessage: '可添加的主机列表'
+    }), type === 'ECS' && /*#__PURE__*/React.createElement(Button, {
+      text: true,
+      type: "primary",
+      style: {
+        marginLeft: 6
+      },
+      onClick: onClick
+    }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "add-fill"
+    })));
+    return /*#__PURE__*/React.createElement(Header, {
+      text: text,
+      setSortKey: _setSortKey,
+      sortKey: sortKey,
+      searchVal: searchVal,
+      setSearchVal: _setSearchVal,
+      placeholder: intl.get({
+        id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.IpInstanceIdHostname',
+        defaultMessage: 'IP/实例ID/主机名'
+      })
+    });
+  };
+  var getTips = function getTips() {
+    return hostTableList.length >= 1000 ? /*#__PURE__*/React.createElement(Message, {
+      type: "warning",
+      className: prefix + "-host-tips"
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.ByDefaultHostsInThis',
+      defaultMessage: '默认加载该地域下1000台主机，若需要选择更多主机请通过标签添加主机组。'
+    }), helplink('mutil_env_release_based_tag') && /*#__PURE__*/React.createElement("a", {
+      href: helplink('mutil_env_release_based_tag'),
+      rel: "noreferrer",
+      target: "_blank"
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.teambition.help-link.ViewHelp',
+      defaultMessage: '查看帮助'
+    }))) : null;
+  };
+  var getEcsForm = function getEcsForm() {
+    var itemRender = function itemRender(_ref8) {
+      var label = _ref8.label,
+        value = _ref8.value;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "connection-option"
+      }, /*#__PURE__*/React.createElement("span", null, label), canDelete.current && /*#__PURE__*/React.createElement(Button, {
+        text: true,
+        type: "normal",
+        onClick: function onClick(e) {
+          return onViewConn(e, value);
+        }
+      }, intl.get({
+        id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.See',
+        defaultMessage: '查看'
+      })));
+    };
+    var connectionRender = function connectionRender(record) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "connection-option service-connection"
+      }, /*#__PURE__*/React.createElement(Title, {
+        trigger: record.label,
+        align: "t"
+      }, record.label), /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'flex'
+        },
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        }
+      }, record.viewable && /*#__PURE__*/React.createElement(CreateServiceConnection, {
+        mode: "view",
+        info: record
+      }), record.editable && /*#__PURE__*/React.createElement(CreateServiceConnection, {
+        btnStyle: {
+          marginLeft: 8
+        },
+        mode: "edit",
+        info: record
+      })));
+    };
+    var isViewMode = mode === 'view';
+    return /*#__PURE__*/React.createElement(Form, {
+      labelAlign: "top",
+      style: {
+        marginTop: 20
+      }
+    }, /*#__PURE__*/React.createElement(FormItem, {
+      label: intl.get({
+        id: 'rdc-tb-cd-assets.components.common.teambition.deploy-group-dialog.add-host.addWay',
+        defaultMessage: '添加方式'
+      })
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/React.createElement(RadioGroup, {
+      disabled: disabled,
+      dataSource: purpose === 'BUILD_GROUP' ? listEcsAddTypeForBuild : type == 'PUBLIC_MACHINE' ? listPublicMachineAddTypeForDeploy : listEcsAddTypeForDeploy,
+      value: ecsAddType,
+      onChange: function onChange(v) {
+        track(_extends({
+          action: 'select ecsAddType',
+          page: 'ecs add host',
+          daysinceenterflow: intervalEnterTime()
+        }, trackConfig));
+        selectEcsAddType(v);
+      }
+    }), purpose !== 'BUILD_GROUP' && getFeature('deploy.ecs.tag') && type != 'PUBLIC_MACHINE' && ecsAddType != ECS_MANAGED && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      className: "ecs-tag-extra"
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.UseEcsTagsToQuickly1',
+      defaultMessage: '（通过'
+    }), helplink('label_overview') ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      text: true,
+      type: "primary",
+      style: {
+        marginTop: 2
+      },
+      onClick: function onClick() {
+        return window.open(helplink('label_overview'));
+      }
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.deploy-group-dialog.edit-host-group.EcsTag',
+      defaultMessage: 'ECS标签'
+    }))) : intl.get({
+      id: 'rdc-tb-cd-assets.deploy-group-dialog.edit-host-group.EcsTag',
+      defaultMessage: 'ECS标签'
+    }), intl.get({
+      id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.UseEcsTagsToQuickly2',
+      defaultMessage: '快速定位主机）'
+    }))), purpose !== 'BUILD_GROUP' && type == 'PUBLIC_MACHINE' && getFeature('deploy.esc.managed') && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, intl.get({
+      id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.EcsManagedInfo',
+      defaultMessage: '（将非阿里云机器注册为阿里云托管实例）'
+    })), helplink('hybrid_cloud_hosting_server') && /*#__PURE__*/React.createElement(Button, {
+      text: true,
+      type: "primary",
+      style: {
+        marginLeft: 'auto'
+      },
+      onClick: function onClick() {
+        return window.open(helplink('hybrid_cloud_hosting_server'));
+      }
+    }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "question-line"
+    }), intl.get({
+      id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.EcsManagedTip',
+      defaultMessage: '什么是混合云托管'
+    }))))), type == 'PUBLIC_MACHINE' && ecsAddType == 'ECS_ALIYUN' ? '' : /*#__PURE__*/React.createElement(FormItem, {
+      label: /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", null, scGrayEnable ? intl.get({
+        id: 'rdc-tb-cd-assets.pipeline-source.credential-form-item.ServiceConnection',
+        defaultMessage: '服务连接'
+      }) : intl.get({
+        id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.ServiceAuthorization',
+        defaultMessage: '服务授权'
+      })), canCreate && !disabled && /*#__PURE__*/React.createElement("div", {
+        className: "extra"
+      }, scGrayEnable ? /*#__PURE__*/React.createElement(CreateServiceConnection, {
+        type: "ecs",
+        onSuccess: _getConnections
+      }) : /*#__PURE__*/React.createElement(Button, {
+        text: true,
+        type: "primary",
+        onClick: onCreateConn
+      }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+        type: "add-fill"
+      }), intl.get({
+        id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.CreateServiceAuthorization',
+        defaultMessage: '新建服务授权'
+      }))))
+    }, /*#__PURE__*/React.createElement(Select, {
+      showSearch: true,
+      disabled: disabled || !connections.length,
+      dataSource: connections.sort(compare('value')),
+      value: serviceConnectionId,
+      onChange: function onChange(v) {
+        track(_extends({
+          action: 'select service authorization',
+          page: 'ecs add host',
+          daysinceenterflow: intervalEnterTime()
+        }, trackConfig));
+        cheangeConnectionId(v, true);
+      },
+      autoWidth: true,
+      popupClassName: prefix + "-connection-select-container",
+      itemRender: scGrayEnable ? connectionRender : itemRender,
+      placeholder: !connections.length ? intl.get({
+        id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.NoData',
+        defaultMessage: '没有数据'
+      }) : intl.get({
+        id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.Select',
+        defaultMessage: '请选择'
+      })
+    })), type == 'PUBLIC_MACHINE' && ecsAddType == 'ECS_ALIYUN' ? '' : /*#__PURE__*/React.createElement(FormItem, {
+      label: intl.get({
+        id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.Region',
+        defaultMessage: '地域'
+      })
+    }, /*#__PURE__*/React.createElement(Select, {
+      showSearch: true,
+      disabled: disabled || !regions.length,
+      value: aliyunRegionId,
+      dataSource: regions,
+      onChange: function onChange(v) {
+        track(_extends({
+          action: 'select region',
+          page: 'ecs add host',
+          daysinceenterflow: intervalEnterTime()
+        }, trackConfig));
+        cheangeRegionId(v);
+      },
+      placeholder: !regions.length ? intl.get({
+        id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.NoData',
+        defaultMessage: '没有数据'
+      }) : intl.get({
+        id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.Select',
+        defaultMessage: '请选择'
+      })
+    })), ecsAddType === 'ECS_LABEL' && /*#__PURE__*/React.createElement(FormItem, {
+      label: intl.get({
+        id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.EcsTagKey',
+        defaultMessage: 'ECS标签键'
+      })
+    }, /*#__PURE__*/React.createElement(Select, {
+      showSearch: true,
+      value: ecsLabelKey,
+      disabled: isViewMode,
+      dataSource: ecsLabelKeyList,
+      onChange: function onChange(v) {
+        track(_extends({
+          action: 'select ecslabelkey',
+          page: 'ecs add host',
+          daysinceenterflow: intervalEnterTime()
+        }, trackConfig));
+        changeEcsLabelKey(v);
+      },
+      placeholder: !ecsLabelKeyList.length ? intl.get({
+        id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.NoData',
+        defaultMessage: '没有数据'
+      }) : intl.get({
+        id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.Select',
+        defaultMessage: '请选择'
+      })
+    })), ecsAddType === 'ECS_LABEL' && /*#__PURE__*/React.createElement(FormItem, {
+      label: intl.get({
+        id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.EcsTagValue',
+        defaultMessage: 'ECS标签值'
+      }),
+      style: {
+        marginBottom: 20
+      }
+    }, /*#__PURE__*/React.createElement(Select, {
+      showSearch: true,
+      value: ecsLabelValue,
+      dataSource: ecsLabelValueList,
+      disabled: isViewMode,
+      onChange: function onChange(v) {
+        track(_extends({
+          action: 'select ecslabelvalue',
+          page: 'ecs add host',
+          daysinceenterflow: intervalEnterTime()
+        }, trackConfig));
+        changeEcsLabelValue(v);
+      },
+      placeholder: !ecsLabelValueList.length ? intl.get({
+        id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.NoData',
+        defaultMessage: '没有数据'
+      }) : intl.get({
+        id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.Select',
+        defaultMessage: '请选择'
+      })
+    })));
+  };
+  var getDemoEcsForm = function getDemoEcsForm() {
+    var tipsIcon = /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "question-line",
+      className: "tips-icon"
+    });
+    return /*#__PURE__*/React.createElement(Form, {
+      labelAlign: "top",
+      style: {
+        marginTop: 20
+      },
+      field: demoEcsField
+    }, /*#__PURE__*/React.createElement(FormItem, null, /*#__PURE__*/React.createElement(Message, {
+      type: "notice",
+      className: "demo-ecs-message"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "title"
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.HowToAddAFree',
+      defaultMessage: '如何添加免费体验主机'
+    }), helplink('deploy_free_trial_host') && /*#__PURE__*/React.createElement("div", {
+      className: "titleHelp"
+    }, /*#__PURE__*/React.createElement("a", {
+      href: helplink('deploy_free_trial_host'),
+      target: "_blank",
+      rel: "noreferrer"
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.ViewHelp',
+      defaultMessage: '查看帮助'
+    })))), intl.get({
+      id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.Go',
+      defaultMessage: '1.前往'
+    }), /*#__PURE__*/React.createElement("a", {
+      href: "https://developer.aliyun.com/adc/scenario/83c02382001a457eae5667cff9477f1e?spm=a2c6h.13858375.0.0.45f879a9STL51e",
+      target: "_blank",
+      rel: "noreferrer"
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.AlibabaCloudExperienceLab',
+      defaultMessage: '阿里云体验实验室'
+    })), intl.get({
+      id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.ItTakesMinutesToCreate',
+      defaultMessage: '创建体验主机ECS，需要等待1-3分钟'
+    }), /*#__PURE__*/React.createElement("br", null), intl.get({
+      id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.AfterTheCreationIsComplete',
+      defaultMessage: '2.创建完毕后将AK ID、AK Secret和实例ID粘贴到下方区域完成5小时免费体验添加主机'
+    }))), /*#__PURE__*/React.createElement(FormItem, {
+      required: true,
+      label: /*#__PURE__*/React.createElement(React.Fragment, null, intl.get({
+        id: 'rdc-tb-cd-assets.deploy-group-dialog.demo-ecs.accessKeyId',
+        defaultMessage: 'AK ID'
+      }), tooltip(intl.get({
+        id: 'rdc-tb-cd-assets.deploy-group-dialog.demo-ecs.accessKeyIdTips',
+        defaultMessage: '从体验实验室复制 AK ID 粘贴到此处'
+      }), tipsIcon))
+    }, /*#__PURE__*/React.createElement(Input, _extends({
+      placeholder: intl.get({
+        id: 'rdc-tb-cd-assets.asm-connection.types.demo-ecs.accessKeyId.placeholder',
+        defaultMessage: '请粘贴AK ID到此处'
+      })
+    }, init('accessKeyId', {
+      rules: [{
+        required: true,
+        message: intl.get({
+          id: 'rdc-tb-cd-assets.deploy-group-dialog.demo-ecs.accessKeyIdValidateMsg',
+          defaultMessage: 'AK ID 不能为空'
+        })
+      }]
+    })))), /*#__PURE__*/React.createElement(FormItem, {
+      required: true,
+      label: /*#__PURE__*/React.createElement(React.Fragment, null, intl.get({
+        id: 'rdc-tb-cd-assets.deploy-group-dialog.demo-ecs.accessKeySecret',
+        defaultMessage: 'AK Secret'
+      }), tooltip(intl.get({
+        id: 'rdc-tb-cd-assets.deploy-group-dialog.demo-ecs.accessKeySecretTips',
+        defaultMessage: '从体验实验室复制 AK Secret 粘贴到此处'
+      }), tipsIcon))
+    }, /*#__PURE__*/React.createElement(Input, _extends({
+      placeholder: intl.get({
+        id: 'rdc-tb-cd-assets.asm-connection.types.demo-ecs.accessKeySecret.placeholder',
+        defaultMessage: '请粘贴AK Secret到此处'
+      })
+    }, init('accessSecret', {
+      rules: [{
+        required: true,
+        message: intl.get({
+          id: 'rdc-tb-cd-assets.deploy-group-dialog.demo-ecs.accessKeySecretValidateMsg',
+          defaultMessage: 'AK Secret 不能为空'
+        })
+      }]
+    })))), /*#__PURE__*/React.createElement(FormItem, {
+      required: true,
+      label: /*#__PURE__*/React.createElement(React.Fragment, null, intl.get({
+        id: 'rdc-tb-cd-assets.deploy-group-dialog.demo-ecs.ecsInstanceId',
+        defaultMessage: 'ECS 实例 ID'
+      }), tooltip(intl.get({
+        id: 'rdc-tb-cd-assets.deploy-group-dialog.demo-ecs.ecsInstanceIdTips',
+        defaultMessage: '从体验实验室复制 ECS 实例 ID 粘贴到此处'
+      }), tipsIcon))
+    }, /*#__PURE__*/React.createElement(Input, _extends({
+      placeholder: intl.get({
+        id: 'rdc-tb-cd-assets.asm-connection.types.demo-ecs.ecsInstanceId.placeholder',
+        defaultMessage: '请粘贴ECS 实例 ID到此处'
+      })
+    }, init('instanceId', {
+      rules: [{
+        required: true,
+        message: intl.get({
+          id: 'rdc-tb-cd-assets.deploy-group-dialog.demo-ecs.ecsInstanceIdValidateMsg',
+          defaultMessage: 'ECS 实例 ID 不能为空'
+        })
+      }]
+    })))), /*#__PURE__*/React.createElement(FormItem, {
+      required: true,
+      label: /*#__PURE__*/React.createElement(React.Fragment, null, intl.get({
+        id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.Region',
+        defaultMessage: '地域'
+      }), tooltip(intl.get({
+        id: 'rdc-tb-cd-assets.deploy-group-dialog.demo-ecs.ecsRegionTips',
+        defaultMessage: '请选择和体验实验室相同的地域'
+      }), tipsIcon))
+    }, /*#__PURE__*/React.createElement(Select, _extends({
+      showSearch: true,
+      value: aliyunRegionId,
+      dataSource: demoEcsRegions,
+      placeholder: intl.get({
+        id: 'rdc-tb-cd-assets.asm-connection.types.demo-ecs.aliyunRegion.placeholder',
+        defaultMessage: '请选择地域'
+      })
+    }, init('aliyunRegion', {
+      initValue: 'cn-shanghai',
+      rules: [{
+        required: true,
+        message: intl.get({
+          id: 'rdc-tb-cd-assets.deploy-group-dialog.demo-ecs.aliyunRegionValidateMsg',
+          defaultMessage: '地域不能为空'
+        })
+      }]
+    })))), /*#__PURE__*/React.createElement(FormItem, {
+      required: true,
+      label: intl.get({
+        id: 'rdc-tb-cd-assets.deploy-group-dialog.demo-ecs.groupName',
+        defaultMessage: '主机组名称'
+      })
+    }, /*#__PURE__*/React.createElement(Input, _extends({
+      placeholder: intl.get({
+        id: 'rdc-tb-cd-assets.asm-connection.types.demo-ecs.groupName.placeholder',
+        defaultMessage: '请填写主机组名称'
+      })
+    }, init('machineGroupName', {
+      initValue: intl.get({
+        id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.HourHostExperience',
+        defaultMessage: '5小时体验主机'
+      }),
+      rules: [{
+        required: true,
+        message: intl.get({
+          id: 'rdc-tb-cd-assets.deploy-group-dialog.demo-ecs.groupNameValidateMsg',
+          defaultMessage: '主机组名称不能为空'
+        })
+      }]
+    })))));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: prefix,
+    style: style
+  }, type == 'DEMO_ECS' ? /*#__PURE__*/React.createElement("div", null, getDemoEcsForm()) : /*#__PURE__*/React.createElement("div", null, getEcsForm(), (ecsAddType === 'ECS_ALIYUN' || ecsAddType === ECS_MANAGED) && getHeader(), getTips(), (ecsAddType === 'ECS_ALIYUN' || ecsAddType === ECS_MANAGED) && getHostTable(), type !== 'ECS' && ecsAddType != ECS_MANAGED && getHostPrompt, /*#__PURE__*/React.createElement(Dialog, {
+    title: intl.get({
+      id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.ServiceAuthorization',
+      defaultMessage: '服务授权'
+    }),
+    loading: serviceConnectionLoading,
+    visible: serviceConnectionVisible,
+    onClose: function onClose() {
+      return setServiceConnectionVisible(false);
+    },
+    onCancel: function onCancel() {
+      return setServiceConnectionVisible(false);
+    },
+    onOk: onSaveConn,
+    okProps: {
+      children: intl.get({
+        id: 'rdc-tb-cd-assets.deploy-group-dialog.add-host.Save',
+        defaultMessage: '保存'
+      })
+    },
+    footer: !scData
+  }, /*#__PURE__*/React.createElement(AddServiceConnection, {
+    setVisible: function setVisible(v) {
+      return setServiceConnectionVisible(v);
+    },
+    setLoading: function setLoading(l) {
+      return setServiceConnectionLoading(l);
+    },
+    deleteCallback: onDeleteConn,
+    onSelectConnection: onSelectConn,
+    createable: connCreateable,
+    dialogType: scData ? 'view' : 'add',
+    viewData: scData,
+    field: scField
+  }))));
+};
+export default /*#__PURE__*/React.memo(AddHost);