A web update

spug_api/apps/deploy/views.py

@@ -105,13 +105,10 @@ class RequestDetailView(View):
             return json_response(error='为找到指定发布申请')
         hosts = Host.objects.filter(id__in=json.loads(req.host_ids))
         targets = [{'id': x.id, 'title': f'{x.name}({x.hostname}:{x.port})'} for x in hosts]
-        server_steps, host_steps = [], []
+        server_actions, host_actions = [], []
         if req.app.extend == '2':
-            for item in json.loads(req.app.extend_obj.actions):
-                if item['target'] == 'server':
-                    server_steps.append(item['name'])
-                else:
-                    host_steps.append(item['name'])
+            server_actions = json.loads(req.app.extend_obj.server_actions)
+            host_actions = json.loads(req.app.extend_obj.host_actions)
         return json_response({
             'app_name': req.app.name,
             'env_name': req.app.env.name,
@@ -119,8 +116,8 @@ class RequestDetailView(View):
             'type': req.type,
             'status_alias': req.get_status_display(),
             'targets': targets,
-            'server_steps': server_steps,
-            'host_steps': host_steps
+            'server_actions': server_actions,
+            'host_actions': host_actions
         })
 
     def post(self, request, r_id):

spug_web/src/pages/deploy/do/Ext2Index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Steps, PageHeader, Spin, Tag, Button, Icon } from 'antd';
+import { Steps, Collapse, PageHeader, Spin, Tag, Button, Icon } from 'antd';
 import http from 'libs/http';
 import history from 'libs/history';
 import styles from './index.module.css';
@@ -8,7 +8,7 @@ import store from './store';
 import lds from 'lodash';
 
 @observer
-class Ext2Index extends React.Component {
+class Ext1Index extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -27,7 +27,7 @@ class Ext2Index extends React.Component {
 
   componentWillUnmount() {
     if (this.socket) this.socket.close();
-    store.request = {targets: []};
+    store.request = {targets: [], server_actions: [], host_actions: []};
     store.outputs = {};
   }
 
@@ -84,7 +84,7 @@ class Ext2Index extends React.Component {
   };
 
   render() {
-    const {app_name, env_name, status} = store.request;
+    const {app_name, env_name, status, server_actions, host_actions} = store.request;
     return (
       <Spin spinning={this.state.fetching}>
         <PageHeader
@@ -95,16 +95,46 @@ class Ext2Index extends React.Component {
           extra={<Button loading={this.state.loading} type="primary" disabled={!['1', '-3'].includes(status)}
                          onClick={this.handleDeploy}>发布</Button>}
           onBack={() => history.goBack()}/>
-        <div className={styles.ext2Block}>
-            <Steps direction="vertical" className={styles.ext2Step}>
+        <Collapse defaultActiveKey={1} className={styles.collapse}>
+          <Collapse.Panel showArrow={false} key={1} header={
+            <Steps style={{maxWidth: 400 + server_actions.length * 200}}>
               <Steps.Step {...this.getStatus('local', 0)} title="建立连接"/>
               <Steps.Step {...this.getStatus('local', 1)} title="发布准备"/>
-            </Steps>
-            <pre className={styles.ext2Console}>{lds.get(store.outputs, 'local.data')}</pre>
-        </div>
+              {server_actions.map((item, index) => (
+                <Steps.Step {...this.getStatus('local', 2)} key={index} title={item.title}/>
+              ))}
+            </Steps>}>
+            <pre className={styles.ext1Console}>{lds.get(store.outputs, 'local.data')}</pre>
+          </Collapse.Panel>
+        </Collapse>
+
+        {host_actions.length > 0 && (
+          <Collapse
+            defaultActiveKey={'0'}
+            className={styles.collapse}
+            expandIcon={({isActive}) => <Icon type="caret-right" style={{fontSize: 16}} rotate={isActive ? 90 : 0}/>}>
+            {store.request.targets.map((item, index) => (
+              <Collapse.Panel key={index} header={
+                <div style={{display: 'flex', justifyContent: 'space-between'}}>
+                  <b>{item.title}</b>
+                  <Steps size="small" style={{maxWidth: 150 + host_actions.length * 150}}>
+                    <Steps.Step {...this.getStatus(item.id, 1)} title="数据准备"/>
+                    {host_actions.map((item, index) => (
+                      <Steps.Step {...this.getStatus(item.id, 2)} key={index} title={item.title}/>
+                    ))}
+                  </Steps>
+                </div>}>
+                <pre className={styles.ext1Console}>{lds.get(store.outputs, `${item.id}.data`)}</pre>
+              </Collapse.Panel>
+            ))}
+          </Collapse>
+        )}
+        {host_actions.length === 0 && this.state.fetching === false && (
+          <div className={styles.ext2Tips}>无目标主机动作</div>
+        )}
       </Spin>
     )
   }
 }
 
-export default Ext2Index
+export default Ext1Index

spug_web/src/pages/deploy/do/index.module.css

@@ -39,6 +39,11 @@
     height: 100px;
 }
 
+.ext2Tips {
+    color: #888;
+    margin-top: 30px;
+}
+
 pre {
     margin: 0;
 }

spug_web/src/pages/deploy/do/store.js

@@ -4,6 +4,8 @@ class Store {
   @observable outputs = {};
   @observable request = {
     targets: [],
+    host_actions: [],
+    server_actions: []
   };
 }