mirror of https://github.com/openspug/spug
U 优化发布页面在输出大量日志时的性能
parent
554b4f3b56
commit
a17c46ea6b
|
@ -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")}'
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
Loading…
Reference in New Issue