Merge pull request #6 from leapfrogtechnology/CHILL-13

CHILL-13 Integrate websocket

.env.example

@@ -1,7 +1,11 @@
 # APP
 APP_LOGO={APP_LOGO}
 APP_LOGO_HEIGHT={LOGO_HEIGHT}
+APP_TITLE={APP_TITLE}
 
 # API
 API_ENDPOINT={API_ENDPOINT}
 
+#WEBSOCKET
+WEBSOCKET_ENDPOINT={WEBSOCKET_ENDPOINT}
+

package.json

@@ -27,6 +27,7 @@
     "bootstrap": "^3.3.7",
     "moment": "^2.18.1",
     "prop-types": "^15.5.10",
+    "ramda": "^0.24.1",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
     "react-router-dom": "^4.0.0",

src/components/Dashboard/StatusPanel.js

@@ -1,9 +1,11 @@
+import { update } from 'ramda';
 import React, { Component } from 'react';
 
 import {
   getOutageParams,
   fetchServiceStatuses
 } from '../../services/status';
+import * as websocket from '../../services/websocket';
 
 import Panel from '../commons/Panel';
 import ServiceList from './ServiceList';
@@ -19,11 +21,28 @@ class StatusPanel extends Component {
 
   async componentDidMount() {
     this.fetchStatuses();
+    websocket.initialize({
+      onMessage: (e, data) => this.handleStatusChange(e, data)
+    });
   }
 
   /**
-   * Fetch list of services. 
-   * 
+   * Implementation of real time status change
+   *
+   * @param service
+   */
+  handleStatusChange(e, data) {
+    let { services } = this.state;
+    let index = services.findIndex(item => item.name === data.name);
+    // Updates the only the updated service data in the services list (Immutable).
+    let updatedServices = update(index, Object.assign({}, services[index], data), services);
+
+    this.setState({ services: updatedServices });
+  }
+
+  /**
+   * Fetch list of services.
+   *
    * @returns {Promise}
    */
   async fetchStatuses() {

src/config.js

@@ -1,12 +1,17 @@
 export default {
   app: {
-    logoUrl: process.env.APP_LOGO,
+    title: process.env.APP_TITLE || 'Chill Dashboard',
+    logoUrl: process.env.APP_LOGO || require('../public/images/chill.png'),
     logoHeight: process.env.APP_LOGO_HEIGHT || '80px'
   },
   api: {
     baseUrl: process.env.API_ENDPOINT || 'http://localhost:8000',
     endpoints: {
       status: '/api/status'
     }
+  },
+  websocket: {
+    endpoint: process.env.WEBSOCKET_ENDPOINT || 'ws://localhost:8080',
+    reconnectTimeout: 5000
   }
 };

src/index.js

@@ -5,9 +5,12 @@ import { render } from 'react-dom';
 import { AppContainer } from 'react-hot-loader';
 
 import Router from './routes';
+import config from './config';
 
 const mountNode = document.getElementById('app');
 
+document.title = config.app.title;
+
 const renderApp = () => {
   render(
     <AppContainer>

src/services/websocket.js

@@ -0,0 +1,55 @@
+import config from '../config';
+
+const CONNECTION_ESTABLISHED_EVENT = 'ws-connection-establish';
+
+let ws;
+let handlers = {};
+
+/**
+ * Initialize websocket client.
+ *
+ * @param {Object} handlers
+ */
+export function initialize(handlers) {
+  if (!ws) {
+    connect(handlers);
+  }
+}
+
+/**
+ * Connect to the websocket endpoint.
+ *
+ * @param {Object} eventHandlers
+ */
+function connect(eventHandlers) {
+  ws = new WebSocket(config.websocket.endpoint);
+  handlers = eventHandlers || {};
+
+  ws.onclose = handleClose;
+  ws.onmessage = handleMessage;
+}
+
+/**
+ * Handle websocket incoming message.
+ *
+ * @param {Object} e
+ */
+function handleMessage(e) {
+  let data = JSON.parse(e.data);
+
+  // Do not call callback function for connection established event
+  if (data.event !== CONNECTION_ESTABLISHED_EVENT) {
+    handlers.onMessage(e, data);
+  }
+}
+
+/**
+ * Handle websocket connection closed.
+ *
+ */
+function handleClose() {
+  setTimeout(() => {
+    connect(handlers);
+  }, config.websocket.reconnectTimeout);
+}
+

webpack.config.js

@@ -42,7 +42,7 @@ module.exports = {
       },
       {
         test: /\.(jpe?g|png|gif|svg)$/i,
-        use: 'file-loader?name=[name].[ext]&publicPath=/images/&outputPath=/images/'
+        use: 'file-loader'
       },
       {
         test: /\.ico$/,
@@ -64,10 +64,12 @@ module.exports = {
       template: resolve(__dirname, 'public/index.html')
     }),
     new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('development'),
       'process.env.APP_LOGO': JSON.stringify(process.env.APP_LOGO),
+      'process.env.APP_TITLE': JSON.stringify(process.env.APP_TITLE),
+      'process.env.API_ENDPOINT': JSON.stringify(process.env.API_ENDPOINT),
       'process.env.APP_LOGO_HEIGHT': JSON.stringify(process.env.APP_LOGO_HEIGHT),
-      'process.env.NODE_ENV': JSON.stringify('development'),
-      'process.env.API_ENDPOINT': JSON.stringify(process.env.API_ENDPOINT)
+      'process.env.WEBSOCKET_ENDPOINT': JSON.stringify(process.env.WEBSOCKET_ENDPOINT)
     }),
     new webpack.NamedModulesPlugin(), // prints more readable module names in the browser console on HMR updates
     new webpack.NoEmitOnErrorsPlugin(), // do not emit compiled assets that include errors

webpack.config.production.js

@@ -53,10 +53,12 @@ module.exports = {
       template: path.resolve(__dirname, 'public/index.html')
     }),
     new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production'),
       'process.env.APP_LOGO': JSON.stringify(process.env.APP_LOGO),
+      'process.env.APP_TITLE': JSON.stringify(process.env.APP_TITLE),
+      'process.env.API_ENDPOINT': JSON.stringify(process.env.API_ENDPOINT),
       'process.env.APP_LOGO_HEIGHT': JSON.stringify(process.env.APP_LOGO_HEIGHT),
-      'process.env.NODE_ENV': JSON.stringify('production'),
-      'process.env.API_ENDPOINT': JSON.stringify(process.env.API_ENDPOINT)
+      'process.env.WEBSOCKET_ENDPOINT': JSON.stringify(process.env.WEBSOCKET_ENDPOINT)
     }),
     new webpack.optimize.UglifyJsPlugin()
   ]

yarn.lock

@@ -3617,7 +3617,7 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-lodash@^4.0.0, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.6.1:
+lodash@^4.0.0, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.6.1:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -4710,6 +4710,10 @@ querystringify@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-1.0.0.tgz#6286242112c5b712fa654e526652bf6a13ff05cb"
 
+ramda@^0.24.1:
+  version "0.24.1"
+  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.24.1.tgz#c3b7755197f35b8dc3502228262c4c91ddb6b857"
+
 randomatic@^1.1.3:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.6.tgz#110dcabff397e9dcff7c0789ccc0a49adf1ec5bb"