From 10eab813d70a203e5b81583eac165e33a1bf6f6d Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sun, 27 May 2018 03:36:38 +0200
Subject: auto scroll to bottom

---
 app/client/system/system.component.js | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

(limited to 'app/client/system/system.component.js')

diff --git a/app/client/system/system.component.js b/app/client/system/system.component.js
index 07428e5..680d1c0 100644
--- a/app/client/system/system.component.js
+++ b/app/client/system/system.component.js
@@ -34,8 +34,14 @@ class System extends Component {
   constructor(props){
     super()
   }
+  componentDidUpdate(){
+    console.log(this._screen.scrollHeight, this._screen.scrollTop, this._screen.offsetHeight)
+    if (this._screen.scrollHeight > this._screen.scrollTop - this._screen.offsetHeight + 100) {
+      this._screen.scrollTop = this._screen.scrollHeight
+    }
+  }
   render(){
-    const { site, server, relay, rpc, actions } = this.props
+    const { site, server, relay, runner, rpc, actions } = this.props
     return (
       <div className='system'>
         <div className='heading'>
@@ -51,9 +57,8 @@ class System extends Component {
               }
               <Param title='Relay'>{relay.status}</Param>
               <Param title='RPC'>{rpc.status}</Param>
-              <Param title='CPU'>{rpc.cpu_cmd}</Param>
-              <Param title='GPU'>{rpc.gpu_cmd}</Param>
-              <Param title='Current Task'>train samplernn</Param>
+              <Param title='CPU'>{this.renderStatus(runner.cpu)}</Param>
+              <Param title='GPU'>{this.renderStatus(runner.gpu)}</Param>
             </Group>
             <Group title="Diagnostics">
               <Param title='Check GPU'>
@@ -89,6 +94,16 @@ class System extends Component {
       </div>
     )
   }
+  renderStatus(processor){
+    if (!processor) {
+      return 'unknown'
+    }
+    if (processor.status === 'IDLE') {
+      return 'idle'
+    }
+    const task = processor.task
+    return task.activity + ' ' + task.module
+  }
   renderCommandOutput(){
     const { cmd, stdout, stderr } = this.props
     let output
@@ -108,14 +123,14 @@ class System extends Component {
     }
     else {
       output = stdout
-      if (cmd.stderr) {
+      if (stderr.length) {
         output += '\n\n_________________________________\n\n'
         output += stderr
       }
     }
     return (
       <div>
-        <div className='screen'>{output}</div>
+        <div ref={(ref) => this._screen = ref} className='screen'>{output}</div>
       </div>
     )
   }
-- 
cgit v1.2.3-70-g09d2