A web update

2019-12-14 14:00:21 +08:00 · 2019-12-14 14:00:21 +08:00 · dfc4a6fe69
parent 7fbd22772f
commit dfc4a6fe69
12 changed files with 295 additions and 163 deletions
--- 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() {
--- 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 (
    <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/>}
--- a/spug_web/src/pages/deploy/app/Ext1Setup1.js
+++ 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 (
+    <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>
+  )
+})
--- a/spug_web/src/pages/deploy/app/Ext1Setup2.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 (
-      <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
--- a/spug_web/src/pages/deploy/app/Ext1Setup3.js
+++ b/spug_web/src/pages/deploy/app/Ext1Setup3.js
@ -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
--- a/spug_web/src/pages/deploy/app/Ext2Form.js
+++ b/spug_web/src/pages/deploy/app/Ext2Form.js
@ -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>
+  )
+})
--- a/spug_web/src/pages/deploy/app/Ext2Setup1.js
+++ b/spug_web/src/pages/deploy/app/Ext2Setup1.js
@ -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>
+  )
+})
--- a/spug_web/src/pages/deploy/app/Ext2Setup2.js
+++ 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 (
+      <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
--- a/spug_web/src/pages/deploy/app/Ext2Setup3.js
+++ 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 (
+      <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
--- a/spug_web/src/pages/deploy/app/Setup1.js
+++ b/spug_web/src/pages/deploy/app/Setup1.js
@ -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)
--- 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);
 }
--- 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()
    }
  };