devops
This commit is contained in:
parent
42a1418181
commit
3abbaa8899
|
|
@ -35,6 +35,8 @@ function About(props, ref) {
|
|||
|
||||
const owner = props.match.params.owner;
|
||||
const projectsId = props.match.params.projectsId;
|
||||
const AuthorLogin = props.author && props.author.login;
|
||||
const CurrentLogin = props.current_user && props.current_user.login;
|
||||
|
||||
useEffect(()=>{
|
||||
auth('get');
|
||||
|
|
@ -188,68 +190,74 @@ function About(props, ref) {
|
|||
</p>
|
||||
</div>
|
||||
</Modal>
|
||||
<img src={activate} alt="" width="250px" />
|
||||
<P>定义DevOps工作流，帮助您检测bug、发布代码…</P>
|
||||
<Link to={""} style={{ color: "#5091FF", marginBottom: "20px" }}>
|
||||
了解什么是DevOps？
|
||||
</Link>
|
||||
{step <=1?
|
||||
<img src={activate} alt="" width="250px" />
|
||||
<P>定义DevOps工作流，帮助您检测bug、发布代码…</P>
|
||||
<Link to={""} style={{ color: "#5091FF", marginBottom: "20px" }}>
|
||||
了解什么是DevOps？
|
||||
</Link>
|
||||
{
|
||||
AuthorLogin === CurrentLogin ?
|
||||
<React.Fragment>
|
||||
<Form>
|
||||
<p className="mb20" style={{width:"370px"}}>请仔细核对您的服务器信息，一旦确认提交将无法修改</p>
|
||||
{helper(
|
||||
"服务器IP地址：",
|
||||
"ip_num",
|
||||
[{ required: true, message: "请输入服务器IP地址" }],
|
||||
<Input
|
||||
placeholder="请输入服务器IP地址"
|
||||
style={{ width: "368px" }}
|
||||
size="large"
|
||||
disabled={firstCompleted}
|
||||
/>,
|
||||
true
|
||||
)}
|
||||
{helper(
|
||||
"服务器用户名：",
|
||||
"account",
|
||||
[{ required: true, message: "请输入服务器用户名" }],
|
||||
<Input placeholder="请输入服务器用户名" size="large" disabled={firstCompleted} />,
|
||||
true
|
||||
)}
|
||||
{helper(
|
||||
"服务器密码：",
|
||||
"secret",
|
||||
[{ required: true, message: "请输入服务器密码" }],
|
||||
<Input.Password placeholder="请输入服务器密码" size="large" disabled={firstCompleted}/>,
|
||||
true
|
||||
)}
|
||||
</Form>
|
||||
<Blueback onClick={goStep}>下一步</Blueback>
|
||||
</React.Fragment>
|
||||
:""}
|
||||
|
||||
{step >= 2 &&(
|
||||
<div>
|
||||
{ step <= 1 ?
|
||||
<React.Fragment>
|
||||
<Form>
|
||||
<p className="mb20" style={{width:"370px"}}>认证成功后，请前往<a target="_blank" href={cloudAccount && cloudAccount.get_drone_token_url} className="color-blue">{cloudAccount && cloudAccount.get_drone_token_url}</a>获取token值，并将获取的token值填入输入框</p>
|
||||
<p className="mb20" style={{width:"370px"}}>请仔细核对您的服务器信息，一旦确认提交将无法修改</p>
|
||||
{helper(
|
||||
"token值：",
|
||||
"drone_token",
|
||||
[{ required: true, message: "请输入token值" }],
|
||||
<Input placeholder="请输入token值" size="large" />,
|
||||
"服务器IP地址：",
|
||||
"ip_num",
|
||||
[{ required: true, message: "请输入服务器IP地址" }],
|
||||
<Input
|
||||
placeholder="请输入服务器IP地址"
|
||||
style={{ width: "368px" }}
|
||||
size="large"
|
||||
disabled={firstCompleted}
|
||||
/>,
|
||||
true
|
||||
)}
|
||||
{helper(
|
||||
"服务器用户名：",
|
||||
"account",
|
||||
[{ required: true, message: "请输入服务器用户名" }],
|
||||
<Input placeholder="请输入服务器用户名" size="large" disabled={firstCompleted} />,
|
||||
true
|
||||
)}
|
||||
{helper(
|
||||
"服务器密码：",
|
||||
"secret",
|
||||
[{ required: true, message: "请输入服务器密码" }],
|
||||
<Input.Password placeholder="请输入服务器密码" size="large" disabled={firstCompleted}/>,
|
||||
true
|
||||
)}
|
||||
<div style={{ display: "flex", justifyContent: "center" }}>
|
||||
{
|
||||
step === 2?
|
||||
<Blueback onClick={startActive} className="ml20">开始激活</Blueback>
|
||||
:
|
||||
<Blueback onClick={complete}>完成</Blueback>
|
||||
}
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
)}
|
||||
<Blueback onClick={goStep}>下一步</Blueback>
|
||||
</React.Fragment>
|
||||
:""}
|
||||
{step >= 2 &&(
|
||||
<div>
|
||||
<Form>
|
||||
<p className="mb20" style={{width:"370px"}}>认证成功后，请前往<a target="_blank" href={cloudAccount && cloudAccount.get_drone_token_url} className="color-blue">{cloudAccount && cloudAccount.get_drone_token_url}</a>获取token值，并将获取的token值填入输入框</p>
|
||||
{helper(
|
||||
"token值：",
|
||||
"drone_token",
|
||||
[{ required: true, message: "请输入token值" }],
|
||||
<Input placeholder="请输入token值" size="large" />,
|
||||
true
|
||||
)}
|
||||
<div style={{ display: "flex", justifyContent: "center" }}>
|
||||
{
|
||||
step === 2?
|
||||
<Blueback onClick={startActive} className="ml20">开始激活</Blueback>
|
||||
:
|
||||
<Blueback onClick={complete}>完成</Blueback>
|
||||
}
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
)}
|
||||
</React.Fragment>
|
||||
:""
|
||||
}
|
||||
|
||||
</div>
|
||||
</Spin>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@ function Dispose(props){
|
|||
|
||||
let projectsId = props.match.params.projectsId;
|
||||
let owner = props.match.params.owner;
|
||||
|
||||
useEffect(()=>{
|
||||
if(projectsId){
|
||||
const url = `/${owner}/${projectsId}/get_trustie_pipeline.json`;
|
||||
|
|
|
|||
|
|
@ -62,8 +62,8 @@ export default ({ data, repeatSet , chooseSteps }) => {
|
|||
}
|
||||
}
|
||||
|
||||
function clickSub(e,stageN,stepN,stageName){
|
||||
chooseSteps(stageN,stepN,stageName);
|
||||
function clickSub(e,stageN,stepN){
|
||||
chooseSteps(stageN,stepN);
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -107,7 +107,7 @@ export default ({ data, repeatSet , chooseSteps }) => {
|
|||
>
|
||||
{item.steps.map((i, k) => {
|
||||
return (
|
||||
<Menu.Item onClick={(e)=>clickSub(e,item.number,i.id,item.name)}>
|
||||
<Menu.Item onClick={(e)=>clickSub(e,item.number,i.id)}>
|
||||
<FlexAJ>
|
||||
<span>
|
||||
{i.name} {i.status ? TagsLine(i.status) : ""}
|
||||
|
|
|
|||
|
|
@ -3,16 +3,38 @@ import { Spin } from 'antd';
|
|||
import { FlexAJ, AlignCenter } from "../Component/layout";
|
||||
import axios from 'axios';
|
||||
|
||||
export default (({ step , stageNumber , stageName , projectId , owner , opsId , rightSpin }) => {
|
||||
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);
|
||||
useEffect(()=>{
|
||||
setSpining(rightSpin);
|
||||
},[rightSpin])
|
||||
|
||||
useEffect(()=>{
|
||||
if(projectId && stageNumber && step){
|
||||
const url = `/${owner}/${projectId}/builds/${opsId}/logs/${stageNumber}/${step && step.number}.json`;
|
||||
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);
|
||||
if(sub){
|
||||
getStep(pre.number,sub.number);
|
||||
}
|
||||
}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);
|
||||
|
|
@ -24,38 +46,42 @@ export default (({ step , stageNumber , stageName , projectId , owner , opsId ,
|
|||
console.log(error);
|
||||
})
|
||||
}
|
||||
},[projectId , stageNumber, step])
|
||||
|
||||
}
|
||||
return (
|
||||
<Spin spinning={spining}>
|
||||
<div className="rightMainContent">
|
||||
<div>
|
||||
<FlexAJ className="items">
|
||||
<span>{step && step.name}</span>
|
||||
<AlignCenter>
|
||||
{ step && step.duration_time}
|
||||
<i className="iconfont icon-sanjiaoxing-down"></i>
|
||||
</AlignCenter>
|
||||
</FlexAJ>
|
||||
{
|
||||
data && data.status !== "error" ?
|
||||
<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>{stageName} – {step && step.name}: Skipped</p>
|
||||
</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>
|
||||
:
|
||||
<div style={{color:"red"}}>error:{ data && data.error }</div>
|
||||
}
|
||||
</div>
|
||||
</Spin>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -11,11 +11,9 @@ import { Link } from "react-router-dom";
|
|||
|
||||
export default (props) => {
|
||||
const [data, setData] = useState(undefined);
|
||||
const [stages, setStages] = useState(undefined);
|
||||
const [ rightStageName , setRightStageName ] = useState(undefined);
|
||||
const [rightStep, setRightStep] = useState(undefined);
|
||||
const [stageN, setStageN] = useState(undefined);
|
||||
const [stepN, setStepN] = useState(undefined);
|
||||
const [rightSpin, setRightSpin] = useState(false);
|
||||
const [rightStageNumber, setRightStageNumber] = useState(undefined);
|
||||
const [spinning, setSpinning] = useState(true);
|
||||
|
||||
let projectId = props.match.params.projectId;
|
||||
|
|
@ -34,14 +32,6 @@ export default (props) => {
|
|||
if (result && result.data) {
|
||||
setSpinning(false);
|
||||
setData(result.data);
|
||||
let stages = result.data.stages;
|
||||
setStages(stages);
|
||||
let firstStage = stages && stages.length > 0 && stages[0];
|
||||
let firstStep = firstStage && firstStage.steps && firstStage.steps.length>0 && firstStage.steps[0];
|
||||
setRightStep(firstStep);
|
||||
setRightSpin(true);
|
||||
setRightStageName(firstStage && firstStage.name);
|
||||
setRightStageNumber(firstStage && firstStage.number);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
|
|
@ -79,14 +69,10 @@ export default (props) => {
|
|||
}
|
||||
}
|
||||
|
||||
function chooseSteps(stageN,stepN,stageName){
|
||||
if(stageN && stepN && stages){
|
||||
let stage = stages && stages.length>0 && stages.filter(item=>item.number===stageN)[0];
|
||||
let s = stage.steps && stage.steps.length > 0 && stage.steps.filter(item=>item.id===stepN);
|
||||
|
||||
s && s.length>0 && setRightStep(s[0]);
|
||||
setRightStageNumber(stageN);
|
||||
setRightStageName(stageName);
|
||||
function chooseSteps(pre,sub){
|
||||
if(pre && sub){
|
||||
setStepN(sub);
|
||||
setStageN(pre);
|
||||
setRightSpin(true);
|
||||
}
|
||||
}
|
||||
|
|
@ -118,7 +104,7 @@ export default (props) => {
|
|||
<LeftPanel data={data} repeatSet={repeatSet} chooseSteps={chooseSteps} />
|
||||
</section>
|
||||
<section className="rightSection">
|
||||
<RightPanel stageName={rightStageName} rightSpin={rightSpin} step={rightStep} stageNumber = {rightStageNumber} owner={owner} projectId={projectId} opsId={opsId} />
|
||||
<RightPanel data={data} rightSpin={rightSpin} stepN={stepN} stageN={stageN} owner={owner} projectId={projectId} opsId={opsId} />
|
||||
</section>
|
||||
</SplitPane>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -487,16 +487,12 @@ class Detail extends Component {
|
|||
</Link>
|
||||
</li>
|
||||
}
|
||||
{
|
||||
current_user && author && current_user.login === author.login ?
|
||||
<li className={pathname==="devops" ? "active" : ""}>
|
||||
<Link to={{ pathname: `/projects/${owner}/${projectsId}/devops${open_devops ? `/dispose`:""}`, state }}>
|
||||
<i className="iconfont icon-gongzuoliu font-13 mr8"></i>工作流
|
||||
{projectDetail && projectDetail.ops_count ? <span>{projectDetail.ops_count}</span> : ""}
|
||||
</Link>
|
||||
</li>:""
|
||||
}
|
||||
|
||||
<li className={pathname==="devops" ? "active" : ""}>
|
||||
<Link to={{ pathname: `/projects/${owner}/${projectsId}/devops${open_devops ? `/dispose`:""}`, state }}>
|
||||
<i className="iconfont icon-gongzuoliu font-13 mr8"></i>工作流
|
||||
{projectDetail && projectDetail.ops_count ? <span>{projectDetail.ops_count}</span> : ""}
|
||||
</Link>
|
||||
</li>
|
||||
<li className={pathname==="milestones" ? "active" : ""}>
|
||||
<Link to={{ pathname: `/projects/${owner}/${projectsId}/milestones`, state }}>
|
||||
<img alt="" src={img_milepost} width="16" />里程碑
|
||||
|
|
|
|||
Loading…
Reference in New Issue