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

package/es/components/dashboardMain/components/build-and-deploy-setting-new/dialog/host-dialog/ecs-form-items/index.scss

@@ -0,0 +1,33 @@
+$PREFIX: ecs-form-items;
+.#{$PREFIX} {
+  &-connection-select-container {
+    .connection-option {
+      &.service-connection {
+        display: flex;
+        justify-content: space-between;
+      }
+      .next-btn {
+        height: 100%;
+      }
+    }
+  }
+}
+
+$titlt-prefix: add-host-title;
+.#{$titlt-prefix} {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding-top: 0;
+  padding-bottom: 2px;
+  &-text {
+    font-size: 14px;
+    color: var(--color-text1-4, #292929);
+    margin: 0;
+    display: inline-flex;
+    align-items: center;
+    .next-btn-text.next-btn-primary:not([disabled]) {
+      color: var(--color-brand1-6, #1b9aee) !important;
+    }
+  }
+}

package/es/components/dashboardMain/components/build-and-deploy-setting-new/dialog/host-dialog/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 接入新节点-新建/编辑弹窗
+ */
+/// <reference types="react" />
+declare const HostDialog: ({ group, fetchGroup, visible, onClose, isRetry, osType: osTypeProp, }: {
+    group: any;
+    fetchGroup: any;
+    visible: any;
+    onClose: any;
+    isRetry: any;
+    osType: any;
+}) => JSX.Element;
+export default HostDialog;

package/es/components/dashboardMain/components/build-and-deploy-setting-new/dialog/host-dialog/index.js

@@ -0,0 +1,365 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+/* eslint-disable @typescript-eslint/indent */
+/* eslint-disable react/jsx-indent */
+/**
+ * 接入新节点-新建/编辑弹窗
+ */
+
+import React, { useState, useEffect } from 'react';
+import { Dialog, Form, Button, Radio, Message, Field, Balloon } from '@teamix/ui';
+import exceed from "../../../../../../utils/apimap";
+import { getFeature } from "../../../../../../utils";
+import OSTypeCard from "./os-type-card";
+import RunnerFormItems from "./runner-form-items";
+import ECSFormItems from "./ecs-form-items";
+import { PurposeContext } from "../..";
+import DemoForm from "./demo-form/DemoForm";
+import { insertIf } from "../../../../../../utils";
+import YunxiaoIcon from '@alife/yunxiao-icon';
+import { helpLinkIfAvailable } from "../../../../../../utils/helplink";
+import intl from "../../../../../../locale";
+var FormItem = Form.Item;
+var HostDialog = function HostDialog(_ref) {
+  var group = _ref.group,
+    fetchGroup = _ref.fetchGroup,
+    visible = _ref.visible,
+    onClose = _ref.onClose,
+    isRetry = _ref.isRetry,
+    osTypeProp = _ref.osType;
+  var _React$useContext = React.useContext(PurposeContext),
+    purpose = _React$useContext.purpose,
+    purpoesForReqestArg = _React$useContext.purpoesForReqestArg;
+  var _useState = useState(osTypeProp || 'linux'),
+    osType = _useState[0],
+    setOSType = _useState[1];
+  var _useState2 = useState('runner'),
+    addType = _useState2[0],
+    setAddType = _useState2[1];
+  var _useState3 = useState({}),
+    ecsFormData = _useState3[0],
+    setEcsFormData = _useState3[1];
+  var _useState4 = useState(true),
+    saveBtnDisabled = _useState4[0],
+    setSaveBtnDisabled = _useState4[1];
+  var _useState5 = useState(false),
+    saveBtnLoading = _useState5[0],
+    setSaveBtnLoading = _useState5[1];
+  var isDeploy = purpose === 'deploy';
+  var demoEcsField = Field.useField();
+
+  // 若选中的机器（group中已有的机器会默认选中）都是group中已有的机器，则禁用保存按钮
+  useEffect(function () {
+    if (ecsFormData.machineInfos) {
+      var selectedMachineSns = ecsFormData.machineInfos.map(function (item) {
+        return item.machineSn;
+      });
+      setSaveBtnDisabled(selectedMachineSns.every(function (item) {
+        return group.machineInfos.find(function (machineInfo) {
+          return machineInfo.machineSn === item;
+        });
+      }));
+    }
+  }, [ecsFormData, group.machineInfos]);
+
+  // MacOS不支持阿里云ECS安装
+  useEffect(function () {
+    if (osType === 'darwin' || osType === 'aix') {
+      setAddType('runner');
+    }
+  }, [osType]);
+  var onEcsOrManagedOk = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _group$tagList;
+      var params, machineGroupStr, fetchConfig, _yield$exceed$fetch, successful;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            params = _extends({
+              id: group.id,
+              uuid: group.uuid,
+              name: group.name,
+              tagIds: (_group$tagList = group.tagList) === null || _group$tagList === void 0 ? void 0 : _group$tagList.map(function (item) {
+                return item.id;
+              }).join(','),
+              purpose: purpoesForReqestArg,
+              ecsType: addType === 'ecs' ? 'ECS_ALIYUN' : 'ECS_MANAGED',
+              ecsLabelKey: '',
+              ecsLabelValue: ''
+            }, ecsFormData);
+            machineGroupStr = JSON.stringify(params);
+            fetchConfig = {
+              api: 'Machine.group.save',
+              params: {
+                purpose: purpose
+              },
+              data: {
+                machineGroupStr: machineGroupStr
+              }
+            };
+            setSaveBtnLoading(true);
+            _context.next = 6;
+            return exceed.fetch(fetchConfig);
+          case 6:
+            _yield$exceed$fetch = _context.sent;
+            successful = _yield$exceed$fetch.successful;
+            if (successful) {
+              _context.next = 11;
+              break;
+            }
+            setSaveBtnLoading(false);
+            return _context.abrupt("return");
+          case 11:
+            Message.success(intl.get({
+              id: 'rdc-tb-cd-assets.dialog.host-dialog.SavedSuccessfully',
+              defaultMessage: '保存成功'
+            }));
+            fetchGroup();
+            onClose();
+          case 14:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function onEcsOrManagedOk() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var onDemoEcsOk = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var validateResult, fetchConfig, _yield$exceed$fetch2, successful;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return demoEcsField.validatePromise();
+          case 2:
+            validateResult = _context2.sent;
+            if (!Object.keys((validateResult === null || validateResult === void 0 ? void 0 : validateResult.errors) || {}).length) {
+              _context2.next = 6;
+              break;
+            }
+            Message.error(intl.get({
+              id: 'rdc-tb-cd-assets.dialog.host-dialog.VerificationFailed',
+              defaultMessage: '校验失败'
+            }));
+            return _context2.abrupt("return");
+          case 6:
+            fetchConfig = {
+              api: 'Machine.group.demoEcs.save',
+              data: _extends({}, demoEcsField.getValues(), {
+                machineGroupId: group.id
+              })
+            };
+            setSaveBtnLoading(true);
+            _context2.next = 10;
+            return exceed.fetch(fetchConfig);
+          case 10:
+            _yield$exceed$fetch2 = _context2.sent;
+            successful = _yield$exceed$fetch2.successful;
+            if (successful) {
+              _context2.next = 15;
+              break;
+            }
+            setSaveBtnLoading(false);
+            return _context2.abrupt("return");
+          case 15:
+            Message.success(intl.get({
+              id: 'rdc-tb-cd-assets.dialog.host-dialog.SavedSuccessfully',
+              defaultMessage: '保存成功'
+            }));
+            fetchGroup();
+            onClose();
+          case 18:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function onDemoEcsOk() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var onOSTypeChange = function onOSTypeChange(type) {
+    setOSType(type);
+  };
+  var onAddTypeChange = function onAddTypeChange(type) {
+    setAddType(type);
+  };
+  var createTitle = purpose === 'build' ? intl.get({
+    id: 'rdc-tb-cd-assets.dialog.host-dialog.ConnectToANewNode',
+    defaultMessage: '接入新节点'
+  }) : intl.get({
+    id: 'rdc-tb-cd-assets.dialog.host-dialog.ConnectToTheNewHost',
+    defaultMessage: '接入新主机'
+  });
+  var retryTitle = intl.get({
+    id: 'rdc-tb-cd-assets.dialog.host-dialog.ReinstallRunner',
+    defaultMessage: '重新安装 Runner'
+  });
+  return /*#__PURE__*/React.createElement(Dialog, {
+    title: isRetry ? retryTitle : createTitle,
+    visible: visible,
+    size: 'medium',
+    footer: [].concat(insertIf(addType === 'runner', /*#__PURE__*/React.createElement(Button, {
+      type: "primary",
+      onClick: onClose
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.dialog.host-dialog.IKnow',
+      defaultMessage: '我知道了'
+    }))), insertIf(['ecs', 'ecs_managed'].includes(addType), /*#__PURE__*/React.createElement(Button, {
+      type: "normal",
+      onClick: onClose
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.dialog.host-dialog.Cancel',
+      defaultMessage: '取消'
+    })), /*#__PURE__*/React.createElement(Button, {
+      type: "primary",
+      onClick: onEcsOrManagedOk,
+      disabled: saveBtnDisabled,
+      loading: saveBtnLoading
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.dialog.host-dialog.Save',
+      defaultMessage: '保存'
+    }))), insertIf(addType === 'demo', /*#__PURE__*/React.createElement(Button, {
+      type: "normal",
+      onClick: onClose
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.dialog.host-dialog.Cancel',
+      defaultMessage: '取消'
+    })), /*#__PURE__*/React.createElement(Button, {
+      type: "primary",
+      onClick: onDemoEcsOk,
+      loading: saveBtnLoading
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.dialog.host-dialog.Save',
+      defaultMessage: '保存'
+    })))),
+    onClose: onClose
+  }, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(FormItem, {
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.dialog.host-dialog.OperatingSystemType',
+      defaultMessage: '操作系统类型'
+    }),
+    required: true,
+    style: isRetry ? {
+      display: 'none'
+    } : {}
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      marginTop: 2
+    }
+  }, /*#__PURE__*/React.createElement(OSTypeCard, {
+    icon: {
+      type: 'linux-fill',
+      color: '#fff',
+      background: '#404040'
+    },
+    name: "Linux",
+    value: "linux",
+    onClick: onOSTypeChange,
+    activeValue: osType
+    // 如果是 主机组， 且传入了 osTypeProp， 则禁用和 osTypeProp 不匹配的选项
+    ,
+    disabled: isDeploy && osTypeProp && osTypeProp !== 'linux'
+  }), !!getFeature('buildGroup.windows') && purpose === 'build' && /*#__PURE__*/React.createElement(OSTypeCard, {
+    icon: {
+      type: 'windows-fill',
+      color: '#fff',
+      background: '#2680DA'
+    },
+    name: "Windows",
+    value: "windows",
+    onClick: onOSTypeChange,
+    activeValue: osType,
+    disabled: isDeploy && osTypeProp && osTypeProp !== 'windows'
+  }), !!getFeature('buildGroup.macOS') && purpose === 'build' && /*#__PURE__*/React.createElement(OSTypeCard, {
+    icon: {
+      type: 'macos-fill',
+      color: '#292929',
+      background: '#E9EDF0'
+    },
+    name: "macOS",
+    value: "darwin",
+    onClick: onOSTypeChange,
+    activeValue: osType
+  }), !!getFeature('buildGroup.aix') && purpose === 'build' && /*#__PURE__*/React.createElement(OSTypeCard, {
+    icon: {
+      type: 'AIX-fill',
+      color: '#fff',
+      background: '#0FA698'
+    },
+    name: "AIX",
+    value: "aix",
+    onClick: onOSTypeChange,
+    activeValue: osType
+  }))), /*#__PURE__*/React.createElement(FormItem, {
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.dialog.host-dialog.AddMethod',
+      defaultMessage: '添加方式'
+    }),
+    required: true,
+    style: isRetry ? {
+      display: 'none'
+    } : {}
+  }, /*#__PURE__*/React.createElement(Radio.Group, {
+    value: addType,
+    onChange: onAddTypeChange
+  }, /*#__PURE__*/React.createElement(Radio, {
+    value: "runner"
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.dialog.host-dialog.ManuallyInstallRunner',
+    defaultMessage: '手动安装Runner'
+  })), getFeature('buildGroup.ecs') && osType !== 'darwin' && /*#__PURE__*/React.createElement(Radio, {
+    value: "ecs"
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.dialog.host-dialog.AlibabaCloudEcs',
+    defaultMessage: '阿里云ECS'
+  })), purpose === 'deploy' && getFeature('deploy.esc.managed') && osType !== 'darwin' && /*#__PURE__*/React.createElement(Radio, {
+    value: "ecs_managed"
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.dialog.host-dialog.HybridCloudHosting',
+    defaultMessage: '混合云托管'
+  }), helpLinkIfAvailable('hybrid_cloud_hosting_server', function (_renderATag, url) {
+    return /*#__PURE__*/React.createElement(Balloon.Tooltip, {
+      trigger: /*#__PURE__*/React.createElement(YunxiaoIcon, {
+        type: "question-line",
+        style: {
+          marginLeft: 4,
+          color: 'var(--color-text1-7, #8b8b8b)'
+        }
+      }),
+      align: "t"
+    }, /*#__PURE__*/React.createElement("a", {
+      href: url,
+      target: "_blank",
+      style: {
+        color: 'var(--color-brand1-4, #68bbf2)'
+      },
+      rel: "noreferrer"
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.dialog.host-dialog.WhatIsHybridCloudHosting',
+      defaultMessage: '什么是混合云托管'
+    })));
+  })), purpose === 'deploy' && osType === 'linux' && getFeature('app.machine.demo') && /*#__PURE__*/React.createElement(Radio, {
+    value: "demo"
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.dialog.host-dialog.FreeExperienceHost',
+    defaultMessage: '免费体验主机'
+  })))), addType === 'runner' && /*#__PURE__*/React.createElement(RunnerFormItems, {
+    os: osType,
+    runnerGroupUUID: group.uuid
+  }), (addType === 'ecs' || addType === 'ecs_managed') && /*#__PURE__*/React.createElement(ECSFormItems, {
+    key: addType,
+    group: group,
+    setEcsFormData: setEcsFormData,
+    osType: osType,
+    addType: addType
+  }), addType === 'demo' && /*#__PURE__*/React.createElement(DemoForm, {
+    demoEcsField: demoEcsField
+  })));
+};
+export default HostDialog;

