U 优化任务批量执行页面性能

spug_web/src/pages/exec/task/ExecConsole.js

@@ -6,6 +6,7 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import { Modal, Collapse, Icon } from 'antd';
+import OutView from './OutView';
 import styles from './index.module.css';
 import store from './store';
 
@@ -27,7 +28,7 @@ class ExecConsole extends React.Component {
     this.socket.onopen = () => {
       this.socket.send('ok');
       for (let item of Object.values(store.outputs)) {
-        item['system'] += '### Waiting for schedule\n'
+        item['system'].push('### Waiting for schedule\n')
       }
     };
     this.socket.onmessage = e => {
@@ -38,11 +39,7 @@ class ExecConsole extends React.Component {
         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'})
-          }
+          store.outputs[key][type].push(data);
         }
       }
     }
@@ -52,15 +49,21 @@ class ExecConsole extends React.Component {
     this.socket.close()
   }
 
-  genExtra = (key) => {
-    const item = store.outputs[key];
+  genExtra = (outputs) => {
+    let latest, icon;
+    if (outputs['status'] === -2) {
+      return <Icon type="loading" style={{fontSize: 20, color: '#108ee9'}}/>
+    } else if (outputs['status'] === 0) {
+      latest = outputs['info'][outputs['info'].length - 1];
+      icon = <Icon type="check-circle" style={{fontSize: 20}} theme="twoTone" twoToneColor="#52c41a"/>
+    } else {
+      latest = outputs['error'][outputs['error'].length - 1]
+      icon = <Icon type="warning" style={{fontSize: 20}} theme="twoTone" twoToneColor="red"/>
+    }
     return (
       <div style={{display: 'flex', alignItems: 'center'}}>
-        <pre className={styles.header}>{item['latest']}</pre>
-        {item['status'] === -2 ? <Icon type="loading" style={{fontSize: 20, color: '#108ee9'}}/> :
-          item['status'] === 0 ?
-            <Icon type="check-circle" style={{fontSize: 20}} theme="twoTone" twoToneColor="#52c41a"/> :
-            <Icon type="warning" style={{fontSize: 20}} theme="twoTone" twoToneColor="red"/>}
+        <pre className={styles.header}>{latest}</pre>
+        {icon}
       </div>
     )
   };
@@ -84,12 +87,8 @@ class ExecConsole extends React.Component {
             <Collapse.Panel
               key={index}
               header={<b>{item['title']}</b>}
-              extra={this.genExtra(key)}>
-              <pre className={styles.console}>
-                <pre style={{color: '#91d5ff'}}>{item['system']}</pre>
-                {item['info']}
-                <pre ref={ref => this.elements[key] = ref} style={{color: '#ffa39e'}}>{item['error']}</pre>
-              </pre>
+              extra={this.genExtra(item)}>
+              <OutView outputs={item}/>
             </Collapse.Panel>
           ))}
         </Collapse>

spug_web/src/pages/exec/task/OutView.js

@@ -0,0 +1,34 @@
+/**
+ * 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 { toJS } from 'mobx';
+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() {
+    const outputs = toJS(this.props.outputs);
+    return (
+      <div ref={ref => this.el = ref} className={styles.console}>
+        <pre style={{color: '#91d5ff'}}>{outputs['system']}</pre>
+        <pre>{outputs['info']}</pre>
+        <pre style={{color: '#ffa39e'}}>{outputs['error']}</pre>
+      </div>
+    )
+  }
+}
+
+export default OutView

spug_web/src/pages/exec/task/index.module.css

@@ -5,6 +5,7 @@
 .console {
     max-height: 300px;
     padding: 10px 15px;
+    overflow: scroll;
 }
 
 .header {

spug_web/src/pages/exec/task/store.js

@@ -30,10 +30,9 @@ class Store {
         const key = `${item.hostname}:${item.port}`;
         this.outputs[key] = {
           title: `${item.name}(${key})`,
-          system: '### Establishing communication\n',
-          info: '',
-          error: '',
-          latest: '',
+          system: ['### Establishing communication\n'],
+          info: [],
+          error: [],
           status: -2
         }
       }