工作流

This commit is contained in:
caishi 2020-12-31 13:58:44 +08:00
parent 2b063bb8f7
commit 05080e7948
6 changed files with 192 additions and 62 deletions

View File

@ -27,7 +27,7 @@ if (isDev) {
}
debugType = window.location.search.indexOf('debug=t') !== -1 ? 'teacher' :
window.location.search.indexOf('debug=s') !== -1 ? 'student' :
window.location.search.indexOf('debug=a') !== -1 ? 'admin' : parsed.debug || 'admin'
window.location.search.indexOf('debug=a') !== -1 ? 'admin' : parsed.debug || 'student'
}
function clearAllCookie() {
cookie.remove('_educoder_session', { path: '/' });

View File

@ -5,7 +5,7 @@ import './Component.scss';
export default (()=>{
return(
<div className="handleBox">
<a href="https://www.trustie.net/forums/82/memos/3075" target="_blank" >
<a href="https://forum.trustie.net/forums/3075/detail" target="_blank" >
<img src={Handbook} alt=""/>
</a>
</div>

View File

@ -1,9 +1,10 @@
import React, { forwardRef, useCallback, useState , useEffect } from "react";
import activate from "../Images/activate.png";
import { Blueback , AlignCenter } from "../Component/layout";
import { AlignCenter, Blueback } from "../Component/layout";
import PasswordAuthority from "../Component/PasswordAuthority";
import styled from "styled-components";
import { Form, Input , Spin , Modal } from "antd";
import { Form, Input , Spin , Button } from "antd";
import ServiceModal from './ServiceModal';
import axios from "axios";
const P = styled.p`
@ -20,15 +21,20 @@ 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);
// step1true
const [step, setStep] = useState(0);
const owner = props.match.params.owner;
const { user } = props;
const projectsId = props.match.params.projectsId;
const [ disabled, setDisabled ] = useState(false);
const [ typeFlag, setTypeFlag] = useState(false);
const AuthorLogin = props.author && props.author.login;
@ -47,12 +53,17 @@ function About(props, ref) {
method:`${type}`,
url
}).then(result=>{
setIsSpining(false);
if(result && result.data ){
setIsSpining(false);
setStep(result.data.step);
setFieldsValue({...result.data.cloud_account});
// setStep(0);
// setFieldsValue({...result.data.cloud_account});
// if(result.data.cloud_account){
// setDisabled(true);
// }
}
}).catch(error=>{
setIsSpining(false);
console.log(error);
})
}
@ -72,8 +83,8 @@ function About(props, ref) {
function goStep() {
validateFields((error, values) => {
if (!error) {
if(step > 0){
setAuthorityValBox(true);
if(disabled){
setStep(1);
}else{
setIsSpining(true);
const url = `/${owner}/${projectsId}/cloud_accounts.json`;
@ -82,7 +93,6 @@ function About(props, ref) {
if (result && result.data.redirect_url) {
props.showNotification("服务器信息配置完成!");
setStep(1);
setAuthorityValBox(true);
}
})
.catch((error) => {
@ -94,6 +104,50 @@ function About(props, ref) {
});
}
// 12trustie
function sureModal(type){
if(type === 2){
setTypeFlag(false);
setIsSpining(true);
const url = `/users/ci/cloud_account/trustie_bind.json`;
axios.post(url,{
account:user && user.login
}).then(result=>{
setIsSpining(false);
if(result && result.data){
setStep(result.data.step);
}
}).catch(error=>{setIsSpining(false)})
}else{
setTypeFlag(true);
}
}
//
function goUpStep(step){
setTypeFlag(false);
setStep(step);
}
//
function authStep(){
if(!authorityVal){
setAuthorityValFlag(true);
return;
}
setAuthorityValFlag(false);
setIsSpining(true);
const url = `/users/ci/oauth_grant.json`;
axios.get(url,{
params:{password:authorityVal}
}).then(result=>{
setIsSpining(false);
if(result){
setStep(result.data.step);
}
}).catch(error=>{setIsSpining(false)});
}
//
function startActive(){
setIsSpining(true);
@ -111,18 +165,10 @@ function About(props, ref) {
setIsSpining(false);
})
}
// -
function cancelAuthority(){
setAuthorityValBox(false);
}
//
function okAuthority(step){
setAuthorityValBox(false);
setStep(step);
}
return (
<Spin spinning={isSpining}>
<PasswordAuthority authorityValBox={authorityValBox} successFunc={okAuthority} cancelFunc={cancelAuthority}></PasswordAuthority>
{/* <PasswordAuthority authorityValBox={authorityValBox} successFunc={okAuthority} cancelFunc={cancelAuthority}></PasswordAuthority> */}
<div className="activatePanel">
<img src={activate} alt="" width="250px" />
<P>定义DevOps工作流帮助您检测bug发布代码</P>
@ -139,45 +185,69 @@ function About(props, ref) {
{
AuthorLogin === CurrentLogin ?
<React.Fragment>
{ 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",
[{ required: true, message: "请输入服务器IP地址" }],
<Input
placeholder="请输入服务器IP地址"
style={{ width: "368px" }}
size="large"
disabled={step > 0}
/>,
true
)}
{helper(
"服务器用户名:",
"account",
[{ required: true, message: "请输入服务器用户名" }],
<Input placeholder="请输入服务器用户名" size="large" disabled={step > 0}/>,
true
)}
{helper(
"服务器密码:",
"secret",
[{ required: true, message: "请输入服务器密码" }],
<Input.Password placeholder="请输入服务器密码" size="large" disabled={step > 0}/>,
true
)}
</Form>
<Blueback onClick={goStep}>下一步</Blueback>
</React.Fragment>
:""}
{step > 1 &&
{
step === 0 && !typeFlag ?
<ServiceModal sureModal={sureModal}></ServiceModal>
:""
}
{ typeFlag ?
<React.Fragment>
<Input.Password style={{display:'none'}} size="large" />
<Form style={{marginTop:"20px"}}>
<p className="mb20" style={{width:"370px"}}>请仔细核对您的服务器信息一旦确认提交将无法修改</p>
{helper(
"服务器IP地址",
"ip",
[{ required: true, message: "请输入服务器IP地址" }],
<Input
placeholder="请输入服务器IP地址"
style={{ width: "368px" }}
size="large"
disabled={disabled}
/>,
true
)}
{helper(
"服务器用户名:",
"account",
[{ required: true, message: "请输入服务器用户名" }],
<Input placeholder="请输入服务器用户名" size="large" disabled={disabled}/>,
true
)}
{helper(
"服务器密码:",
"secret",
[{ required: true, message: "请输入服务器密码" }],
<Input.Password placeholder="请输入服务器密码" size="large" disabled={disabled}/>,
true
)}
</Form>
<AlignCenter>
{ !disabled && <Button className="mr20" onClick={()=>goUpStep(0)}>上一步</Button>}
<Blueback onClick={goStep}>下一步</Blueback>
</AlignCenter>
</React.Fragment>
:""
}
{
step === 1 ?
<div>
<AlignCenter style={{justifyContent:"center",marginTop:"20px"}}>
<span style={{marginBottom:"42px"}}>密码</span>
<div>
<Input.Password value={authorityVal} className={authorityValFlag===true && "flags"} onChange={(e)=>setAuthorityVal(e.target.value)} style={{width:"220px"}}></Input.Password>
<p className="color-grey-9" style={{textAlign:"left",lineHeight:'21px'}}>您已保存相关服务器信息请输入密码<br/>确认授权DevOps应用</p>
</div>
</AlignCenter>
<AlignCenter style={{justifyContent:'center'}}>
<Blueback onClick={authStep} className="mt20">下一步</Blueback>
</AlignCenter>
</div>:""
}
{ step === 2 ?
<div style={{textAlign:'center',marginTop:"20px"}}>
<Blueback onClick={startActive} className="mt20">开始激活</Blueback>
</div>
</div>:""
}
</React.Fragment>
:""

View File

@ -0,0 +1,21 @@
import React, { useState } from 'react';
import { Radio , Button } from 'antd';
function ServiceModal({sureModal}){
const [ type , setType ] = useState(1);
function changeType(e){
setType(e.target.value);
}
return(
<div className="mt30" style={{textAlign:"center"}}>
<Radio.Group value={type} onChange={changeType}>
<Radio value={1}>自有服务器</Radio>
<Radio value={2}>Trustie服务器</Radio>
</Radio.Group>
<p className="mt30"><Button type="primary" onClick={()=>sureModal(type)}>下一步</Button></p>
</div>
)
}
export default ServiceModal;

View File

@ -4,17 +4,20 @@ import { AlignCenter } from '../Component/layout';
import axios from 'axios';
import Modals from '../Component/Modal';
import PasswordAuthority from '../Component/PasswordAuthority';
import Service from './Service';
const TIPS = "解除CI服务器绑定后您所有的项目构建数据将被清空。确定解除绑定";
function CIdispose(props){
const [ CIData , setCIData ] = useState(undefined);
const [ step , setStep ] = useState(0);
const [ visible, setVisible ] = useState(false);
const [ serviceVisible , setServiceVisible ] = useState(false);
const [ bindVisible, setBindVisible ] = useState(false);
const [ ci_certification, setCi_certification ] = useState(false);
const [ btnLoading , setBtnLoading ] = useState(false);
const [ authorityValBox , setAuthorityValBox] = useState(false);
const { user } = props;
const { form: { getFieldDecorator, validateFields , setFieldsValue } } = props;
const helper = useCallback(
@ -105,8 +108,28 @@ function CIdispose(props){
setAuthorityValBox(false);
}
//
function SureBtn(type){
if(type === 1){
setServiceVisible(false);
setBindVisible(true);
}else{
const url = `/users/ci/cloud_account/trustie_bind.json`;
axios.post(url,{
account:user && user.login
}).then(result=>{
if(result && result.data){
setServiceVisible(false);
setAuthorityValBox(true);
getInit();
}
}).catch(error=>{setServiceVisible(false)})
}
}
return(
<div className="disposeInfo">
<Service visible={serviceVisible} SureBtn={SureBtn} CancelBtn={()=>{setServiceVisible(false)}}></Service>
<PasswordAuthority authorityValBox={authorityValBox} successFunc={okAuthority} cancelFunc={cancelAuthority}></PasswordAuthority>
<Modal
className="modalsStyle"
@ -114,6 +137,7 @@ function CIdispose(props){
title={"绑定CI服务器地址"}
onCancel={cancelBindInfo}
closable={true}
centered={true}
footer={
<div>
<Button onClick={cancelBindInfo}>取消</Button>
@ -155,12 +179,12 @@ function CIdispose(props){
<span>CI服务器地址</span>
{CIData && step >= 1 && <span className="ml10">{CIData.ip}</span>}
{ step === 0 && <span className="ml10 authTag red">未绑定</span> }
{ step > 0 && !ci_certification && <span className="ml10 authTag red">未认证</span> }
{ step === 1 && !ci_certification && <span className="ml10 authTag red">未认证</span> }
{ ci_certification && <span className="ml10 authTag green">已认证</span> }
</AlignCenter>
<AlignCenter>
{ step === 0 && <Button type={'primary'} onClick={()=>setBindVisible(true)} >马上绑定</Button> }
{ step > 0 && !ci_certification && <Button type={'primary'} style={{color:"#fff"}} onClick={()=>setAuthorityValBox(true)} target="_blank">马上认证</Button> }
{ step === 0 && <Button type={'primary'} onClick={()=>setServiceVisible(true)} >马上绑定</Button> }
{ step === 1 && !ci_certification && <Button type={'primary'} style={{color:"#fff"}} onClick={()=>setAuthorityValBox(true)} target="_blank">马上认证</Button> }
{ step >= 1 && <Button type={'danger'} className="ml20" onClick={()=>setVisible(true)}>解除绑定</Button> }
</AlignCenter>
</div>

View File

@ -0,0 +1,15 @@
import React from 'react';
import ServiceModal from '../DevOps/ServiceModal';
import { Modal } from 'antd';
function Service ({visible, SureBtn , CancelBtn }){
function SureModal(type){
SureBtn(type);
}
return(
<Modal title={"请选择服务器类型"} centered={true} visible={visible} footer={false} onCancel={CancelBtn}>
<ServiceModal sureModal={SureModal}></ServiceModal>
</Modal>
)
}
export default Service;