From d5b609cd12e9a61f7730bd3e8d71499b305207a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=B7=E4=BA=8C=E7=8C=9B?= <live1989@foxmail.com>
Date: Wed, 18 Dec 2019 09:21:43 +0800
Subject: [PATCH] A web update

---
 spug_web/src/pages/deploy/request/Ext1Form.js | 51 +++++++++++-------
 .../src/pages/deploy/request/SelectApp.js     |  6 +--
 spug_web/src/pages/deploy/request/Table.js    | 53 +++++++++++++------
 spug_web/src/pages/deploy/request/index.js    | 10 ++--
 spug_web/src/pages/deploy/request/store.js    | 13 ++++-
 5 files changed, 82 insertions(+), 51 deletions(-)

diff --git a/spug_web/src/pages/deploy/request/Ext1Form.js b/spug_web/src/pages/deploy/request/Ext1Form.js
index cc75eb1..145c600 100644
--- a/spug_web/src/pages/deploy/request/Ext1Form.js
+++ b/spug_web/src/pages/deploy/request/Ext1Form.js
@@ -10,24 +10,28 @@ import lds from 'lodash';
 class Ext1Form extends React.Component {
   constructor(props) {
     super(props);
+    this.isReady = false;
     this.state = {
       loading: false,
       fetching: true,
-      git_type: 'branch',
-      extra1: undefined,
-      extra2: undefined,
+      git_type: lds.get(store.record, 'extra.0', 'branch'),
+      extra1: lds.get(store.record, 'extra.1'),
+      extra2: lds.get(store.record, 'extra.2'),
       versions: {},
       host_ids: store.record['host_ids'].concat()
     }
   }
 
   componentDidMount() {
-    this.fetchVersions()
+    this.fetchVersions();
+    if (hostStore.records.length === 0) {
+      hostStore.fetchRecords()
+    }
   }
 
   fetchVersions = () => {
     this.setState({fetching: true});
-    http.get(`/api/app/${store.record.id}/versions/`)
+    http.get(`/api/app/${store.record.app_id}/versions/`)
       .then(res => {
         this.setState({versions: res}, this._initExtra1);
       })
@@ -35,19 +39,23 @@ class Ext1Form extends React.Component {
   };
 
   _initExtra1 = () => {
-    const {git_type, versions: {branches, tags}} = this.state;
-    let [extra1, extra2] = [undefined, undefined];
-    if (git_type === 'branch') {
-      if (branches) {
-        extra1 = lds.get(Object.keys(branches), 0);
-        extra2 = lds.get(branches[extra1], '0.id')
+    if (this.isReady === true || this.state.extra1 === undefined) {
+      const {git_type, versions: {branches, tags}} = this.state;
+      let [extra1, extra2] = [undefined, undefined];
+      if (git_type === 'branch') {
+        if (branches) {
+          extra1 = lds.get(Object.keys(branches), 0);
+          extra2 = lds.get(branches[extra1], '0.id')
+        }
+      } else {
+        if (tags) {
+          extra1 = lds.get(Object.keys(tags), 0)
+        }
       }
+      this.setState({extra1, extra2})
     } else {
-      if (tags) {
-        extra1 = lds.get(Object.keys(tags), 0)
-      }
+      this.isReady = true
     }
-    this.setState({extra1, extra2})
   };
 
   switchType = (v) => {
@@ -67,13 +75,16 @@ class Ext1Form extends React.Component {
       return message.error('请至少选择一个要发布的目标主机')
     }
     this.setState({loading: true});
+    const {git_type, extra1, extra2} = this.state;
     const formData = this.props.form.getFieldsValue();
     formData['id'] = store.record.id;
-    formData['body'] = this.state.body;
-    http.post('/api/exec/template/', formData)
+    formData['app_id'] = store.record.app_id;
+    formData['host_ids'] = this.state.host_ids;
+    formData['extra'] = [git_type, extra1, extra2];
+    http.post('/api/deploy/request/', formData)
       .then(res => {
         message.success('操作成功');
-        store.formVisible = false;
+        store.ext1Visible = false;
         store.fetchRecords()
       }, () => this.setState({loading: false}))
   };
@@ -135,7 +146,7 @@ class Ext1Form extends React.Component {
           {git_type === 'branch' && (
             <Form.Item required label="选择Commit ID">
               <Select value={extra2} placeholder="请选择" onChange={v => this.setState({extra2: v})}>
-                {extra1 ? branches[extra1].map(item => (
+                {extra1 && branches ? branches[extra1].map(item => (
                   <Select.Option
                     key={item.id}>{item.id.substr(0, 6)} {item['date']} {item['author']} {item['message']}</Select.Option>
                 )) : null}
@@ -148,7 +159,7 @@ class Ext1Form extends React.Component {
             )}
           </Form.Item>
           <Form.Item required label="发布目标主机">
-            {info['host_ids'].map(id => (
+            {info['app_host_ids'].map(id => (
               <Tag.CheckableTag key={id} checked={host_ids.includes(id)} onChange={() => this.handleChange(id)}>
                 {lds.get(hostStore.idMap, `${id}.name`)}({lds.get(hostStore.idMap, `${id}.hostname`)}:{lds.get(hostStore.idMap, `${id}.port`)})
               </Tag.CheckableTag>
diff --git a/spug_web/src/pages/deploy/request/SelectApp.js b/spug_web/src/pages/deploy/request/SelectApp.js
index 093dea1..14897e4 100644
--- a/spug_web/src/pages/deploy/request/SelectApp.js
+++ b/spug_web/src/pages/deploy/request/SelectApp.js
@@ -4,7 +4,6 @@ import { Modal, Button, Menu, Icon } from 'antd';
 import store from './store';
 import styles from './index.module.css';
 import envStore from 'pages/config/environment/store';
-import hostStore from 'pages/host/store';
 import appStore from '../app/store';
 import lds from 'lodash';
 
@@ -26,9 +25,6 @@ class SelectApp extends React.Component {
     if (appStore.records.length === 0) {
       appStore.fetchRecords()
     }
-    if (hostStore.records.length === 0) {
-      hostStore.fetchRecords()
-    }
   }
 
   _initEnv = () => {
@@ -38,7 +34,7 @@ class SelectApp extends React.Component {
   };
 
   handleClick = (app) => {
-    store.record = app;
+    store.record = {app_id: app.id, app_host_ids: app.host_ids};
     if (app.extend === '1') {
       store.ext1Visible = true
     } else {
diff --git a/spug_web/src/pages/deploy/request/Table.js b/spug_web/src/pages/deploy/request/Table.js
index 62280f1..fc13938 100644
--- a/spug_web/src/pages/deploy/request/Table.js
+++ b/spug_web/src/pages/deploy/request/Table.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Table, Divider, Modal, message } from 'antd';
+import { Table, Divider, Modal, Icon, message } from 'antd';
 import http from 'libs/http';
 import store from './store';
 import { LinkButton } from "components";
@@ -12,24 +12,43 @@ class ComTable extends React.Component {
   }
 
   columns = [{
-    title: '序号',
-    key: 'series',
-    render: (_, __, index) => index + 1,
-    width: 80,
-  }, {
-    title: '模版名称',
+    title: '申请标题',
     dataIndex: 'name',
   }, {
-    title: '模版类型',
-    dataIndex: 'type',
+    title: '应用',
+    dataIndex: 'app_name',
   }, {
-    title: '模版内容',
-    render: text => text.body,
-    ellipsis: true
+    title: '发布环境',
+    dataIndex: 'env_name',
   }, {
-    title: '描述信息',
-    dataIndex: 'desc',
-    ellipsis: true
+    title: '版本',
+    render: info => {
+      if (info['app_extend'] === '1') {
+        const [type, ext1, ext2] = info.extra;
+        if (type === 'branch') {
+          return <React.Fragment>
+            <Icon type="branches"/> {ext1}#{ext2.substr(0, 6)}
+          </React.Fragment>
+        } else {
+          return <React.Fragment>
+            <Icon type="tag"/> {ext1}
+          </React.Fragment>
+        }
+      } else {
+        return <React.Fragment>
+          <Icon type="build"/> xxx
+        </React.Fragment>
+      }
+    }
+  }, {
+    title: '状态',
+    dataIndex: 'status_alias'
+  }, {
+    title: '申请人',
+    dataIndex: 'created_by_user',
+  }, {
+    title: '申请时间',
+    dataIndex: 'created_at'
   }, {
     title: '操作',
     render: info => (
@@ -60,8 +79,8 @@ class ComTable extends React.Component {
     if (store.f_name) {
       data = data.filter(item => item['name'].toLowerCase().includes(store.f_name.toLowerCase()))
     }
-    if (store.f_type) {
-      data = data.filter(item => item['type'].toLowerCase().includes(store.f_type.toLowerCase()))
+    if (store.f_app_name) {
+      data = data.filter(item => item['app_name'].toLowerCase().includes(store.f_app_name.toLowerCase()))
     }
     return (
       <Table rowKey="id" loading={store.isFetching} dataSource={data} columns={this.columns}/>
diff --git a/spug_web/src/pages/deploy/request/index.js b/spug_web/src/pages/deploy/request/index.js
index e7b77de..f6fc7a1 100644
--- a/spug_web/src/pages/deploy/request/index.js
+++ b/spug_web/src/pages/deploy/request/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Card, Input, Select, Button } from 'antd';
+import { Card, Input, Button } from 'antd';
 import { SearchForm } from 'components';
 import SelectApp from './SelectApp';
 import Ext1Form from './Ext1Form';
@@ -13,13 +13,9 @@ export default observer(function () {
     <Card>
       <SearchForm>
         <SearchForm.Item span={8} title="应用名称">
-          <Select allowClear onChange={v => store.f_type = v} placeholder="请选择">
-            {store.types.map(item => (
-              <Select.Option value={item} key={item}>{item}</Select.Option>
-            ))}
-          </Select>
+          <Input allowClear onChange={e => store.f_app_name = e.target.value} placeholder="请输入"/>
         </SearchForm.Item>
-        <SearchForm.Item span={8} title="模版名称">
+        <SearchForm.Item span={8} title="申请标题">
           <Input allowClear onChange={e => store.f_name = e.target.value} placeholder="请输入"/>
         </SearchForm.Item>
         <SearchForm.Item span={8}>
diff --git a/spug_web/src/pages/deploy/request/store.js b/spug_web/src/pages/deploy/request/store.js
index 9a49258..1fb9172 100644
--- a/spug_web/src/pages/deploy/request/store.js
+++ b/spug_web/src/pages/deploy/request/store.js
@@ -11,14 +11,23 @@ class Store {
   @observable ext2Visible = false;
 
   @observable f_name;
-  @observable f_type;
+  @observable f_app_name;
 
   fetchRecords = () => {
     this.isFetching = true;
-    http.get('/api/app/')
+    http.get('/api/deploy/request/')
       .then(res => this.records = res)
       .finally(() => this.isFetching = false)
   };
+
+  showForm = (info) => {
+    this.record = info;
+    if (info['app_extend'] === '1') {
+      this.ext1Visible = true
+    } else {
+      this.ext2Visible = true
+    }
+  }
 }
 
 export default new Store()
\ No newline at end of file