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

package/es/components/common/teambition/flow-engine/fields/text_label.d.ts

@@ -0,0 +1,5 @@
+import { Component } from 'react';
+declare class TextLabel extends Component {
+    render(): JSX.Element;
+}
+export default TextLabel;

package/es/components/common/teambition/flow-engine/fields/text_label.js

@@ -0,0 +1,16 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { Component } from 'react';
+
+// eslint-disable-next-line react/prefer-stateless-function
+var TextLabel = /*#__PURE__*/function (_Component) {
+  function TextLabel() {
+    return _Component.apply(this, arguments) || this;
+  }
+  _inheritsLoose(TextLabel, _Component);
+  var _proto = TextLabel.prototype;
+  _proto.render = function render() {
+    return /*#__PURE__*/React.createElement("div", null, this.props.content.name);
+  };
+  return TextLabel;
+}(Component);
+export default TextLabel;

package/es/components/common/teambition/flow-engine/fields/tip.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import DelayField from './base';
+declare class Tip extends DelayField {
+    render(): JSX.Element;
+}
+export default Tip;

package/es/components/common/teambition/flow-engine/fields/tip.js

@@ -0,0 +1,39 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React from 'react';
+import { Message } from '@teamix/ui';
+import DelayField from "./base";
+var Tip = /*#__PURE__*/function (_DelayField) {
+  function Tip() {
+    return _DelayField.apply(this, arguments) || this;
+  }
+  _inheritsLoose(Tip, _DelayField);
+  var _proto = Tip.prototype;
+  _proto.render = function render() {
+    var _this$props = this.props,
+      field = _this$props.field,
+      identifier = _this$props.identifier;
+    var message = this.props.content.message;
+    var matchResult = message.match(/\$\{[^}]*\}/g);
+    if (matchResult) {
+      matchResult.forEach(function (matched) {
+        var _field$getValue;
+        var name = matched.replace(/\$\{([^}]*)}/, '$1');
+        var value = encodeURIComponent((_field$getValue = field.getValue(identifier + "__" + name)) !== null && _field$getValue !== void 0 ? _field$getValue : '');
+        message = message.replace(matched, value);
+      });
+    }
+    return /*#__PURE__*/React.createElement(Message, {
+      shape: "inline",
+      type: this.props.content.tipType,
+      style: {
+        marginTop: 8
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: message
+      }
+    }));
+  };
+  return Tip;
+}(DelayField);
+export default Tip;

package/es/components/common/teambition/flow-engine/fields/upstream.d.ts

@@ -0,0 +1,12 @@
+import { Component } from 'react';
+import './field_common.scss';
+declare class Upstream extends Component {
+    constructor(props: any);
+    componentDidMount(): Promise<void>;
+    UNSAFE_componentWillReceiveProps(nextPrpos: any): void;
+    onChange: (value: any) => void;
+    onChangeToInput: (props: any) => void;
+    transformOutputs: (props: any) => Promise<void>;
+    render(): JSX.Element;
+}
+export default Upstream;

package/es/components/common/teambition/flow-engine/fields/upstream.js

