U 优化读取发布日志性能

pull/146/head
vapao 2020-07-03 12:29:47 +08:00
parent 731a439222
commit f05ab964b5
2 changed files with 28 additions and 26 deletions

View File

@ -42,27 +42,30 @@ class Ext1Index extends React.Component {
http.get(`/api/deploy/request/${this.id}/`, {params: {log: this.log}}) http.get(`/api/deploy/request/${this.id}/`, {params: {log: this.log}})
.then(res => { .then(res => {
store.request = res; store.request = res;
store.outputs = {}; const outputs = {}
while (res.outputs.length) { while (res.outputs.length) {
const msg = JSON.parse(res.outputs.pop()); const msg = JSON.parse(res.outputs.pop());
if (!store.outputs.hasOwnProperty(msg.key)) { if (!outputs.hasOwnProperty(msg.key)) {
const data = msg.key === 'local' ? '读取数据... ' : ''; const data = msg.key === 'local' ? '读取数据... ' : '';
store.outputs[msg.key] = {data} outputs[msg.key] = {data}
} }
this._parse_message(msg) this._parse_message(msg, outputs)
} }
store.outputs = outputs
}) })
.finally(() => this.setState({fetching: false})) .finally(() => this.setState({fetching: false}))
}; };
_parse_message = (message) => { _parse_message = (message, outputs) => {
outputs = outputs || store.outputs;
const {key, data, step, status} = message; const {key, data, step, status} = message;
if (data !== undefined) { if (data !== undefined) {
store.outputs[key]['data'] += data; outputs[key]['data'] += data;
if (this.elements[key]) this.elements[key].scrollIntoView() const el = this.elements[key];
if (el) el.scrollTop = el.scrollHeight
} }
if (step !== undefined) store.outputs[key]['step'] = step; if (step !== undefined) outputs[key]['step'] = step;
if (status !== undefined) store.outputs[key]['status'] = status; if (status !== undefined) outputs[key]['status'] = status;
}; };
handleDeploy = () => { handleDeploy = () => {
@ -143,9 +146,8 @@ class Ext1Index extends React.Component {
<Steps.Step {...this.getStatus('local', 4)} title="检出后任务"/> <Steps.Step {...this.getStatus('local', 4)} title="检出后任务"/>
<Steps.Step {...this.getStatus('local', 5)} title="执行打包"/> <Steps.Step {...this.getStatus('local', 5)} title="执行打包"/>
</Steps>}> </Steps>}>
<pre className={styles.ext1Console}> <pre ref={el => this.elements['local'] = el} className={styles.ext1Console}>
{lds.get(store.outputs, 'local.data')} {lds.get(store.outputs, 'local.data')}
<div ref={el => this.elements['local'] = el}/>
</pre> </pre>
</Collapse.Panel> </Collapse.Panel>
</Collapse> </Collapse>
@ -165,9 +167,8 @@ class Ext1Index extends React.Component {
<Steps.Step {...this.getStatus(item.id, 4)} title="发布后任务"/> <Steps.Step {...this.getStatus(item.id, 4)} title="发布后任务"/>
</Steps> </Steps>
</div>}> </div>}>
<pre className={styles.ext1Console}> <pre ref={el => this.elements[item.id] = el} className={styles.ext1Console}>
{lds.get(store.outputs, `${item.id}.data`)} {lds.get(store.outputs, `${item.id}.data`)}
<div ref={el => this.elements[item.id] = el} />
</pre> </pre>
</Collapse.Panel> </Collapse.Panel>
))} ))}

View File

@ -43,27 +43,30 @@ class Ext1Index extends React.Component {
http.get(`/api/deploy/request/${this.id}/`, {params: {log: this.log}}) http.get(`/api/deploy/request/${this.id}/`, {params: {log: this.log}})
.then(res => { .then(res => {
store.request = res; store.request = res;
store.outputs = {}; const outputs = {};
while (res.outputs.length) { while (res.outputs.length) {
const msg = JSON.parse(res.outputs.pop()); const msg = JSON.parse(res.outputs.pop());
if (!store.outputs.hasOwnProperty(msg.key)) { if (!outputs.hasOwnProperty(msg.key)) {
const data = msg.key === 'local' ? '读取数据... ' : ''; const data = msg.key === 'local' ? '读取数据... ' : '';
store.outputs[msg.key] = {data} outputs[msg.key] = {data}
} }
this._parse_message(msg) this._parse_message(msg, outputs)
} }
store.outputs = outputs
}) })
.finally(() => this.setState({fetching: false})) .finally(() => this.setState({fetching: false}))
}; };
_parse_message = (message) => { _parse_message = (message, outputs) => {
outputs = outputs || store.outputs;
const {key, data, step, status} = message; const {key, data, step, status} = message;
if (data !== undefined) { if (data !== undefined) {
store.outputs[key]['data'] += data; outputs[key]['data'] += data;
if (this.elements[key]) this.elements[key].scrollIntoView() const el = this.elements[key];
if (el) el.scrollTop = el.scrollHeight
} }
if (step !== undefined) store.outputs[key]['step'] = step; if (step !== undefined) outputs[key]['step'] = step;
if (status !== undefined) store.outputs[key]['status'] = status; if (status !== undefined) outputs[key]['status'] = status;
}; };
handleDeploy = () => { handleDeploy = () => {
@ -144,9 +147,8 @@ class Ext1Index extends React.Component {
<Steps.Step {...this.getStatus('local', 2 + index)} key={index} title={item.title}/> <Steps.Step {...this.getStatus('local', 2 + index)} key={index} title={item.title}/>
))} ))}
</Steps>}> </Steps>}>
<pre className={styles.ext1Console}> <pre ref={el => this.elements['local'] = el} className={styles.ext1Console}>
{lds.get(store.outputs, 'local.data')} {lds.get(store.outputs, 'local.data')}
<div ref={el => this.elements['local'] = el}/>
</pre> </pre>
</Collapse.Panel> </Collapse.Panel>
</Collapse> </Collapse>
@ -167,9 +169,8 @@ class Ext1Index extends React.Component {
))} ))}
</Steps> </Steps>
</div>}> </div>}>
<pre className={styles.ext1Console}> <pre ref={el => this.elements[item.id] = el} className={styles.ext1Console}>
{lds.get(store.outputs, `${item.id}.data`)} {lds.get(store.outputs, `${item.id}.data`)}
<div ref={el => this.elements[item.id] = el}/>
</pre> </pre>
</Collapse.Panel> </Collapse.Panel>
))} ))}