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

package/es/components/common/teambition/pipeline-source/artifact-source/acr-webhook.js

@@ -0,0 +1,174 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useEffect, useState } from 'react';
+import { Form, Switch, Input, Balloon, Message, Checkbox } from '@teamix/ui';
+import { YunxiaoIcon } from '@alife/devops-ui';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { tireToast } from "../../../../../utils";
+import exceed from "../../../../../utils/apimap";
+import { helpLinkIfAvailable } from "../../../../../utils/helplink";
+import "../index.scss";
+import "./index.scss";
+import intl from "../../../../../locale";
+var Tooltip = Balloon.Tooltip;
+var FormItem = Form.Item;
+var tooltip = function tooltip(text, trigger) {
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    align: "tl",
+    trigger: trigger,
+    popupProps: {
+      display: 400
+    }
+  }, text);
+};
+var AcrWebhook = function AcrWebhook(_ref) {
+  var field = _ref.field,
+    webhookKey = _ref.webhookKey;
+  var _useState = useState(),
+    webhookHost = _useState[0],
+    setWebhooHost = _useState[1];
+  useEffect(function () {
+    if (!field.getValue('trigger')) {
+      return;
+    }
+    exceed.fetch({
+      api: 'scm.webhook.host'
+    }).then(function (res) {
+      if (res.successful && res.object) {
+        setWebhooHost(res.object);
+        setWebhook(res.object);
+      }
+    });
+  }, [field.getValue('trigger')]);
+  function setWebhook(host) {
+    var webhook = host + "/scm/webhook/" + webhookKey;
+    field.setValue('webhook', webhook);
+  }
+  var init = field.init;
+  var labelWithHint = function labelWithHint(labelText) {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, labelText, tooltip(/*#__PURE__*/React.createElement("span", {
+      className: "webhook-help"
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.pipeline-source.artifact-source.acr-webhook.AddWebhookTriggerSettingsTo',
+      defaultMessage: '请在镜像仓库中添加 Webhook 触发设置'
+    }), ' ', helpLinkIfAvailable('artifact_source_trigger', intl.get({
+      id: 'rdc-tb-cd-assets.pipeline-source.artifact-source.acr-webhook.ViewHelp',
+      defaultMessage: '查看帮助'
+    }))), /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "question-line",
+      style: {
+        color: 'var(--color-text1-7, #8b8b8b)',
+        marginLeft: 5,
+        cursor: 'pointer'
+      }
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "extra",
+      style: {
+        marginTop: -26
+      }
+    }, /*#__PURE__*/React.createElement(Switch, _extends({
+      required: false,
+      checked: field.getValue('trigger')
+    }, init('trigger', {
+      props: {
+        onChange: function onChange(val) {
+          field.setValue('trigger', val);
+          if (val) {
+            if (!field.getValue('webhook')) {
+              var webhook = webhookHost + "/scm/webhook/" + webhookKey;
+              field.setValue('webhook', webhook);
+            }
+          } else {
+            field.setValue('webhook', '');
+          }
+        }
+      }
+    })))));
+  };
+  var trigger = field.getValue('trigger');
+  var getMessage = function getMessage() {
+    return /*#__PURE__*/React.createElement(FormItem, {
+      className: "next-top next-inline",
+      label: labelWithHint(intl.get({
+        id: 'rdc-tb-cd-assets.pipeline-source.artifact-source.acr-webhook.EnablePinyuanTrigger',
+        defaultMessage: '开启制品源触发'
+      }))
+    }, trigger && /*#__PURE__*/React.createElement(Message, {
+      shape: "inline",
+      title: /*#__PURE__*/React.createElement(React.Fragment, null, intl.get({
+        id: 'rdc-tb-cd-assets.pipeline-source.artifact-source.acr-webhook.AddWebhookTriggerSettingsTo',
+        defaultMessage: '请在镜像仓库中添加 Webhook 触发设置'
+      }), ' ', helpLinkIfAvailable('artifact_source_trigger', intl.get({
+        id: 'rdc-tb-cd-assets.pipeline-source.artifact-source.acr-webhook.ViewHelp',
+        defaultMessage: '查看帮助'
+      }))),
+      type: "warning",
+      style: {
+        marginTop: 8
+      }
+    }));
+  };
+  var getTrigger = function getTrigger() {
+    if (!trigger) return null;
+    return /*#__PURE__*/React.createElement(FormItem, null, /*#__PURE__*/React.createElement("div", {
+      className: "item-layout"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "before"
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.pipeline-source.artifact-source.acr-webhook.TriggerEvent',
+      defaultMessage: '触发事件'
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "content",
+      style: {
+        marginLeft: 15
+      }
+    }, /*#__PURE__*/React.createElement(Checkbox.Group, _extends({}, init('triggerEvents', {
+      initValue: []
+    }), {
+      itemDirection: "hoz"
+    }), /*#__PURE__*/React.createElement(Checkbox, {
+      value: "pushCompleted"
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.pipeline-source.artifact-source.acr-webhook.ImagePushCompleted',
+      defaultMessage: '镜像推送完成'
+    })), /*#__PURE__*/React.createElement(Checkbox, {
+      value: "scanCompleted"
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.pipeline-source.artifact-source.acr-webhook.ImageScanCompleted',
+      defaultMessage: '镜像扫描完成'
+    }))))));
+  };
+  var getWebhook = function getWebhook() {
+    if (!trigger) return null;
+    return /*#__PURE__*/React.createElement(FormItem, null, /*#__PURE__*/React.createElement("div", {
+      className: "item-layout"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "before"
+    }, "Webhook"), /*#__PURE__*/React.createElement("div", {
+      className: "content"
+    }, /*#__PURE__*/React.createElement(Input, {
+      readOnly: true,
+      disabled: true,
+      className: "webhook-input",
+      onClick: function onClick(event) {
+        return event.target.select();
+      },
+      value: field.getValue('webhook')
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "after"
+    }, /*#__PURE__*/React.createElement(CopyToClipboard, {
+      text: field.getValue('webhook'),
+      onCopy: function onCopy() {
+        return tireToast({
+          title: intl.get({
+            id: 'rdc-tb-cd-assets.pipeline-source.artifact-source.acr-webhook.SuccessfullyCopiedToTheClipboard',
+            defaultMessage: '成功复制到剪贴板'
+          })
+        }, 'copyWebhook', 'success', '500');
+      }
+    }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "copy-line"
+    })))));
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, getMessage(), getTrigger(), getWebhook());
+};
+export default AcrWebhook;

