github
/
spug
mirror of https://github.com/openspug/spug
1
0
Fork 0
Code Issues Releases Wiki Activity

A web update

pull/22/head
雷二猛 2019-12-14 14:00:21 +08:00
parent 7fbd22772f
commit dfc4a6fe69
12 changed files with 295 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
spug_web/src/pages/deploy/app/AddSelect.js
View File

@ -9,11 +9,22 @@ class AddSelect extends React.Component {
switchExt1 = () => {
store.addVisible = false;
store.ext1Visible = true;
store.record = {
git_type: 'branch',
is_audit: false,
versions: 10,
host_ids: [undefined],
filter_rule: {type: 'contain', data: ''}
}
};
switchExt2 = () => {
store.addVisible = false;
store.ext2Visible = true;
store.record = {
is_audit: false,
host_ids: [undefined],
}
};
render() {

10
spug_web/src/pages/deploy/app/Ext1Form.js
View File

@ -1,13 +1,13 @@
import React from 'react';
import { observer } from 'mobx-react';
import { Modal, Steps } from 'antd';
import Setup1 from './Setup1';
import Setup2 from './Setup2';
import Setup3 from './Setup3';
import Setup1 from './Ext1Setup1';
import Setup2 from './Ext1Setup2';
import Setup3 from './Ext1Setup3';
import store from './store';
import styles from './index.module.css';
export default observer(function () {
export default observer(function Ext1From() {
return (
<Modal
visible
@ -18,7 +18,7 @@ export default observer(function () {
footer={null}>
<Steps current={store.page} className={styles.steps}>
<Steps.Step key={0} title="基本配置"/>
<Steps.Step key={1} title="目标集群"/>
<Steps.Step key={1} title="发布主机"/>
<Steps.Step key={2} title="任务配置"/>
</Steps>
{store.page === 0 && <Setup1/>}

51
spug_web/src/pages/deploy/app/Ext1Setup1.js Normal file
View File

@ -0,0 +1,51 @@
import React from 'react';
import { observer } from 'mobx-react';
import { Link } from 'react-router-dom';
import { Switch, Col, Form, Input, Select, Button } from "antd";
import envStore from 'pages/config/environment/store';
import store from './store';
export default observer(function Ext2Setup1() {
const info = store.record;
return (
<Form labelCol={{span: 6}} wrapperCol={{span: 14}}>
<Form.Item required label="应用名称" help="相同应用不同环境，请保持应用名称相同，以便维护">
<Input value={info.name} onChange={e => info.name = e.target.value} placeholder="请输入应用名称"/>
</Form.Item>
<Form.Item required label="发布环境">
<Col span={16}>
<Select value={info.env_id} onChange={v => info.env_id = v} placeholder="请选择发布环境">
{envStore.records.map(item => (
<Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
))}
</Select>
</Col>
<Col span={6} offset={2}>
<Link to="/config/environment">新建环境</Link>
</Col>
</Form.Item>
<Form.Item required label="Git仓库地址">
<Input value={info['git_repo']} onChange={e => info['git_repo'] = e.target.value} placeholder="请输入Git仓库地址"/>
</Form.Item>
<Form.Item label="Tag/Branch">
<Select value={info['git_type']} onChange={v => info['git_type'] = v}>
<Select.Option value="branch">Branch（分支）</Select.Option>
<Select.Option value="tag">Tag（标签 / 版本）</Select.Option>
</Select>
</Form.Item>
<Form.Item label="发布审核">
<Switch
checkedChildren="开启"
unCheckedChildren="关闭"
checked={info['is_audit']}
onChange={v => info['is_audit'] = v}/>
</Form.Item>
<Form.Item wrapperCol={{span: 14, offset: 6}}>
<Button
type="primary"
disabled={!(info.name && info.env_id && info['git_repo'])}
onClick={() => store.page += 1}>下一步</Button>
</Form.Item>
</Form>
)
})

30
spug_web/src/pages/deploy/app/Setup2.js → spug_web/src/pages/deploy/app/Ext1Setup2.js
View File

@ -1,17 +1,13 @@
import React from 'react';
import { observer } from 'mobx-react';
import { Form, Input, Select, Button, Icon } from "antd";
import envStore from 'pages/config/environment/store';
import store from './store';
import hostStore from 'pages/host/store';
import styles from './index.module.css';
@observer
class Setup1 extends React.Component {
class Ext1Setup2 extends React.Component {
componentDidMount() {
if (envStore.records.length === 0) {
envStore.fetchRecords()
}
if (hostStore.records.length === 0) {
hostStore.fetchRecords()
}
@ -24,26 +20,18 @@ class Setup1 extends React.Component {
render() {
const info = store.record;
const itemLayout = {
labelCol: {span: 6},
wrapperCol: {span: 14}
};
const itemTailLayout = {
labelCol: {span: 6},
wrapperCol: {span: 14, offset: 6}
};
return (
<Form>
<Form.Item {...itemLayout} required label="目标主机部署路径" help="目标主机的应用根目录，例如：/var/www/html">
<Form labelCol={{span: 6}} wrapperCol={{span: 14}}>
<Form.Item required label="目标主机部署路径" help="目标主机的应用根目录，例如：/var/www/html">
<Input value={info['dst_dir']} onChange={e => info['dst_dir'] = e.target.value} placeholder="请输入目标主机部署路径"/>
</Form.Item>
<Form.Item {...itemLayout} required label="目标主机仓库路径" help="此目录用于存储应用的历史版本，例如：/data/spug/repos">
<Form.Item required label="目标主机仓库路径" help="此目录用于存储应用的历史版本，例如：/data/spug/repos">
<Input value={info['dst_repo']} onChange={e => info['dst_repo'] = e.target.value} placeholder="请输入目标主机仓库路径"/>
</Form.Item>
<Form.Item {...itemLayout} required label="保留历史版本数量" help="早于指定数量的历史版本将无法回滚">
<Form.Item required label="保留历史版本数量" help="早于指定数量的历史版本将无法回滚">
<Input value={info['versions']} onChange={e => info['versions'] = e.target.value} placeholder="请输入保留历史版本数量"/>
</Form.Item>
<Form.Item {...itemLayout} required label="发布目标主机">
<Form.Item required label="发布目标主机">
{info['host_ids'].map((id, index) => (
<React.Fragment key={index}>
<Select
@ -63,12 +51,12 @@ class Setup1 extends React.Component {
</React.Fragment>
))}
</Form.Item>
<Form.Item {...itemTailLayout}>
<Form.Item wrapperCol={{span: 14, offset: 6}}>
<Button type="dashed" style={{width: '80%'}} onClick={store.addHost}>
<Icon type="plus"/>添加执行对象
</Button>
</Form.Item>
<Form.Item {...itemTailLayout}>
<Form.Item wrapperCol={{span: 14, offset: 6}}>
<Button disabled={!this.checkStatus()} type="primary" onClick={() => store.page += 1}>下一步</Button>
<Button style={{marginLeft: 20}} onClick={() => store.page -= 1}>上一步</Button>
</Form.Item>
@ -77,4 +65,4 @@ class Setup1 extends React.Component {
}
}
export default Setup1
export default Ext1Setup2

21
spug_web/src/pages/deploy/app/Setup3.js → spug_web/src/pages/deploy/app/Ext1Setup3.js
View File

@ -5,14 +5,12 @@ import Editor from 'react-ace';
import 'ace-builds/src-noconflict/mode-text';
import 'ace-builds/src-noconflict/mode-sh';
import 'ace-builds/src-noconflict/theme-tomorrow';
import envStore from 'pages/config/environment/store';
import store from './store';
import http from 'libs/http';
import hostStore from 'pages/host/store';
import styles from './index.module.css';
@observer
class Setup1 extends React.Component {
class Ext1Setup3 extends React.Component {
constructor(props) {
super(props);
this.state = {
@ -20,15 +18,6 @@ class Setup1 extends React.Component {
}
}
componentDidMount() {
if (envStore.records.length === 0) {
envStore.fetchRecords()
}
if (hostStore.records.length === 0) {
hostStore.fetchRecords()
}
}
handleSubmit = () => {
this.setState({loading: true});
const info = store.record;
@ -57,10 +46,6 @@ class Setup1 extends React.Component {
render() {
const info = store.record;
const itemTailLayout = {
labelCol: {span: 6},
wrapperCol: {span: 14, offset: 6}
};
return (
<React.Fragment>
<Row>
@ -149,7 +134,7 @@ class Setup1 extends React.Component {
</Form.Item>
</Col>
</Row>
<Form.Item {...itemTailLayout}>
<Form.Item wrapperCol={{span: 14, offset: 6}}>
<Button type="primary" onClick={this.handleSubmit}>提交</Button>
<Button style={{marginLeft: 20}} onClick={() => store.page -= 1}>上一步</Button>
</Form.Item>
@ -158,4 +143,4 @@ class Setup1 extends React.Component {
}
}
export default Setup1
export default Ext1Setup3

67
spug_web/src/pages/deploy/app/Ext2Form.js
View File

@ -1,46 +1,29 @@
import React from 'react';
import { observer } from 'mobx-react';
import { Modal, message } from 'antd';
import http from 'libs/http';
import { Modal, Steps } from 'antd';
import styles from './index.module.css';
import Setup1 from './Ext2Setup1';
import Setup2 from './Ext2Setup2';
import Setup3 from './Ext2Setup3';
import store from './store';
@observer
class ComForm extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false,
type: null,
body: store.record['body'],
}
}
handleSubmit = () => {
this.setState({loading: true});
const formData = this.props.form.getFieldsValue();
formData['id'] = store.record.id;
formData['body'] = this.state.body;
http.post('/api/exec/template/', formData)
.then(res => {
message.success('操作成功');
store.formVisible = false;
store.fetchRecords()
}, () => this.setState({loading: false}))
};
render() {
return (
<Modal
visible
width={800}
maskClosable={false}
title={store.record.id ? '编辑自定义发布' : '新建自定义发布'}
onCancel={() => store.ext2Visible = false}
footer={null}>
</Modal>
)
}
}
export default ComForm
export default observer(function Ext2From() {
return (
<Modal
visible
width={800}
maskClosable={false}
title={store.record.id ? '编辑自定义发布' : '新建自定义发布'}
onCancel={() => store.ext2Visible = false}
footer={null}>
<Steps current={store.page} className={styles.steps}>
<Steps.Step key={0} title="基本配置"/>
<Steps.Step key={1} title="发布主机"/>
<Steps.Step key={2} title="执行动作"/>
</Steps>
{store.page === 0 && <Setup1/>}
{store.page === 1 && <Setup2/>}
{store.page === 2 && <Setup3/>}
</Modal>
)
})

42
spug_web/src/pages/deploy/app/Ext2Setup1.js Normal file
View File

@ -0,0 +1,42 @@
import React from 'react';
import { observer } from 'mobx-react';
import { Link } from 'react-router-dom';
import { Switch, Col, Form, Input, Select, Button } from "antd";
import envStore from 'pages/config/environment/store';
import store from './store';
export default observer(function Ext2Setup1() {
const info = store.record;
return (
<Form labelCol={{span: 6}} wrapperCol={{span: 14}}>
<Form.Item required label="应用名称" help="相同应用不同环境，请保持应用名称相同，以便维护">
<Input value={info.name} onChange={e => info.name = e.target.value} placeholder="请输入应用名称"/>
</Form.Item>
<Form.Item required label="发布环境">
<Col span={16}>
<Select value={info.env_id} onChange={v => info.env_id = v} placeholder="请选择发布环境">
{envStore.records.map(item => (
<Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
))}
</Select>
</Col>
<Col span={6} offset={2}>
<Link to="/config/environment">新建环境</Link>
</Col>
</Form.Item>
<Form.Item label="发布审核">
<Switch
checkedChildren="开启"
unCheckedChildren="关闭"
checked={info['is_audit']}
onChange={v => info['is_audit'] = v}/>
</Form.Item>
<Form.Item wrapperCol={{span: 14, offset: 6}}>
<Button
type="primary"
disabled={!(info.name && info.env_id)}
onClick={() => store.page += 1}>下一步</Button>
</Form.Item>
</Form>
)
})

55
spug_web/src/pages/deploy/app/Ext2Setup2.js Normal file
View File

@ -0,0 +1,55 @@
import React from 'react';
import { observer } from 'mobx-react';
import { Form, Select, Button, Icon } from "antd";
import store from './store';
import hostStore from 'pages/host/store';
import styles from './index.module.css';
@observer
class Ext2Setup2 extends React.Component {
componentDidMount() {
if (hostStore.records.length === 0) {
hostStore.fetchRecords()
}
}
render() {
const info = store.record;
return (
<Form labelCol={{span: 6}} wrapperCol={{span: 14}}>
<Form.Item required label="发布目标主机">
{info['host_ids'].map((id, index) => (
<React.Fragment key={index}>
<Select
value={id}
placeholder="请选择"
style={{width: '80%', marginRight: 10}}
onChange={v => store.editHost(index, v)}>
{hostStore.records.map(item => (
<Select.Option key={item.id} value={item.id} disabled={info['host_ids'].includes(item.id)}>
{item.name}({item['hostname']}:{item['port']})
</Select.Option>
))}
</Select>
{info['host_ids'].length > 1 && (
<Icon className={styles.delIcon} type="minus-circle-o" onClick={() => store.delHost(index)}/>
)}
</React.Fragment>
))}
</Form.Item>
<Form.Item wrapperCol={{span: 14, offset: 6}}>
<Button type="dashed" style={{width: '80%'}} onClick={store.addHost}>
<Icon type="plus"/>添加执行对象
</Button>
</Form.Item>
<Form.Item wrapperCol={{span: 14, offset: 6}}>
<Button disabled={info['host_ids'].filter(x => x).length === 0} type="primary"
onClick={() => store.page += 1}>下一步</Button>
<Button style={{marginLeft: 20}} onClick={() => store.page -= 1}>上一步</Button>
</Form.Item>
</Form>
)
}
}
export default Ext2Setup2

72
spug_web/src/pages/deploy/app/Ext2Setup3.js Normal file
View File

@ -0,0 +1,72 @@
import React from 'react';
import { observer } from 'mobx-react';
import { Form, Input, message, Button, Icon } from 'antd';
import Editor from 'react-ace';
import 'ace-builds/src-noconflict/mode-sh';
import 'ace-builds/src-noconflict/theme-tomorrow';
import styles from './index.module.css';
import http from 'libs/http';
import store from './store';
@observer
class Ext2Setup3 extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false,
}
}
handleSubmit = () => {
this.setState({loading: true});
http.post('/api/app/', {extend: '2', actions: store.actions})
.then(res => {
message.success('保存成功');
store.ext2Visible = false;
store.fetchRecords()
}, () => this.setState({loading: false}))
};
render() {
return (
<Form labelCol={{span: 6}} wrapperCol={{span: 14}} className={styles.ext2Form}>
{store.actions.map((item, index) => (
<div key={index} style={{marginBottom: 30, position: 'relative'}}>
<Form.Item required label={`动作${index + 1}`}>
<Input value={item['title']} onChange={e => item['title'] = e.target.value} placeholder="请输入"/>
</Form.Item>
<Form.Item required label="执行内容">
<Editor
mode="sh"
theme="tomorrow"
width="100%"
height="100px"
value={item['data']}
onChange={v => item['data'] = v}
placeholder="请输入要执行的动作"/>
</Form.Item>
{store.actions.length > 1 && (
<div className={styles.delAction} onClick={() => store.actions.splice(index, 1)}><Icon
type="minus-circle"/>移除</div>
)}
</div>
))}
<Form.Item wrapperCol={{span: 14, offset: 6}}>
<Button type="dashed" block onClick={() => store.actions.push({})}>
<Icon type="plus"/>添加执行动作
</Button>
</Form.Item>
<Form.Item wrapperCol={{span: 14, offset: 6}}>
<Button
type="primary"
disabled={store.actions.filter(x => x.title && x.data).length === 0}
loading={this.state.loading}
onClick={this.handleSubmit}>提交</Button>
<Button style={{marginLeft: 20}} onClick={() => store.page -= 1}>上一步</Button>
</Form.Item>
</Form>
)
}
}
export default Ext2Setup3

68
spug_web/src/pages/deploy/app/Setup1.js
View File

@ -1,68 +0,0 @@
import React from 'react';
import { observer } from 'mobx-react';
import { Link } from 'react-router-dom';
import { Switch, Col, Form, Input, Select, Button } from "antd";
import envStore from 'pages/config/environment/store';
import store from './store';
@observer
class Setup1 extends React.Component {
update = (key, value) => {
store.record[key] = value
};
render() {
const info = store.record;
const itemLayout = {
labelCol: {span: 6},
wrapperCol: {span: 14}
};
const itemTailLayout = {
labelCol: {span: 6},
wrapperCol: {span: 14, offset: 6}
};
return (
<Form>
<Form.Item {...itemLayout} required label="应用名称" help="相同应用不同环境，请保持应用名称相同，以便维护">
<Input value={info.name} onChange={e => info.name = e.target.value} placeholder="请输入应用名称"/>
</Form.Item>
<Form.Item {...itemLayout} required label="发布环境">
<Col span={16}>
<Select value={info.env_id} onChange={v => info.env_id = v} placeholder="请选择发布环境">
{envStore.records.map(item => (
<Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
))}
</Select>
</Col>
<Col span={6} offset={2}>
<Link to="/config/environment">新建环境</Link>
</Col>
</Form.Item>
<Form.Item {...itemLayout} required label="Git仓库地址">
<Input value={info['git_repo']} onChange={e => info['git_repo'] = e.target.value} placeholder="请输入Git仓库地址"/>
</Form.Item>
<Form.Item {...itemLayout} label="Tag/Branch">
<Select value={info['git_type']} onChange={v => info['git_type'] = v}>
<Select.Option value="branch">Branch（分支）</Select.Option>
<Select.Option value="tag">Tag（标签 / 版本）</Select.Option>
</Select>
</Form.Item>
<Form.Item {...itemLayout} label="发布审核">
<Switch
checkedChildren="开启"
unCheckedChildren="关闭"
checked={info['is_audit']}
onChange={v => info['is_audit'] = v}/>
</Form.Item>
<Form.Item {...itemTailLayout}>
<Button
type="primary"
disabled={!(info.name && info.env_id && info['git_repo'])}
onClick={() => store.page += 1}>下一步</Button>
</Form.Item>
</Form>
)
}
}
export default Form.create()(Setup1)

21
spug_web/src/pages/deploy/app/index.module.css
View File

@ -36,4 +36,25 @@
height: 64px;
overflow: hidden;
color: rgba(0, 0, 0, .65);
}
.ext2Form :global(.ant-form-item) {
margin-bottom: 10px;
}
.delAction {
cursor: pointer;
position: absolute;
width: 35px;
padding: 10px;
text-align: center;
top: 32px;
right: 60px;
border: 1px dashed #d9d9d9;
border-radius: 5px;
}
.delAction:hover {
border-color: rgb(255, 96, 59);
color: rgb(255, 96, 59);
}

10
spug_web/src/pages/deploy/app/store.js
View File

@ -4,6 +4,7 @@ import http from 'libs/http';
class Store {
@observable records = [];
@observable record = {};
@observable actions = [{}];
@observable page = 0;
@observable isFetching = false;
@observable addVisible = false;
@ -12,14 +13,6 @@ class Store {
@observable f_name;
initRecord = () => ({
git_type: 'branch',
is_audit: false,
versions: 10,
host_ids: [undefined],
filter_rule: {type: 'contain', data: ''}
});
fetchRecords = () => {
this.isFetching = true;
http.get('/api/app/')
@ -38,7 +31,6 @@ class Store {
this.record = info
} else {
this.addVisible = true;
this.record = this.initRecord()
}
};