A web update

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Steps, Collapse, Icon } from 'antd';
+import http from 'libs/http';
+import styles from './index.module.css';
+import store from './store';
+
+
+class Index extends React.Component {
+  componentDidMount() {
+    const {id} = this.props.match.params;
+    http.post(`/api/deploy/request/${id}/`)
+      .then(token => {
+        this.socket = new WebSocket(`ws://localhost:8000/ws/exec/${token}/`);
+        this.socket.onopen = () => {
+          this.socket.send('ok');
+        };
+        this.socket.onmessage = e => {
+          if (e.data === 'pong') {
+            this.socket.send('ping')
+          } else {
+            console.log(JSON.parse(e.data));
+          //   const {key, data, type, status} = JSON.parse(e.data);
+          //   if (status !== undefined) {
+          //     store.outputs[key]['status'] = status
+          //   } else if (data) {
+          //     store.outputs[key][type] += data;
+          //     store.outputs[key]['latest'] = data;
+          //     if (this.elements[key]) {
+          //       this.elements[key].scrollIntoView({behavior: 'smooth'})
+          //     }
+          //   }
+          }
+        }
+      })
+  }
+
+  componentWillUnmount() {
+    if (this.socket) this.socket.close()
+  }
+
+  render() {
+    return (
+      <div>
+        <div style={{fontSize: 16, marginBottom: 10}}>服务端执行 :</div>
+        <Collapse defaultActiveKey={1}>
+          <Collapse.Panel showArrow={false} key={1} header={
+            <Steps style={{maxWidth: 800}}>
+              <Steps.Step status="finish" title="检出前任务"/>
+              <Steps.Step status="finish" title="执行检出"/>
+              <Steps.Step status="finish" title="检出后任务" icon={<Icon type="loading"/>}/>
+            </Steps>
+          }>web -01</Collapse.Panel>
+        </Collapse>
+        <div style={{fontSize: 16, margin: '30px 0 10px 0'}}>目标主机执行 :</div>
+        <Collapse>
+          <Collapse.Panel key={1} header={
+            <div style={{display: 'flex', justifyContent: 'space-between'}}>
+              <div>web-01</div>
+              <Steps size="small" style={{maxWidth: 500}}>
+                <Steps.Step status="finish" title="发布前任务"/>
+                <Steps.Step status="finish" title="执行发布"/>
+                <Steps.Step status="finish" title="发布后任务" icon={<Icon type="loading"/>}/>
+              </Steps>
+            </div>
+          }>web -01</Collapse.Panel>
+          <Collapse.Panel key={2} header="web-02">web -02</Collapse.Panel>
+        </Collapse>
+      </div>
+    )
+  }
+}
+
+export default Index

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

@@ -0,0 +1,3 @@
+.header {
+    display: flex;
+}

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

@@ -0,0 +1,7 @@
+import { observable } from "mobx";
+
+class Store {
+  @observable outputs = [];
+}
+
+export default new Store()

spug_web/src/pages/deploy/request/Table.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import { observer } from 'mobx-react';
 import { Table, Divider, Modal, Icon, message } from 'antd';
 import http from 'libs/http';
@@ -53,6 +54,8 @@ class ComTable extends React.Component {
     title: '操作',
     render: info => (
       <span>
+        <Link to={`/deploy/do/${info.id}`}>发布</Link>
+        <Divider type="vertical"/>
         <LinkButton onClick={() => store.showForm(info)}>编辑</LinkButton>
         <Divider type="vertical"/>
         <LinkButton onClick={() => this.handleDelete(info)}>删除</LinkButton>

spug_web/src/pages/deploy/routes.js

@@ -1,9 +1,11 @@
 import { makeRoute } from "../../libs/router";
 import app from './app';
 import request from './request';
+import doIndex from './do';
 
 
 export default [
   makeRoute('/app', app),
   makeRoute('/request', request),
+  makeRoute('/do/:id', doIndex),
 ]