package/es/components/dashboardMain/components/build-and-deploy-setting-new/dialog/host-dialog/os-type-card/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import './index.scss';
+declare const OSTypeCard: ({ name, value, activeValue, onClick, icon, disabled }: {
+    name: any;
+    value: any;
+    activeValue: any;
+    onClick: any;
+    icon: any;
+    disabled: any;
+}) => JSX.Element;
+export default OSTypeCard;

package/es/components/dashboardMain/components/build-and-deploy-setting-new/dialog/host-dialog/os-type-card/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Card } from '@teamix/ui';
+import { YunxiaoIcon } from '@alife/devops-ui';
+import CardCheckSVG from "../../../../../../SVG/CardCheckSVG";
+import cls from 'classnames';
+import "./index.scss";
+var PREFIX = 'os-type-card';
+var OSTypeCard = function OSTypeCard(_ref) {
+  var name = _ref.name,
+    value = _ref.value,
+    activeValue = _ref.activeValue,
+    onClick = _ref.onClick,
+    icon = _ref.icon,
+    disabled = _ref.disabled;
+  var isActive = activeValue === value;
+  var onCardClick = function onCardClick() {
+    onClick && onClick(value);
+  };
+  return /*#__PURE__*/React.createElement(Card, {
+    className: cls(PREFIX, activeValue === value && 'active', disabled && 'disabled'),
+    free: true,
+    onClick: onCardClick
+  }, /*#__PURE__*/React.createElement("div", {
+    className: PREFIX + "-icon",
+    style: {
+      color: icon.color,
+      background: icon.background
+    }
+  }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+    type: icon.type
+  })), /*#__PURE__*/React.createElement("div", {
+    className: PREFIX + "-name"
+  }, name), isActive && /*#__PURE__*/React.createElement(CardCheckSVG, {
+    className: PREFIX + "-check-svg"
+  }));
+};
+export default OSTypeCard;