package/es/components/common/teambition/pipeline-source/artifact-source/acr.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Field } from '@teamix/ui';
+interface IProps {
+    field: Field;
+    [k: string]: any;
+}
+export default function AcrSource(props: IProps): JSX.Element;
+export {};

package/es/components/common/teambition/pipeline-source/artifact-source/acr.js

@@ -0,0 +1,381 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useEffect, useState } from 'react';
+import exceed from "../../../../../utils/apimap";
+import { AliyunServiceConnectionNew } from "../../service-connection/aliyun/index";
+import { Form, Select } from '@teamix/ui';
+import utils from "../../../../../utils";
+import { getLabel } from "./utils";
+import { ALIYUN_REGIONS } from "../../../../../utils/aliyunRegions";
+import BranchesFilter from "../BranchesFilter";
+import AcrWebhook from "./acr-webhook";
+import { debounce } from 'lodash';
+import AcrSign from "./acr-sign";
+import intl from "../../../../../locale";
+var deps = [{
+  key: 'connection',
+  dependsOn: []
+}, {
+  key: 'region',
+  dependsOn: ['connection']
+}, {
+  key: 'instanceName',
+  dependsOn: ['region']
+}, {
+  key: 'namespace',
+  dependsOn: ['instanceName']
+}, {
+  key: 'repoName',
+  dependsOn: ['namespace']
+}, {
+  key: 'version',
+  dependsOn: ['repoName']
+}];
+export default function AcrSource(props) {
+  var sources = props.sources,
+    field = props.field,
+    update = props.update,
+    webhookKey = props.webhookKey;
+  var init = field.init;
+  var _useState = useState([]),
+    instanceNameDatasource = _useState[0],
+    setInstanceNameDatasource = _useState[1];
+  var _useState2 = useState([]),
+    namespaceDatasource = _useState2[0],
+    setNamespaceDatasource = _useState2[1];
+  var _useState3 = useState([]),
+    repoDatasource = _useState3[0],
+    setRepoDatasource = _useState3[1];
+  var _useState4 = useState([]),
+    versionDatasource = _useState4[0],
+    setVersionDatasource = _useState4[1];
+  var checkDepsMeet = useCallback(function (key) {
+    function checkRecursively(k) {
+      // 如果有依赖，每个值都要求非空
+      var dependKeys = deps.find(function (node) {
+        return node.key === k;
+      }).dependsOn;
+      return dependKeys.every(function (depKey) {
+        var hasValue = !!field.getValue(depKey);
+        return hasValue && checkRecursively(depKey);
+      });
+    }
+    var result = checkRecursively(key);
+    // console.log('check', key, ': ', result);
+    return result;
+  }, [field]);
+  var getInstanceList = function getInstanceList() {
+    var _ref = field.getValues(),
+      scId = _ref.connection,
+      region = _ref.region;
+    if (checkDepsMeet('instanceName')) {
+      return exceed.fetch({
+        api: 'acr.instance.list',
+        data: {
+          scId: scId,
+          region: region
+        }
+      }).then(function (resp) {
+        var data = resp.object.map(function (v) {
+          return {
+            label: v.InstanceName,
+            value: v.InstanceName
+          };
+        });
+        setInstanceNameDatasource(data);
+      });
+    }
+  };
+  var getNamespaceList = function getNamespaceList() {
+    var _ref2 = field.getValues(),
+      scId = _ref2.connection,
+      region = _ref2.region,
+      instanceName = _ref2.instanceName;
+    if (checkDepsMeet('namespace')) {
+      return exceed.fetch({
+        api: 'acr.namespace.list',
+        data: {
+          scId: scId,
+          region: region,
+          instanceName: instanceName
+        }
+      }).then(function (resp) {
+        var data = resp.object.map(function (v) {
+          return {
+            label: v.NamespaceName,
+            value: v.NamespaceName
+          };
+        });
+        setNamespaceDatasource(data);
+      });
+    }
+  };
+  var getRepoList = function getRepoList() {
+    var _ref3 = field.getValues(),
+      scId = _ref3.connection,
+      region = _ref3.region,
+      instanceName = _ref3.instanceName,
+      namespace = _ref3.namespace;
+    if (checkDepsMeet('repoName')) {
+      return exceed.fetch({
+        api: 'acr.repositories.list',
+        data: {
+          scId: scId,
+          region: region,
+          instanceName: instanceName,
+          namespace: namespace
+        }
+      }).then(function (resp) {
+        var data = resp.object.map(function (v) {
+          return {
+            label: v.RepoName,
+            value: v.RepoName
+          };
+        });
+        setRepoDatasource(data);
+      });
+    }
+  };
+  var getVersionList = useCallback(function (search) {
+    if (search === void 0) {
+      search = '';
+    }
+    var _ref4 = field.getValues(),
+      scId = _ref4.connection,
+      region = _ref4.region,
+      instanceName = _ref4.instanceName,
+      namespace = _ref4.namespace,
+      repoName = _ref4.repoName;
+    if (checkDepsMeet('version')) {
+      return exceed.fetch({
+        api: 'acr.repoTags.list',
+        data: {
+          scId: scId,
+          region: region,
+          instanceName: instanceName,
+          namespace: namespace,
+          name: repoName,
+          search: search
+        }
+      }).then(function (resp) {
+        var data = resp.object.map(function (v) {
+          return {
+            label: v.Tag,
+            value: v.Tag
+          };
+        });
+        setVersionDatasource(data);
+      });
+    }
+  }, [checkDepsMeet]);
+  var debouncedVersionSearch = useCallback(debounce(getVersionList, 600), [getVersionList]);
+  useEffect(function () {
+    getInstanceList();
+    getNamespaceList();
+    getRepoList();
+    getVersionList();
+  }, []);
+  return /*#__PURE__*/React.createElement(AliyunServiceConnectionNew, _extends({
+    type: "docker_register_aliyun",
+    field: field,
+    fieldName: "connection"
+  }, init('connection'), {
+    // update={update}
+    // reset={resetRepo}
+    onChangeServiceConnection: function onChangeServiceConnection(id) {
+      field.setValue('connection', id);
+      field.setValues({
+        region: '',
+        instanceName: '',
+        namespace: '',
+        repoName: '',
+        version: ''
+      });
+      getInstanceList();
+      setNamespaceDatasource([]);
+      setRepoDatasource([]);
+      setVersionDatasource([]);
+    },
+    getByUserId: true
+  }), /*#__PURE__*/React.createElement(Form, {
+    field: field,
+    labelAlign: "top"
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.pipeline-source.artifact-source.acr.Region',
+      defaultMessage: '地域'
+    })
+  }, /*#__PURE__*/React.createElement(Select, _extends({}, init('region', {
+    initValue: '',
+    props: {
+      onChange: function onChange() {
+        field.setValues({
+          instanceName: '',
+          namespace: '',
+          repoName: '',
+          version: ''
+        });
+        setInstanceNameDatasource([]);
+        setNamespaceDatasource([]);
+        setRepoDatasource([]);
+        setVersionDatasource([]);
+        getInstanceList();
+      }
+    },
+    rules: [{
+      required: true,
+      message: intl.get({
+        id: 'rdc-tb-cd-assets.pipeline-source.artifact-source.acr.SelectAnAlibabaCloudRegion',
+        defaultMessage: '请选择阿里云地域'
+      })
+    }]
+  }), {
+    autoWidth: true,
+    dataSource: ALIYUN_REGIONS.map(function (item) {
+      return {
+        label: item.regionName,
+        value: item.regionId
+      };
+    })
+  }))), /*#__PURE__*/React.createElement(Form.Item, {
+    label: getLabel(intl.get({
+      id: 'rdc-tb-cd-assets.pipeline-source.artifact-source.acr.EnterpriseInstance',
+      defaultMessage: '企业实例'
+    }), intl.get({
+      id: 'rdc-tb-cd-assets.pipeline-source.artifact-source.acr.OnlyAcrEnterpriseEditionInstances',
+      defaultMessage: '仅支持 ACR 企业版实例'
+    }))
+  }, /*#__PURE__*/React.createElement(Select, _extends({}, init('instanceName', {
+    props: {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onChange: function onChange(repo, _, repoItem) {
+        field.setValues({
+          namespace: '',
+          repoName: '',
+          version: ''
+        });
+        setNamespaceDatasource([]);
+        setRepoDatasource([]);
+        setVersionDatasource([]);
+        getNamespaceList();
+      }
+    },
+    rules: [{
+      required: true,
+      message: intl.get({
+        id: 'rdc-tb-cd-assets.pipeline-source.artifact-source.acr.SelectAnEnterpriseInstance',
+        defaultMessage: '请选择企业实例'
+      })
+    }]
+  }), {
+    onFocus: function onFocus() {
+      getInstanceList();
+    },
+    autoWidth: true,
+    dataSource: instanceNameDatasource
+  }))), /*#__PURE__*/React.createElement(Form.Item, {
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.pipeline-source.artifact-source.acr.Namespace',
+      defaultMessage: '命名空间'
+    })
+  }, /*#__PURE__*/React.createElement(Select, _extends({}, init('namespace', {
+    props: {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onChange: function onChange(repo, _, repoItem) {
+        field.setValues({
+          repoName: '',
+          version: ''
+        });
+        setRepoDatasource([]);
+        setVersionDatasource([]);
+        getRepoList();
+      }
+    },
+    rules: [{
+      required: true,
+      message: intl.get({
+        id: 'rdc-tb-cd-assets.pipeline-source.artifact-source.acr.SelectANamespace',
+        defaultMessage: '请选择命名空间'
+      })
+    }]
+  }), {
+    onFocus: function onFocus() {
+      getNamespaceList();
+    },
+    autoWidth: true,
+    dataSource: namespaceDatasource
+  }))), /*#__PURE__*/React.createElement(Form.Item, {
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.pipeline-source.artifact-source.acr.Warehouse',
+      defaultMessage: '仓库'
+    })
+  }, /*#__PURE__*/React.createElement(Select, _extends({}, init('repoName', {
+    props: {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onChange: function onChange(repo, _, repoItem) {
+        if (repo) {
+          field.setValue('name', repo + "_" + utils.uuid(4));
+        }
+        field.setValues({
+          version: ''
+        });
+        setVersionDatasource([]);
+        getVersionList();
+      }
+    },
+    rules: [{
+      required: true,
+      message: intl.get({
+        id: 'rdc-tb-cd-assets.pipeline-source.artifact-source.acr.SelectARepository',
+        defaultMessage: '请选择仓库'
+      })
+    }]
+  }), {
+    onFocus: function onFocus() {
+      getRepoList();
+    },
+    autoWidth: true,
+    dataSource: repoDatasource
+  }))), /*#__PURE__*/React.createElement(Form.Item, {
+    label: getLabel(intl.get({
+      id: 'rdc-tb-cd-assets.pipeline-source.artifact-source.acr.DefaultVersion',
+      defaultMessage: '默认版本'
+    }), intl.get({
+      id: 'rdc-tb-cd-assets.pipeline-source.artifact-source.acr.TheDefaultVersionIsThe',
+      defaultMessage: '默认版本为流水线自动触发运行时默认使用的镜像版本'
+    }))
+  }, /*#__PURE__*/React.createElement(Select, _extends({}, init('version', {
+    rules: [{
+      required: true,
+      message: intl.get({
+        id: 'rdc-tb-cd-assets.pipeline-source.artifact-source.acr.PleaseSelectAVersion',
+        defaultMessage: '请选择版本'
+      })
+    }]
+  }), {
+    showSearch: true,
+    onSearch: function onSearch(v) {
+      debouncedVersionSearch(v);
+    },
+    filterLocal: false,
+    dataSource: versionDatasource,
+    onFocus: function onFocus() {
+      getVersionList();
+    }
+  }))), /*#__PURE__*/React.createElement(BranchesFilter, {
+    field: field,
+    filedNameToCheck: 'version',
+    regexpFieldName: "versionFilter",
+    enableFieldName: "versionFilterEnable",
+    help: intl.get({
+      id: 'rdc-tb-cd-assets.pipeline-source.artifact-source.acr.OnlyTheVersionNumberThat',
+      defaultMessage: '仅满足过滤规则的版本号可以触发流水线运行，在手工触发、制品源触发、定时触发、Webhook触发各场景均生效'
+    })
+  }), /*#__PURE__*/React.createElement(AcrWebhook, {
+    field: field,
+    webhookKey: webhookKey
+  }), /*#__PURE__*/React.createElement(AcrSign, {
+    update: update,
+    field: field,
+    sources: sources
+  })));
+}

