91 lines
2.5 KiB
JavaScript
91 lines
2.5 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 [stages, setStages] = useState(undefined);
|
|
const [spinning, setSpinning] = useState(true);
|
|
|
|
let projectId = props.match.params.projectId;
|
|
let opsId = props.match.params.opsId;
|
|
|
|
useEffect(() => {
|
|
if (opsId && projectId) {
|
|
Init();
|
|
}
|
|
}, [opsId]);
|
|
|
|
function Init(){
|
|
const url = `/dev_ops/builds/${opsId}.json`;
|
|
axios.get(url, {
|
|
params: {
|
|
project_id: projectId,
|
|
},
|
|
})
|
|
.then((result) => {
|
|
if (result && result.data) {
|
|
setSpinning(false);
|
|
setData(result.data);
|
|
setStages(result.data.stages);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
}
|
|
|
|
// 重新构建
|
|
function repeatSet() {
|
|
const url = `/dev_ops/builds/${data && data.number}.json`;
|
|
axios.post(url, { project_id: projectId })
|
|
.then((result) => {
|
|
if (result) {
|
|
Init();
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
}
|
|
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={`/projects/${projectId}/ops/list`}>
|
|
<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}/>
|
|
</section>
|
|
<section className="rightSection">
|
|
<RightPanel data={data} />
|
|
</section>
|
|
</SplitPane>
|
|
</div>
|
|
</div>
|
|
</Spin>
|
|
);
|
|
};
|