A web update

pull/22/head
雷二猛 2019-12-19 19:39:20 +08:00
parent d30bbde31f
commit d79d47a8dc
5 changed files with 88 additions and 0 deletions

View File

@ -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

View File

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

View File

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

View File

@ -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>

View File

@ -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),
]