auto scroll to bottom

5 files changed, 71 insertions, 17 deletions

diff --git a/app/client/socket/socket.system.js b/app/client/socket/socket.system.js
index 0cdc625..38140c3 100644
--- a/app/client/socket/socket.system.js
+++ b/app/client/socket/socket.system.js
@@ -7,15 +7,27 @@ socket.on('system_res', (data) => {
   console.log('system response', data)
   switch (data.type) {
     case 'relay_connected':
-      return dispatch({ type: types.system.relay_connected })
+      return dispatch({
+        type: types.system.relay_connected
+      })
     case 'relay_disconnected':
-      return dispatch({ type: types.system.relay_disconnected })
+      return dispatch({
+        type: types.system.relay_disconnected
+      })
     case 'rpc_connected':
-      return dispatch({ type: types.system.rpc_connected, runner: data.runner })
+      return dispatch({
+        type: types.system.rpc_connected,
+        runner: data.runner,
+      })
     case 'rpc_disconnected':
-      return dispatch({ type: types.system.rpc_disconnected })
+      return dispatch({
+        type: types.system.rpc_disconnected
+      })
     case 'relay_status':
-      return dispatch({ type: data.rpc_connected ? types.system.rpc_connected : types.system.rpc_disconnected, runner: data.runner })
+      return dispatch({
+        type: data.rpc_connected ? types.system.rpc_connected : types.system.rpc_disconnected,
+        runner: data.runner,
+      })
     case 'command_output':
       return dispatch({
         type: types.system.command_output,
diff --git a/app/client/socket/socket.task.js b/app/client/socket/socket.task.js
index 0c8429b..ba074c0 100644
--- a/app/client/socket/socket.task.js
+++ b/app/client/socket/socket.task.js
@@ -3,6 +3,8 @@ import types from '../types'
 
 import { socket } from './socket.connection'
 
+let finishTimeout;
+
 socket.on('task_res', (data) => {
   console.log('system response', data)
   switch (data.type) {
@@ -10,12 +12,13 @@ socket.on('task_res', (data) => {
       // return dispatch({ type: types.system.rpc_connected, runner: data.runner })
       break
     case 'task_begin':
-      return dispatch({ type: types.task.task_begin, data: data.data })
+      clearTimeout(finishTimeout)
+      return dispatch({ type: types.task.task_begin, task: data.task })
       break
     case 'stop':
       break
     case 'task_finish':
-      return dispatch({ type: types.task.task_finish, data: data.data })
+      return finishTimeout = setTimeout(() => dispatch({ type: types.task.task_finish, task: data.task }), 100)
       break
     case 'kill':
       break
diff --git a/app/client/system/system.actions.js b/app/client/system/system.actions.js
index ff32fd6..519e140 100644
--- a/app/client/system/system.actions.js
+++ b/app/client/system/system.actions.js
@@ -1,4 +1,4 @@
-import * as socket from '../socket'
+import socket from '../socket'
 import types from '../types'
 
 export const run = (cmd) => {
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>
     )
   }
diff --git a/app/client/system/system.reducer.js b/app/client/system/system.reducer.js
index a7ae8d1..c29572e 100644
--- a/app/client/system/system.reducer.js
+++ b/app/client/system/system.reducer.js
@@ -22,8 +22,6 @@ const systemInitialState = {
   rpc: {
     connected: false,
     status: "unknown",
-    cpu_cmd: "unknown",
-    gpu_cmd: "unknown",
     error: null,
   },
   cmd: {
@@ -34,6 +32,10 @@ const systemInitialState = {
     stdout: "",
     stderr: "",
   },
+  runner: {
+    cpu: { status: 'IDLE', task: {} },
+    gpu: { status: 'IDLE', task: {} },
+  },
   stdout: "",
   stderr: "",
 }
@@ -109,7 +111,8 @@ const systemReducer = (state = systemInitialState, action) => {
           status: 'connected',
           connected: true,
           error: null,
-        }
+        },
+        runner: action.runner,
       }
     case types.system.rpc_connected:
       return {
@@ -147,9 +150,30 @@ const systemReducer = (state = systemInitialState, action) => {
     case types.task.task_begin:
       return {
         ...state,
+        runner: {
+          ...state.runner,
+          [action.task.processor]: { status: 'RUNNING', task: action.task },
+        },
+        cmd: {
+          ...state.cmd,
+          loaded: false,
+          stdout: "",
+          stderr: "",
+        },
         stdout: "",
         stderr: "",
       }
+    case types.task.task_finish:
+      if (state.runner[action.task.processor].task.uuid !== action.task.uuid) {
+        return state
+      }
+      return {
+        ...state,
+        runner: {
+          ...state.runner,
+          [action.task.processor]: { status: 'IDLE', task: {} },
+        },
+      }
     case types.system.stdout:
       return {
         ...state,