github
/
spug
mirror of https://github.com/openspug/spug
1
0
Fork 0
Code Issues Releases Wiki Activity

U 优化发布页面在输出大量日志时的性能

pull/146/head
vapao 2020-07-04 01:49:22 +08:00
parent 554b4f3b56
commit a17c46ea6b
4 changed files with 42 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
spug_api/apps/deploy/views.py
View File

@ -179,8 +179,8 @@ class RequestDetailView(View):
return json_response(error='该申请单当前状态还不能执行发布')
hosts = Host.objects.filter(id__in=json.loads(req.host_ids))
token = uuid.uuid4().hex
outputs = {str(x.id): {'data': ''} for x in hosts}
outputs.update(local={'data': f'{human_time()} 建立接连... '})
outputs = {str(x.id): {'data': []} for x in hosts}
outputs.update(local={'data': [f'{human_time()} 建立接连... ']})
req.status = '2'
if not req.version:
req.version = f'{req.deploy_id}_{req.id}_{datetime.now().strftime("%Y%m%d%H%M%S")}'

17
spug_web/src/pages/deploy/do/Ext1Index.js
View File

@ -8,6 +8,7 @@ import { observer } from 'mobx-react';
import { Steps, Collapse, PageHeader, Spin, Tag, Button, Icon } from 'antd';
import http from 'libs/http';
import { AuthDiv } from 'components';
import OutView from './OutView';
import history from 'libs/history';
import styles from './index.module.css';
import store from './store';
@ -19,11 +20,9 @@ class Ext1Index extends React.Component {
super(props);
this.id = props.match.params.id;
this.log = props.match.params.log;
this.elements = {};
this.state = {
fetching: true,
loading: false,
request: {},
}
}
@ -46,7 +45,7 @@ class Ext1Index extends React.Component {
while (res.outputs.length) {
const msg = JSON.parse(res.outputs.pop());
if (!outputs.hasOwnProperty(msg.key)) {
const data = msg.key === 'local' ? '读取数据... ' : '';
const data = msg.key === 'local' ? ['读取数据... '] : [];
outputs[msg.key] = {data}
}
this._parse_message(msg, outputs)
@ -60,9 +59,7 @@ class Ext1Index extends React.Component {
outputs = outputs || store.outputs;
const {key, data, step, status} = message;
if (data !== undefined) {
outputs[key]['data'] += data;
const el = this.elements[key];
if (el) el.scrollTop = el.scrollHeight
outputs[key]['data'].push(data);
}
if (step !== undefined) outputs[key]['step'] = step;
if (status !== undefined) outputs[key]['status'] = status;
@ -146,9 +143,7 @@ class Ext1Index extends React.Component {
<Steps.Step {...this.getStatus('local', 4)} title="检出后任务"/>
<Steps.Step {...this.getStatus('local', 5)} title="执行打包"/>
</Steps>}>
<pre ref={el => this.elements['local'] = el} className={styles.ext1Console}>
{lds.get(store.outputs, 'local.data')}
</pre>
<OutView outputs={lds.get(store.outputs, 'local.data', [])}/>
</Collapse.Panel>
</Collapse>
@ -167,9 +162,7 @@ class Ext1Index extends React.Component {
<Steps.Step {...this.getStatus(item.id, 4)} title="发布后任务"/>
</Steps>
</div>}>
<pre ref={el => this.elements[item.id] = el} className={styles.ext1Console}>
{lds.get(store.outputs, `${item.id}.data`)}
</pre>
<OutView outputs={lds.get(store.outputs, `${item.id}.data`, [])}/>
</Collapse.Panel>
))}
</Collapse>

17
spug_web/src/pages/deploy/do/Ext2Index.js
View File

@ -8,6 +8,7 @@ import { observer } from 'mobx-react';
import { Steps, Collapse, PageHeader, Spin, Tag, Button, Icon } from 'antd';
import http from 'libs/http';
import { AuthDiv } from 'components';
import OutView from './OutView';
import history from 'libs/history';
import styles from './index.module.css';
import store from './store';
@ -19,11 +20,9 @@ class Ext1Index extends React.Component {
super(props);
this.id = props.match.params.id;
this.log = props.match.params.log;
this.elements = {};
this.state = {
fetching: true,
loading: false,
request: {},
}
}
@ -47,7 +46,7 @@ class Ext1Index extends React.Component {
while (res.outputs.length) {
const msg = JSON.parse(res.outputs.pop());
if (!outputs.hasOwnProperty(msg.key)) {
const data = msg.key === 'local' ? '读取数据... ' : '';
const data = msg.key === 'local' ? ['读取数据... '] : [];
outputs[msg.key] = {data}
}
this._parse_message(msg, outputs)
@ -61,9 +60,7 @@ class Ext1Index extends React.Component {
outputs = outputs || store.outputs;
const {key, data, step, status} = message;
if (data !== undefined) {
outputs[key]['data'] += data;
const el = this.elements[key];
if (el) el.scrollTop = el.scrollHeight
outputs[key]['data'].push(data);
}
if (step !== undefined) outputs[key]['step'] = step;
if (status !== undefined) outputs[key]['status'] = status;
@ -147,9 +144,7 @@ class Ext1Index extends React.Component {
<Steps.Step {...this.getStatus('local', 2 + index)} key={index} title={item.title}/>
))}
</Steps>}>
<pre ref={el => this.elements['local'] = el} className={styles.ext1Console}>
{lds.get(store.outputs, 'local.data')}
</pre>
<OutView outputs={lds.get(store.outputs, 'local.data', [])}/>
</Collapse.Panel>
</Collapse>
@ -169,9 +164,7 @@ class Ext1Index extends React.Component {
))}
</Steps>
</div>}>
<pre ref={el => this.elements[item.id] = el} className={styles.ext1Console}>
{lds.get(store.outputs, `${item.id}.data`)}
</pre>
<OutView outputs={lds.get(store.outputs, `${item.id}.data`, [])}/>
</Collapse.Panel>
))}
</Collapse>

30
spug_web/src/pages/deploy/do/OutView.js Normal file
View File

@ -0,0 +1,30 @@
/**
* Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
* Copyright (c) <spug.dev@gmail.com>
* Released under the AGPL-3.0 License.
*/
import React from 'react';
import { observer } from 'mobx-react';
import styles from './index.module.css';
@observer
class OutView extends React.Component {
constructor(props) {
super(props);
this.el = null;
}
componentDidUpdate(prevProps, prevState, snapshot) {
setTimeout(() => this.el.scrollTop = this.el.scrollHeight, 100)
}
render() {
return (
<pre ref={el => this.el = el} className={styles.ext1Console}>
{this.props.outputs}
</pre>
)
}
}
export default OutView