124 lines
3.6 KiB
JavaScript
124 lines
3.6 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
||
import { Spin , Menu } from "antd";
|
||
import { FlexAJ, AlignCenter } from "../Component/layout";
|
||
import axios from "axios";
|
||
import CodeSSH from './ssh/Index';
|
||
|
||
export default ({
|
||
data,
|
||
stepN,
|
||
stageN,
|
||
projectId,
|
||
owner,
|
||
opsId,
|
||
rightSpin,
|
||
}) => {
|
||
const [coders, setCoders] = useState(undefined);
|
||
const [empty, setEmpty] = useState(false);
|
||
const [spining, setSpining] = useState(true);
|
||
const [stage, setStage] = useState(undefined);
|
||
const [step, setStep] = useState(undefined);
|
||
const [nav, setNav] = useState("0");
|
||
|
||
useEffect(() => {
|
||
setSpining(rightSpin);
|
||
}, [rightSpin]);
|
||
|
||
useEffect(() => {
|
||
if (data) {
|
||
let stages = data.stages;
|
||
if (stages && stages.length > 0) {
|
||
let pre = stageN
|
||
? stages.filter((item) => item.number === stageN)[0]
|
||
: stages[0];
|
||
setStage(pre);
|
||
let p = pre && pre.steps;
|
||
let sub = stepN
|
||
? p && p.length > 0 && p.filter((item) => item.id === stepN)[0]
|
||
: p[0];
|
||
|
||
setStep(sub);
|
||
setNav("0");
|
||
if (sub && sub.status !== "skipped") {
|
||
getStep(pre.number, sub.number);
|
||
}
|
||
// 如果状态是skipped就不用去调用接口查询对应的out信息了
|
||
if(sub.status === "skipped"){
|
||
setCoders(undefined);
|
||
setEmpty(true);
|
||
setSpining(false);
|
||
}
|
||
} else {
|
||
setSpining(false);
|
||
}
|
||
}
|
||
}, [data, stageN, stepN]);
|
||
|
||
function getStep(stageN, stepN) {
|
||
if (stageN && stepN) {
|
||
const url = `/${owner}/${projectId}/builds/${opsId}/logs/${stageN}/${stepN}.json`;
|
||
axios.get(url).then((result) => {
|
||
if (result) {
|
||
setCoders(result.data);
|
||
setSpining(false);
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
console.log(error);
|
||
});
|
||
}
|
||
}
|
||
return (
|
||
<React.Fragment>
|
||
{/* <Menu className="devopsNav" onClick={(e)=>{setNav(e.key)}} selectedKeys={[nav]} mode="horizontal">
|
||
<Menu.Item key={'0'} value="0">开发流水线</Menu.Item>
|
||
<Menu.Item key={'1'} value="1">命令行</Menu.Item>
|
||
</Menu> */}
|
||
{
|
||
nav === "0" &&
|
||
<Spin spinning={spining}>
|
||
<div className="rightMainContent">
|
||
{data && data.status !== "error" ? (
|
||
<div>
|
||
<FlexAJ className="items">
|
||
<span>{step && step.name}</span>
|
||
<AlignCenter>
|
||
{step && step.duration_time}
|
||
<i className="iconfont icon-sanjiaoxing-down"></i>
|
||
</AlignCenter>
|
||
</FlexAJ>
|
||
<div>
|
||
{coders && coders.length > 0 ? (
|
||
coders.map((item, key) => {
|
||
return (
|
||
<div className="opsDetailOut">
|
||
<span>{key + 1}</span>
|
||
<p>{item.out}</p>
|
||
</div>
|
||
);
|
||
})
|
||
) : empty ? (
|
||
<div className="opsDetailOut">
|
||
<span>1</span>
|
||
<p>
|
||
{stage && stage.name} – {step && step.name}: Skipped
|
||
</p>
|
||
</div>
|
||
) : (
|
||
""
|
||
)}
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div style={{ color: "red" }}>error:{data && data.error}</div>
|
||
)}
|
||
</div>
|
||
</Spin>
|
||
}
|
||
{
|
||
nav === "1" && <CodeSSH />
|
||
}
|
||
</React.Fragment>
|
||
);
|
||
};
|