Sticky notification for websocket connection problems (#174)

* Sticky error notification when websocket cannot connect

* Fixed small bug on restart

* Remove debugging statement

* Changed architecture of sticky notifications to pass in type='websocket'

* Renamed dispatcher to dispatch

* Simplified notifications clearing such that there wouldn't be multiple notifications on reload

* Updated clearing notification. Added support for orange status

* Removed deprecated code

* Removed mentions of websocket from notifications. Generalised to have callers define a key and filter by key

* Renamed key to tag

* Clear notifications from within websocket before setting a new notification

* Ported promise to notification and simplified websocket notification code

Author: hatsy

public/scripts/Notifications.jsx

@@ -4,6 +4,10 @@ import { connect } from 'react-redux';
 
 export const SHOW_NOTIFICATION = 'cesium/SHOW_NOTIFICATION';
 export const HIDE_NOTIFICATION = 'cesium/HIDE_NOTIFICATION';
+export const HIDE_NOTIFICATION_BY_TAG = 'cesium/HIDE_NOTIFICATION_BY_TAG';
+
+export const MS_PER_YEAR = 31540000000;
+
 
 export function hideNotification(id) {
   return {
@@ -12,6 +16,18 @@ export function hideNotification(id) {
   };
 }
 
+export function hideNotificationByTag(tag) {
+  return (dispatch) => {
+    dispatch(
+      {
+        type: HIDE_NOTIFICATION_BY_TAG,
+        payload: { tag }
+      }
+    );
+    return Promise.resolve();
+  };
+}
+
 export let Notifications = (props) => {
   const style = {
     position: 'fixed',
@@ -39,6 +55,7 @@ export let Notifications = (props) => {
 
   const noteColor = {
     error: 'Crimson',
+    warning: 'Orange',
     info: 'MediumAquaMarine'
   };
 
@@ -70,7 +87,7 @@ Notifications = connect(mapStateToProps)(Notifications);
 
 
 let nextNotificationId = 0;
-export function showNotification(note, type='info') {
+export function showNotification(note, type='info', duration=3000, tag='default') {
   const thisId = nextNotificationId++;
 
   if (type === 'error') {
@@ -82,26 +99,31 @@ export function showNotification(note, type='info') {
       type: SHOW_NOTIFICATION,
       payload: {
         id: thisId,
-        note,
-        type
+        note: note,
+        type: type,
+        tag: tag
       }
     });
-    setTimeout(() => dispatch(hideNotification(thisId)), 3000);
+    setTimeout(() => dispatch(hideNotification(thisId)), duration);
   };
 }
 
 export function reducer(state={ notes: [] }, action) {
   switch (action.type) {
     case SHOW_NOTIFICATION: {
-      let { id, note, type } = action.payload;
+      let { id, note, type, tag } = action.payload;
       return {
-        notes: state.notes.concat({ id, note, type })
+        notes: state.notes.concat({ id, note, type, tag })
       };
     }
     case HIDE_NOTIFICATION:
       return {
         notes: state.notes.filter(n => (n.id !== action.payload.id))
       };
+    case HIDE_NOTIFICATION_BY_TAG:
+      return {
+        notes: state.notes.filter(n => (n.tag !== action.payload.tag))
+      }
     default:
       return state;
   }

public/scripts/WebSocket.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { createCookie, readCookie, eraseCookie } from './cookies';
 import ReconnectingWebSocket from './reconnecting-websocket';
+import { showNotification, hideNotificationByTag, MS_PER_YEAR } from './Notifications';
 
 
 function getTime() {
@@ -56,6 +57,17 @@ function getAuthToken(auth_url) {
 }
 
 
+function showWebsocketNotification(dispatch, msg, tag) {
+  dispatch(hideNotificationByTag(tag))
+  .then(dispatch(showNotification(msg, 'warning', 50 * MS_PER_YEAR, tag)));
+}
+
+
+function clearWebsocketNotification(dispatch, tag) {
+  dispatch(hideNotificationByTag(tag));
+}
+
+
 class WebSocket extends React.Component {
   constructor(props) {
     super(props);
@@ -65,11 +77,21 @@ class WebSocket extends React.Component {
     };
 
     const ws = new ReconnectingWebSocket(props.url);
+    const tag = 'websocket';
 
     ws.onopen = (event) => {
       this.setState({ connected: true });
+      clearWebsocketNotification(this.props.dispatch, tag);
     };
 
+    ws.onerror = (event) => {
+      showWebsocketNotification(
+        this.props.dispatch,
+        "No WebSocket connection: limited functionality may be available",
+        tag
+      );
+    }
+
     ws.onmessage = (event) => {
       const message = event.data;
 
@@ -89,9 +111,15 @@ class WebSocket extends React.Component {
         case "AUTH FAILED":
           this.setState({ authenticated: false });
           eraseCookie('auth_token');
+          showWebsocketNotification(
+            this.props.dispatch,
+            "WebSocket connection authentication failed: limited functionality may be available",
+            tag
+          );
           break;
         case "AUTH OK":
           this.setState({ authenticated: true });
+          this.props.dispatch(hideNotificationByTag(tag));
           break;
         default:
           this.props.messageHandler(data);
@@ -101,6 +129,11 @@ class WebSocket extends React.Component {
     ws.onclose = (event) => {
       this.setState({ connected: false,
                      authenticated: false });
+      showWebsocketNotification(
+         this.props.dispatch,
+         "No WebSocket connection: limited functionality may be available",
+         tag
+      );
     };
   }
 
@@ -130,7 +163,7 @@ class WebSocket extends React.Component {
     };
 
     const connected_desc = (`WebSocket is
-      ${(this.state.connected ? 'connected' : 'disconnected')} & 
+      ${(this.state.connected ? 'connected' : 'disconnected')} &
       ${(this.state.authenticated ? 'authenticated' : 'unauthenticated')}.`);
     return (
       <div

public/scripts/main.jsx

@@ -296,6 +296,7 @@ class MainContent extends React.Component {
                   url={`ws://${this.props.root}websocket`}
                   auth_url={`${location.protocol}//${this.props.root}socket_auth_token`}
                   messageHandler={messageHandler}
+                  dispatch={store.dispatch}
                 />
               </Tab>
             </TabList>