@@ -0,0 +1,169 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { Component } from 'react';
+import { Select, Input } from '@teamix/ui';
+import { Title } from '@alife/devops-ui';
+import intl from "../../../../../locale";
+import "./field_common.scss";
+import { getArtifactSourceOutputs, artifactSourceSelectOptionRender, getFlowSorucesOutputs } from "./upstreamSourcesUtils";
+var jobOutput = function jobOutput(job) {
+  job.output.forEach(function (item) {
+    item.jobIdentifier = job.identifier;
+  });
+  return job.output;
+};
+var stageOutput = function stageOutput(s) {
+  return s.jobs.flatMap(jobOutput);
+};
+var groupOutput = function groupOutput(g) {
+  return g.stages.flatMap(stageOutput);
+};
+var Upstream = /*#__PURE__*/function (_Component) {
+  function Upstream(_props) {
+    var _this;
+    _this = _Component.call(this, _props) || this;
+    _this.onChange = function (value) {
+      var onChange = _this.props.onChange;
+      onChange(value);
+    };
+    _this.onChangeToInput = function (props) {
+      var value = props.value,
+        sources = props.sources;
+      var outputs = _this.state.outputs;
+      var artifactOutputs = getArtifactSourceOutputs(sources);
+      var hasOptions = [].concat(outputs, artifactOutputs).length;
+      var notInSelectOption = !outputs.find(function (_ref) {
+        var jobIdentifier = _ref.jobIdentifier,
+          name = _ref.name;
+        return "${" + jobIdentifier + "." + name + "}" === value;
+      }) && !artifactOutputs.find(function (item) {
+        return item.value === value;
+      });
+      if (value && hasOptions && notInSelectOption) {
+        _this.props.onChangeToInput();
+      }
+    };
+    _this.transformOutputs = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(props) {
+        var flow, groupIndex, stageIndex, jobIndex, sources, preGroups, currentGroup, preStages, currentStage, preJobs, preGroupsOutput, preStagesOutput, preJobOutput, outputsResult, flowSourcesOutputs;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              flow = props.flow, groupIndex = props.groupIndex, stageIndex = props.stageIndex, jobIndex = props.jobIndex, sources = props.sources;
+              preGroups = flow.slice(0, groupIndex);
+              currentGroup = flow[groupIndex];
+              preStages = currentGroup ? currentGroup.stages.slice(0, stageIndex) : [];
+              currentStage = currentGroup.stages[stageIndex];
+              preJobs = currentStage ? currentStage.jobs.slice(0, jobIndex) : [];
+              preGroupsOutput = preGroups.flatMap(groupOutput);
+              preStagesOutput = preStages.flatMap(stageOutput);
+              preJobOutput = preJobs.flatMap(jobOutput);
+              outputsResult = [preGroupsOutput, preStagesOutput, preJobOutput].flatMap(function (o) {
+                return o;
+              });
+              _context.next = 12;
+              return getFlowSorucesOutputs(sources);
+            case 12:
+              flowSourcesOutputs = _context.sent;
+              _this.setState({
+                outputs: [].concat(outputsResult, flowSourcesOutputs)
+              });
+            case 14:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function (_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    _this.state = {
+      outputs: []
+    };
+    return _this;
+  }
+  _inheritsLoose(Upstream, _Component);
+  var _proto = Upstream.prototype;
+  _proto.componentDidMount = /*#__PURE__*/function () {
+    var _componentDidMount = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var _this2 = this;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return this.transformOutputs(this.props, true);
+          case 2:
+            if (this.props.content.autoComplete) {
+              setTimeout(function () {
+                _this2.onChangeToInput(_this2.props);
+              });
+            }
+          case 3:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, this);
+    }));
+    function componentDidMount() {
+      return _componentDidMount.apply(this, arguments);
+    }
+    return componentDidMount;
+  }();
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextPrpos) {
+    if (this.props.isTextInput !== nextPrpos.isTextInput) {
+      console.log('mode changed');
+    }
+    this.transformOutputs(nextPrpos);
+  };
+  _proto.render = function render() {
+    var outputs = this.state.outputs;
+    var _this$props = this.props,
+      value = _this$props.value,
+      state = _this$props.state,
+      isTextInput = _this$props.isTextInput,
+      disabled = _this$props.disabled,
+      sources = _this$props.sources;
+    if (isTextInput) {
+      return /*#__PURE__*/React.createElement(Input, {
+        value: value,
+        disabled: disabled,
+        onChange: this.onChange,
+        placeholder: intl.get({
+          id: 'rdc-tb-cd-assets.flow-engine.fields.upstream.EnterAnImage',
+          defaultMessage: '请输入镜像'
+        })
+      });
+    } else {
+      return /*#__PURE__*/React.createElement(Select, {
+        className: "common-input",
+        value: value,
+        onChange: this.onChange,
+        disabled: disabled,
+        followTrigger: true,
+        placeholder: intl.get({
+          id: 'rdc-tb-cd-assets.flow-engine.fields.upstream.SelectOutputParameters',
+          defaultMessage: '请选择输出参数'
+        }),
+        autoWidth: true,
+        state: state
+      }, artifactSourceSelectOptionRender(sources), outputs.map(function (output) {
+        return /*#__PURE__*/React.createElement(Select.Option, {
+          key: output.name,
+          value: "${" + output.jobIdentifier + "." + output.name + "}"
+        }, /*#__PURE__*/React.createElement("div", {
+          style: {
+            maxWidth: 370
+          },
+          title: output.displayName
+        }, /*#__PURE__*/React.createElement(Title, {
+          trigger: output.displayName,
+          align: "t"
+        }, output.displayName)));
+      }));
+    }
+  };
+  return Upstream;
+}(Component);
+export default Upstream;