package/es/components/common/teambition/pipeline-source/artifact-source/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { Field } from '@teamix/ui';
+import './index.scss';
+interface IProps {
+    field: Field;
+    update: boolean;
+    [x: string]: any;
+}
+export declare const ArtifactSourceTypes: {
+    packages: string;
+    acr: string;
+};
+export declare const ArtifactTypes: string[];
+export default function ArtifactSource(props: IProps): JSX.Element;
+export {};

package/es/components/common/teambition/pipeline-source/artifact-source/index.js

@@ -0,0 +1,63 @@
+import React, { useEffect } from 'react';
+import PackagesSource from "./packages";
+import { Form } from '@teamix/ui';
+import Image from "../../icon-image";
+import cls from 'classnames';
+import "./index.scss";
+import AcrSource from "./acr";
+import intl from "../../../../../locale";
+import { getFeature } from "../../../../../utils";
+export var ArtifactSourceTypes = {
+  packages: 'packages',
+  acr: 'acr'
+};
+export var ArtifactTypes = [ArtifactSourceTypes.packages, ArtifactSourceTypes.acr];
+var PREFIX = 'code-source-panel';
+var items = [{
+  type: ArtifactSourceTypes.packages,
+  label: 'Packages',
+  img: /*#__PURE__*/React.createElement(Image, {
+    type: 'source_packages'
+  })
+}];
+if (getFeature('artifact.source.acr')) {
+  items.push({
+    type: ArtifactSourceTypes.acr,
+    label: 'ACR',
+    img: /*#__PURE__*/React.createElement(Image, {
+      type: 'source_acr'
+    })
+  });
+}
+export default function ArtifactSource(props) {
+  var _ArtifactSourceTypes$;
+  var field = props.field,
+    update = props.update;
+  var type = field.getValue('type');
+  useEffect(function () {
+    !type && field.setValue('type', ArtifactSourceTypes.packages);
+  }, []);
+  var Component = (_ArtifactSourceTypes$ = {}, _ArtifactSourceTypes$[ArtifactSourceTypes.packages] = PackagesSource, _ArtifactSourceTypes$[ArtifactSourceTypes.acr] = AcrSource, _ArtifactSourceTypes$)[type];
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: PREFIX
+  }, /*#__PURE__*/React.createElement(Form, {
+    labelAlign: "top"
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.pipeline-source.artifact-source.SelectPinyuan',
+      defaultMessage: '选择制品源'
+    })
+  }, items.map(function (v) {
+    var visibile = update ? type === v.type : true;
+    return visibile && /*#__PURE__*/React.createElement("div", {
+      className: cls('scm-card', v.type === type && 'selected'),
+      onClick: function onClick() {
+        if (v.type === type) return;
+        field.reset();
+        field.setValue('type', v.type);
+      }
+    }, v.img, /*#__PURE__*/React.createElement("div", {
+      className: "label"
+    }, v.label));
+  }))), Component && /*#__PURE__*/React.createElement(Component, props)));
+}