pass thru if server/relay are connected

6 files changed, 145 insertions, 12 deletions

diff --git a/app/client/common/param.component.js b/app/client/common/param.component.js
new file mode 100644
index 0000000..e788118
--- /dev/null
+++ b/app/client/common/param.component.js
@@ -0,0 +1,19 @@
+import { h, Component } from 'preact'
+import { connect } from 'react-redux'
+
+export default class Param extends Component {
+  constructor(props){
+    super(props)
+  }
+  render() {
+    return (
+      <div className='button param'>
+        <label>
+          <span>{this.props.title}</span>
+          <span>{this.props.children}</span>
+        </label>
+      </div>
+    )
+  }
+}
+
diff --git a/app/client/socket.js b/app/client/socket.js
index 3f008ef..cc4285b 100644
--- a/app/client/socket.js
+++ b/app/client/socket.js
@@ -6,6 +6,15 @@ let socket = io.connect('/client')
 
 // SOCKET ACTIONS
 
+socket.on('connect', () => store.dispatch({ type: types.socket.connect }))
+socket.on('connect_error', (error) => store.dispatch({ type: types.socket.connect_error, error }))
+socket.on('reconnect', (attempt) => store.dispatch({ type: types.socket.reconnect, attempt }))
+socket.on('reconnecting', () => store.dispatch({ type: types.socket.reconnecting }))
+socket.on('reconnect_error', (error) => store.dispatch({ type: types.socket.reconnect_error, error }))
+socket.on('reconnect_failed', (error) => store.dispatch({ type: types.socket.reconnect_failed, error }))
+socket.on('disconnect', () => store.dispatch({ type: types.socket.disconnect }))
+socket.on('error', (error) => store.dispatch({ type: types.socket.error, error }))
+
 socket.on('res', (data) => {
   console.log(data.cmd)
   switch (data.cmd) {
@@ -49,6 +58,10 @@ socket.on('res', (data) => {
 socket.on('system_res', (data) => {
   console.log('system response', data)
   switch (data.type) {
+    case 'relay_connected':
+      return store.dispatch({ type: types.system.relay_connected })
+    case 'relay_disconnected':
+      return store.dispatch({ type: types.system.relay_disconnected })
     case 'command_output':
       store.dispatch({
         type: types.system.command_output,
diff --git a/app/client/system/system.component.js b/app/client/system/system.component.js
index 0819c2f..e097b61 100644
--- a/app/client/system/system.component.js
+++ b/app/client/system/system.component.js
@@ -3,9 +3,7 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
 import Group from '../common/group.component'
-import Slider from '../common/slider.component'
-import Select from '../common/select.component'
-import Button from '../common/button.component'
+import Param from '../common/param.component'
 
 import * as systemActions from './system.actions'
 
@@ -14,21 +12,34 @@ class System extends Component {
     super()
   }
   render(){
-    const { site, actions } = this.props
+    const { site, server, relay, rpc, actions } = this.props
     return (
-      <div className='dashboard'>
+      <div className='system'>
         <div className='heading'>
           <h2>{site.name} System</h2>
         </div>
 
-        <div className='column'>
+        <div className='row params'>
+          <Group title="Status">
+            <Param title='Server'>{server.status}</Param>
+            {server.error &&
+              <Param title='Server error'>{server.error.message}</Param>
+            }
+            <Param title='Relay'>{relay.status}</Param>
+            <Param title='RPC'>{rpc.status}</Param>
+            <Param title='CPU'>pix2pix dataset.py</Param>
+            <Param title='GPU'>pix2pix train.py</Param>
+            <Param title='Current Task'>train samplernn</Param>
+          </Group>
           <Group title="Diagnostics">
-            <button onClick={() => actions.run('nvidia-smi')}>nvidia-smi</button>
-            <button onClick={() => actions.run('ps')}>ps</button>
-            <button onClick={() => actions.run('w')}>w</button>
+            <Param title='Commands'>
+              <button onClick={() => actions.run('nvidia-smi')}>nvidia-smi</button>
+              <button onClick={() => actions.run('ps')}>ps</button>
+              <button onClick={() => actions.run('w')}>w</button>
+            </Param>
           </Group>
-          {this.renderCommandOutput()}
         </div>
+        {this.renderCommandOutput()}
       </div>
     )
   }
@@ -57,8 +68,7 @@ class System extends Component {
   }
 }
 const mapStateToProps = state => ({
-  site: state.system.site,
-  cmd: state.system.cmd,
+  ...state.system
 })
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
diff --git a/app/client/system/system.reducer.js b/app/client/system/system.reducer.js
index e581813..1b0e28f 100644
--- a/app/client/system/system.reducer.js
+++ b/app/client/system/system.reducer.js
@@ -9,6 +9,21 @@ const systemInitialState = {
   site: {
     name: 'Lens Cortex',
   },
+  server: {
+    connected: false,
+    status: "disconnected",
+    error: null,
+  },
+  relay: {
+    connected: false,
+    status: "unknown",
+    error: null,
+  },
+  rpc: {
+    connected: false,
+    status: "unknown",
+    error: null,
+  },
   cmd: {
     loading: false,
     loaded: false,
@@ -111,6 +126,63 @@ const systemInitialState = {
 
 const systemReducer = (state = systemInitialState, action) => {
   switch(action.type) {
+    case types.socket.connect:
+    case types.socket.reconnecting:
+      return {
+        ...state,
+        server: {
+          status: 'connected',
+          connected: true,
+          error: null,
+        },
+      }
+    case types.socket.reconnect:
+      return {
+        ...state,
+        server: {
+          status: 'reconnecting (attempt ' + action.attempt + ')',
+          connected: false,
+          error: null,
+        },
+      }
+    case types.socket.connect_error:
+    case types.socket.reconnect_error:
+    case types.socket.disconnect:
+    case types.socket.reconnect_failed:
+      return {
+        ...state,
+        server: {
+          status: 'disconnected',
+          connected: false,
+          error: action.error || null,
+        },
+      }
+    case types.socket.error:
+      return {
+        ...state,
+        server: {
+          ...state.socket,
+          error: action.error,
+        },
+      }
+    case types.system.relay_connected:
+      return {
+        ...state,
+        relay: {
+          status: 'connected',
+          connected: true,
+          error: null,
+        }
+      }
+    case types.system.relay_disconnected:
+      return {
+        ...state,
+        relay: {
+          status: 'disconnected',
+          connected: false,
+          error: null,
+        }
+      }
     case types.system.running_command:
       return {
         ...state,
diff --git a/app/client/types.js b/app/client/types.js
index fe22465..cba2871 100644
--- a/app/client/types.js
+++ b/app/client/types.js
@@ -2,8 +2,19 @@ export default {
 	system: {
 		running_command: 'SYSTEM_RUNNING_COMMAND',
 		command_output: 'SYSTEM_COMMAND_OUTPUT',
+		relay_connected: 'SYSTEM_RELAY_CONNECTED',
+		relay_disconnected: 'SYSTEM_RELAY_DISCONNECTED',
 	},
 	socket: {
+		connect: 'SOCKET_CONNECT',
+		connect_error: 'SOCKET_CONNECT_ERROR',
+		reconnect: 'SOCKET_RECONNECT',
+		reconnecting: 'SOCKET_RECONNECTING',
+		reconnect_error: 'SOCKET_RECONNECT_ERROR',
+		reconnect_failed: 'SOCKET_RECONNECT_FAILED',
+		disconnect: 'SOCKET_DISCONNECT',
+		error: 'SOCKET_ERROR',
+
 		load_params: 'LOAD_PARAMS',
 		list_sequences: 'LIST_SEQUENCES',
 		list_epochs: 'LIST_EPOCHS',
diff --git a/app/server/index.js b/app/server/index.js
index c3b0763..acbb20b 100644
--- a/app/server/index.js
+++ b/app/server/index.js
@@ -25,6 +25,7 @@ server.listen(process.env.EXPRESS_PORT, () => {
 
 const io = socket_io(server)
 let relay, client
+let relay_connected = false
 
 client = io.of('/client')
 client.on('connect', bind_client)
@@ -40,6 +41,9 @@ if (process.env.EXPRESS_CONNECTS_TO_RELAY === 'true') {
 
 function bind_relay(socket) {
   console.log('Relay connected')
+  relay_connected = true
+  client.emit('system_res', { type: 'relay_connected' })
+
   socket.on('res', data => {
     console.log('Received response', data.cmd)
     client.emit('res', data)
@@ -61,11 +65,15 @@ function bind_relay(socket) {
 
   socket.on('disconnect', () => {
     console.log('Relay disconnected')
+    relay_connected = false
+    client.emit('system_res', { type: 'relay_disconnected' })
   })
 }
 
 function bind_client(socket){
   console.log('Client connected')
+  socket.emit('system_res', { type: relay_connected ? 'relay_connected' : 'relay_disconnected' })
+
   socket.on('cmd', data => {
     console.log('Client sent command', data)
     relay.emit('cmd', data)