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

spug_api/apps/deploy/views.py

@@ -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 = {str(x.id): {'data': []} for x in hosts}
-        outputs.update(local={'data': f'{human_time()} 建立接连...        '})
+        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")}'

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

@@ -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;
+      outputs[key]['data'].push(data);
-      const el = this.elements[key];
-      if (el) el.scrollTop = el.scrollHeight
     }
     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}>
+              <OutView outputs={lds.get(store.outputs, 'local.data', [])}/>
-                {lds.get(store.outputs, 'local.data')}
-              </pre>
             </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}>
+                <OutView outputs={lds.get(store.outputs, `${item.id}.data`, [])}/>
-                  {lds.get(store.outputs, `${item.id}.data`)}
-                </pre>
               </Collapse.Panel>
             ))}
           </Collapse>

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

@@ -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;
+      outputs[key]['data'].push(data);
-      const el = this.elements[key];
-      if (el) el.scrollTop = el.scrollHeight
     }
     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}>
+              <OutView outputs={lds.get(store.outputs, 'local.data', [])}/>
-                {lds.get(store.outputs, 'local.data')}
-              </pre>
             </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}>
+                  <OutView outputs={lds.get(store.outputs, `${item.id}.data`, [])}/>
-                    {lds.get(store.outputs, `${item.id}.data`)}
-                  </pre>
                 </Collapse.Panel>
               ))}
             </Collapse>

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

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