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

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

@@ -0,0 +1,598 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["view"],
+  _excluded2 = ["onClick", "id", "text"];
+/* eslint-disable react/no-array-index-key */
+import React, { useState, useEffect, Fragment } from 'react';
+import { Tree, Loading, Button } from '@teamix/ui';
+import Loadable from "../../../../../utils/loadable";
+import { every, dropWhile } from 'lodash-es';
+import Ansi from 'ansi-to-react';
+import { Title } from '@alife/devops-ui';
+import PluginLogTable from "../../../../pluginLogTable";
+import { locale } from "../../../../../utils";
+import fetch from "../../flow-engine/fetch";
+import { BaiscIconFont } from "../../icon-font";
+import { StatusAbleIcon } from "../../instance-status-icon";
+import intl from "../../../../../locale";
+import "./index.scss";
+import { GetPipelineJobSteps, GetPipelineJobStepLog } from "../../../../../utils/api";
+var AI = Loadable({
+  loader: function loader() {
+    return import("./AI");
+  }
+});
+var TreeNode = Tree.Node;
+
+// 默认拉取的日志行数
+var DEFAULT_LIMIT = 1000;
+// 默认拉取日志时间间隔
+var DEFAULT_INTERVAL = 1000;
+// 已完成节点加速加载
+var DEFAULT_RATE = 10;
+var AI_DIAGNOSIS_MAX_SUPPORT_LOG_LINES = 100000;
+var logPulltimer; // 日志加载
+var nodePullTimer; // 日志节点加载
+var scrollTimer;
+var autoScroll = true;
+var SELECT_NODE_HOLDER = 0;
+var tooltip = function tooltip(trigger, text) {
+  return /*#__PURE__*/React.createElement(Title, {
+    trigger: trigger,
+    align: "t"
+  }, text || trigger);
+};
+var i18n = function i18n(nodeName) {
+  var map = {
+    申请运行环境: {
+      en_US: 'Apply Env',
+      zh_CN: intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.log-btn.ApplyForARunningEnvironment',
+        defaultMessage: '申请运行环境'
+      })
+    },
+    清理工作区: {
+      en_US: 'Clean Workspace',
+      zh_CN: intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.log-btn.CleanUpTheWorkspace',
+        defaultMessage: '清理工作区'
+      })
+    },
+    流水线缓存: {
+      en_US: 'Restore Cache',
+      zh_CN: intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.log-btn.PipelineCache',
+        defaultMessage: '流水线缓存'
+      })
+    },
+    克隆代码: {
+      en_US: 'Clone Repo',
+      zh_CN: intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.log-btn.CloneCode',
+        defaultMessage: '克隆代码'
+      })
+    },
+    缓存上传: {
+      en_US: 'Archive Cache',
+      zh_CN: intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.log-btn.CacheUpload',
+        defaultMessage: '缓存上传'
+      })
+    }
+  };
+  if (map[nodeName]) {
+    return map[nodeName][locale || 'zh_CN'];
+  } else {
+    return nodeName;
+  }
+};
+var i18nActionName = function i18nActionName(action) {
+  var map = {
+    构建: {
+      en_US: 'Build',
+      zh_CN: intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.log-btn.Build',
+        defaultMessage: '构建'
+      })
+    }
+  };
+  if (map[action]) {
+    return map[action][locale || 'zh_CN'];
+  } else {
+    return action;
+  }
+};
+var SubTree = function SubTree(props) {
+  var treeUrl = props.treeUrl,
+    treeSummaryUrl = props.treeSummaryUrl,
+    nodeUrl = props.nodeUrl,
+    headerUrl = props.headerUrl,
+    downloadUrl = props.downloadUrl,
+    _props$onSelect = props.onSelect,
+    _onSelect = _props$onSelect === void 0 ? function () {} : _props$onSelect,
+    _props$lastTree = props.lastTree,
+    lastTree = _props$lastTree === void 0 ? false : _props$lastTree,
+    current = props.current,
+    setCurrent = props.setCurrent,
+    setPluginLogVisible = props.setPluginLogVisible,
+    treeIndex = props.treeIndex,
+    instance = props.instance,
+    job = props.job,
+    setBuildId = props.setBuildId;
+  var _useState = useState([]),
+    tree = _useState[0],
+    setTree = _useState[1];
+  var _useState2 = useState(true),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var _useState3 = useState(false),
+    init = _useState3[0],
+    setInit = _useState3[1];
+  var _useState4 = useState(false),
+    selectedNode = _useState4[0],
+    setSelectedNode = _useState4[1];
+  var logTreeIsFinished = function logTreeIsFinished(logTree) {
+    var nodes = logTree[0].steps;
+    return nodes.find(function (node) {
+      return node.status === 'fail';
+    }) || every(nodes, function (node) {
+      return node.status === 'success';
+    });
+  };
+  var getPipelineJobSteps = function getPipelineJobSteps() {
+    var pipelineRunId = instance.pipelineRunId,
+      pipelineId = instance.pipelineId;
+    GetPipelineJobSteps(pipelineId, pipelineRunId, job.id).then(function (jobSteps) {
+      setLoading(false);
+      if (jobSteps && jobSteps[0]) {
+        setTree(jobSteps);
+        setBuildId(jobSteps[0].jobId);
+      }
+    })["catch"](function () {
+      setLoading(false);
+    });
+  };
+  useEffect(function () {
+    getPipelineJobSteps();
+  }, []);
+  useEffect(function () {
+    return function () {
+      clearTimeout(nodePullTimer);
+    };
+  }, []);
+  if (loading || tree.length === 0) {
+    return /*#__PURE__*/React.createElement(Loading, {
+      inline: false,
+      style: {
+        marginTop: 50
+      }
+    });
+  }
+  if (!init && tree.length > 0 && tree[0].buildProcessNodes.length > 0) {
+    // 初始化处理逻辑
+    var nodes = tree.flatMap(function (item) {
+      return item.buildProcessNodes;
+    });
+    var selectNode = nodes.find(function (item) {
+      return item.status === 'running' || item.status === 'fail';
+    }) || tree[0].buildProcessNodes[0];
+    if (lastTree) {
+      setSelectedNode(selectNode);
+      _onSelect({
+        nodeUrl: nodeUrl,
+        treeSummaryUrl: treeSummaryUrl,
+        headerUrl: headerUrl,
+        selectNode: selectNode,
+        downloadUrl: downloadUrl
+      });
+      setCurrent(treeIndex);
+    }
+    setInit(true);
+  }
+  return /*#__PURE__*/React.createElement(Tree, {
+    className: "job-log-tree",
+    defaultExpandAll: true,
+    onSelect: function onSelect(args) {
+      var key = args[0];
+      var selectNode = JSON.parse(key);
+      setSelectedNode(selectNode);
+      _onSelect({
+        nodeUrl: nodeUrl,
+        treeSummaryUrl: treeSummaryUrl,
+        headerUrl: headerUrl,
+        selectNode: selectNode,
+        downloadUrl: downloadUrl
+      });
+      setCurrent(treeIndex);
+      setPluginLogVisible(false);
+    }
+  }, tree.map(function (item, i) {
+    return /*#__PURE__*/React.createElement(TreeNode, {
+      label: i18nActionName(item.actionName),
+      key: item.jobId,
+      disabled: true
+    }, item.buildProcessNodes.map(function (node, i) {
+      return /*#__PURE__*/React.createElement(TreeNode, {
+        className: ["job-log-tree__node--" + node.status, node.nodeIndex === selectedNode.nodeIndex && treeIndex === current ? 'selected' : ''].join(' '),
+        key: JSON.stringify(node),
+        label: /*#__PURE__*/React.createElement("div", {
+          className: "node-item"
+        }, /*#__PURE__*/React.createElement(StatusAbleIcon, {
+          status: node.status
+        }), /*#__PURE__*/React.createElement("div", {
+          className: "node-item__text"
+        }, tooltip(node.nodeName))),
+        disabled: node.status === 'ready'
+      });
+    }));
+  }));
+};
+var LogButton = function LogButton(_ref) {
+  var _ref$view = _ref.view,
+    view = _ref$view === void 0 ? false : _ref$view,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var id = props.id,
+    job = props.job,
+    instance = props.instance;
+  var _useState5 = useState(''),
+    logs = _useState5[0],
+    setLogs = _useState5[1];
+  var _useState6 = useState([]),
+    pluginLogs = _useState6[0],
+    setPluginLogs = _useState6[1];
+  var _useState7 = useState(false),
+    pluginLogVisible = _useState7[0],
+    setPluginLogVisible = _useState7[1];
+  var _useState8 = useState(true),
+    loading = _useState8[0],
+    setLoading = _useState8[1];
+  var _useState9 = useState({}),
+    context = _useState9[0],
+    setContext = _useState9[1];
+  var _useState10 = useState(''),
+    downloadURL = _useState10[0],
+    setDownloadURL = _useState10[1];
+  var _useState11 = useState(''),
+    downloadLogAction = _useState11[0],
+    setDownloadLogAction = _useState11[1];
+  var _useState12 = useState(''),
+    viewLogAction = _useState12[0],
+    setViewLogAction = _useState12[1];
+  var _useState13 = useState(0),
+    currentIndex = _useState13[0],
+    setCurrentIndex = _useState13[1];
+  var _useState14 = useState(),
+    buildId = _useState14[0],
+    setBuildId = _useState14[1];
+  var isFinishStatus = function isFinishStatus(status) {
+    return ['success', 'fail'].includes(status);
+  };
+
+  // 查插件日志，若有则展示左下角入口
+  var pullPluginLog = function pullPluginLog() {
+    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);
+        }
+      });
+    }
+  };
+  useEffect(function () {
+    pullPluginLog();
+    return function () {
+      clearTimeout(logPulltimer);
+    };
+  }, []);
+  var _getLog = function getLog(_ref2) {
+    var offset = _ref2.offset,
+      _ref2$cache = _ref2.cache,
+      cache = _ref2$cache === void 0 ? '' : _ref2$cache;
+    if (view) {
+      return;
+    }
+    if (logPulltimer) {
+      clearTimeout(logPulltimer);
+    }
+    var pipelineRunId = instance.pipelineRunId,
+      pipelineId = instance.pipelineId;
+    var selectNode = context.selectNode;
+    if (selectNode && buildId) {
+      if (SELECT_NODE_HOLDER !== selectNode.nodeIndex) {
+        return;
+      }
+      GetPipelineJobStepLog({
+        pipelineRunId: pipelineRunId,
+        pipelineId: pipelineId,
+        jobId: job.id,
+        buildId: buildId,
+        offset: offset,
+        stepIndex: selectNode.nodeIndex
+      }).then(function (res) {
+        var logs = res.logs,
+          last = res.last,
+          more = res.more;
+        cache = cache + "\n" + logs;
+        if (!/[^\s]/.test(cache)) {
+          setLogs(intl.get({
+            id: 'rdc-tb-cd-assets.flow-job-btn.log-btn.NoLogs',
+            defaultMessage: '没有日志'
+          }));
+        } else {
+          setLogs(cache.trim().replace(/http:\/\/testing\.rdc\.aliyun\.com/, ''));
+        }
+
+        // 是否到日志结尾
+        if (last !== -1) {
+          // 已完成日志加速加载
+          var interval = DEFAULT_INTERVAL / (isFinishStatus(selectNode.status) ? DEFAULT_RATE : 1);
+          logPulltimer = setTimeout(function () {
+            _getLog({
+              offset: last,
+              cache: cache
+            });
+          }, interval);
+        }
+        setLoading(false);
+      });
+    }
+  };
+  useEffect(function () {
+    _getLog({
+      offset: 0,
+      cache: ''
+    });
+  }, [context, buildId]);
+  useEffect(function () {
+    setLoading(true);
+    setLogs('');
+  }, [context]);
+  useEffect(function () {
+    if (context && context.selectNode && !isFinishStatus(context.selectNode.status)) {
+      setTimeout(function () {
+        if (autoScroll) {
+          var logContainer = document.querySelector('.log-panel__context.right');
+          logContainer && logContainer.scrollTo({
+            top: logContainer.scrollHeight,
+            behavior: 'smooth'
+          });
+        }
+      }, 10);
+    }
+  }, [logs]);
+  var onSelect = function onSelect(c) {
+    SELECT_NODE_HOLDER = c.selectNode.nodeIndex;
+    setContext(c);
+  };
+  if (view) {
+    return /*#__PURE__*/React.createElement(Button, {
+      text: true,
+      onClick: props.onClick
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.log-btn.Log',
+      defaultMessage: '日志'
+    }));
+  }
+  var formatedLogs = function formatedLogs() {
+    var logsWithoutScripts = dropWhile(logs.split(/\n/), function (line) {
+      return !line.startsWith('[executionStep begins');
+    });
+
+    // const logsWithoutScripts = logs.split(/\n/);
+    if (logsWithoutScripts.slice(0, 20).join().includes('heartbeat timeout,please contact with system administrator')) {
+      return intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.log-btn.TheTaskWasTerminatedUnexpectedly',
+        defaultMessage: '任务执行意外终止，请尝试重试'
+      });
+    }
+    var logsWithoutSystemInfo = logsWithoutScripts;
+    if (loading) {
+      return '';
+    }
+    if (logsWithoutSystemInfo.length === 0) {
+      return intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.log-btn.NoLogs',
+        defaultMessage: '没有日志'
+      });
+    }
+    return logsWithoutSystemInfo.map(function (log, index) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: index
+      }, /*#__PURE__*/React.createElement(Ansi, null, log.replace(/ /g, "\xA0")));
+    });
+  };
+  var formatedAppBuildLogs = function formatedAppBuildLogs() {
+    var logsWithoutScripts = (logs.split('LoG_TaB_HeaD')[2] || '').split(/\n/);
+    if (logsWithoutScripts.slice(0, 20).join().includes('heartbeat timeout,please contact with system administrator')) {
+      return intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.log-btn.TheTaskWasTerminatedUnexpectedly',
+        defaultMessage: '任务执行意外终止，请尝试重试'
+      });
+    }
+    if (loading) {
+      return '';
+    }
+    if (logsWithoutScripts.filter(function (log) {
+      return log;
+    }).length === 0) {
+      return intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.log-btn.NoLogs',
+        defaultMessage: '没有日志'
+      });
+    }
+    var format = function format(log) {
+      if (/HIGHLIGHT__GREEN/.test(log)) {
+        return /*#__PURE__*/React.createElement("span", {
+          style: {
+            color: 'var(--color-success-5, #23b066)'
+          }
+        }, log.replace(/HIGHLIGHT__GREEN/, ''));
+      }
+      if (/HIGHLIGHT__/.test(log)) {
+        return /*#__PURE__*/React.createElement("span", {
+          style: {
+            color: 'var(--color-help-5, #fad414)'
+          }
+        }, log.replace(/HIGHLIGHT__/, ''));
+      }
+      return log;
+    };
+    return logsWithoutScripts.map(function (log, index) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: index
+      }, format(log));
+    });
+  };
+  var handleScroll = function handleScroll() {
+    if (scrollTimer) {
+      clearTimeout(scrollTimer);
+    }
+    scrollTimer = setTimeout(function () {
+      var logContainer = document.querySelector('.log-panel__context.right');
+      var clientHeight = logContainer.clientHeight,
+        scrollHeight = logContainer.scrollHeight,
+        scrollTop = logContainer.scrollTop;
+      var isBottom = clientHeight + scrollTop >= scrollHeight;
+      if (isBottom) {
+        autoScroll = true;
+      } else {
+        autoScroll = false;
+      }
+    }, 100);
+  };
+  var getLogsPanel = function getLogsPanel() {
+    // 插件日志
+    if (pluginLogVisible) {
+      return /*#__PURE__*/React.createElement(PluginLogTable, {
+        dataSource: pluginLogs
+      });
+    }
+    // step日志
+    var config = {
+      logs: /*#__PURE__*/React.createElement(Fragment, null, formatedLogs(), loading && /*#__PURE__*/React.createElement(Loading, {
+        visible: loading,
+        inline: false
+      }))
+    };
+    return config.logs;
+  };
+  var getLogsPanelTitle = function getLogsPanelTitle() {
+    // 插件日志
+    if (pluginLogVisible) {
+      return intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.log-btn.ViewPlugInLogs',
+        defaultMessage: '查看插件日志'
+      });
+    }
+
+    // step日志
+    return context.selectNode ? context.selectNode.nodeName : props.name;
+  };
+  var butttonToGetDownloadUrlAndOpen = function butttonToGetDownloadUrlAndOpen(url, title) {
+    return /*#__PURE__*/React.createElement(Button, {
+      text: true,
+      size: "small",
+      onClick: function onClick() {
+        fetch({
+          url: url
+        }).then(function (res) {
+          if (res.successful && res.object) {
+            window.open(res.object);
+          }
+        })["catch"](console.error);
+      }
+    }, title);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "log-container",
+    key: id
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "log-container__tree log-container__side " + (pluginLogs.length ? 'with-footer' : '')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "log-panel__context"
+  }, /*#__PURE__*/React.createElement(SubTree, {
+    onSelect: onSelect,
+    treeIndex: 0,
+    current: currentIndex,
+    job: job,
+    instance: instance,
+    setCurrent: setCurrentIndex,
+    setPluginLogVisible: setPluginLogVisible,
+    setBuildId: setBuildId,
+    lastTree: true
+  })), !!pluginLogs.length && /*#__PURE__*/React.createElement("div", {
+    className: "log-container__side__footer"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "plugin-log-trigger " + (pluginLogVisible ? 'active' : ''),
+    onClick: function onClick() {
+      setPluginLogVisible(true);
+      setCurrentIndex(-1); // SubTree不选中
+    }
+  }, /*#__PURE__*/React.createElement(BaiscIconFont, {
+    type: "guidebook-2-line",
+    className: "plugin-log-trigger-icon"
+  }), intl.get({
+    id: 'rdc-tb-cd-assets.flow-job-btn.log-btn.ViewPlugInLogs',
+    defaultMessage: '查看插件日志'
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "log-container__body"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "log-panel__title bg-dark"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "log-panel__title__head"
+  }, getLogsPanelTitle()), !pluginLogVisible && /*#__PURE__*/React.createElement("div", {
+    className: "log-panel__title__ops"
+  }, downloadLogAction && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: "log-panel__view-log-btn"
+  }, butttonToGetDownloadUrlAndOpen(viewLogAction, intl.get({
+    id: 'rdc-tb-cd-assets.flow-job-btn.log-btn.View',
+    defaultMessage: '查看原始日志'
+  }))), butttonToGetDownloadUrlAndOpen(downloadLogAction, intl.get({
+    id: 'rdc-tb-cd-assets.flow-job-btn.log-btn.View',
+    defaultMessage: '下载日志'
+  }))), !downloadLogAction && downloadURL && /*#__PURE__*/React.createElement(Button, {
+    text: true,
+    size: "small",
+    onClick: function onClick() {
+      window.open(downloadURL);
+    }
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.flow-job-btn.log-btn.Download',
+    defaultMessage: '下载'
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "log-panel__context right",
+    onScroll: handleScroll
+  }, getLogsPanel())));
+};
+
+// 卡片展示按钮
+LogButton.Button = function (_ref3) {
+  var onClick = _ref3.onClick,
+    id = _ref3.id,
+    _ref3$text = _ref3.text,
+    text = _ref3$text === void 0 ? false : _ref3$text,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+  var _props$btnType = props.btnType,
+    btnType = _props$btnType === void 0 ? 'normal' : _props$btnType,
+    children = props.children;
+  return /*#__PURE__*/React.createElement(Button, {
+    text: true,
+    onClick: onClick,
+    key: id,
+    type: btnType
+  }, !text && /*#__PURE__*/React.createElement(BaiscIconFont, {
+    type: "guidebook-2-line"
+  }), intl.get({
+    id: 'rdc-tb-cd-assets.flow-job-btn.log-btn.Log',
+    defaultMessage: '日志'
+  }), children);
+};
+
+// 详情样式
+LogButton.View = LogButton;
+
+// 卡片样式
+LogButton.Card = null;
+export default LogButton;