devops流程
This commit is contained in:
parent
46097ee5e1
commit
d029a9ab6f
|
|
@ -1,11 +1,9 @@
|
|||
import React, { forwardRef, useCallback, useState , useEffect } from "react";
|
||||
import activate from "../Images/activate.png";
|
||||
import { Blueback } from "../Component/layout";
|
||||
import { Blueback , AlignCenter } from "../Component/layout";
|
||||
import styled from "styled-components";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Form, Input , Spin } from "antd";
|
||||
import { Form, Input , Spin , Modal } from "antd";
|
||||
import axios from "axios";
|
||||
import { ceil } from "lodash";
|
||||
|
||||
const P = styled.p`
|
||||
{
|
||||
|
|
@ -21,21 +19,19 @@ const P = styled.p`
|
|||
function About(props, ref) {
|
||||
const { form: { getFieldDecorator, validateFields , setFieldsValue } } = props;
|
||||
const [isSpining, setIsSpining] = useState(true);
|
||||
const [ authorityValBox , setAuthorityValBox ] = useState(false);
|
||||
const [ authorityVal , setAuthorityVal ] = useState(undefined);
|
||||
const [ authorityValFlag , setAuthorityValFlag ] = useState(false);
|
||||
//0: 标识未开启devops
|
||||
//1: 标识用户已填写了云服务器相关信息，但并未开启认证
|
||||
const [step, setStep] = useState(undefined);
|
||||
// step大于1时：为true，不能再修改服务器信息
|
||||
|
||||
const [ redirectUrl ,setRedirectUrl ] = useState(undefined);
|
||||
const [ cloudAccount , setCloudAccount] = useState(undefined);
|
||||
|
||||
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;
|
||||
let current_user = props.current_user;
|
||||
|
||||
useEffect(()=>{
|
||||
if(CurrentLogin === AuthorLogin){
|
||||
|
|
@ -54,8 +50,7 @@ function About(props, ref) {
|
|||
if(result && result.data ){
|
||||
setIsSpining(false);
|
||||
setStep(result.data.step);
|
||||
setCloudAccount(result.data.cloud_account);
|
||||
setRedirectUrl(result.data.cloud_account &&result.data.cloud_account.authenticate_url);
|
||||
setFieldsValue({...result.data.cloud_account});
|
||||
}
|
||||
}).catch(error=>{
|
||||
console.log(error);
|
||||
|
|
@ -77,20 +72,24 @@ function About(props, ref) {
|
|||
function goStep() {
|
||||
validateFields((error, values) => {
|
||||
if (!error) {
|
||||
setIsSpining(true);
|
||||
const url = `/${owner}/${projectsId}/cloud_accounts.json`;
|
||||
axios.post(url, {...values}).then((result) => {
|
||||
setIsSpining(false);
|
||||
if (result && result.data.redirect_url) {
|
||||
props.showNotification("服务器信息配置完成！");
|
||||
setRedirectUrl(result.data.redirect_url);
|
||||
setStep(1);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
setIsSpining(false);
|
||||
});
|
||||
if(step > 0){
|
||||
setAuthorityValBox(true);
|
||||
}else{
|
||||
setIsSpining(true);
|
||||
const url = `/${owner}/${projectsId}/cloud_accounts.json`;
|
||||
axios.post(url, {...values}).then((result) => {
|
||||
setIsSpining(false);
|
||||
if (result && result.data.redirect_url) {
|
||||
props.showNotification("服务器信息配置完成！");
|
||||
setStep(1);
|
||||
setAuthorityValBox(true);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
setIsSpining(false);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -112,8 +111,35 @@ function About(props, ref) {
|
|||
setIsSpining(false);
|
||||
})
|
||||
}
|
||||
// 取消授权-登录密码的输入
|
||||
function cancelAuthority(){
|
||||
setAuthorityValBox(false);
|
||||
}
|
||||
// 确认授权
|
||||
function okAuthority(){
|
||||
if(!authorityVal){
|
||||
setAuthorityValFlag(true);
|
||||
return;
|
||||
}
|
||||
const url = `/users/ci/oauth_grant.json`;
|
||||
axios.get(url,{
|
||||
params:{password:authorityVal}
|
||||
}).then(result=>{
|
||||
if(result){
|
||||
setAuthorityValBox(false);
|
||||
setStep(result.data.step);
|
||||
}
|
||||
}).catch(error=>{});
|
||||
}
|
||||
return (
|
||||
<Spin spinning={isSpining}>
|
||||
<Modal visible={authorityValBox} centered={true} title="授权" onCancel={cancelAuthority} onOk={okAuthority}>
|
||||
<p style={{textAlign:"center"}}>请输入您的登录密码，确认授权DevOps应用</p>
|
||||
<AlignCenter style={{justifyContent:"center",marginTop:"20px"}}>
|
||||
<span>密码：</span>
|
||||
<Input.Password value={authorityVal} className={authorityValFlag===true && "flags"} onChange={(e)=>setAuthorityVal(e.target.value)} style={{width:"220px"}}></Input.Password>
|
||||
</AlignCenter>
|
||||
</Modal>
|
||||
<div className="activatePanel">
|
||||
<img src={activate} alt="" width="250px" />
|
||||
<P>定义DevOps工作流，帮助您检测bug、发布代码…</P>
|
||||
|
|
@ -123,19 +149,20 @@ function About(props, ref) {
|
|||
{
|
||||
AuthorLogin === CurrentLogin ?
|
||||
<React.Fragment>
|
||||
{ step === 0 ?
|
||||
{ step <=1 ?
|
||||
<React.Fragment>
|
||||
<Input.Password style={{display:'none'}} size="large" />
|
||||
<Form style={{marginTop:"20px"}}>
|
||||
<p className="mb20" style={{width:"370px"}}>请仔细核对您的服务器信息，一旦确认提交将无法修改</p>
|
||||
{helper(
|
||||
"服务器IP地址：",
|
||||
"ip_num",
|
||||
"ip",
|
||||
[{ required: true, message: "请输入服务器IP地址" }],
|
||||
<Input
|
||||
placeholder="请输入服务器IP地址"
|
||||
style={{ width: "368px" }}
|
||||
size="large"
|
||||
disabled={step > 0}
|
||||
/>,
|
||||
true
|
||||
)}
|
||||
|
|
@ -143,26 +170,22 @@ function About(props, ref) {
|
|||
"服务器用户名：",
|
||||
"account",
|
||||
[{ required: true, message: "请输入服务器用户名" }],
|
||||
<Input placeholder="请输入服务器用户名" size="large" />,
|
||||
<Input placeholder="请输入服务器用户名" size="large" disabled={step > 0}/>,
|
||||
true
|
||||
)}
|
||||
{helper(
|
||||
"服务器密码：",
|
||||
"secret",
|
||||
[{ required: true, message: "请输入服务器密码" }],
|
||||
<Input.Password placeholder="请输入服务器密码" size="large" />,
|
||||
<Input.Password placeholder="请输入服务器密码" size="large" disabled={step > 0}/>,
|
||||
true
|
||||
)}
|
||||
</Form>
|
||||
<Blueback onClick={goStep}>下一步</Blueback>
|
||||
</React.Fragment>
|
||||
:""}
|
||||
{step >= 1 &&
|
||||
{step > 1 &&
|
||||
<div style={{textAlign:'center',marginTop:"20px"}}>
|
||||
{/* {
|
||||
step === 1 && current_user && !current_user.ci_certification &&
|
||||
<p style={{ maxWidth: "300px",textAlign:"left",color:"#999" }}>初始化配置已完成，请前往:<br/><a target="_blank" href={redirectUrl} className="color-blue">{redirectUrl}</a> 进入认证</p>
|
||||
} */}
|
||||
<Blueback onClick={startActive} className="mt20">开始激活</Blueback>
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -124,6 +124,10 @@
|
|||
}
|
||||
|
||||
}
|
||||
.flags{
|
||||
border: 1px solid red;
|
||||
border-radius: 5px;
|
||||
}
|
||||
// ops详情
|
||||
.opsDetailPanel{
|
||||
height: 100vh;
|
||||
|
|
|
|||
Loading…
Reference in New Issue