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

package/es/components/common/teambition/flow-engine/toolbars/shortcutAcrCreate.js

@@ -0,0 +1,356 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["source", "region", "connectionId"];
+import React, { useState } from 'react';
+import { Button, Dialog, Form, Input, Select, Radio, Field, Message } from '@teamix/ui';
+import { YunxiaoIcon } from '@alife/devops-ui';
+import { ALIYUN_REGIONS } from "../../../../../utils/aliyunRegions";
+import exceed from "../../../../../utils/apimap";
+import track from "../../../../../utils/track";
+import intl from "../../../../../locale";
+var Namespace = function Namespace(_ref) {
+  var _ref$source = _ref.source,
+    source = _ref$source === void 0 ? 'absent' : _ref$source,
+    region = _ref.region,
+    connectionId = _ref.connectionId,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useState = useState([]),
+    items = _useState[0],
+    setItems = _useState[1];
+  var _useState2 = useState(''),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var getNamespaces = function getNamespaces(namespace) {
+    setState('loading');
+    exceed.fetch({
+      api: 'acr.namespace.list',
+      data: {
+        scId: connectionId,
+        crRegion: namespace
+      }
+    }).then(function (res) {
+      if (res.successful) {
+        setItems(res.object);
+      }
+      setState('');
+    });
+  };
+  if (source === 'absent') {
+    return /*#__PURE__*/React.createElement(Input, props);
+  }
+  return /*#__PURE__*/React.createElement(Select, _extends({}, props, {
+    dataSource: items,
+    state: state,
+    onFocus: function onFocus() {
+      getNamespaces(region);
+    }
+  }));
+};
+var AcrCreate = /*#__PURE__*/function (_React$Component) {
+  function AcrCreate(props) {
+    var _this;
+    _this = _React$Component.call(this, props) || this;
+    _this.setVisible = function (visible) {
+      _this.setState({
+        visible: visible
+      });
+    };
+    _this.onSubmit = function () {
+      _this.field.validate(function (errors) {
+        if (errors) {
+          return;
+        }
+        var _this$props$connectio = _this.props.connectionId,
+          connectionId = _this$props$connectio === void 0 ? '' : _this$props$connectio;
+        var data = _this.field.getValues();
+        var name = data.name,
+          namespace = data.namespace,
+          region = data.region,
+          summary = data.summary,
+          type = data.type;
+        exceed.fetch({
+          api: 'acr.repo.create',
+          data: {
+            scId: connectionId,
+            crRegion: region,
+            namespace: namespace,
+            name: name,
+            type: type,
+            summary: summary
+          }
+        }).then(function (res) {
+          if (res.successful && res.object.data && res.object.data.repoId) {
+            Message.success({
+              title: intl.get({
+                id: 'rdc-tb-cd-assets.flow-engine.toolbars.shortcutAcrCreate.TheImageRepositoryNamespaceName',
+                defaultMessage: '镜像仓库 {namespace}/{name} 创建成功'
+              }, {
+                namespace: namespace,
+                name: name
+              })
+            });
+            _this.setVisible(false);
+            return;
+          }
+          if (res.successful && res.object.code) {
+            var _res$object = res.object,
+              code = _res$object.code,
+              message = _res$object.message;
+            if (code === 'AUTHENTICATION_FAILED') {
+              Message.error({
+                title: intl.get({
+                  id: 'rdc-tb-cd-assets.flow-engine.toolbars.shortcutAcrCreate.TheImageRepositoryNamespaceName.1',
+                  defaultMessage: '镜像仓库 {namespace}/{name} 创建失败，请检查命名空间{namespace}是否已存在'
+                }, {
+                  namespace: namespace,
+                  name: name
+                })
+              });
+              return;
+            }
+            if (code === 'REPO_ALREADY_EXIST') {
+              Message.error({
+                title: intl.get({
+                  id: 'rdc-tb-cd-assets.flow-engine.toolbars.shortcutAcrCreate.TheImageRepositoryNamespaceName.2',
+                  defaultMessage: '镜像仓库 {namespace}/{name} 已存在'
+                }, {
+                  namespace: namespace,
+                  name: name
+                })
+              });
+              return;
+            }
+            Message.error({
+              title: intl.get({
+                id: 'rdc-tb-cd-assets.flow-engine.toolbars.shortcutAcrCreate.ImageRepositoryNamespaceNameFailed',
+                defaultMessage: '镜像仓库 {namespace}/{name} 创建失败，{message}'
+              }, {
+                namespace: namespace,
+                name: name,
+                message: message
+              })
+            });
+          }
+        });
+      });
+    };
+    _this.help = function (fieldName) {
+      var errorMsg = _this.field.getError(fieldName) ? _this.field.getError(fieldName).join(',') : '';
+      return errorMsg;
+    };
+    _this.state = {
+      visible: false
+    };
+    _this.field = new Field(_this);
+    return _this;
+  }
+  _inheritsLoose(AcrCreate, _React$Component);
+  var _proto = AcrCreate.prototype;
+  _proto.componentDidUpdate = function componentDidUpdate(nextProps) {
+    var _nextProps$aliyunRegi = nextProps.aliyunRegion,
+      aliyunRegion = _nextProps$aliyunRegi === void 0 ? '' : _nextProps$aliyunRegi;
+    var before = this.field.getValue('region');
+    if (before !== aliyunRegion) {
+      this.field.setValue('region', aliyunRegion);
+    }
+  };
+  _proto.render = function render() {
+    var _this2 = this;
+    var _this$props = this.props,
+      _this$props$aliyunReg = _this$props.aliyunRegion,
+      aliyunRegion = _this$props$aliyunReg === void 0 ? '' : _this$props$aliyunReg,
+      _this$props$connectio2 = _this$props.connectionId,
+      connectionId = _this$props$connectio2 === void 0 ? '' : _this$props$connectio2;
+    var visible = this.state.visible;
+    var init = this.field.init;
+    var disabled = !connectionId || !aliyunRegion || this.props.disabled;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      text: true,
+      disabled: disabled,
+      type: "primary",
+      style: {
+        marginLeft: 4
+      },
+      onClick: function onClick() {
+        _this2.setVisible(!visible);
+        track({
+          page: 'edit page',
+          action: 'create aliyun serve',
+          type: 'acr'
+        });
+      }
+    }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "add-fill"
+    })), /*#__PURE__*/React.createElement(Dialog, {
+      title: intl.get({
+        id: 'rdc-tb-cd-assets.flow-engine.toolbars.shortcutAcrCreate.CreateAnImageRepository',
+        defaultMessage: '创建镜像仓库'
+      }),
+      visible: visible,
+      style: {
+        width: 600
+      },
+      onOk: function onOk() {
+        _this2.onSubmit();
+      },
+      onCancel: function onCancel() {
+        _this2.setVisible(false);
+      },
+      onClose: function onClose() {
+        _this2.setVisible(false);
+      }
+    }, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(Form.Item, {
+      label: intl.get({
+        id: 'rdc-tb-cd-assets.flow-engine.toolbars.shortcutAcrCreate.Area',
+        defaultMessage: '地域'
+      }),
+      hasFeedback: true,
+      validateState: this.field.getError('region') ? 'error' : '',
+      help: this.help('region')
+    }, /*#__PURE__*/React.createElement(Select, _extends({}, init('region', {
+      initValue: aliyunRegion,
+      rules: {
+        required: true,
+        message: intl.get({
+          id: 'rdc-tb-cd-assets.flow-engine.toolbars.shortcutAcrCreate.SelectAlibabaCloudRegion',
+          defaultMessage: '请选择阿里云地域'
+        })
+      }
+    }), {
+      dataSource: ALIYUN_REGIONS.map(function (item) {
+        return {
+          label: item.regionName,
+          value: item.regionId
+        };
+      }),
+      disabled: true
+    }))), /*#__PURE__*/React.createElement(Form.Item, {
+      label: intl.get({
+        id: 'rdc-tb-cd-assets.flow-engine.toolbars.shortcutAcrCreate.NamespaceSource',
+        defaultMessage: '命名空间来源'
+      }),
+      hasFeedback: true,
+      validateState: this.field.getError('namespaceSource') ? 'error' : '',
+      help: this.help('namespaceSource')
+    }, /*#__PURE__*/React.createElement(Radio.Group, _extends({}, init('namespaceSource', {
+      initValue: 'absent'
+    }), {
+      onChange: function onChange(val) {
+        _this2.field.setValue('namespaceSource', val);
+        if (val === 'present') {
+          _this2.field.setValues({
+            namespace: ''
+          });
+        }
+      },
+      dataSource: [{
+        label: intl.get({
+          id: 'rdc-tb-cd-assets.flow-engine.toolbars.shortcutAcrCreate.New',
+          defaultMessage: '新建'
+        }),
+        value: 'absent'
+      }, {
+        label: intl.get({
+          id: 'rdc-tb-cd-assets.flow-engine.toolbars.shortcutAcrCreate.SelectExisting',
+          defaultMessage: '选择已有'
+        }),
+        value: 'present'
+      }]
+    }))), /*#__PURE__*/React.createElement(Form.Item, {
+      label: intl.get({
+        id: 'rdc-tb-cd-assets.flow-engine.toolbars.shortcutAcrCreate.Namespace',
+        defaultMessage: '命名空间'
+      }),
+      hasFeedback: true,
+      validateState: this.field.getError('namespace') ? 'error' : '',
+      help: this.help('namespace')
+    }, /*#__PURE__*/React.createElement(Namespace, _extends({}, init('namespace', {
+      rules: {
+        required: true,
+        message: intl.get({
+          id: 'rdc-tb-cd-assets.flow-engine.toolbars.shortcutAcrCreate.SelectOrCreateANamespace',
+          defaultMessage: '请选择或者创建命名空间'
+        })
+      }
+    }), {
+      source: this.field.getValue('namespaceSource'),
+      connectionId: connectionId,
+      region: this.field.getValue('region'),
+      placeholder: intl.get({
+        id: 'rdc-tb-cd-assets.flow-engine.toolbars.shortcutAcrCreate.EnterACommandSpace',
+        defaultMessage: '请输入命令空间'
+      })
+    }))), /*#__PURE__*/React.createElement(Form.Item, {
+      label: intl.get({
+        id: 'rdc-tb-cd-assets.flow-engine.toolbars.shortcutAcrCreate.WarehouseName',
+        defaultMessage: '仓库名'
+      }),
+      hasFeedback: true,
+      validateState: this.field.getError('name') ? 'error' : '',
+      help: this.help('name')
+    }, /*#__PURE__*/React.createElement(Input, _extends({}, init('name', {
+      rules: {
+        required: true,
+        message: intl.get({
+          id: 'rdc-tb-cd-assets.flow-engine.toolbars.shortcutAcrCreate.EnterARepositoryName',
+          defaultMessage: '请输入仓库名'
+        })
+      }
+    }), {
+      placeholder: intl.get({
+        id: 'rdc-tb-cd-assets.flow-engine.toolbars.shortcutAcrCreate.EnterARepositoryName',
+        defaultMessage: '请输入仓库名'
+      })
+    }))), /*#__PURE__*/React.createElement(Form.Item, {
+      label: intl.get({
+        id: 'rdc-tb-cd-assets.flow-engine.toolbars.shortcutAcrCreate.Summary',
+        defaultMessage: '摘要'
+      }),
+      hasFeedback: true,
+      validateState: this.field.getError('summary') ? 'error' : '',
+      help: this.help('summary')
+    }, /*#__PURE__*/React.createElement(Input.TextArea, _extends({}, init('summary', {
+      rules: {
+        required: true,
+        message: intl.get({
+          id: 'rdc-tb-cd-assets.flow-engine.toolbars.shortcutAcrCreate.EnterSummaryInformation',
+          defaultMessage: '请输入摘要信息'
+        })
+      }
+    }), {
+      placeholder: intl.get({
+        id: 'rdc-tb-cd-assets.flow-engine.toolbars.shortcutAcrCreate.EnterSummaryInformation',
+        defaultMessage: '请输入摘要信息'
+      })
+    }))), /*#__PURE__*/React.createElement(Form.Item, {
+      label: intl.get({
+        id: 'rdc-tb-cd-assets.flow-engine.toolbars.shortcutAcrCreate.WarehouseType',
+        defaultMessage: '仓库类型'
+      }),
+      hasFeedback: true,
+      validateState: this.field.getError('type') ? 'error' : ''
+    }, /*#__PURE__*/React.createElement(Radio.Group, _extends({}, init('type', {
+      initValue: 'PRIVATE',
+      rules: {
+        required: true
+      }
+    }), {
+      dataSource: [{
+        label: intl.get({
+          id: 'rdc-tb-cd-assets.flow-engine.toolbars.shortcutAcrCreate.Public',
+          defaultMessage: '公开'
+        }),
+        value: 'PUBLIC'
+      }, {
+        label: intl.get({
+          id: 'rdc-tb-cd-assets.flow-engine.toolbars.shortcutAcrCreate.Private',
+          defaultMessage: '私有'
+        }),
+        value: 'PRIVATE'
+      }]
+    }))))));
+  };
+  return AcrCreate;
+}(React.Component);
+export default AcrCreate;

