Added socker.io for reporting system health stats

package.json

@@ -49,6 +49,8 @@
     "redux-promise": "^0.5.3",
     "redux-promise-middleware": "^4.1.0",
     "redux-thunk": "^2.1.0",
+    "socket.io": "^1.5.0",
+    "socket.io-client": "^1.5.0",
     "source-map-support": "^0.4.3",
     "style-loader": "^0.13.1",
     "universal-router": "1.2.2",

src/actions/stats.js

@@ -2,13 +2,11 @@ import fetch from 'isomorphic-fetch';
 
 import { SYSTEM_STATS } from '../constants';
 
-export function diskUsage() {
+export function update(data) {
   return {
     type: SYSTEM_STATS,
     payload: new Promise(resolve => {
-      fetch('/api/stats').then(response => {
-        resolve(response.json());
-      });
+      resolve(data);
     })
   }
 }

src/client.js

@@ -149,7 +149,7 @@ async function onLocationChange(location) {
     }
 
     ReactDOM.render(
-      <App context={context}>{route.component}</App>,
+      <App context={context} hostname={window.location.hostname}>{route.component}</App>,
       container,
       () => onRenderComplete(route, location)
     );

src/components/App.js

@@ -12,8 +12,10 @@ import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import getMuiTheme from 'material-ui/styles/getMuiTheme';
 
-import injectTapEventPlugin from 'react-tap-event-plugin';
+import { port } from '../config';
+import SystemHealth from './SystemHealth';
 
+import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
 
 const ContextType = {
@@ -30,6 +32,7 @@ class App extends React.Component {
   static propTypes = {
     context: PropTypes.shape(ContextType).isRequired,
     children: PropTypes.element.isRequired,
+    hostname: PropTypes.string.isRequired,
   };
 
   static childContextTypes = ContextType;
@@ -41,7 +44,10 @@ class App extends React.Component {
   render() {
     return (
       <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>
-        {React.Children.only(this.props.children)}
+        <div>
+          <SystemHealth port={port} ip={this.props.hostname} />
+          {React.Children.only(this.props.children)}
+        </div>
       </MuiThemeProvider>
     );
   }

src/components/Header/Header.js

@@ -12,6 +12,7 @@ import classnames from 'classnames';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 
 import Navigation from '../Navigation';
+import MiniStats from '../MiniStats';
 import logo from './RetroPie_Logo-60x60.png';
 import s from './Header.css';
 
@@ -25,6 +26,7 @@ function Header() {
               <img src={logo} />
             </div>
           </Navigation>
+          <MiniStats />
         </div>
       </div>
     </div>

src/components/MiniStats/MiniStats.css

@@ -0,0 +1,14 @@
+.container {
+  position: absolute;
+  top:5px;
+  right: 10px;
+}
+
+.stat {
+  padding:0 10px;
+}
+
+.stat i {
+  width:15px;
+  margin-right: 5px;
+}

src/components/MiniStats/MiniStats.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import mathjs from 'mathjs';
+
+import * as statsAction from '../../actions/stats';
+
+import s from './MiniStats.css';
+
+const mapStateToProps = (state) => {
+  return {
+    isChecking: state.stats.get('isChecking'),
+    disk: state.stats.get('disk'),
+    cpu: state.stats.get('cpu'),
+    memory: state.stats.get('memory'),
+  }
+};
+
+class MiniStats extends Component
+{
+  render() {
+    const { isChecking, disk, memory, cpu } = this.props;
+    if (isChecking) {
+      return (<span />);
+    }
+
+    return (
+      <div className={s.container}>
+        <div className={s.stat}>
+          <i className="fa fa-database" />
+          <span>{ mathjs.round(disk.get('availablePercentage'), 2) }%</span>
+        </div>
+        <div className={s.stat}>
+          <i className="fa fa-tachometer" />
+          <span>{ mathjs.round(memory.get('percentage'), 2) }%</span>
+        </div>
+        <div className={s.stat}>
+          <i className="fa fa-fire" />
+          <span>{ mathjs.round(0, 2) }%</span>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default connect(mapStateToProps)(withStyles(s)(MiniStats));

src/components/MiniStats/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "MiniStats",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./MiniStats.js"
+}

src/components/SystemHealth.js

@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux'
+import history from '../core/history';
+
+import io from 'socket.io-client';
+
+import * as actions from '../actions/stats';
+
+const mapStateToProps = (state) => {
+  return {
+
+  }
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    update: data => dispatch(actions.update(data))
+  }
+};
+
+const statEvent = 'system_health';
+
+class SystemHealth extends Component
+{
+  socket;
+
+  componentDidMount() {
+    const { port, ip } = this.props;
+    this.socket = io(`http://${ip}:${port}`);
+    this.socket.on('init', () => {
+      console.log('init!');
+    });
+
+    this.socket.on(statEvent, ::this._receiveData);
+  }
+
+  componentWillUnmount() {
+    this.socket.removeAllListeners(statEvent);
+  }
+
+  _receiveData(time, data) {
+    this.props.update(data);
+  }
+
+  render() {
+    return(<s />);
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SystemHealth);

src/routes/stats-board/StatsBoard.js

@@ -22,32 +22,14 @@ const mapStateToProps = (state) => {
   }
 };
 
-const mapDispatchToProps = (dispatch) => {
-  return {
-    checkDiskSpace: () => dispatch(statsAction.diskUsage())
-  }
-};
-
 class StatsBoard extends Component
 {
-  interval = null;
-
   constructor(...props) {
     super(...props);
 
     this.state = {};
   }
 
-  componentDidMount() {
-    // ...
-    this.props.checkDiskSpace();
-    this.interval = setInterval(this.props.checkDiskSpace, 5000);
-  }
-
-  componentWillUnmount() {
-    clearInterval(this.interval);
-  }
-
   _renderContent() {
     const { disk, cpu, memory } = this.props;
 
@@ -120,7 +102,4 @@ class StatsBoard extends Component
   }
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(withStyles(s)(StatsBoard));
+export default connect(mapStateToProps)(withStyles(s)(StatsBoard));

src/server.js

@@ -27,9 +27,16 @@ import configureStore from './store/configureStore';
 import buildWorker from './worker';
 import { port } from './config';
 
+const DEBUG = !process.argv.includes('--release');
+
 const app = express();
 
-const DEBUG = !process.argv.includes('--release');
+const http = app.listen(port, () => {
+  // Sockets
+  console.log(`The server is running at http://localhost:${port}/`);
+});
+
+const io = require('socket.io').listen(http);
 
 //
 // Tell any CSS tooling (such as Material UI) to use all vendor prefixes if the
@@ -46,7 +53,7 @@ app.use(cookieParser());
 app.use(bodyParser.urlencoded({ extended: true }));
 app.use(bodyParser.json());
 
-buildWorker(app, DEBUG ? '.dev' : '');
+buildWorker(app, DEBUG ? '.dev' : '', io);
 
 //
 // Register server-side rendering middleware
@@ -116,7 +123,3 @@ app.use((err, req, res, next) => { // eslint-disable-line no-unused-vars
   res.status(err.status || 500);
   res.send(`<!doctype html>${html}`);
 });
-
-app.listen(port, () => {
-  console.log(`The server is running at http://localhost:${port}/`);
-});