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

package/es/components/common/teambition/flow-job-new/index.js

@@ -0,0 +1,732 @@
+import _extends from "@babel/runtime/helpers/extends";
+// /* eslint-disable react/jsx-filename-extension */
+import React, { useState, useEffect, useMemo } from 'react';
+import { Balloon, Message, MenuButton, Divider, Tag } from '@teamix/ui';
+import { YunxiaoIcon, Title, ButtonIcon } from '@alife/devops-ui';
+import Avatar from '@alife/yunxiao-avatar';
+import cx from 'classnames';
+import { every, flatten } from 'lodash-es';
+import Duration from "../duration";
+import { getStatus } from "../instance-status-icon";
+import StatusIcon from "../pipeline-instance-new/status";
+import { buildButtonComponentWrapper } from "../flow-job-btn/cardsMap";
+import componentDisplayText from "./componentDisplayText";
+import intl from "../../../../locale";
+import { useMemberInfo } from "./utils";
+import "./index.scss";
+import styles from "./style.module.scss";
+import cardInner from "./cardInner.module.scss";
+import hackCls from "./hack.module.scss";
+import AnimatedContainer from "../../../PipelineGraph/AnimatedContainer";
+import "./avatar-group/index.scss";
+import { StartPipelineJobRun } from "../../../../utils/api";
+var Tooltip = Balloon.Tooltip;
+var manualApprovePrefix = 'manual-approve-avatar';
+
+// 主要按钮code白名单
+var primaryBtnType = ['SkipPipelineJobRun', 'RetryPipelineJobRun', 'StopPipelineJobRun'];
+var getValidationContent = function getValidationContent(state, memberInfo) {
+  var avatar = memberInfo.length ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      padding: '0 4px'
+    }
+  }, /*#__PURE__*/React.createElement(Avatar.AvatarGroup, {
+    maxCount: 3,
+    hasMoreStyle: "number",
+    dataSource: memberInfo.map(function (v) {
+      return {
+        text: v.name,
+        imgSrc: v.avatarUrl
+      };
+    })
+  })) : null;
+  var map = {
+    waiting: /*#__PURE__*/React.createElement(React.Fragment, null, intl.get({
+      id: 'rdc-tb-cd-assets.teambition.flow-job-new.Wait',
+      defaultMessage: '(等待'
+    }), avatar, intl.get({
+      id: 'rdc-tb-cd-assets.teambition.flow-job-new.Verification',
+      defaultMessage: '验证)'
+    })),
+    init: null,
+    fail: /*#__PURE__*/React.createElement(React.Fragment, null, "(", avatar, Boolean(memberInfo.length) && ' ', intl.get({
+      id: 'rdc-tb-cd-assets.teambition.flow-job-new.Failed',
+      defaultMessage: '未通过)'
+    })),
+    success: /*#__PURE__*/React.createElement(React.Fragment, null, "(", avatar, Boolean(memberInfo.length) && ' ', intl.get({
+      id: 'rdc-tb-cd-assets.teambition.flow-job-new.Pass',
+      defaultMessage: '通过)'
+    }))
+  };
+  return map[state];
+};
+var approveTextMap = {
+  AND: intl.get({
+    id: 'rdc-tb-cd-assets.teambition.flow-job.Countersign',
+    defaultMessage: '会签'
+  }),
+  OR: intl.get({
+    id: 'rdc-tb-cd-assets.teambition.flow-job.CompetitiveSigning',
+    defaultMessage: '或签'
+  })
+};
+/*
+ * 需要禁止cancel按钮的步骤类型
+ */
+var cancelableBlackListStepTypes = ['flow-kubectl-bluegreen-staging', 'flow-kubectl-bluegreen', 'flow-kubectl-batch', 'flow-kubectl-batch-staging', 'flow-asm-bluegreen-staging', 'flow-asm-bluegreen', 'appstack-flow-env-deploy-staging', 'appstack-flow-env-deploy', 'flow-kubectl-ingress-nginx-staging', 'flow-kubectl-ingress-nginx'];
+var skipableBlackListStepTypes = ['git-repo-manager-prepub', 'branch-manager-production'];
+
+/**
+ * 运行阶段切换
+ */
+var FlowSwitch = function FlowSwitch(_ref) {
+  var _cx;
+  var pipelineJobId = _ref.pipelineJobId,
+    pipelineRunId = _ref.pipelineRunId,
+    status = _ref.status,
+    stageInstId = _ref.stageInstId,
+    pipelineId = _ref.pipelineId,
+    _ref$isOld = _ref.isOld,
+    isOld = _ref$isOld === void 0 ? false : _ref$isOld,
+    flowStatus = _ref.flowStatus,
+    onRefresh = _ref.onRefresh;
+  var _useState = useState(false),
+    requesting = _useState[0],
+    setRequesting = _useState[1];
+  var manualSwitch = function manualSwitch() {
+    if (requesting || status === 'SUCCESS' && !isOld) return;
+    setRequesting(true);
+    StartPipelineJobRun({
+      pipelineId: pipelineId,
+      pipelineRunId: pipelineRunId,
+      jobId: pipelineJobId
+    }).then(function (res) {
+      setRequesting(false);
+      if (res) {
+        Message.success({
+          title: intl.get({
+            id: 'rdc-tb-cd-assets.teambition.flow-job.Triggered',
+            defaultMessage: '已触发'
+          })
+        });
+        onRefresh();
+      } else {
+        Message.error({
+          title: intl.get({
+            id: 'rdc-tb-cd-assets.teambition.flow-job.NotTriggered',
+            defaultMessage: '未触发'
+          })
+        });
+      }
+    }).fail(function () {
+      setRequesting(false);
+      Message.error({
+        title: intl.get({
+          id: 'rdc-tb-cd-assets.teambition.flow-job.NotTriggered',
+          defaultMessage: '未触发'
+        })
+      });
+    });
+  };
+  var triggerInfo = {
+    text: '',
+    icon: null
+  };
+  var triggered = ['RUNNING', 'FINISH'].includes(status);
+  if (requesting) {
+    triggerInfo.text = intl.get({
+      id: 'rdc-tb-cd-assets.teambition.flow-job.Triggering',
+      defaultMessage: '触发中'
+    });
+  } else if (triggered && !isOld) {
+    triggerInfo.text = intl.get({
+      id: 'rdc-tb-cd-assets.teambition.flow-job.Triggered',
+      defaultMessage: '已触发'
+    });
+    triggerInfo.icon = /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "true-line",
+      style: {
+        color: 'var(--color-success-5, #23b066)'
+      }
+    });
+  } else {
+    triggerInfo.text = intl.get({
+      id: 'rdc-tb-cd-assets.teambition.flow-job.WaitForManualTriggering',
+      defaultMessage: '等待手动触发'
+    });
+  }
+  var disable = !triggered && status !== 'SWITCH_MANUAL' && !isOld || flowStatus === 'CANCELED';
+  var trigger = /*#__PURE__*/React.createElement(ButtonIcon, {
+    name: "manual-operation-line",
+    disabled: disable,
+    onClick: manualSwitch
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: cx(styles["switch"], (_cx = {}, _cx[styles.disable] = disable, _cx[styles.triggered] = triggered, _cx))
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    align: "t",
+    trigger: triggerInfo.icon || trigger
+  }, triggerInfo.text));
+};
+var containsStep = function containsStep(params, listStepTypes) {
+  if (params === void 0) {
+    params = '{}';
+  }
+  if (listStepTypes === void 0) {
+    listStepTypes = [];
+  }
+  var paramsObj = params.length ? JSON.parse(params) : params;
+  var _paramsObj$steps = paramsObj.steps,
+    steps = _paramsObj$steps === void 0 ? [] : _paramsObj$steps;
+  var disableCancelStep = (steps || []).find(function (s) {
+    return listStepTypes.includes(s.stepType);
+  });
+  return disableCancelStep !== undefined;
+};
+var EXECUTEbtn = ['PassPipelineValidate', 'RefusePipelineValidate', 'RetryPipelineJobRun', 'StopPipelineJobRun', 'SkipPipelineJobRun', 'ExecutePipelineJobAction'];
+
+/**
+ * 运行状态
+ * 任务卡片样式
+ * */
+export var FlowJobCard = function FlowJobCard(_ref2) {
+  var _message, _job$url, _job$actions, _cx2;
+  var job = _ref2.job,
+    flowStatus = _ref2.status,
+    groupIndex = _ref2.groupIndex,
+    stageIndex = _ref2.stageIndex,
+    jobIndex = _ref2.jobIndex,
+    _ref2$isAdmin = _ref2.isAdmin,
+    isAdmin = _ref2$isAdmin === void 0 ? false : _ref2$isAdmin,
+    _ref2$setMore = _ref2.setMore,
+    setMore = _ref2$setMore === void 0 ? function () {} : _ref2$setMore,
+    _ref2$onOpenRuntimeMe = _ref2.onOpenRuntimeMenu,
+    onOpenRuntimeMenu = _ref2$onOpenRuntimeMe === void 0 ? function () {} : _ref2$onOpenRuntimeMe,
+    highlightStatus = _ref2.highlightStatus,
+    pipelineId = _ref2.pipelineId,
+    _ref2$switchManual = _ref2.switchManual,
+    switchManual = _ref2$switchManual === void 0 ? false : _ref2$switchManual,
+    onCardHover = _ref2.onCardHover,
+    onCardLeave = _ref2.onCardLeave,
+    instance = _ref2.instance,
+    onRefresh = _ref2.onRefresh;
+  var status = job.status,
+    resultStatus = job.resultStatus,
+    _job$result = job.result,
+    resultJson = _job$result === void 0 ? '{}' : _job$result,
+    _job$drivenType = job.drivenType,
+    drivenType = _job$drivenType === void 0 ? 'auto' : _job$drivenType,
+    _job$paramsMap = job.paramsMap,
+    paramsMap = _job$paramsMap === void 0 ? '{}' : _job$paramsMap,
+    id = job.id,
+    stageInstId = job.stageInstId;
+  var params = JSON.parse(paramsMap);
+  var state = getStatus(status, resultStatus, flowStatus);
+  var _useState2 = useState([]),
+    buttonList = _useState2[0],
+    setButtonList = _useState2[1];
+  var result = JSON.parse(resultJson) || {};
+  var message = result.message;
+  if ((_message = message) !== null && _message !== void 0 && _message.startsWith('mix.action.code')) {
+    message = '';
+  }
+  // show view message in card, and show message as tooltip
+  var viewMessage = componentDisplayText(message);
+  var onCardClick = function onCardClick(type, props) {
+    if (props === void 0) {
+      props = {};
+    }
+    onOpenRuntimeMenu(_extends({
+      job: _extends({}, job, {
+        displayName: job.name
+      }, buttonList.length > 0 ? {
+        buttonList: buttonList
+      } : {}),
+      groupIndex: groupIndex,
+      stageIndex: stageIndex,
+      jobIndex: jobIndex
+    }, props), type);
+  };
+
+  // todo  判断是否为人工卡点
+  var manualApprove = (_job$url = job.url) === null || _job$url === void 0 ? void 0 : _job$url.includes('manual-approval-component');
+  var _useState3 = useState(0),
+    viewsIndex = _useState3[0],
+    setViewsIndex = _useState3[1];
+  var _useState4 = useState(true),
+    cancelable = _useState4[0],
+    setCancelable = _useState4[1];
+  var _useState5 = useState(true),
+    skipable = _useState5[0],
+    setSkipable = _useState5[1];
+  var _useState6 = useState({
+      method: 'OR',
+      userList: [],
+      exception: null
+    }),
+    manualApprovalInfo = _useState6[0],
+    setManualApprovalInfo = _useState6[1];
+  var _useState7 = useState({
+      skipBy: []
+    }),
+    skipInfo = _useState7[0],
+    setSkipInfo = _useState7[1];
+  var memberInfo = useMemberInfo(manualApprovalInfo.userList);
+  var skippedUserInfo = useMemberInfo(skipInfo.skipBy);
+  useEffect(function () {
+    if (!manualApprove) return;
+    if (job.actions.length > 0) {
+      var _result$data, _result$data$manualAp;
+      var _ref3 = job.actions[0].params || {},
+        method = _ref3.method,
+        waitingPassedUsers = _ref3.waitingPassedUsers;
+      setManualApprovalInfo({
+        method: method,
+        userList: waitingPassedUsers,
+        exception: ((_result$data = result.data) === null || _result$data === void 0 ? void 0 : (_result$data$manualAp = _result$data.manualApprovalResult) === null || _result$data$manualAp === void 0 ? void 0 : _result$data$manualAp.result) === 'exception'
+      });
+    } else {
+      var _result$data2;
+      var _ref4 = ((_result$data2 = result.data) === null || _result$data2 === void 0 ? void 0 : _result$data2.manualApprovalResult) || {},
+        _method = _ref4.method,
+        _waitingPassedUsers = _ref4.waitingPassedUsers,
+        notPassUser = _ref4.notPassUser,
+        passedUsers = _ref4.passedUsers,
+        resultMsg = _ref4.result;
+      var _list = [];
+      if (resultStatus === 'SUCCESS') {
+        _list = passedUsers;
+      } else if (resultStatus === 'FAIL') {
+        _list = [notPassUser];
+      } else {
+        _list = _waitingPassedUsers;
+      }
+      setManualApprovalInfo({
+        method: _method,
+        userList: _list,
+        exception: resultMsg === 'exception'
+      });
+    }
+  }, [job]);
+  var getMessage = function getMessage() {
+    var skipBy = skipInfo.skipBy,
+      isAgentLess = skipInfo.isAgentLess;
+    if (skipBy.length === 1) {
+      return intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.state-info.Skipped',
+        defaultMessage: '跳过了'
+      }) + (isAgentLess ? intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.state-info.Task',
+        defaultMessage: '任务'
+      }) : intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.state-info.RedLine',
+        defaultMessage: '红线'
+      }));
+    }
+    return message;
+  };
+  var _useMemo = useMemo(function () {
+      // ugly get useful card length
+      var _cardsName = [];
+      var res = (buttonList.length > 0 && buttonList || job.actions || []).filter(function (btn) {
+        return (btn === null || btn === void 0 ? void 0 : btn.name) !== 'SKIPPED';
+      }).map(function (btn, index) {
+        return buildButtonComponentWrapper(_extends({
+          mode: 'Card',
+          result: job.result,
+          isAdmin: isAdmin,
+          pipelineId: pipelineId,
+          onRefresh: onRefresh,
+          instance: instance,
+          job: job
+        }, btn))({
+          key: btn.type + "-card-" + index + "-" + job.jobSign
+        });
+      }).filter(function (btn) {
+        var _btn$statInfoComponen;
+        return btn && ((_btn$statInfoComponen = btn.statInfoComponent) === null || _btn$statInfoComponen === void 0 ? void 0 : _btn$statInfoComponen.props.className) !== 'stat-info danger';
+      });
+      var _flatten = flatten(res || []),
+        length = _flatten.length;
+      var views = (buttonList.length > 0 && buttonList || job.actions || []).filter(function (btn) {
+        if (btn.name === 'SKIPPED') {
+          var _JSON$parse = JSON.parse(btn.data),
+            _JSON$parse$statInfoM = _JSON$parse.statInfoMap,
+            skipBy = _JSON$parse$statInfoM.skipBy,
+            isAgentLess = _JSON$parse$statInfoM.isAgentLess;
+          skipInfo.skipBy.length === 0 && setSkipInfo({
+            skipBy: [skipBy],
+            isAgentLess: isAgentLess
+          });
+        }
+        return btn.name !== 'SKIPPED';
+      }).map(function (btn, index) {
+        var view = buildButtonComponentWrapper(_extends({
+          mode: 'Card',
+          result: job.result
+        }, btn, {
+          isAdmin: isAdmin,
+          hasMore: length > 1,
+          pipelineId: pipelineId,
+          instance: instance,
+          job: job,
+          onRefresh: onRefresh
+        }))({
+          key: index
+        });
+        if (view) _cardsName.push(btn.name);
+        return view;
+      }).filter(function (btn) {
+        return btn;
+      });
+      var serializeViews = flatten(views || []);
+      if (viewMessage && job.status !== 'CANCELED') {
+        serializeViews.unshift(/*#__PURE__*/React.createElement("span", {
+          className: "text"
+        }, viewMessage));
+      }
+      return {
+        cards: serializeViews,
+        viewsName: _cardsName
+      };
+    }, [job, buttonList]),
+    cards = _useMemo.cards,
+    viewsName = _useMemo.viewsName;
+  useEffect(function () {
+    setCancelable(!containsStep(params, cancelableBlackListStepTypes));
+    setSkipable(!containsStep(params, skipableBlackListStepTypes));
+  }, []);
+  var buttonFilter = function buttonFilter(btns) {
+    return btns.filter(function (btn) {
+      return btn.type !== 'BUILD_HINT';
+    }).filter(function (btn) {
+      return cancelable || !(EXECUTEbtn.includes(btn.type) && btn.code === 'CANCEL');
+    }).filter(function (btn) {
+      return skipable || !(EXECUTEbtn.includes(btn.type) && btn.code === 'SKIP');
+    }).filter(function (btn) {
+      // 当Stage实例为取消状态，不展示EXECUTE（重试/人工通过/红线跳过等）类型按钮
+      if (['CANCELED', 'CANCELLING'].includes(job.status)) {
+        return !EXECUTEbtn.includes(btn.type);
+      }
+      return true;
+    });
+  };
+  var getButtons = function getButtons() {
+    var buttons = [];
+    var filteredButtons = buttonFilter(buttonList.length > 0 && buttonList || job.actions || [])
+    // 主要按钮展示在卡片底部
+    .filter(function (btn) {
+      return !primaryBtnType.includes(btn.type);
+    }).filter(function (btn) {
+      return btn.type !== 'RetryPipelineJobRun';
+    });
+    var filteredSortdButtons = filteredButtons.reverse();
+    if (every(filteredButtons, function (b) {
+      return b.order;
+    })) {
+      filteredSortdButtons = filteredButtons.sort(function (a, b) {
+        return a.order - b.order;
+      });
+    }
+    filteredSortdButtons.forEach(function (btn, index) {
+      var aiBtn = /*#__PURE__*/React.createElement("div", {
+        className: "btn-log-ai-btn",
+        style: {
+          display: 'none'
+        }
+      }, /*#__PURE__*/React.createElement("img", {
+        className: "btn-log-ai-click-img",
+        src: "https://img.alicdn.com/imgextra/i1/O1CN01WPkVh11CRJTmxVakv_!!6000000000077-55-tps-20-20.svg",
+        alt: ""
+      }), /*#__PURE__*/React.createElement("span", null, intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.log-btn.AI.IntelligentTroubleshooting',
+        defaultMessage: '智能排查'
+      })));
+      var bts = buildButtonComponentWrapper(_extends({
+        mode: 'Button',
+        result: job.result,
+        params: job.paramsMap,
+        isAdmin: isAdmin
+      }, btn, {
+        hasMore: cards.length > 1,
+        setButtonList: setButtonList,
+        children: aiBtn,
+        pipelineId: pipelineId,
+        onRefresh: onRefresh,
+        instance: instance,
+        job: job
+      }))({
+        view: true,
+        onClick: function onClick(type, props) {
+          return onCardClick(btn.type, props);
+        },
+        key: btn.type + "-button-" + index
+      });
+      if (bts instanceof Array) {
+        buttons = buttons.concat(bts);
+      } else {
+        bts && buttons.push(bts);
+      }
+    });
+    return buttons;
+  };
+  var getOperationButton = function getOperationButton(isManualApprove) {
+    if (isManualApprove) {
+      var _btns = job.actions.filter(function (_ref5) {
+        var disable = _ref5.disable;
+        return !disable;
+      }).map(function (btn) {
+        return buildButtonComponentWrapper(_extends({
+          mode: 'Button',
+          result: job.result,
+          params: job.paramsMap,
+          isAdmin: isAdmin
+        }, btn, {
+          hasMore: cards.length > 1,
+          pipelineId: pipelineId,
+          onRefresh: onRefresh,
+          instance: instance,
+          job: job
+        }))({
+          view: true,
+          onClick: function onClick(type, props) {
+            return onCardClick(btn.type, props);
+          },
+          key: btn.type + "-button"
+        });
+      });
+      return _btns.length > 0 && /*#__PURE__*/React.createElement("div", {
+        className: cardInner.runtimeOption
+      }, /*#__PURE__*/React.createElement("div", {
+        className: 'menus'
+      }, _btns.map(function (btn, i) {
+        if (i < _btns.length - 1) {
+          return /*#__PURE__*/React.createElement(React.Fragment, null, btn, /*#__PURE__*/React.createElement(Divider, {
+            direction: "ver",
+            style: {
+              margin: '0 14px'
+            }
+          }));
+        }
+        return btn;
+      })));
+    }
+    var primaryBtn = buttonFilter(buttonList.length > 0 && buttonList || job.actions || []).filter(function (btn) {
+      return primaryBtnType.includes(btn.type);
+    });
+    if (!primaryBtn.length) return null;
+    var btns = primaryBtn.map(function (btn) {
+      return buildButtonComponentWrapper(_extends({
+        mode: 'Button',
+        result: job.result,
+        params: job.paramsMap,
+        isAdmin: isAdmin
+      }, btn, {
+        hasMore: cards.length > 1,
+        pipelineId: pipelineId,
+        onRefresh: onRefresh,
+        instance: instance,
+        job: job
+      }))({
+        view: true,
+        onClick: function onClick(type, props) {
+          return onCardClick(btn.type, props);
+        },
+        key: btn.type + "-button"
+      });
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      "data-uitest__job-section-runtime-option": true,
+      className: cardInner.runtimeOption
+    }, btns.map(function (btn, i) {
+      if (i < btns.length - 1) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: 'btn-wrap'
+        }, btn, /*#__PURE__*/React.createElement(Divider, {
+          direction: "ver",
+          style: {
+            margin: '0 14px'
+          }
+        }));
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        className: 'btn-wrap'
+      }, btn);
+    }));
+  };
+  var buttons = getButtons();
+  var getManualApprovalTitle = function getManualApprovalTitle() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: manualApprovePrefix + "-text"
+    }, /*#__PURE__*/React.createElement("span", {
+      "data-state": state,
+      className: manualApprovePrefix + "-name"
+    }, /*#__PURE__*/React.createElement(Title, {
+      trigger: job.name,
+      align: "t"
+    }, job.name)), /*#__PURE__*/React.createElement("span", {
+      className: manualApprovePrefix + "-waitfor"
+    }, getValidationContent(state, memberInfo)), approveTextMap[manualApprovalInfo.method] && /*#__PURE__*/React.createElement(Tag, {
+      type: "normal",
+      style: {
+        marginLeft: 8,
+        flexShrink: 0
+      }
+    }, approveTextMap[manualApprovalInfo.method]));
+  };
+  var buildHint = (_job$actions = job.actions) === null || _job$actions === void 0 ? void 0 : _job$actions.find(function (btn) {
+    return btn.type === 'BUILD_HINT';
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    "data-uitest__job-run-card": true,
+    className: cx(styles.flowJobRoot, (_cx2 = {}, _cx2[styles.highlightActive] = highlightStatus === 'active', _cx2))
+  }, (drivenType === 'manual' || state === 'switch_manual' || switchManual) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FlowSwitch, {
+    onRefresh: onRefresh,
+    status: status,
+    stageInstId: switchManual ? stageInstId : id,
+    pipelineJobId: id,
+    pipelineRunId: instance.pipelineRunId,
+    isOld: switchManual,
+    pipelineId: pipelineId,
+    flowStatus: flowStatus
+  }), /*#__PURE__*/React.createElement("svg", {
+    className: styles.switchLine
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M-1,1 h14",
+    strokeWidth: 1
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styles.hoverableWrapper,
+    onMouseEnter: function onMouseEnter() {
+      return onCardHover(job.jobSign);
+    },
+    onMouseLeave: onCardLeave
+  }, /*#__PURE__*/React.createElement(StatusIcon, {
+    status: state,
+    withTips: true,
+    className: styles.statusIcon
+  }), /*#__PURE__*/React.createElement(AnimatedContainer, {
+    "data-uitest__job-state": state,
+    className: cx(styles.jobCard, styles["jobCardRunStatus--" + state], {
+      'manual-approval': manualApprove
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cardInner.header
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cardInner.title
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-uitest__job-name": true,
+    className: cardInner.taskName,
+    onDoubleClick: function onDoubleClick() {
+      return console.log('job======', job);
+    }
+  }, manualApprove ? getManualApprovalTitle() : /*#__PURE__*/React.createElement(Title, {
+    trigger: job.name,
+    align: "t"
+  }, job.name)))), /*#__PURE__*/React.createElement("div", {
+    "data-uitest__job-section-info": true,
+    className: cardInner.info
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cardInner.duration
+  }, /*#__PURE__*/React.createElement(Title, {
+    trigger: /*#__PURE__*/React.createElement(Duration, {
+      startedAt: job.startTime,
+      endedAt: job.endTime
+    }),
+    align: "t"
+  }, /*#__PURE__*/React.createElement(Duration, {
+    startedAt: job.startTime,
+    endedAt: job.endTime
+  }))), !manualApprove && /*#__PURE__*/React.createElement("div", {
+    className: cardInner.menus
+  }, buttons.slice(0, 1), buttons.length === 2 && buttons[1], buttons.length > 2 && /*#__PURE__*/React.createElement(MenuButton, {
+    text: true,
+    autoWidth: false,
+    label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      style: {
+        margin: 0
+      },
+      type: "more-line"
+    }), intl.get({
+      id: 'rdc-tb-cd-assets.teambition.flow-job.More',
+      defaultMessage: '更多'
+    })),
+    popupClassName: hackCls.cardMenu,
+    onVisibleChange: setMore,
+    className: hackCls.moreMenu
+  }, buttons.slice(1).map(function (btn, index) {
+    return /*#__PURE__*/React.createElement(MenuButton.Item, {
+      onClick: function onClick(e) {
+        // 一个 hack，让点击在 button 外的 Menu 空白上也能生效
+        var isClickOnMenu = Array.from(e.target.classList).some(function (cls) {
+          return cls.includes('next-menu-item');
+        });
+        if (isClickOnMenu) {
+          e.currentTarget.querySelector('.next-menu-item-text').firstElementChild.click();
+        }
+      },
+      key: index
+    }, btn);
+  })))), buildHint && /*#__PURE__*/React.createElement("div", {
+    className: cardInner.buildHint,
+    dangerouslySetInnerHTML: {
+      __html: buildHint.data
+    }
+  }), function (_skippedUserInfo$) {
+    var showMsg = !viewMessage && status !== 'CANCELED' && message;
+    // 人工卡点大部分消息要隐藏，只有后端返回了 "exception" 才显示
+    var show = manualApprove ? showMsg && manualApprovalInfo.exception : showMsg;
+    if (!show) return null;
+    return /*#__PURE__*/React.createElement("div", {
+      className: cardInner.message
+    }, (_skippedUserInfo$ = skippedUserInfo[0]) !== null && _skippedUserInfo$ !== void 0 && _skippedUserInfo$.name ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Title, {
+      align: "t",
+      trigger: skippedUserInfo[0].name
+    }, skippedUserInfo[0].name), /*#__PURE__*/React.createElement("span", {
+      className: "operation"
+    }, getMessage())) : /*#__PURE__*/React.createElement(Tooltip, {
+      align: "t",
+      trigger: /*#__PURE__*/React.createElement("span", {
+        className: cardInner.hint + " hint-message",
+        dangerouslySetInnerHTML: {
+          __html: message
+        }
+      })
+    }, /*#__PURE__*/React.createElement("span", {
+      dangerouslySetInnerHTML: {
+        __html: message
+      },
+      className: cardInner.tooltipMessage
+    })));
+  }(), cards.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: cardInner.contentContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cx(cardInner.content, 'job-card-content', {
+      'has-more': viewsName.length > 1
+    })
+  }, (viewsName.length > 1 || cards[viewsIndex].redlinesComponent) && /*#__PURE__*/React.createElement("div", {
+    className: "switch-container " + (viewsName.length > 1 ? 'has-switch' : '')
+  }, /*#__PURE__*/React.createElement(Title, {
+    align: "t",
+    trigger: viewsName[viewsIndex]
+  }, viewsName[viewsIndex]), /*#__PURE__*/React.createElement("div", {
+    className: "redline-trigger-container",
+    id: "redline-" + job.id
+  }, cards[viewsIndex].redlinesComponent), viewsName.length > 1 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "switch"
+  }, /*#__PURE__*/React.createElement(ButtonIcon, {
+    name: "arrow-left-2-line",
+    className: "arrow-btn",
+    disabled: viewsIndex === 0,
+    onClick: function onClick() {
+      return setViewsIndex(viewsIndex - 1);
+    }
+  }), viewsIndex + 1, "/", viewsName.length, /*#__PURE__*/React.createElement(ButtonIcon, {
+    name: "arrow-right-2-line",
+    className: "arrow-btn",
+    disabled: viewsIndex === viewsName.length - 1,
+    onClick: function onClick() {
+      return setViewsIndex(viewsIndex + 1);
+    }
+  })))), cards[viewsIndex].statInfoComponent ? cards[viewsIndex].statInfoComponent : cards[viewsIndex])), getOperationButton(manualApprove))));
+};
+export default FlowJobCard;