diff --git a/spug_web/src/pages/deploy/app/AddSelect.js b/spug_web/src/pages/deploy/app/AddSelect.js index dbd5c1c..df27540 100644 --- a/spug_web/src/pages/deploy/app/AddSelect.js +++ b/spug_web/src/pages/deploy/app/AddSelect.js @@ -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() { diff --git a/spug_web/src/pages/deploy/app/Ext1Form.js b/spug_web/src/pages/deploy/app/Ext1Form.js index 6bf8c84..bd1b41e 100644 --- a/spug_web/src/pages/deploy/app/Ext1Form.js +++ b/spug_web/src/pages/deploy/app/Ext1Form.js @@ -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 ( - + {store.page === 0 && } diff --git a/spug_web/src/pages/deploy/app/Ext1Setup1.js b/spug_web/src/pages/deploy/app/Ext1Setup1.js new file mode 100644 index 0000000..4ebe5be --- /dev/null +++ b/spug_web/src/pages/deploy/app/Ext1Setup1.js @@ -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 ( +
+ + info.name = e.target.value} placeholder="请输入应用名称"/> + + + + + + + 新建环境 + + + + info['git_repo'] = e.target.value} placeholder="请输入Git仓库地址"/> + + + + + + info['is_audit'] = v}/> + + + + +
+ ) +}) \ No newline at end of file diff --git a/spug_web/src/pages/deploy/app/Setup2.js b/spug_web/src/pages/deploy/app/Ext1Setup2.js similarity index 70% rename from spug_web/src/pages/deploy/app/Setup2.js rename to spug_web/src/pages/deploy/app/Ext1Setup2.js index 5ac4f75..10b6bff 100644 --- a/spug_web/src/pages/deploy/app/Setup2.js +++ b/spug_web/src/pages/deploy/app/Ext1Setup2.js @@ -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 ( -
- + + info['dst_dir'] = e.target.value} placeholder="请输入目标主机部署路径"/> - + info['dst_repo'] = e.target.value} placeholder="请输入目标主机仓库路径"/> - + info['versions'] = e.target.value} placeholder="请输入保留历史版本数量"/> - + {info['host_ids'].map((id, index) => ( info.name = e.target.value} placeholder="请输入应用名称"/> + + + + + + + 新建环境 + + + + info['is_audit'] = v}/> + + + + + + ) +}) diff --git a/spug_web/src/pages/deploy/app/Ext2Setup2.js b/spug_web/src/pages/deploy/app/Ext2Setup2.js new file mode 100644 index 0000000..53c9cda --- /dev/null +++ b/spug_web/src/pages/deploy/app/Ext2Setup2.js @@ -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 ( +
+ + {info['host_ids'].map((id, index) => ( + + + {info['host_ids'].length > 1 && ( + store.delHost(index)}/> + )} + + ))} + + + + + + + + +
+ ) + } +} + +export default Ext2Setup2 \ No newline at end of file diff --git a/spug_web/src/pages/deploy/app/Ext2Setup3.js b/spug_web/src/pages/deploy/app/Ext2Setup3.js new file mode 100644 index 0000000..12ea593 --- /dev/null +++ b/spug_web/src/pages/deploy/app/Ext2Setup3.js @@ -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 ( +
+ {store.actions.map((item, index) => ( +
+ + item['title'] = e.target.value} placeholder="请输入"/> + + + item['data'] = v} + placeholder="请输入要执行的动作"/> + + {store.actions.length > 1 && ( +
store.actions.splice(index, 1)}>移除
+ )} +
+ ))} + + + + + + + +
+ ) + } +} + +export default Ext2Setup3 \ No newline at end of file diff --git a/spug_web/src/pages/deploy/app/Setup1.js b/spug_web/src/pages/deploy/app/Setup1.js deleted file mode 100644 index 90f6776..0000000 --- a/spug_web/src/pages/deploy/app/Setup1.js +++ /dev/null @@ -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 ( -
- - info.name = e.target.value} placeholder="请输入应用名称"/> - - - - - - - 新建环境 - - - - info['git_repo'] = e.target.value} placeholder="请输入Git仓库地址"/> - - - - - - info['is_audit'] = v}/> - - - - -
- ) - } -} - -export default Form.create()(Setup1) \ No newline at end of file diff --git a/spug_web/src/pages/deploy/app/index.module.css b/spug_web/src/pages/deploy/app/index.module.css index 2d01ce9..58ac1a4 100644 --- a/spug_web/src/pages/deploy/app/index.module.css +++ b/spug_web/src/pages/deploy/app/index.module.css @@ -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); } \ No newline at end of file diff --git a/spug_web/src/pages/deploy/app/store.js b/spug_web/src/pages/deploy/app/store.js index 3ac9366..815bf0c 100644 --- a/spug_web/src/pages/deploy/app/store.js +++ b/spug_web/src/pages/deploy/app/store.js @@ -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() } };