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

package/es/components/common/teambition/pipeline-instance/folding/index.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Balloon } from '@teamix/ui';
+import { YunxiaoIcon } from '@alife/devops-ui';
+import intl from "../../../../../locale";
+import cx from 'classnames';
+import "./index.scss";
+var Tooltip = Balloon.Tooltip;
+var prefix = 'folding';
+var Folding = function Folding(_ref) {
+  var _cx, _cx2;
+  var children = _ref.children,
+    visible = _ref.visible,
+    setVisible = _ref.setVisible;
+  var iconClassName = cx((_cx = {}, _cx[prefix + "-btn-icon"] = true, _cx.open = visible, _cx));
+  var contentClassName = cx((_cx2 = {}, _cx2[prefix + "-content"] = true, _cx2.open = visible, _cx2));
+  var trigger = /*#__PURE__*/React.createElement(YunxiaoIcon, {
+    style: {
+      fontSize: 25
+    },
+    type: "trilateral-down-fill",
+    className: iconClassName
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: prefix
+  }, /*#__PURE__*/React.createElement("div", {
+    className: contentClassName
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: prefix + "-btn",
+    onClick: function onClick() {
+      return setVisible(function (v) {
+        return !v;
+      });
+    }
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    align: "t",
+    trigger: trigger
+  }, visible ? intl.get({
+    id: 'rdc-tb-cd-assets.pipeline-instance.folding.PutAway',
+    defaultMessage: '收起'
+  }) : intl.get({
+    id: 'rdc-tb-cd-assets.pipeline-instance.folding.Expand',
+    defaultMessage: '展开'
+  }))));
+};
+export default Folding;

package/es/components/common/teambition/pipeline-instance/folding/index.scss

