2 files changed, 94 insertions, 12 deletions

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,