From 6f2c22acddb59889501aab24c5de4e5b8a92e003 Mon Sep 17 00:00:00 2001
From: vapao <live1989@foxmail.com>
Date: Sun, 5 Jul 2020 19:35:58 +0800
Subject: [PATCH] =?UTF-8?q?U=20=E4=BC=98=E5=8C=96=E4=BB=BB=E5=8A=A1?=
 =?UTF-8?q?=E6=89=B9=E9=87=8F=E6=89=A7=E8=A1=8C=E9=A1=B5=E9=9D=A2=E6=80=A7?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 spug_web/src/pages/exec/task/ExecConsole.js   | 37 +++++++++----------
 spug_web/src/pages/exec/task/OutView.js       | 34 +++++++++++++++++
 spug_web/src/pages/exec/task/index.module.css |  1 +
 spug_web/src/pages/exec/task/store.js         |  7 ++--
 4 files changed, 56 insertions(+), 23 deletions(-)
 create mode 100644 spug_web/src/pages/exec/task/OutView.js

diff --git a/spug_web/src/pages/exec/task/ExecConsole.js b/spug_web/src/pages/exec/task/ExecConsole.js
index cdacde5d..b6a8faa5 100644
--- a/spug_web/src/pages/exec/task/ExecConsole.js
+++ b/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>
diff --git a/spug_web/src/pages/exec/task/OutView.js b/spug_web/src/pages/exec/task/OutView.js
new file mode 100644
index 00000000..ee550202
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/spug_web/src/pages/exec/task/index.module.css b/spug_web/src/pages/exec/task/index.module.css
index a62f56f5..c128bca4 100644
--- a/spug_web/src/pages/exec/task/index.module.css
+++ b/spug_web/src/pages/exec/task/index.module.css
@@ -5,6 +5,7 @@
 .console {
     max-height: 300px;
     padding: 10px 15px;
+    overflow: scroll;
 }
 
 .header {
diff --git a/spug_web/src/pages/exec/task/store.js b/spug_web/src/pages/exec/task/store.js
index 097fdcd5..3a03e6b7 100644
--- a/spug_web/src/pages/exec/task/store.js
+++ b/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
         }
       }