package/es/components/common/teambition/flow-engine/fields/upstreamSourcesUtils.d.ts

@@ -0,0 +1,11 @@
+export declare const buildArtifactSourceUpstreamSign: (sourceSign: any, type: 'acr' | 'packages') => {
+    value: string;
+    label: any;
+}[];
+/** 从一个被使用的 output 字符串，判断一下是不是 source 类型的格式 */
+export declare const isArtifactSourceUpstreamFormat: (v: string) => boolean;
+export declare const getArtifactSourceOutputs: (allSources: any[]) => any;
+export declare const artifactSourceSelectOptionRender: (allSources: any[]) => any;
+export declare const isArtifactSourceUpstreamValid: (upstreamValue: any, allSources?: any[]) => any;
+/** flow 流水线源 转化为制品输出，有请求缓存 */
+export declare function getFlowSorucesOutputs(sources: any): Promise<any>;

package/es/components/common/teambition/flow-engine/fields/upstreamSourcesUtils.js

@@ -0,0 +1,144 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React from 'react';
+import { Select } from '@teamix/ui';
+import { Title } from '@alife/devops-ui';
+import { ARTIFACT_SOURCE, getCategoryFromType } from "../../pipeline-source/util";
+import { exceedFetchWithCache } from "../../../../../utils/apimap";
+import YAML from 'js-yaml';
+
+/** source sign 转化为特定格式的引用标识 `$[sources.${sourceSign}]` */
+import intl from "../../../../../locale";
+export var buildArtifactSourceUpstreamSign = function buildArtifactSourceUpstreamSign(sourceSign, type) {
+  switch (type) {
+    case 'acr':
+      {
+        return [{
+          value: "$[sources." + sourceSign + "]",
+          label: intl.get({
+            id: 'rdc-tb-cd-assets.flow-engine.fields.upstreamSourcesUtils.SourcesignImagePublicNetworkAddress',
+            defaultMessage: '{sourceSign}.镜像公网地址'
+          }, {
+            sourceSign: sourceSign
+          })
+        }, {
+          value: "$[sources." + sourceSign + "_vpc]",
+          label: intl.get({
+            id: 'rdc-tb-cd-assets.flow-engine.fields.upstreamSourcesUtils.SourcesignImageVpcAddress',
+            defaultMessage: '{sourceSign}.镜像VPC地址'
+          }, {
+            sourceSign: sourceSign
+          })
+        }];
+      }
+    case 'packages':
+      {
+        return [{
+          value: "$[sources." + sourceSign + "]",
+          label: "" + sourceSign
+        }];
+      }
+    default:
+      {
+        console.warn('unknown');
+        return [];
+      }
+  }
+};
+
+/** 从一个被使用的 output 字符串，判断一下是不是 source 类型的格式 */
+export var isArtifactSourceUpstreamFormat = function isArtifactSourceUpstreamFormat(v) {
+  var _v$match;
+  return !!(v !== null && v !== void 0 && (_v$match = v.match) !== null && _v$match !== void 0 && _v$match.call(v, /^\$\[sources\..+\]$/));
+};
+export var getArtifactSourceOutputs = function getArtifactSourceOutputs(allSources) {
+  return allSources.filter(function (v) {
+    return getCategoryFromType(v.type) === ARTIFACT_SOURCE;
+  }).flatMap(function (source) {
+    return buildArtifactSourceUpstreamSign(source.sign, source.type);
+  });
+};
+
+// 选项
+export var artifactSourceSelectOptionRender = function artifactSourceSelectOptionRender(allSources) {
+  return getArtifactSourceOutputs(allSources).map(function (_ref) {
+    var value = _ref.value,
+      label = _ref.label;
+    return /*#__PURE__*/React.createElement(Select.Option, {
+      key: value,
+      value: value,
+      title: label
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        maxWidth: 370
+      },
+      title: label
+    }, /*#__PURE__*/React.createElement(Title, {
+      trigger: label,
+      align: "t"
+    }, label)));
+  });
+};
+export var isArtifactSourceUpstreamValid = function isArtifactSourceUpstreamValid(upstreamValue, allSources) {
+  if (allSources === void 0) {
+    allSources = [];
+  }
+  return getArtifactSourceOutputs(allSources).some(function (output) {
+    return output.value === upstreamValue;
+  });
+};
+
+/** flow 流水线源 转化为制品输出，有请求缓存 */
+export function getFlowSorucesOutputs(_x) {
+  return _getFlowSorucesOutputs.apply(this, arguments);
+}
+function _getFlowSorucesOutputs() {
+  _getFlowSorucesOutputs = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(sources) {
+    var flowSources, resps;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          flowSources = sources.filter(function (s) {
+            return s.type === 'flow';
+          });
+          _context.next = 3;
+          return Promise.all(flowSources.map(function (_ref2) {
+            var data = _ref2.data;
+            return exceedFetchWithCache({
+              api: 'Pipeline.get',
+              params: {
+                id: data.repo
+              }
+            });
+          }));
+        case 3:
+          resps = _context.sent;
+          return _context.abrupt("return", resps.flatMap(function (resp, sourceIndex) {
+            try {
+              var flow = YAML.load(resp.object.pipelineVo.pipelineConfigVo.flow);
+              return flow.pipeline.flatMap(function (group) {
+                return group.stages.flatMap(function (stage) {
+                  return stage.jobs.flatMap(function (job) {
+                    return job.output.map(function (output) {
+                      var pipelineName = flowSources[sourceIndex].data.pipelineName;
+                      return _extends({}, output, {
+                        displayName: pipelineName + "." + output.displayName,
+                        jobIdentifier: job.identifier
+                      });
+                    });
+                  });
+                });
+              });
+            } catch (e) {
+              return [];
+            }
+          }));
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _getFlowSorucesOutputs.apply(this, arguments);
+}

package/es/components/common/teambition/flow-engine/globalContext.d.ts

@@ -0,0 +1,5 @@
+export declare const GLOBAL_CONTEXT: {
+    appstackPath: string;
+    appName: any;
+    getFeature: any;
+};

package/es/components/common/teambition/flow-engine/globalContext.js

@@ -0,0 +1,7 @@
+import { getFeature } from "../../../../utils";
+export var GLOBAL_CONTEXT = {
+  // todo 公有云？
+  appstackPath: window.location.origin + "/appstack",
+  appName: window['__appstackAppName'],
+  getFeature: getFeature
+};

package/es/components/common/teambition/flow-engine/index.scss

@@ -0,0 +1,190 @@
+.flow-engine-job {
+  &--hidden {
+    display: none;
+  }
+  .template-container {
+    &--hidden {
+      display: none;
+    }
+    &--inline {
+      .next-form-item-label {
+        display: none;
+      }
+      .text, .hint-icon {
+        display: block !important;
+      }
+      .next-form-item-control {
+        display: flex;
+        align-items: center;
+        .text {
+          margin-left: 6px;
+        }
+        .next-checkbox-wrapper {
+          display: flex;
+          line-height: unset !important;
+        }
+      }
+    }
+    &--block {
+      .text, .hint-icon.inline {
+        display: none;
+      }
+    }
+    &__creatable-button {
+      position: absolute;
+      right: 0;
+    }
+    &__select {
+      &.service-connection-pkgs.service-connection-pkgs {
+        .connection-layout-header {
+          border: 1px solid var(--color-brand3-2, #e9edf0);
+        }
+        .next-form-item-label {
+          display: none;
+        }
+        .next-form-item-help {
+          position: absolute;
+          left: 50px;
+        }
+        margin-bottom: 20px;
+      }
+      .next-input-control {
+        .next-icon-loading {
+          padding: 0 !important;
+        }
+      }
+    }
+
+    &--border-left {
+      border-left: 1px solid var(--color-brand3-2, #e9edf0);
+      padding-left: 14px;
+      position: relative;
+      &::before {
+        content: '';
+        position: absolute;
+        left: -1px;
+        top: -20px;
+        height: 20px;
+        width: 1px;
+        background: var(--color-brand3-2, #e9edf0);
+      }
+    }
+
+    &--border-right {
+      border-right: 1px solid var(--color-brand3-2, #e9edf0);
+      padding-right: 14px;
+      position: relative;
+      &::after {
+        content: '';
+        position: absolute;
+        right: -1px;
+        top: -20px;
+        height: 20px;
+        width: 1px;
+        background: var(--color-brand3-2, #e9edf0);
+      }
+    }
+
+    &--border-bottom {
+      border-bottom: 1px solid var(--color-brand3-2, #e9edf0);
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
+      padding-bottom: 14px;
+    }
+  }
+  .next-form {
+    .next-form-item-label {
+      padding-right: 0 !important;
+      width: 100%;
+      text-align: left;
+      label {
+        color: var(--color-text1-4, #292929);
+        font-weight: 500;
+      }
+    }
+    .next-form-item-control {
+      .next-color-tag {
+        margin: 0 8px 4px 0;
+      }
+      .desc {
+        color: var(--color-text1-7, #8b8b8b);
+        margin-bottom: 16px;
+      }
+    }
+    .template-group-label {
+      margin: 24px 0 8px 0;
+      padding-bottom: 8px;
+      border-bottom: 1px solid var(--color-brand3-1, #f2f5f7);
+      font-weight: 500;
+      color: var(--color-text1-4, #292929);
+      .config-edit-tips {
+        font-weight: normal;
+        color: #ffa941;
+        position: absolute;
+        right: 0;
+      }
+    }
+    .template-group-item {
+      padding: 0 14px;
+      .next-form-item-label {
+        label {
+          font-weight: 400;
+        }
+      }
+    }
+  }
+}
+
+.template-label-container {
+  display: inline-flex !important;
+  align-items: center;
+  .template-container-create-btn {
+    position: absolute;
+    right: 0;
+  }
+  .next-btn.next-btn-primary {
+    color: var(--color-brand1-6, #1b9aee) !important;
+    &:disabled {
+      color: var(--color-fill1-3, #e8e8e8) !important;
+    }
+  }
+  .template-container-link-btn {
+    margin-left: 3px;
+  }
+}
+
+
+.hint-icon {
+  display: inline;
+  color: var(--color-text1-7, #8b8b8b);
+  margin-left: 8px;
+  cursor: pointer;
+  &-btn {
+    min-width: 20px !important;
+    position: absolute;
+    right: 0;
+  }
+}
+
+.engine-help-link {
+  color: var(--color-brand1-4, #68bbf2) !important;
+  text-decoration: none !important;
+  size: 14px;
+}
+
+.formFieldHint a {
+  text-decoration: none !important;
+  color: var(--color-brand1-4, #68bbf2) !important;
+}
+
+.padding-left20 {
+  padding-left: 20px;
+}
+
+.marginBottom5 {
+  margin-bottom: 5px !important;
+}
+
+.remove-plugin-popup-container {
+  display: block !important;
+}

package/es/components/common/teambition/flow-engine/job.d.ts

@@ -0,0 +1,26 @@
+import { Component } from 'react';
+import './index.scss';
+export declare const getAllSteps: () => Promise<any>;
+/**
+ * @extends React.Component<JobProps, any>
+ */
+declare class Job extends Component {
+    constructor(props: any);
+    componentDidMount(): void;
+    shouldComponentUpdate(nextProps: any): boolean;
+    onTemplateChange: (paramName: any, v: any, outputs?: any[]) => void;
+    /**
+     * 流水线名称修改
+     */
+    onNameChange: (displayName: any) => void;
+    onChange: (job: any) => void;
+    getComponentInfo: (item: any) => void;
+    /**
+     * 如果组件使用最新版本 （useLatestComponentVersion），那么填充新增的参数默认值
+     * 解决：appstack 公有云启用了 useLatestComponentVersion，用户编辑时需要填写执行组件新的参数
+     */
+    checkComponentUpdate: () => void;
+    renderContent: (isBatchUpdateTemplate: any) => any;
+    render(): JSX.Element;
+}
+export default Job;