package/es/components/dashboardMain/components/build-and-deploy-setting-new/dialog/host-dialog/os-type-card/index.scss

@@ -0,0 +1,52 @@
+$PREFIX: os-type-card;
+
+.#{$PREFIX} {
+  width: 160px;
+  padding: 12px 14px;
+  margin-right: 16px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+
+  &:hover,
+  &.active {
+    // border: 2px solid var(--color-brand1-6, #006ad4);
+    border-color: transparent;
+    box-shadow: 0 0 0 2px var(--color-brand1-6, #006ad4) inset;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    box-shadow: none;
+    background-color: var(--color-brand3-1, #f2f5f7);
+    pointer-events: none;
+  }
+
+  &-icon {
+    width: 26px;
+    height: 26px;
+    text-align: center;
+    line-height: 26px;
+    border-radius: 50%;
+    margin-right: 12px;
+  }
+
+  &-name {
+    font-weight: 500;
+    font-size: 14px;
+    color: var(--color-text1-4, #292929);
+    letter-spacing: 0;
+  }
+
+  &-check-svg {
+    width: 20px;
+    height: 20px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    position: absolute;
+    right: 6px;
+    top: 6px;
+  }
+}

package/es/components/dashboardMain/components/build-and-deploy-setting-new/dialog/host-dialog/runner-form-items/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import './index.scss';
+declare const RunnerFormItems: ({ os, runnerGroupUUID }: {
+    os: any;
+    runnerGroupUUID: any;
+}) => JSX.Element;
+export default RunnerFormItems;