Prompt user if the server has stopped working due to an unexpected er…

…ror (#161, #169)
cncjs · Jun 10, 2017 · 0d556f1 · 0d556f1
1 parent 0db7640
commit 0d556f1
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 13 deletions.
diff --git a/src/web/containers/Workspace/Workspace.jsx b/src/web/containers/Workspace/Workspace.jsx
@@ -6,6 +6,8 @@ import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import shallowCompare from 'react-addons-shallow-compare';
 import { withRouter } from 'react-router-dom';
+import { Button } from '../../components/Buttons';
+import Modal from '../../components/Modal';
 import api from '../../api';
 import controller from '../../lib/controller';
 import i18n from '../../lib/i18n';
@@ -30,13 +32,18 @@ const stopWaiting = () => {
     const root = document.documentElement;
     root.classList.remove('wait');
 };
+const reloadPage = (forcedReload = true) => {
+    // Reload the current page, without using the cache
+    window.location.reload(forcedReload);
+};
 
 class Workspace extends Component {
     static propTypes = {
         ...withRouter.propTypes
     };
 
     state = {
+        connected: controller.connected,
         mounted: false,
         port: '',
         isDraggingFile: false,
@@ -56,6 +63,15 @@ class Workspace extends Component {
     secondaryToggler = null;
     defaultContainer = null;
     controllerEvents = {
+        'connect': () => {
+            this.setState({ connected: controller.connected });
+        },
+        'connect_error': () => {
+            this.setState({ connected: controller.connected });
+        },
+        'disconnect': () => {
+            this.setState({ connected: controller.connected });
+        },
         'serialport:open': (options) => {
             const { port } = options;
             this.setState({ port: port });
@@ -288,6 +304,7 @@ class Workspace extends Component {
     render() {
         const { style, className } = this.props;
         const {
+            connected,
             port,
             isDraggingFile,
             isDraggingWidget,
@@ -300,6 +317,30 @@ class Workspace extends Component {
 
         return (
             <div style={style} className={classNames(className, styles.workspace)}>
+                {!connected &&
+                <Modal
+                    closeOnOverlayClick={false}
+                    showCloseButton={false}
+                >
+                    <Modal.Body>
+                        <div style={{ display: 'flex' }}>
+                            <i className="fa fa-exclamation-circle fa-4x text-danger" />
+                            <div style={{ marginLeft: 25 }}>
+                                <h5>{i18n._('Server has stopped working')}</h5>
+                                <p>{i18n._('A problem caused the server to stop working correctly. Check out the server status and try again.')}</p>
+                            </div>
+                        </div>
+                    </Modal.Body>
+                    <Modal.Footer>
+                        <Button
+                            btnStyle="primary"
+                            onClick={reloadPage}
+                        >
+                            {i18n._('Reload')}
+                        </Button>
+                    </Modal.Footer>
+                </Modal>
+                }
                 <div
                     className={classNames(
                         styles.dropzoneOverlay,

diff --git a/src/web/lib/controller.js b/src/web/lib/controller.js
@@ -11,7 +11,37 @@ import {
 } from '../constants';
 
 class CNCController {
+    socket = null;
+
     callbacks = {
+        //
+        // Socket.IO Events
+        //
+        // Fired upon a connection including a successful reconnection.
+        'connect': [],
+        // Fired upon a connection error.
+        'connect_error': [],
+        // Fired upon a connection timeout.
+        'connect_timeout': [],
+        // Fired when an error occurs.
+        'error': [],
+        // Fired upon a disconnection.
+        'disconnect': [],
+        // Fired upon a successful reconnection.
+        'reconnect': [],
+        // Fired upon an attempt to reconnect.
+        'reconnect_attempt': [],
+        // Fired upon an attempt to reconnect.
+        'reconnecting': [],
+        // Fired upon a reconnection attempt error.
+        'reconnect_error': [],
+        // Fired when couldn't reconnect within reconnectionAttempts.
+        'reconnect_failed': [],
+
+        //
+        // System Events
+        //
+        'startup': [],
         'config:change': [],
         'task:start': [],
         'task:finish': [],
@@ -32,6 +62,7 @@ class CNCController {
         'TinyG:state': [],
         'TinyG:settings': []
     };
+
     context = {
         xmin: 0,
         xmax: 0,
@@ -50,9 +81,11 @@ class CNCController {
     type = '';
     state = {};
     settings = {};
-    socket = null;
     workflowState = WORKFLOW_STATE_IDLE;
 
+    get connected() {
+        return !!(this.socket && this.socket.connected);
+    }
     connect(next = noop) {
         if (typeof next !== 'function') {
             next = noop;
@@ -119,17 +152,6 @@ class CNCController {
             });
         });
 
-        this.socket.on('connect', () => {
-            log.debug('socket.on(\'connect\')');
-        });
-        this.socket.on('error', () => {
-            log.error('socket.on(\'error\')');
-            this.disconnect();
-        });
-        this.socket.on('close', () => {
-            log.debug('socket.on(\'close\')');
-        });
-
         this.socket.on('startup', (data) => {
             const { loadedControllers, ports, baudrates } = { ...data };
 
@@ -139,7 +161,12 @@ class CNCController {
 
             log.debug('socket.on(\'startup\'):', { loadedControllers, ports, baudrates });
 
-            next();
+            if (next) {
+                next();
+
+                // The callback can only be called once
+                next = null;
+            }
         });
     }
     disconnect() {