115 lines
3.3 KiB
JavaScript
115 lines
3.3 KiB
JavaScript
import React, { useEffect, useState, useRef, useContext } from "react";
|
|
import "./ops.scss";
|
|
import { FlexAJ, AlignCenter } from "../Component/layout";
|
|
import { Tags } from "../Component/OpsStatus";
|
|
import SplitPane from "react-split-pane";
|
|
import LeftPanel from "./OpsDetailLeftpanel";
|
|
import RightPanel from "./OpsDetailRightpanel";
|
|
import axios from "axios";
|
|
import { Spin } from "antd";
|
|
import { Link } from "react-router-dom";
|
|
|
|
export default (props) => {
|
|
const [data, setData] = useState(undefined);
|
|
const [stageN, setStageN] = useState(undefined);
|
|
const [stepN, setStepN] = useState(undefined);
|
|
const [rightSpin, setRightSpin] = useState(false);
|
|
const [spinning, setSpinning] = useState(true);
|
|
|
|
let projectId = props.match.params.projectId;
|
|
let owner = props.match.params.owner;
|
|
let opsId = props.match.params.opsId;
|
|
|
|
useEffect(() => {
|
|
if (opsId && projectId) {
|
|
Init();
|
|
}
|
|
}, [opsId]);
|
|
|
|
function Init() {
|
|
const url = `/${owner}/${projectId}/builds/${opsId}.json`;
|
|
axios.get(url).then((result) => {
|
|
if (result && result.data) {
|
|
setSpinning(false);
|
|
setData(result.data);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
setSpinning(false);
|
|
});
|
|
}
|
|
|
|
// 重新构建
|
|
function repeatSet(e,type,number) {
|
|
if(type==="repeat"){
|
|
// 重新构建
|
|
const url = `/${owner}/${projectId}/builds/${number}/restart.json`;
|
|
axios.post(url).then((result) => {
|
|
if (result && result.data) {
|
|
props.showNotification("工作流正在重新构建！");
|
|
props.history.push(`/${owner}/${projectId}/devops/${result.data.number}/detail`);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
}else{
|
|
// 撤销构建
|
|
const url = `/${owner}/${projectId}/builds/${number}/stop.json`;
|
|
axios.delete(url).then((result) => {
|
|
if (result) {
|
|
props.showNotification("撤销构建成功！");
|
|
Init();
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
}
|
|
}
|
|
|
|
function chooseSteps(pre,sub){
|
|
if(pre && sub){
|
|
setStepN(sub);
|
|
setStageN(pre);
|
|
setRightSpin(true);
|
|
}
|
|
}
|
|
return (
|
|
<Spin spinning={spinning}>
|
|
<div className="opsDetailPanel">
|
|
<FlexAJ className="opsInfos">
|
|
<AlignCenter>
|
|
<span>#{data && data.number}</span>
|
|
<span className="ml10">{data && data.message}</span>
|
|
{Tags(`${data && data.status}`)}
|
|
</AlignCenter>
|
|
<Link
|
|
style={{ color: "#ddd" }}
|
|
to={`/${owner}/${projectId}/devops`}
|
|
>
|
|
<i className="iconfont icon-yiguanbi font-15 mr5"></i>退出
|
|
</Link>
|
|
</FlexAJ>
|
|
<div className="opsSection">
|
|
<SplitPane
|
|
className="outer-split-pane"
|
|
split="vertical"
|
|
minSize={468}
|
|
maxSize={-350}
|
|
defaultSize="40%"
|
|
>
|
|
<section className="leftSection">
|
|
<LeftPanel data={data} repeatSet={repeatSet} chooseSteps={chooseSteps} />
|
|
</section>
|
|
<section className="rightSection">
|
|
<RightPanel data={data} rightSpin={rightSpin} stepN={stepN} stageN={stageN} owner={owner} projectId={projectId} opsId={opsId} />
|
|
</section>
|
|
</SplitPane>
|
|
</div>
|
|
</div>
|
|
</Spin>
|
|
);
|
|
};
|