@@ -0,0 +1,43 @@
+$prefix: folding;
+
+.#{$prefix} {
+  width: 100%;
+  &-btn {
+    text-align: center;
+    position: relative;
+    height: 10px;
+    border-top: 1px solid var(--color-brand3-2, #e9edf0);
+    cursor: pointer;
+    &-icon {
+      color: var(--color-line1-5, #adadad);
+      position: absolute;
+      top: -25px;
+      transform: rotate(0deg);
+      transition: 0.3s;
+      &.open {
+        transform: rotate(-180deg);
+      }
+    }
+    &:hover &-icon {
+      color: var(--color-brand1-6, #1b9aee);
+    }
+    &:hover {
+      border-color: var(--color-brand1-1, #f0f9ff);
+    }
+  }
+  &-content {
+    position: relative;
+    top: -20px;
+    overflow: hidden;
+    height: 0;
+    opacity: 0;
+    transition: opacity .2s cubic-bezier(.23,1,.32,1), top .2s cubic-bezier(.23,1,.32,1);
+    &.open {
+      height: auto;
+      opacity: 1;
+      display: block;
+      padding: 0;
+      top: 0;
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './index.scss';
+declare const PipelineInstance: (props: any) => JSX.Element;
+export default PipelineInstance;

package/es/components/common/teambition/pipeline-instance/index.js

@@ -0,0 +1,397 @@
+import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { useEffect, useState, Fragment } from 'react';
+import { Button, Balloon, Message, Collapse } from '@teamix/ui';
+import { YunxiaoIcon } from '@alife/devops-ui';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import utils, { dayFormat } from "../../../../utils";
+import exceed from "../../../../utils/apimap";
+import { StatusAbleLabel } from "../instance-status-icon";
+import IconFont from "../icon-font";
+import InstanceFlow from "../instance-flow";
+import Duration from "../duration";
+import PipelinParams from "../pipeline-params/index";
+import Source from "./source";
+import ReleaseInfoDialog from "../release-info-dialog";
+import Packages from "./package/packages";
+import intl from "../../../../locale";
+import { ENV, Perf } from '@alife/yunxiao-common';
+import "./index.scss";
+import InstanceTriggerInfo from "../instance-trigger-info";
+import Link from "../help-link";
+import helpLink from "../../../../utils/helplink";
+import { JsonParseWithCatch } from "../../../../utils";
+dayjs.extend(relativeTime);
+// 定时器
+var interval;
+var timer;
+var PREFIX = 'pipeline-instance';
+var Tooltip = Balloon.Tooltip;
+var FINISH_STATUS = ['SUCCESS', 'FINISH', 'CANCELED', 'SKIP', 'FAIL'];
+function fixDataFlow(branchRepoInfo, sourcesObj) {
+  var branchRepoInfoObj = JSON.parse(branchRepoInfo);
+  sourcesObj.forEach(function (ele) {
+    var matchedBranch = branchRepoInfoObj.find(function (it) {
+      return it.sign === ele.sign;
+    });
+    if (matchedBranch && !ele.data.aoneFlow) {
+      if (matchedBranch.featureBranchs) {
+        matchedBranch.featureBranchs.forEach(
+        // eslint-disable-next-line no-return-assign
+        function (it) {
+          return it.status = 'INTEGRATING';
+        });
+      }
+      ele.data.branch = '--';
+      ele.data.aoneFlow = JSON.stringify(matchedBranch);
+    }
+  });
+}
+var PipelineInstance = function PipelineInstance(props) {
+  var pipelineId = props.pipelineId,
+    disabled = props.disabled,
+    _props$isAdmin = props.isAdmin,
+    isAdmin = _props$isAdmin === void 0 ? false : _props$isAdmin,
+    _props$isSystemPipeli = props.isSystemPipeline,
+    isSystemPipeline = _props$isSystemPipeli === void 0 ? false : _props$isSystemPipeli;
+  var _useState = useState(props.instance || {}),
+    instance = _useState[0],
+    setInstance = _useState[1];
+  var _useState2 = useState(false),
+    cancelRequesting = _useState2[0],
+    setCancelRequesting = _useState2[1];
+  var _useState3 = useState([]),
+    pipelineVgList = _useState3[0],
+    setPipelineVgList = _useState3[1];
+  var _useState4 = useState(false),
+    releaseInfoVisible = _useState4[0],
+    setReleaseInfoVisible = _useState4[1];
+  var _useState5 = useState({}),
+    releaseInfo = _useState5[0],
+    setReleaseInfo = _useState5[1];
+
+  // only enable for rdc-rdc account for online test
+  var enablePackages = true;
+  if (!instance.flowInstVo) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "empty-message"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "message"
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.teambition.pipeline-instance.DataLoading',
+      defaultMessage: '数据加载...'
+    })));
+  }
+  var _instance$flowInstVo$ = instance.flowInstVo.inputParams,
+    inputParams = _instance$flowInstVo$ === void 0 ? '{"sources": "[]"}' : _instance$flowInstVo$;
+  var _instance$packages = instance.packages,
+    packages = _instance$packages === void 0 ? [] : _instance$packages,
+    context = instance.context;
+  var settings = instance.pipelineVo.pipelineConfigVo.settings;
+  var _JSON$parse = JSON.parse(settings || '{}'),
+    globalParams = _JSON$parse.globalParams;
+  var params = JSON.parse(inputParams);
+  var _params$sources = params.sources,
+    sources = _params$sources === void 0 ? '[]' : _params$sources,
+    _params$branchRepoInf = params.branchRepoInfo,
+    branchRepoInfo = _params$branchRepoInf === void 0 ? '[]' : _params$branchRepoInf;
+  var contextObj = JSON.parse(context || '{}') || {};
+  if (globalParams) {
+    globalParams.forEach(function (globalParam) {
+      if (typeof params[globalParam.key] !== 'undefined') {
+        globalParam.value = params[globalParam.key];
+      }
+    });
+  }
+  var sourcesObj = sources.map ? sources : JSON.parse(sources);
+  fixDataFlow(branchRepoInfo, sourcesObj);
+  var listPipelineVariableGroup = function listPipelineVariableGroup() {
+    exceed.fetch({
+      api: 'Pipeline.variable.group.list',
+      data: {
+        pipelineId: pipelineId,
+        withDetails: true
+      }
+    }).then(function (res) {
+      if (res.successful) {
+        setPipelineVgList(res.object || []);
+      }
+    });
+  };
+  useEffect(function () {
+    setInstance(props.instance);
+  }, [props.instance]);
+  useEffect(function () {
+    listPipelineVariableGroup();
+  }, []);
+  var reloadPipeline = function reloadPipeline() {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    if (window.sessionHasExpired) {
+      return;
+    }
+
+    // 避免大量消息导致请求阻塞
+    timer = window.setTimeout(function () {
+      exceed.fetch({
+        api: 'Pipeline.get.instance.by.id',
+        params: {
+          pipelineId: pipelineId,
+          id: instance.flowInstVo.id
+        }
+      }).then(function (res) {
+        if (res.successful && res.object) {
+          setInstance(res.object);
+        }
+      })["catch"](function (err) {
+        // 登录失效或其他接口异常情况时，清空定时器
+        if (interval) clearInterval(interval);
+
+        // eslint-disable-next-line no-console
+        console.error(err);
+      });
+    }, 500);
+  };
+  var getGlobalParams = function getGlobalParams() {
+    return /*#__PURE__*/React.createElement(Fragment, null, (globalParams || []).length ? /*#__PURE__*/React.createElement(PipelinParams, {
+      titles: [intl.get({
+        id: 'rdc-tb-cd-assets.teambition.pipeline-instance.Parameter',
+        defaultMessage: '变量名称'
+      }), intl.get({
+        id: 'rdc-tb-cd-assets.teambition.pipeline-instance.RunValue',
+        defaultMessage: '运行值'
+      })],
+      dataSource: globalParams
+    }) : /*#__PURE__*/React.createElement("div", {
+      className: "div-empty"
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.teambition.pipeline-instance.NoCommonVariableIsSet',
+      defaultMessage: '暂未设置通用变量'
+    })), /*#__PURE__*/React.createElement(PipelinParams, {
+      titles: [intl.get({
+        id: 'rdc-tb-cd-assets.teambition.pipeline-instance.VariableGroupName',
+        defaultMessage: '变量组名称'
+      }), intl.get({
+        id: 'rdc-tb-cd-assets.teambition.pipeline-instance.NumberOfVariablesIncluded',
+        defaultMessage: '包含变量数'
+      })],
+      dataSource: pipelineVgList,
+      type: "varGroup"
+    }));
+  };
+  useEffect(function () {
+    if (window.socket && instance.flowInstVo.id) {
+      window.socket.on("flowInst-" + instance.flowInstVo.id, function () {
+        reloadPipeline();
+      });
+      if (interval) clearInterval(interval);
+      if (!FINISH_STATUS.includes(instance.status)) {
+        interval = setInterval(function () {
+          reloadPipeline();
+        }, 10000);
+      }
+    }
+    return function () {
+      clearInterval(interval);
+      window.socket && window.socket.removeAllListeners("flowInst-" + instance.flowInstVo.id);
+    };
+  }, [instance]);
+  var cancelPipeline = function cancelPipeline() {
+    setCancelRequesting(true);
+    exceed.fetch({
+      api: 'Pipeline.cancel',
+      params: {
+        pipelineId: pipelineId,
+        flowInstId: instance.id
+      }
+    }).then(function (res) {
+      if (res.successful) {
+        Message.success({
+          title: intl.get({
+            id: 'rdc-tb-cd-assets.teambition.pipeline-instance.Canceled',
+            defaultMessage: '已取消'
+          })
+        });
+        setInstance(_extends({}, instance, {
+          status: 'CANCELED'
+        }));
+      } else {
+        Message.error({
+          title: res.errorMsg
+        });
+      }
+      setCancelRequesting(false);
+    })["catch"](function () {
+      Message.error({
+        title: intl.get({
+          id: 'rdc-tb-cd-assets.teambition.pipeline-instance.CancelFailed',
+          defaultMessage: '取消失败'
+        })
+      });
+    });
+  };
+  var sourcesElement = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: PREFIX + "__sidebar__body"
+  }, sourcesObj.length === 0 && /*#__PURE__*/React.createElement("div", {
+    className: "div-empty-running"
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.teambition.pipeline-instance.NotSetYet',
+    defaultMessage: '暂未设置'
+  })), /*#__PURE__*/React.createElement("div", {
+    className: PREFIX + "__sidebar__body " + PREFIX + "__sidebar__body__source collaspe-div"
+  }, sourcesObj.map(function (item) {
+    var _item$data = item.data,
+      _item$data$repo = _item$data.repo,
+      repo = _item$data$repo === void 0 ? '' : _item$data$repo,
+      commitMsg = _item$data.commitMsg;
+    var _JsonParseWithCatch = JsonParseWithCatch(commitMsg, [{}]),
+      commit = _JsonParseWithCatch[0];
+    var trigger = /*#__PURE__*/React.createElement(Source, {
+      item: item,
+      onReleaseInfo: function onReleaseInfo(info) {
+        setReleaseInfo(info);
+        setReleaseInfoVisible(true);
+      }
+    });
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      trigger: trigger,
+      align: "r",
+      type: "primary",
+      key: item.name,
+      popupProps: {
+        delay: 400
+      }
+    }, /*#__PURE__*/React.createElement("ul", {
+      className: "commit-info"
+    }, /*#__PURE__*/React.createElement("li", {
+      className: "commit-info-repo"
+    }, repo), commit.commitId && /*#__PURE__*/React.createElement("li", null, commit.commitAuthor, intl.get({
+      id: 'rdc-tb-cd-assets.teambition.pipeline-instance.Submitted',
+      defaultMessage: '提交于'
+    }), ' ', dayjs(commit.commitTime).fromNow(), " ", commit.commitId), commit.commitId && /*#__PURE__*/React.createElement("li", null, decodeURIComponent(commit.commitMsg))));
+  }))));
+  var collapseDataSources = function collapseDataSources() {
+    var _sources = {
+      title: intl.get({
+        id: 'rdc-tb-cd-assets.teambition.pipeline-instance.SourceSourcesobjlength',
+        defaultMessage: '源({sourcesObjLength})'
+      }, {
+        sourcesObjLength: (sourcesObj || []).length
+      }),
+      content: sourcesElement
+    };
+    var _params = {
+      title: intl.get({
+        id: 'rdc-tb-cd-assets.teambition.pipeline-instance.VariableGlobalparamslanting',
+        defaultMessage: '变量({globalParamsLength})'
+      }, {
+        globalParamsLength: (globalParams || []).length
+      }),
+      content: getGlobalParams()
+    };
+    return [(sourcesObj || []).length ? _sources : false, (globalParams || []).length || (pipelineVgList || []).length ? _params : false].filter(Boolean);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: PREFIX
+  }, /*#__PURE__*/React.createElement("div", {
+    className: PREFIX + "__sidebar"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: PREFIX + "__sidebar__header"
+  }, /*#__PURE__*/React.createElement("span", {
+    onDoubleClick: function onDoubleClick() {
+      return console.log(instance);
+    }
+  }, "#", instance.instNumber), /*#__PURE__*/React.createElement(StatusAbleLabel, {
+    withIcon: true,
+    status: instance.status,
+    resultStatus: instance.resultStatus
+  }), !FINISH_STATUS.includes(instance.status) && /*#__PURE__*/React.createElement(Button, {
+    onClick: cancelPipeline,
+    disabled: disabled,
+    loading: cancelRequesting
+  }, !cancelRequesting && /*#__PURE__*/React.createElement(IconFont, {
+    type: "stop-fill"
+  }), intl.get({
+    id: 'rdc-tb-cd-assets.teambition.pipeline-instance.Termination',
+    defaultMessage: '终止'
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: PREFIX + "__sidebar__body"
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: PREFIX + "__sidebar__footer"
+  }, /*#__PURE__*/React.createElement("li", {
+    className: "trigger-wrap"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: PREFIX + "__trigger__label"
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.teambition.pipeline-instance.triggerInfo',
+    defaultMessage: '触发信息'
+  })), /*#__PURE__*/React.createElement(InstanceTriggerInfo, {
+    needJump: true,
+    triggerInfo: instance.triggerInfoVo
+  })), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("label", null, intl.get({
+    id: 'rdc-tb-cd-assets.teambition.pipeline-instance.StartTime',
+    defaultMessage: '开始时间'
+  })), /*#__PURE__*/React.createElement("span", null, dayFormat(instance.flowInstVo.gmtCreate, {
+    zh_CN: 'YYYY-MM-DD HH:mm:ss',
+    en_US: 'MMM, DD, YYYY, HH:mm:ss'
+  }))), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("label", null, intl.get({
+    id: 'rdc-tb-cd-assets.teambition.pipeline-instance.Duration',
+    defaultMessage: '持续时间'
+  }), /*#__PURE__*/React.createElement(Tooltip, {
+    trigger: /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "question-line",
+      style: {
+        cursor: 'pointer',
+        color: 'var(--color-text1-7, #8b8b8b)',
+        marginLeft: 6
+      }
+    }),
+    align: "t"
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.teambition.pipeline-instance.TheIntervalBetweenTheStart',
+    defaultMessage: '流水线从开始运行到运行结束的间隔时长'
+  }), ENV !== 'vpc' && /*#__PURE__*/React.createElement(React.Fragment, null, intl.get({
+    id: 'rdc-tb-cd-assets.teambition.pipeline-instance.NotTheActualBillingTime',
+    defaultMessage: '，并非流水线实际的计费耗时，流水线计费耗时规则'
+  }), ' ', /*#__PURE__*/React.createElement(Link, {
+    href: helpLink('concurrency_and_build_time')
+  })))), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Duration, {
+    startedAt: instance.flowInstVo.gmtCreate,
+    endedAt: utils.isFinished(instance.flowInstVo.status, instance.flowInstVo.runningStatus) ? instance.flowInstVo.gmtModified : null
+  }))), enablePackages && /*#__PURE__*/React.createElement(Packages, {
+    packages: packages
+  }), contextObj.FLOW_INST_RUNNING_COMMENT && /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("label", null, intl.get({
+    id: 'rdc-tb-cd-assets.teambition.pipeline-instance.Description',
+    defaultMessage: '运行备注'
+  })), /*#__PURE__*/React.createElement(Tooltip, {
+    align: "t",
+    trigger: /*#__PURE__*/React.createElement("span", {
+      className: PREFIX + "__sidebar__footer__note"
+    }, contextObj.FLOW_INST_RUNNING_COMMENT)
+  }, contextObj.FLOW_INST_RUNNING_COMMENT)))), /*#__PURE__*/React.createElement("div", {
+    className: PREFIX + "__sidebar__collapse"
+  }, /*#__PURE__*/React.createElement(Collapse, {
+    ltr: "1",
+    defaultExpandedKeys: ['sources', 'params'],
+    dataSource: collapseDataSources(),
+    className: "special-collapse"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: PREFIX + "__content " + (isSystemPipeline ? 'system-pipeline' : '')
+  }, /*#__PURE__*/React.createElement(InstanceFlow, {
+    instance: instance,
+    pipelineId: pipelineId,
+    isAdmin: isAdmin
+  })), !!(releaseInfoVisible && Object.keys(releaseInfo).length) && /*#__PURE__*/React.createElement(ReleaseInfoDialog, _extends({}, releaseInfo, {
+    title: intl.get({
+      id: 'rdc-tb-cd-assets.teambition.pipeline-instance.BranchInformation',
+      defaultMessage: '分支信息'
+    }),
+    visible: releaseInfoVisible,
+    onClose: function onClose() {
+      return setReleaseInfoVisible(false);
+    }
+  })), /*#__PURE__*/React.createElement(Perf, null));
+};
+export default PipelineInstance;