package/es/components/common/teambition/flow-group/index.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import './index.scss';
+export declare const GroupSplitLine: () => JSX.Element;
+export declare const GroupSplitLineWithAddButton: ({ onOpenComponentMenu, groupIndex, operation, trackPage, }: {
+    onOpenComponentMenu: any;
+    groupIndex: any;
+    operation: any;
+    trackPage: any;
+}) => JSX.Element;
+export declare const AddFlowGroupSplitLine: ({ groupIndex, editable, operation, flowIndex0, ...props }: {
+    [x: string]: any;
+    groupIndex: any;
+    editable: any;
+    operation: any;
+    flowIndex0: any;
+}) => JSX.Element;
+export declare const AddFlowGroup: ({ group, config, style, flowIndex0, type, ...props }: {
+    [x: string]: any;
+    group: any;
+    config: any;
+    style: any;
+    flowIndex0: any;
+    type?: string;
+}) => JSX.Element;
+declare const FlowGroup: ({ group, config, editable, isAdmin, onGroupChange, flow, groupIndex, invalidateTasks, pipelineId, componentMenuVisible, onOpenComponentMenu, ...props }: {
+    [x: string]: any;
+    group: any;
+    config: any;
+    editable?: boolean;
+    isAdmin?: boolean;
+    onGroupChange?: () => void;
+    flow: any;
+    groupIndex: any;
+    invalidateTasks: any;
+    pipelineId: any;
+    componentMenuVisible: any;
+    onOpenComponentMenu: any;
+}) => JSX.Element;
+export default FlowGroup;

