forked from Gitlink/forgeplus-react
128 lines
3.9 KiB
JavaScript
128 lines
3.9 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
||
import { FlexAJ, Blueline, AlignCenter } from "../Component/layout";
|
||
import styled from "styled-components";
|
||
import { Menu, Popconfirm } from "antd";
|
||
import { TagsLine } from "../Component/OpsStatus";
|
||
import { Time } from "../Utils/Time";
|
||
import { truncateCommitId } from "../common/util";
|
||
import { getImageUrl } from 'educoder';
|
||
|
||
const SubMenu = Menu.SubMenu;
|
||
const Img = styled.img`
|
||
{
|
||
width: 25px;
|
||
height: 25px;
|
||
border-radius: 50%;
|
||
margin-right: 10px;
|
||
}
|
||
`;
|
||
export default ({ data, repeatSet , chooseSteps }) => {
|
||
const [tamp, setTamp] = useState(undefined);
|
||
const [sha, setSha] = useState(undefined);
|
||
useEffect(() => {
|
||
if (data && data.started) {
|
||
let t = parseInt(data.started) * 1000;
|
||
let time = Time(t);
|
||
setTamp(time);
|
||
}
|
||
if (data && data.after) {
|
||
setSha(truncateCommitId(data.after));
|
||
}
|
||
}, [data]);
|
||
|
||
function renderStatusBtn() {
|
||
let status = data && data.status;
|
||
let number = data && data.number;
|
||
if (status === "failure" || status === "error" || status === "success") {
|
||
return "";
|
||
}else if(status === "killed"){
|
||
return(
|
||
<Popconfirm
|
||
title="确认重新构建？"
|
||
onConfirm={(e) => repeatSet(e,'repeat',number)}
|
||
onCancel={(e)=>{e.stopPropagation()}}
|
||
cancelText="取消"
|
||
okText="确定"
|
||
>
|
||
<Blueline onClick={(e)=>{e.stopPropagation()}}>重新构建</Blueline>
|
||
</Popconfirm>
|
||
);
|
||
} else {
|
||
return (
|
||
<Popconfirm
|
||
title="确认撤销构建？"
|
||
onConfirm={(e) => repeatSet(e,'cancel',number)}
|
||
onCancel={(e)=>{e.stopPropagation()}}
|
||
cancelText="取消"
|
||
okText="确定"
|
||
>
|
||
<Blueline onClick={(e)=>{e.stopPropagation()}}>撤销构建</Blueline>
|
||
</Popconfirm>
|
||
);
|
||
}
|
||
}
|
||
|
||
function clickSub(e,stageN,stepN){
|
||
chooseSteps(stageN,stepN);
|
||
}
|
||
|
||
return (
|
||
<div>
|
||
<FlexAJ className="leftheader">
|
||
<AlignCenter>
|
||
<Img src={getImageUrl(`/${data && data.author && data.author.image_url}`)} />
|
||
{data && data.started &&
|
||
<span className="nest">
|
||
开始时间：<span> {data.started}</span>
|
||
</span>
|
||
}
|
||
{
|
||
data && data.duration_time &&
|
||
<span className="nest">
|
||
运行时间：<span>{data.duration_time}</span>
|
||
</span>
|
||
}
|
||
</AlignCenter>
|
||
{renderStatusBtn()}
|
||
</FlexAJ>
|
||
<div className="leftMainContent">
|
||
<AlignCenter className="contentBranch">
|
||
<i className="iconfont icon-fenzhi1"></i>
|
||
<span>分支：</span>
|
||
<span className="branchname">{data && data.branch_target}</span>
|
||
<span className="branchsha">{data && truncateCommitId(data.build_after_sha)}</span>
|
||
</AlignCenter>
|
||
</div>
|
||
<Menu mode="inline" className="leftMenu" defaultOpenKeys={[`0`]} defaultSelectedKeys={[`0`]}>
|
||
{data && data.stages ? data.stages.map((item, key) => {
|
||
return item.steps && item.steps.length > 0 ?
|
||
<SubMenu
|
||
title={
|
||
<div>
|
||
<i className="iconfont icon-gongzuoliu font-14 mr4"></i>
|
||
<span>{item.name}</span>
|
||
</div>
|
||
}
|
||
key={`${key}`}
|
||
>
|
||
{item.steps.map((i, k) => {
|
||
return (
|
||
<Menu.Item key={`${k}`} onClick={(e)=>clickSub(e,item.number,i.id)}>
|
||
<FlexAJ>
|
||
<span>
|
||
{i.name} {i.status ? TagsLine(i.status) : ""}
|
||
</span>
|
||
<span>{i.duration_time}</span>
|
||
</FlexAJ>
|
||
</Menu.Item>
|
||
);
|
||
})}
|
||
</SubMenu>
|
||
: "";
|
||
})
|
||
: ""}
|
||
</Menu>
|
||
</div>
|
||
);
|
||
};
|