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

package/es/components/common/teambition/flow-job-btn/deploy-order/deployOrderDetail.js

@@ -0,0 +1,700 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { Grid, Radio, Button, Pagination, Tab, Loading, Divider, Balloon, Paragraph } from '@teamix/ui';
+import dayjs from 'dayjs';
+import { BaiscIconFont, PipelineIconFont } from "../../icon-font";
+import ClickButton from "../../click-button";
+import Avatar from "../../avatar";
+import Duration from "../../duration";
+import { Title, YunxiaoTable, YunxiaoIcon } from '@alife/devops-ui';
+import { setLocalStorageCache, getLocalStorageCache } from "../../../../../utils";
+import utils from "./utils";
+import helpLink from "../../../../../utils/helplink";
+import { MACHINE_INIT, MACHINE_RUNNING, MACHINE_FAILED, MACHINE_SUCCESS, MACHINE_SKIPPED, MACHINE_CANCELLED } from "./machineStatus";
+import { RUNNERRUN } from "./deployChannel";
+import DeployOrderLogDialog from "./deployOrderLogDialog";
+import fetch from "../../../teambition/flow-engine/fetch";
+import intl from "../../../../../locale";
+import "./index.scss";
+import { handleSolutionClick } from "../../../../../utils/apimap";
+var RadioGroup = Radio.Group;
+var Row = Grid.Row,
+  Col = Grid.Col;
+var DeployOrderDetail = function DeployOrderDetail(props) {
+  var data = props.data,
+    job = props.job;
+  var _JSON$parse = JSON.parse(data),
+    detailUrl = _JSON$parse.detailUrl;
+  var _useState = useState(true),
+    loading = _useState[0],
+    setLoading = _useState[1];
+  var _useState2 = useState('all'),
+    statusFilter = _useState2[0],
+    setStatusFilter = _useState2[1];
+  var _useState3 = useState(false),
+    logVisible = _useState3[0],
+    setLogVisible = _useState3[1];
+  var _useState4 = useState('machine'),
+    logType = _useState4[0],
+    setLogType = _useState4[1]; // 'machine' | 'plugin'
+  var _useState5 = useState(),
+    logSelectedMachine = _useState5[0],
+    setLogSelectedMachine = _useState5[1];
+  var _useState6 = useState([]),
+    pluginLogs = _useState6[0],
+    setPluginLogs = _useState6[1];
+  var _useState7 = useState(),
+    selectedBatchNum = _useState7[0],
+    setSelectedBatchNum = _useState7[1]; // 批次Tab的选中值
+  var _useState8 = useState(0),
+    pageStart = _useState8[0],
+    setPageStart = _useState8[1];
+  var _useState9 = useState(getLocalStorageCache('FLOW_DEPLOYORDER_PAGESIZE') || '10'),
+    pageSize = _useState9[0],
+    setPageSize = _useState9[1];
+  var _useState10 = useState(null),
+    orderDetail = _useState10[0],
+    setOrderDetail = _useState10[1];
+  var _ref = orderDetail || {},
+    machineGroupDeployDetails = _ref.machineGroupDeployDetails;
+  var _ref2 = machineGroupDeployDetails || {},
+    deployBatchInfo = _ref2.deployBatchInfo;
+  var totalMachineCount = deployBatchInfo === null || deployBatchInfo === void 0 ? void 0 : deployBatchInfo.batchInfo.reduce(function (prev, curr) {
+    return prev + curr.machineNum;
+  }, 0);
+  var failedMachineCount = deployBatchInfo === null || deployBatchInfo === void 0 ? void 0 : deployBatchInfo.batchInfo.reduce(function (prev, curr) {
+    return prev + curr.failedNum; // 失败的机器数
+  }, 0);
+  var unscccessFinishMachineCount = deployBatchInfo === null || deployBatchInfo === void 0 ? void 0 : deployBatchInfo.batchInfo.reduce(function (prev, curr) {
+    return prev + curr.failedNum + curr.skippedNum + curr.cancelledNum; // 失败+取消+跳过
+  }, 0);
+  var finishMachineCount = deployBatchInfo === null || deployBatchInfo === void 0 ? void 0 : deployBatchInfo.batchInfo.reduce(function (prev, curr) {
+    return prev + curr.successNum + curr.failedNum + curr.skippedNum + curr.cancelledNum;
+  }, 0);
+  var getOrderDetail = useCallback(function (dontLoading) {
+    if (!detailUrl) return;
+    if (!dontLoading) setLoading(true);
+    if (timer.current) clearTimeout(timer.current);
+    var params = {
+      apiVersion: 'v2',
+      pageStart: pageStart,
+      pageSize: pageSize
+    };
+    if (selectedBatchNum) {
+      params.batchNum = selectedBatchNum;
+    }
+    if (statusFilter) {
+      params.deployStatus = statusFilter;
+    }
+    fetch({
+      url: "/armory" + detailUrl,
+      data: params
+    }).then(function (res) {
+      var result = res.object;
+      if (res.successful && result) {
+        setOrderDetail(result);
+      }
+      setLoading(false);
+    });
+  }, [detailUrl, pageSize, pageStart, selectedBatchNum, statusFilter]);
+
+  // 部署单非终态时轮询
+  var timer = useRef();
+  useEffect(function () {
+    if (timer.current) clearTimeout(timer.current);
+    if (!orderDetail || !utils.hasOrderFinished(orderDetail)) {
+      timer.current = setTimeout(function () {
+        return getOrderDetail(true);
+      }, 2000);
+    }
+    return function () {
+      if (timer.current) clearTimeout(timer.current);
+    };
+  }, [orderDetail, getOrderDetail]);
+  useEffect(function () {
+    getOrderDetail();
+  }, [getOrderDetail]);
+  useEffect(function () {
+    if (deployBatchInfo !== null && deployBatchInfo !== void 0 && deployBatchInfo.currentBatchNum) {
+      setSelectedBatchNum(deployBatchInfo.currentBatchNum);
+    }
+  }, [deployBatchInfo === null || deployBatchInfo === void 0 ? void 0 : deployBatchInfo.currentBatchNum]);
+  useEffect(function () {
+    // 查插件日志，若有则展示入口
+    if ((job === null || job === void 0 ? void 0 : job.status) === 'FINISH' || (job === null || job === void 0 ? void 0 : job.status) === 'CANCELED') {
+      var url = "/flow/service/plugin/queryPluginLog?componentInstId=" + job.id;
+      fetch({
+        url: url
+      }).then(function (res) {
+        if (res.successful && res.object && res.object.length) {
+          setPluginLogs(res.object);
+        }
+      });
+    }
+  }, [job]);
+  var deployProgress = function deployProgress() {
+    if (!(deployBatchInfo !== null && deployBatchInfo !== void 0 && deployBatchInfo.batchInfo)) {
+      return '-';
+    }
+    return /*#__PURE__*/React.createElement("div", null, finishMachineCount, " / ", totalMachineCount);
+  };
+  var consumedTime = function consumedTime() {
+    var endTime = utils.hasOrderFinished(orderDetail) ? orderDetail.gmtModified : Date.now();
+    return /*#__PURE__*/React.createElement(Duration, {
+      startedAt: orderDetail.gmtCreate,
+      endedAt: endTime
+    });
+  };
+  var machineOps = function machineOps(value, index, record) {
+    var viewLogButton = /*#__PURE__*/React.createElement(Button, {
+      type: "secondary",
+      text: true,
+      onClick: function onClick() {
+        setLogType('machine');
+        setLogSelectedMachine(record);
+        setLogVisible(true);
+      }
+    }, /*#__PURE__*/React.createElement(BaiscIconFont, {
+      type: "log-line"
+    }), intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.Log',
+      defaultMessage: '日志'
+    }));
+    var retryButton = /*#__PURE__*/React.createElement(ClickButton, {
+      type: "secondary",
+      text: true,
+      url: "/armory" + record.retryLink,
+      successMsg: intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.RetrySucceeded',
+        defaultMessage: '重试成功'
+      }),
+      errorMsg: intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.RetryFailed',
+        defaultMessage: '重试失败'
+      })
+    }, /*#__PURE__*/React.createElement(BaiscIconFont, {
+      type: "refresh-line"
+    }), intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.TryAgain',
+      defaultMessage: '重试'
+    }));
+    var skipButton = /*#__PURE__*/React.createElement(ClickButton, {
+      type: "secondary",
+      text: true,
+      url: "/armory" + record.skipLink,
+      successMsg: intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.SkippedSuccessfully',
+        defaultMessage: '跳过成功'
+      }),
+      errorMsg: intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.FailedToSkip',
+        defaultMessage: '跳过失败'
+      })
+    }, /*#__PURE__*/React.createElement(BaiscIconFont, {
+      type: "share-line"
+    }), intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.Skip',
+      defaultMessage: '跳过'
+    }));
+    var hasLog = [MACHINE_RUNNING, MACHINE_FAILED, MACHINE_SUCCESS, MACHINE_SKIPPED].includes(record.status);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "machine-op"
+    }, hasLog && viewLogButton, record.status === MACHINE_FAILED && orderDetail.status !== MACHINE_CANCELLED && orderDetail.status !== MACHINE_FAILED && retryButton, record.status === MACHINE_FAILED && orderDetail.status !== MACHINE_CANCELLED && orderDetail.status !== MACHINE_FAILED && skipButton);
+  };
+  var summaryItem = function summaryItem(label, value, _temp) {
+    var _ref3 = _temp === void 0 ? {} : _temp,
+      _ref3$labelStyle = _ref3.labelStyle,
+      labelStyle = _ref3$labelStyle === void 0 ? {} : _ref3$labelStyle,
+      _ref3$valueStyle = _ref3.valueStyle,
+      valueStyle = _ref3$valueStyle === void 0 ? {} : _ref3$valueStyle;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "deploy-order__summary__item",
+      role: "grid"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "deploy-order__summary__item__label",
+      style: labelStyle
+    }, label), /*#__PURE__*/React.createElement("div", {
+      className: "deploy-order__summary__item__value",
+      style: valueStyle
+    }, value));
+  };
+  var machines = function machines(statuses) {
+    if (statuses === void 0) {
+      statuses = [];
+    }
+    return (machineGroupDeployDetails || {
+      machineStatus: []
+    }).machineStatus.sort(function (a, b) {
+      return a.batchNum - b.batchNum;
+    }).sort(function (a, b) {
+      if (a.status === b.status) return 0;
+      if (a.status === MACHINE_FAILED) return -1;
+      if (b.status === MACHINE_FAILED) return 1;
+      return 0;
+    }).filter(function (machine) {
+      return statuses.length === 0 || statuses.includes(machine.status);
+    });
+  };
+  var failureRate = function failureRate() {
+    return summaryItem(/*#__PURE__*/React.createElement(Title, {
+      align: "t",
+      trigger: intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.HostFailureRate',
+        defaultMessage: '主机失败率'
+      })
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.HostFailureRate',
+      defaultMessage: '主机失败率'
+    })), totalMachineCount ? (unscccessFinishMachineCount / totalMachineCount * 100).toFixed(2) + "%" : intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.calculating',
+      defaultMessage: '计算中'
+    }));
+  };
+  var orderStatus = function orderStatus() {
+    var _utils$deployStatusDi = utils.deployStatusDisplay(orderDetail.status),
+      text = _utils$deployStatusDi.text,
+      iconFont = _utils$deployStatusDi.iconFont,
+      iconClassSuffix = _utils$deployStatusDi.iconClassSuffix;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "deploy-order__header",
+      size: "xl"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "deploy-order__header__status deploy-order__header__status__" + iconClassSuffix
+    }, /*#__PURE__*/React.createElement(PipelineIconFont, {
+      type: iconFont,
+      size: "large"
+    }), /*#__PURE__*/React.createElement("span", {
+      style: {
+        whiteSpace: 'nowrap'
+      }
+    }, text), orderDetail.exceptionCode && /*#__PURE__*/React.createElement("div", {
+      className: "deploy-order__header__error-code"
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.DeploymentOrderIdOrderdetailidError',
+      defaultMessage: '部署单id：{orderDetailId} 错误码：{orderDetailExceptionCode}'
+    }, {
+      orderDetailId: orderDetail.id,
+      orderDetailExceptionCode: orderDetail.exceptionCode
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "deploy-order__header__ops"
+    }, !!pluginLogs.length && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("a", {
+      className: "deploy-order__header__ops__log",
+      onClick: function onClick() {
+        setLogType('plugin');
+        setLogVisible(true);
+      }
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.PlugInLogs',
+      defaultMessage: '插件日志'
+    })), !utils.hasOrderFinished(orderDetail) || orderDetail.status === 'Waiting' && failedMachineCount === 0 && /*#__PURE__*/React.createElement(Divider, {
+      direction: "ver",
+      className: "info-divider"
+    })), !utils.hasOrderFinished(orderDetail) && /*#__PURE__*/React.createElement(ClickButton, {
+      type: "normal",
+      warning: true,
+      url: "/armory" + orderDetail.closeOrderUrl,
+      successMsg: intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.TheDeploymentWasCanceled',
+        defaultMessage: '取消部署成功'
+      }),
+      errorMsg: intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.FailedToCancelTheDeployment',
+        defaultMessage: '取消部署失败'
+      }),
+      confirmMsg: intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.ConfirmCancelDeployment',
+        defaultMessage: '确认取消部署？'
+      })
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.Cancel',
+      defaultMessage: '取消'
+    })), orderDetail.status === 'Waiting' && failedMachineCount === 0 && /*#__PURE__*/React.createElement(ClickButton, {
+      type: "primary",
+      url: "/armory" + orderDetail.resumeUrl,
+      method: "POST",
+      successMsg: intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.ContinuedDeployment',
+        defaultMessage: '继续部署成功'
+      }),
+      errorMsg: intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.FailedToContinueDeployment',
+        defaultMessage: '继续部署失败'
+      })
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.Continue',
+      defaultMessage: '继续'
+    }))));
+  };
+  var formatDate = function formatDate(date) {
+    return dayjs(date).format('YYYY-MM-DD HH:mm:ss');
+  };
+  var batchState = function batchState() {
+    // const totalBatch =
+    //   orderDetail.actualTotalBatch ||
+    //   intl.get({
+    //     id:
+    //       'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.calculating',
+    //     defaultMessage: '计算中',
+    //   });
+    return /*#__PURE__*/React.createElement("div", null, deployBatchInfo !== null && deployBatchInfo !== void 0 && deployBatchInfo.currentBatchNum ? (deployBatchInfo.currentBatchNum === 'all' ? deployBatchInfo.totalBatchNum : deployBatchInfo.currentBatchNum) + " / " + deployBatchInfo.totalBatchNum : intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.calculating',
+      defaultMessage: '计算中'
+    }));
+  };
+  var onPaginationChange = function onPaginationChange(page) {
+    setPageStart((page - 1) * pageSize);
+  };
+  var onPageSizeChange = function onPageSizeChange(key) {
+    setPageStart(0);
+    setPageSize(key);
+    setLocalStorageCache('FLOW_DEPLOYORDER_PAGESIZE', key);
+  };
+
+  // 切换批次
+  var onChangeBatchNum = function onChangeBatchNum(key) {
+    setPageStart(0);
+    setSelectedBatchNum(key);
+  };
+
+  // 切换状态过滤
+  var onChangeStatusFilter = function onChangeStatusFilter(key) {
+    setPageStart(0);
+    setStatusFilter(key);
+  };
+  var onCloseLogDialog = function onCloseLogDialog() {
+    setLogVisible(false);
+  };
+  if (!JSON.parse(data).detailUrl) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "deploy-order-exception"
+    }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "delete-fill",
+      size: "xxl"
+    }), /*#__PURE__*/React.createElement("div", null, intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.FailedToCreateADeployment',
+      defaultMessage: '创建部署单失败，请重试'
+    })));
+  }
+  if (orderDetail === null) {
+    return /*#__PURE__*/React.createElement(Loading, {
+      inline: false,
+      style: {
+        marginTop: 150
+      }
+    });
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "deploy-order"
+  }, orderStatus(), machineGroupDeployDetails && /*#__PURE__*/React.createElement("div", {
+    className: "deploy-order__summary"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "deploy-order__summary__detail",
+    role: "grid"
+  }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+    span: 8
+  }, summaryItem(/*#__PURE__*/React.createElement(Title, {
+    align: "t",
+    trigger: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.DeploymentOrderId',
+      defaultMessage: '部署单ID'
+    })
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.DeploymentOrderId',
+    defaultMessage: '部署单ID'
+  })), orderDetail.id), summaryItem(/*#__PURE__*/React.createElement(Title, {
+    align: "t",
+    trigger: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.DeploymentProgress',
+      defaultMessage: '部署机器'
+    })
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.DeploymentProgress',
+    defaultMessage: '部署机器'
+  })), deployProgress()), summaryItem(/*#__PURE__*/React.createElement(Title, {
+    align: "t",
+    trigger: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.DeploymentBatchProgress',
+      defaultMessage: '部署批次'
+    })
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.DeploymentBatchProgress',
+    defaultMessage: '部署批次'
+  })), batchState())), /*#__PURE__*/React.createElement(Col, {
+    span: 8
+  }, failureRate(), summaryItem(/*#__PURE__*/React.createElement(Title, {
+    align: "t",
+    trigger: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.DeploymentTime',
+      defaultMessage: '部署耗时'
+    })
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.DeploymentTime',
+    defaultMessage: '部署耗时'
+  })), consumedTime()), summaryItem(intl.get({
+    id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.PauseMethod',
+    defaultMessage: '暂停方式'
+  }), utils.pauseStrategy(machineGroupDeployDetails.pauseStrategy).text)), /*#__PURE__*/React.createElement(Col, {
+    span: 8
+  }, summaryItem(intl.get({
+    id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.Submitted',
+    defaultMessage: '提交人'
+  }), orderDetail.creator === 'ACP-ADMIN' ? '-' : /*#__PURE__*/React.createElement(Title, {
+    trigger: /*#__PURE__*/React.createElement(Avatar, {
+      nameOnly: true,
+      uid: orderDetail.creator
+    }),
+    align: "t",
+    popupProps: {
+      shouldUpdatePosition: true,
+      needAdjust: true
+    },
+    popupContainer: function popupContainer(r) {
+      return r.parentNode;
+    }
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    nameOnly: true,
+    uid: orderDetail.creator
+  }))), summaryItem(/*#__PURE__*/React.createElement(Title, {
+    align: "t",
+    trigger: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.DeploymentContent',
+      defaultMessage: '部署内容'
+    })
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.DeploymentContent',
+    defaultMessage: '部署内容'
+  })), machineGroupDeployDetails.webDownloadPackageUrl || machineGroupDeployDetails.packageUrl ? /*#__PURE__*/React.createElement("a", {
+    target: "_blank",
+    href: machineGroupDeployDetails.webDownloadPackageUrl || machineGroupDeployDetails.packageUrl,
+    rel: "noreferrer"
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.DownloadDeploymentPackage',
+    defaultMessage: '下载部署包'
+  })) : intl.get({
+    id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.NoProductPackage',
+    defaultMessage: '无制品包'
+  })), summaryItem(intl.get({
+    id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.DeploymentTime.1',
+    defaultMessage: '部署时间'
+  }), formatDate(orderDetail.gmtCreate)))))), machineGroupDeployDetails && /*#__PURE__*/React.createElement("div", {
+    className: "deploy-order__detail"
+  }, !!deployBatchInfo && /*#__PURE__*/React.createElement(Tab, {
+    className: "deploy-order__detail__tab",
+    activeKey: selectedBatchNum,
+    onChange: onChangeBatchNum
+  }, /*#__PURE__*/React.createElement(Tab.Item, {
+    title: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.AllBatches',
+      defaultMessage: '全部批次'
+    }),
+    key: "all"
+  }), deployBatchInfo.batchInfo.map(function (item) {
+    return /*#__PURE__*/React.createElement(Tab.Item, {
+      title: /*#__PURE__*/React.createElement(React.Fragment, null, intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.No',
+        defaultMessage: '第'
+      }), item.batchNum, intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.Batch',
+        defaultMessage: '批'
+      }), ' ', /*#__PURE__*/React.createElement("span", {
+        className: "deploy-order__detail__tab__cnt"
+      }, "(", item.successNum + item.failedNum, "/", item.machineNum, ")")),
+      key: item.batchNum
+    });
+  })), /*#__PURE__*/React.createElement(RadioGroup, {
+    dataSource: [{
+      value: 'all',
+      label: intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.All',
+        defaultMessage: '全部'
+      })
+    }, {
+      value: MACHINE_RUNNING,
+      label: intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.Deploying',
+        defaultMessage: '部署中'
+      })
+    }, {
+      value: MACHINE_INIT,
+      // 后端会查 MACHINE_PENDING 和 MACHINE_INIT
+      label: intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.ToBeDeployed',
+        defaultMessage: '待部署'
+      })
+    }, {
+      value: MACHINE_SUCCESS,
+      label: intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.Completed',
+        defaultMessage: '已完成'
+      })
+    }, {
+      value: MACHINE_FAILED,
+      label: intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.Failed',
+        defaultMessage: '已失败'
+      })
+    }, {
+      value: MACHINE_SKIPPED,
+      label: intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.Skipped',
+        defaultMessage: '已跳过'
+      })
+    }],
+    value: statusFilter,
+    onChange: onChangeStatusFilter
+  }), /*#__PURE__*/React.createElement(YunxiaoTable, {
+    dataSource: machines(),
+    hasBorder: true,
+    fixedHeader: true,
+    loading: loading
+  }, /*#__PURE__*/React.createElement(YunxiaoTable.Column, {
+    title: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.State',
+      defaultMessage: '状态'
+    }),
+    width: 130,
+    style: {
+      overflow: 'hidden'
+    },
+    cell: function cell(v, i, record) {
+      var _utils$machineStatusD = utils.machineStatusDisplay(record.status),
+        text = _utils$machineStatusD.text,
+        iconFont = _utils$machineStatusD.iconFont,
+        iconClassSuffix = _utils$machineStatusD.iconClassSuffix;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "machine-status machine-status__" + iconClassSuffix
+      }, /*#__PURE__*/React.createElement(PipelineIconFont, {
+        type: iconFont
+      }), /*#__PURE__*/React.createElement(Title, {
+        trigger: text,
+        align: "t"
+      }, text));
+    }
+  }), /*#__PURE__*/React.createElement(YunxiaoTable.Column, {
+    title: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.DeploymentBatch',
+      defaultMessage: '部署批次'
+    }),
+    width: 100,
+    cell: function cell(v, i, record) {
+      return record.batchNum;
+    }
+  }), /*#__PURE__*/React.createElement(YunxiaoTable.Column, {
+    title: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.HostInformation',
+      defaultMessage: '主机信息'
+    }),
+    width: 220,
+    cell: function cell(v, i, r) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "machine-info"
+      }, r.ip.split('\n').concat(r.machineSn).concat(r.hostName ? r.hostName : '').map(function (part, index) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: r.deployExceptionInfo ? 'red' : '',
+          style: {
+            width: '100%'
+          },
+          key: index
+        }, part);
+      }));
+    }
+  }), /*#__PURE__*/React.createElement(YunxiaoTable.Column, {
+    title: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.ExceptionInformation',
+      defaultMessage: '异常信息'
+    }),
+    width: 150,
+    cell: function cell(v, i, r) {
+      var _r$deployExceptionInf;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, r.deployChannel === RUNNERRUN && (_r$deployExceptionInf = r.deployExceptionInfo) !== null && _r$deployExceptionInf !== void 0 && _r$deployExceptionInf.match(/deploy channel error|机器状态为离线/) ? /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: 'var(--color-error-5, #CD3021)'
+        }
+      }, /*#__PURE__*/React.createElement(Balloon, {
+        v2: true,
+        closable: false,
+        trigger: /*#__PURE__*/React.createElement("span", null, "RunnerUnavailable"),
+        triggerType: "hover",
+        align: "t",
+        title: intl.get({
+          id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.DeploymentChannelException',
+          defaultMessage: '部署通道异常'
+        })
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Paragraph, {
+        style: {
+          lineHeight: '20px',
+          marginBottom: 8
+        },
+        ellipsis: {
+          rows: 2,
+          expandable: true
+        }
+      }, intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.TheHostDeploymentChannelRunner',
+        defaultMessage: '主机部署通道 Runner 链接异常，请检查主机 Runner 状态'
+      })), /*#__PURE__*/React.createElement(Button, {
+        className: "yunxiao-error-notification-btn",
+        text: true,
+        type: "primary",
+        onClick: function onClick() {
+          return handleSolutionClick('RunnerUnavailable');
+        }
+      }, intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.ViewSolutions',
+        defaultMessage: '查看解决方案'
+      }))))) : /*#__PURE__*/React.createElement("span", {
+        className: "red"
+      }, r.deployExceptionInfo, (r.status === MACHINE_FAILED || r.deployExceptionInfo) && r.deployChannel !== RUNNERRUN && helpLink('deploy_error_hint') && /*#__PURE__*/React.createElement("a", {
+        href: helpLink('deploy_error_hint'),
+        target: "_blank",
+        rel: "noreferrer"
+      }, intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.ViewSolutions',
+        defaultMessage: '查看解决方案'
+      })), (r.status === MACHINE_FAILED || r.deployExceptionInfo) && r.deployChannel === RUNNERRUN && /*#__PURE__*/React.createElement("a", {
+        href: helpLink('runner_error_hint'),
+        target: "_blank",
+        rel: "noreferrer"
+      }, intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.ViewSolutions',
+        defaultMessage: '查看解决方案'
+      }))));
+    }
+  }), /*#__PURE__*/React.createElement(YunxiaoTable.Column, {
+    title: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.UpdateTime',
+      defaultMessage: '更新时间'
+    }),
+    width: 160,
+    cell: function cell(v, i, r) {
+      return formatDate(r.gmtModified);
+    }
+  }), /*#__PURE__*/React.createElement(YunxiaoTable.Column, {
+    title: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.deploy-order.deployOrderDetail.Operation',
+      defaultMessage: '操作'
+    }),
+    width: 90,
+    cell: machineOps
+  })), /*#__PURE__*/React.createElement(Pagination, {
+    className: "deploy-order__detail__pagination"
+    // hideOnlyOnePage
+    ,
+    current: pageStart / pageSize + 1,
+    showJump: false,
+    total: machineGroupDeployDetails.total,
+    pageSize: pageSize,
+    pageSizeList: [5, 10, 20, 50],
+    pageSizeSelector: "dropdown",
+    pageSizePosition: "end",
+    onPageSizeChange: onPageSizeChange,
+    onChange: onPaginationChange
+  }))), logVisible && /*#__PURE__*/React.createElement(DeployOrderLogDialog, {
+    visible: logVisible,
+    onClose: onCloseLogDialog,
+    logType: logType,
+    selectedMachine: logSelectedMachine,
+    pluginLogs: pluginLogs,
+    deployId: orderDetail.id
+  }));
+};
+export default DeployOrderDetail;