package/es/components/common/teambition/flow-group/index.js

@@ -0,0 +1,201 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["groupIndex", "editable", "operation", "flowIndex0"],
+  _excluded2 = ["group", "config", "style", "flowIndex0", "type"],
+  _excluded3 = ["group", "config", "editable", "isAdmin", "onGroupChange", "flow", "groupIndex", "invalidateTasks", "pipelineId", "componentMenuVisible", "onOpenComponentMenu"];
+import React, { useState, useEffect } from 'react';
+import { Balloon } from '@teamix/ui';
+import { YunxiaoIcon } from '@alife/devops-ui';
+import cx from 'classnames';
+import FlowStage, { AddFlowStage } from "../flow-stage";
+import { FlowSwitch } from "../flow-job";
+import EditableLabel from "../editable-label";
+import track from "../../../../utils/track";
+import { intervalEnterTime } from "../../../../utils";
+import intl from "../../../../locale";
+import "./index.scss";
+var Tooltip = Balloon.Tooltip;
+export var GroupSplitLine = function GroupSplitLine() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flow-group-splitline flow-group-splitline--readonly"
+  });
+};
+export var GroupSplitLineWithAddButton = function GroupSplitLineWithAddButton(_ref) {
+  var onOpenComponentMenu = _ref.onOpenComponentMenu,
+    groupIndex = _ref.groupIndex,
+    operation = _ref.operation,
+    trackPage = _ref.trackPage;
+  var trigger = /*#__PURE__*/React.createElement(YunxiaoIcon, {
+    type: "add-fill",
+    onClick: function onClick() {
+      track({
+        action: 'add new stage',
+        page: trackPage || 'edit page',
+        daysinceenterflow: intervalEnterTime()
+      });
+      onOpenComponentMenu({
+        groupIndex: groupIndex,
+        isAppend: true
+      });
+    }
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flow-group-splitline",
+    style: groupIndex === 0 ? {
+      marginLeft: -16
+    } : {}
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flow-group-splitline__button"
+  }, operation && /*#__PURE__*/React.createElement(Tooltip, {
+    trigger: trigger,
+    align: "t"
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.teambition.flow-group.AddANewPhase',
+    defaultMessage: '添加新的阶段'
+  }))));
+};
+export var AddFlowGroupSplitLine = function AddFlowGroupSplitLine(_ref2) {
+  var groupIndex = _ref2.groupIndex,
+    editable = _ref2.editable,
+    operation = _ref2.operation,
+    flowIndex0 = _ref2.flowIndex0,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+  if (!editable) {
+    return /*#__PURE__*/React.createElement(GroupSplitLine, null);
+  }
+  return /*#__PURE__*/React.createElement(GroupSplitLineWithAddButton, _extends({
+    groupIndex: groupIndex,
+    operation: operation,
+    flowIndex0: flowIndex0
+  }, props));
+};
+export var AddFlowGroup = function AddFlowGroup(_ref3) {
+  var group = _ref3.group,
+    config = _ref3.config,
+    style = _ref3.style,
+    flowIndex0 = _ref3.flowIndex0,
+    _ref3$type = _ref3.type,
+    type = _ref3$type === void 0 ? 'new' : _ref3$type,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "flow-group flow-group-create",
+    key: group.name
+  }, type ? {
+    'data-group-type': type
+  } : {}), /*#__PURE__*/React.createElement("div", {
+    className: "group-head",
+    style: _extends({}, style)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "name",
+    style: flowIndex0 ? {
+      opacity: 0
+    } : {}
+  }, group.name)), /*#__PURE__*/React.createElement("div", {
+    className: "stages"
+  }, /*#__PURE__*/React.createElement(AddFlowStage, _extends({}, props, {
+    config: config,
+    type: type
+  }))));
+};
+var FlowGroup = function FlowGroup(_ref4) {
+  var group = _ref4.group,
+    config = _ref4.config,
+    _ref4$editable = _ref4.editable,
+    editable = _ref4$editable === void 0 ? false : _ref4$editable,
+    _ref4$isAdmin = _ref4.isAdmin,
+    isAdmin = _ref4$isAdmin === void 0 ? false : _ref4$isAdmin,
+    _ref4$onGroupChange = _ref4.onGroupChange,
+    onGroupChange = _ref4$onGroupChange === void 0 ? function () {} : _ref4$onGroupChange,
+    flow = _ref4.flow,
+    groupIndex = _ref4.groupIndex,
+    invalidateTasks = _ref4.invalidateTasks,
+    pipelineId = _ref4.pipelineId,
+    componentMenuVisible = _ref4.componentMenuVisible,
+    onOpenComponentMenu = _ref4.onOpenComponentMenu,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3);
+  var _useState = useState(false),
+    active = _useState[0],
+    setActive = _useState[1];
+  var _onOpenComponentMenu = function _onOpenComponentMenu(_ref5) {
+    var gIndex = _ref5.groupIndex;
+    setActive(gIndex === groupIndex);
+    onOpenComponentMenu({
+      groupIndex: gIndex
+    });
+  };
+  useEffect(function () {
+    if (!componentMenuVisible && active) setActive(false);
+  }, [componentMenuVisible]);
+  var onScrollCapture = function onScrollCapture() {
+    if (FlowStage.moreVisible) {
+      document.body.click();
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "flow-group flow-group-" + (editable ? 'editable' : 'readonly') + " flow-group--" + props.type,
+    "data-group-index": groupIndex,
+    key: group.name + "-" + groupIndex
+  }, !editable ? {
+    onScrollCapture: onScrollCapture
+  } : {}), /*#__PURE__*/React.createElement("div", {
+    className: "group-head"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "name"
+  }, /*#__PURE__*/React.createElement(EditableLabel, {
+    editable: editable,
+    value: group.name,
+    onChange: function onChange(name) {
+      onGroupChange(Object.assign({}, group, {
+        name: name
+      }));
+    }
+  }))), !editable && /*#__PURE__*/React.createElement("div", {
+    className: "switches"
+  }, group.stages.map(function (stage) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "switch",
+      key: stage.id
+    }, !editable && stage.status === 'SWITCH_MANUAL' && /*#__PURE__*/React.createElement(FlowSwitch, {
+      id: stage.id,
+      status: stage.status,
+      pipelineId: pipelineId
+    }));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cx('stages', {
+      active: active
+    })
+  }, group.stages.map(function (stage, index, self) {
+    return /*#__PURE__*/React.createElement(FlowStage, _extends({}, props, {
+      key: index + "_stage",
+      flow: flow,
+      group: group,
+      groupIndex: groupIndex,
+      stage: stage,
+      lastStages: index === self.length - 1,
+      stageIndex: index,
+      config: config,
+      editable: editable,
+      isAdmin: isAdmin,
+      invalidateTasks: invalidateTasks,
+      onOpenComponentMenu: onOpenComponentMenu,
+      onStageChange: function onStageChange(nextStage) {
+        var nextGroup = Object.assign({}, group);
+        nextGroup.stages[index] = nextStage;
+        onGroupChange(nextGroup);
+      }
+    }));
+  }), editable && !group.single && /*#__PURE__*/React.createElement(AddFlowStage, _extends({}, props, {
+    groupIndex: groupIndex,
+    config: config,
+    title: intl.get({
+      id: 'rdc-tb-cd-assets.teambition.flow-group.ParallelTasks',
+      defaultMessage: '并行任务'
+    }),
+    style: {
+      paddingLeft: 94
+    },
+    onOpenComponentMenu: _onOpenComponentMenu,
+    componentMenuVisible: componentMenuVisible
+  }))));
+};
+export default FlowGroup;