added status

src/actions/mqtt.js

@@ -10,6 +10,11 @@ export const MQTT_PUSH_MESSAGES = 'mqtt_push_messages';
 
 export const MQTT_FORM_TOGGLE = 'mqtt_form_toggle';
 
+export const MQTT_CHANGE_CONNECTION_STATUS = 'MQTT_CHANGE_CONNECTION_STATUS';
+export const GATEWAY_DISCONNECTED = 'GATEWAY_DISCONNECTED';
+export const GATEWAY_CONNECTED = 'GATEWAY_CONNECTED';
+export const DEVICE_CONNECTED = 'DEVICE_CONNECTED';
+
 
 export const connect = (url, topic) => ({
     type: MQTT_CONNECT,
@@ -19,6 +24,32 @@ export const connect = (url, topic) => ({
     }
 });
 
+export const changeConnectionStatus = (status) => (dispatch, getState) => {
+    const {mqtt: {connectionStatus}} = getState();
+
+    if (_.isEqual(connectionStatus, status)) return;
+
+    switch (status) {
+        case GATEWAY_DISCONNECTED:
+            return dispatch({
+                type: MQTT_CHANGE_CONNECTION_STATUS,
+                payload: {status: GATEWAY_DISCONNECTED},
+            });
+        case GATEWAY_CONNECTED:
+            return dispatch({
+                type: MQTT_CHANGE_CONNECTION_STATUS,
+                payload: {status: GATEWAY_CONNECTED},
+            });
+        case DEVICE_CONNECTED:
+            return dispatch({
+                type: MQTT_CHANGE_CONNECTION_STATUS,
+                payload: {status: DEVICE_CONNECTED},
+            });
+        default:
+            return;
+    }
+};
+
 export const disconnect = () => ({
     type: MQTT_DISCONNECT,
 });

src/middlewares/index.js

@@ -28,7 +28,7 @@ const middleware = [
 
 const composedEnhancers = compose(
     applyMiddleware(...middleware),
-    (window.__REDUX_DEVTOOLS_EXTENSION__ && config.debug) ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f,
+    (window.__REDUX_DEVTOOLS_EXTENSION__) ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f,
 );
 
 export default composedEnhancers;

src/middlewares/mqtt.js

 import mqtt from 'mqtt';
 import {MQTT_CONNECT, MQTT_DISCONNECT} from '../actions/mqtt';
-import {connected, disconnected, pushMessage, pushMessages} from '../actions/mqtt';
+import {connected, disconnected, changeConnectionStatus, pushMessages} from '../actions/mqtt';
 import _ from 'lodash';
 import config from '../config';
 
@@ -45,7 +45,13 @@ const mqttMiddleware = (function () {
                         const message = msg.toString();
                         if (config.debug) console.info('MQTT: Message recieved.\nTopic: %s\nPayload: %s', topic, message);
                         if (_.isEqual(topic, msgTopic)) {
-                            messages.push({topic, message: message, timestamp: new Date().getTime()});
+                            const json = _.attempt(() => JSON.parse(message.message), {});
+                            messages.push({
+                                topic,
+                                message: _.get(json, 'payload'),
+                                timestamp: _.get(json, 'timestamp')
+                            });
+                            store.dispatch(changeConnectionStatus(_.get(json, 'status')));
                         }
                     });
                 } catch (e) {
@@ -63,9 +69,10 @@ const mqttMiddleware = (function () {
 
 
         const isConnected = _.get(store.getState(), 'mqtt.isConnected');
+        const isConnectInProcess = _.get(store.getState(), 'mqtt.isConnectInProcess');
         const clientIsNull = client == null;
 
-        if (isConnected && clientIsNull) {
+        if ((isConnected || isConnectInProcess) && clientIsNull) {
             const formValues = _.get(store.getState(), 'form.mqtt.values');
             subscribe(formValues.url, formValues.topic);
         }

src/modules/MQTT/components/Status/index.js

+import React from 'react';
+import PropTypes from 'prop-types'
+import styled from 'styled-components';
+import classNames from 'classnames';
+
+
+const Step = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  font-size: 12px;
+  padding: 5px;
+  
+  > label {
+    user-select: none;
+    min-width: 120px;
+    margin: 0;
+    text-align: right;
+    padding-right: 5px;
+  }
+  > ${StepIndicator} {
+    width: 30px;
+  }
+`;
+
+
+const StepIndicator = styled.div`
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  z-index: 2;
+  
+  background-color: ${props => props.active ? '#28a745' : '#f2f2f2'};
+`;
+
+StepIndicator.propTypes = {
+    active: PropTypes.bool
+};
+
+const Line = styled.div`
+  border: 1px solid ${props => props.active ? '#28a745' : '#f2f2f2'};
+  height: 25px;
+  position: absolute;
+  right: 14px;
+  bottom: 25px;
+  z-index: 1;
+`;
+
+Line.propTypes = {
+    active: PropTypes.bool
+};
+
+
+const Status = ({className, gatewayConnected, deviceConnected}) => {
+    return (
+        <div className={classNames('text-muted', className)}>
+            <Step><label>Gateway connected</label><StepIndicator active={gatewayConnected || deviceConnected}/></Step>
+            <Step><label>Device connected</label>
+                <Line active={deviceConnected}/>
+                <StepIndicator active={deviceConnected}/>
+            </Step>
+        </div>
+    );
+};
+
+Status.propTypes = {
+    gatewayConnected: PropTypes.bool,
+    deviceConnected: PropTypes.bool
+};
+
+Status.defaultProps = {
+    gatewayConnected: false,
+    deviceConnected: false
+};
+
+export default styled(Status)`
+    min-width: 160px;
+`;

src/modules/MQTT/components/SubscriptionView/index.js

-import React, {Fragment} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types'
 import styled from 'styled-components';
 import classNames from 'classnames';
@@ -22,7 +22,6 @@ const Message = styled.div`
 
 const SubscriptionView = ({className, messages, displayType}) => {
     return (
-        <Fragment>
         <div className={classNames('text-muted', className)}>
             {messages.map((message) => {
                 return (
@@ -36,7 +35,6 @@ const SubscriptionView = ({className, messages, displayType}) => {
                 )
             })}
         </div>
-        </Fragment>
     );
 };
 
@@ -53,6 +51,7 @@ SubscriptionView.defaultProps = {
 };
 
 export default styled(SubscriptionView)`
+  width: 100%;
   overflow-y: auto;
   max-height: 400px;
 `

src/modules/MQTT/containers/Status/index.js

+import {connect} from 'react-redux';
+import _ from 'lodash';
+
+import Status from '../../components/Status';
+import {GATEWAY_DISCONNECTED, GATEWAY_CONNECTED, DEVICE_CONNECTED} from '../../../../actions/mqtt';
+
+
+const mapStateToProps = ({mqtt: {connectionStatus}}) => {
+    return ({
+        gatewayConnected: _.isEqual(connectionStatus, GATEWAY_CONNECTED),
+        deviceConnected: _.isEqual(connectionStatus, DEVICE_CONNECTED)
+    })
+};
+
+
+export default connect(mapStateToProps)(Status);

src/modules/MQTT/index.js

-import React, {Fragment} from 'react';
+import React from 'react';
 
 
 import Chart from './containers/Chart';
+import Status from './containers/Status';
 import SubscribeForm from './containers/SubscribeToTopic';
 import SubscriptionView from './containers/SubscriptionView';
 
 
 const CombinedView = () => {
     return (
-        <Fragment>
+        <div className="container-fluid">
+            <div className="row">
+                <div className="col-12 col-sm-9 col-md-10 p-0">
                     <Chart/>
+                </div>
+                <div className="col--12 col-sm-3 col-md-2 p-0">
+                    <Status/>
+                </div>
+            </div>
+            <div className="row">
                 <SubscribeForm/>
+            </div>
+            <div className="row">
                 <SubscriptionView/>
+            </div>
             <br/>
-        </Fragment>
+        </div>
     )
 
 };

src/modules/UIKit/components/Header/index.js

@@ -22,7 +22,7 @@ export default styled(Header)`
   background-color: #fafafa;
   width: 100%;
   > img {
-      height: 35px;
-      margin: 6px 3px 0px 30px;
+    height: 26px;
+    margin: 12px 3px 0px 30px;
   }
 `

src/modules/UIKit/components/Overlay/LoaderOverlay.js

@@ -23,5 +23,7 @@ LoaderOverlay.propTypes = {
 
 
 export default styled(LoaderOverlay)`
+  width: 100%;
+  height: 100%;
   position: relative;
 `

src/modules/UIKit/components/Overlay/TextOverlay.js

@@ -35,4 +35,6 @@ TextOverlay.propTypes = {
 
 export default styled(TextOverlay)`
   position: relative;
+  width: 100%;
+  height: 100%;
 `

src/reducers/mqtt.js

@@ -4,7 +4,13 @@ import {
     MQTT_PUSH_MESSAGES,
     MQTT_CONNECTED,
     MQTT_DISCONNECTED,
-    MQTT_FORM_TOGGLE, MQTT_CONNECT
+    MQTT_FORM_TOGGLE,
+    MQTT_CONNECT,
+    MQTT_CHANGE_CONNECTION_STATUS,
+
+    GATEWAY_DISCONNECTED,
+    GATEWAY_CONNECTED,
+    DEVICE_CONNECTED,
 } from '../actions/mqtt'
 
 
@@ -13,9 +19,15 @@ export default (state = {
     isConnectInProcess: false,
     messages: [],
     accelXYZB: [],
-    displayForm: true
+    displayForm: true,
+    connectionStatus: GATEWAY_DISCONNECTED
 }, action) => {
     switch (action.type) {
+        case MQTT_CHANGE_CONNECTION_STATUS:
+            return {
+                ...state,
+                connectionStatus: action.payload.status
+            };
         case MQTT_PUSH_MESSAGE:
             return {
                 ...state,