[web] add connection indicator

7 files changed, 102 insertions, 16 deletions

diff --git a/web/src/js/backends/websocket.js b/web/src/js/backends/websocket.js
index 44b260c9..01094ac4 100644
--- a/web/src/js/backends/websocket.js
+++ b/web/src/js/backends/websocket.js
@@ -4,6 +4,7 @@
  *  An alternative backend may use the REST API only to host static instances.
  */
 import { fetchApi } from "../utils"
+import * as connectionActions from "../ducks/connection"
 
 const CMD_RESET = 'reset'
 
@@ -17,7 +18,7 @@ export default class WebsocketBackend {
     connect() {
         this.socket = new WebSocket(location.origin.replace('http', 'ws') + '/updates')
         this.socket.addEventListener('open', () => this.onOpen())
-        this.socket.addEventListener('close', () => this.onClose())
+        this.socket.addEventListener('close', event => this.onClose(event))
         this.socket.addEventListener('message', msg => this.onMessage(JSON.parse(msg.data)))
         this.socket.addEventListener('error', error => this.onError(error))
     }
@@ -26,6 +27,7 @@ export default class WebsocketBackend {
         this.fetchData("settings")
         this.fetchData("flows")
         this.fetchData("events")
+        this.store.dispatch(connectionActions.startFetching())
     }
 
     fetchData(resource) {
@@ -59,15 +61,22 @@ export default class WebsocketBackend {
         let queue = this.activeFetches[resource]
         delete this.activeFetches[resource]
         queue.forEach(msg => this.onMessage(msg))
+
+        if(Object.keys(this.activeFetches).length === 0) {
+            // We have fetched the last resource
+            this.store.dispatch(connectionActions.connectionEstablished())
+        }
     }
 
-    onClose() {
-        // FIXME
-        console.error("onClose", arguments)
+    onClose(closeEvent) {
+        this.store.dispatch(connectionActions.connectionError(
+            `Connection closed at ${new Date().toUTCString()} with error code ${closeEvent.code}.`
+        ))
+        console.error("websocket connection closed", closeEvent)
     }
 
     onError() {
         // FIXME
-        console.error("onError", arguments)
+        console.error("websocket connection errored", arguments)
     }
 }
diff --git a/web/src/js/components/Header.jsx b/web/src/js/components/Header.jsx
index f362e4a1..ebe7453c 100644
--- a/web/src/js/components/Header.jsx
+++ b/web/src/js/components/Header.jsx
@@ -7,6 +7,7 @@ import OptionMenu from './Header/OptionMenu'
 import FileMenu from './Header/FileMenu'
 import FlowMenu from './Header/FlowMenu'
 import {setActiveMenu} from '../ducks/ui/header'
+import ConnectionIndicator from "./Header/ConnectionIndicator"
 
 class Header extends Component {
     static entries = [MainMenu, OptionMenu]
@@ -39,10 +40,11 @@ class Header extends Component {
                             {Entry.title}
                         </a>
                     ))}
+                    <ConnectionIndicator/>
                 </nav>
-                <menu>
+                <div>
                     <Active/>
-                </menu>
+                </div>
             </header>
         )
     }
diff --git a/web/src/js/components/Header/ConnectionIndicator.jsx b/web/src/js/components/Header/ConnectionIndicator.jsx
new file mode 100644
index 00000000..e8feb20e
--- /dev/null
+++ b/web/src/js/components/Header/ConnectionIndicator.jsx
@@ -0,0 +1,29 @@
+import React, { PropTypes } from "react"
+import { connect } from "react-redux"
+import classnames from "classnames"
+import {ConnectionState} from "../../ducks/connection"
+
+
+ConnectionIndicator.propTypes = {
+    state: PropTypes.symbol.isRequired,
+    message: PropTypes.string,
+
+}
+function ConnectionIndicator({ state, message }) {
+    switch(state){
+        case ConnectionState.INIT:
+            return <span className="connection-indicator init">connecting…</span>;
+        case ConnectionState.FETCHING:
+            return <span className="connection-indicator fetching">fetching data…</span>;
+        case ConnectionState.ESTABLISHED:
+            return <span className="connection-indicator established">connected</span>;
+        case ConnectionState.ERROR:
+            return <span className="connection-indicator error" title={message}>connection lost</span>;
+        case ConnectionState.OFFLINE:
+            return <span className="connection-indicator offline">offline</span>;
+    }
+}
+
+export default connect(
+    state => state.connection,
+)(ConnectionIndicator)
diff --git a/web/src/js/ducks/connection.js b/web/src/js/ducks/connection.js
new file mode 100644
index 00000000..ffa2c309
--- /dev/null
+++ b/web/src/js/ducks/connection.js
@@ -0,0 +1,44 @@
+export const ConnectionState = {
+    INIT: Symbol("init"),
+    FETCHING: Symbol("fetching"), // WebSocket is established, but still startFetching resources.
+    ESTABLISHED: Symbol("established"),
+    ERROR: Symbol("error"),
+    OFFLINE: Symbol("offline"), // indicates that there is no live (websocket) backend.
+}
+
+const defaultState = {
+    state: ConnectionState.INIT,
+    message: null,
+}
+
+export default function reducer(state = defaultState, action) {
+    switch (action.type) {
+
+        case ConnectionState.ESTABLISHED:
+        case ConnectionState.FETCHING:
+        case ConnectionState.ERROR:
+        case ConnectionState.OFFLINE:
+            return {
+                state: action.type,
+                message: action.message
+            }
+
+        default:
+            return state
+    }
+}
+
+export function startFetching() {
+    return { type: ConnectionState.FETCHING }
+}
+
+export function connectionEstablished() {
+    return { type: ConnectionState.ESTABLISHED }
+}
+
+export function connectionError(message) {
+    return { type: ConnectionState.ERROR, message }
+}
+export function setOffline() {
+    return { type: ConnectionState.OFFLINE }
+}
diff --git a/web/src/js/ducks/index.js b/web/src/js/ducks/index.js
index 753075fa..0f2426ec 100644
--- a/web/src/js/ducks/index.js
+++ b/web/src/js/ducks/index.js
@@ -1,12 +1,14 @@
-import { combineReducers } from 'redux'
-import eventLog from './eventLog'
-import flows from './flows'
-import settings from './settings'
-import ui from './ui/index'
+import { combineReducers } from "redux"
+import eventLog from "./eventLog"
+import flows from "./flows"
+import settings from "./settings"
+import ui from "./ui/index"
+import connection from "./connection"
 
 export default combineReducers({
     eventLog,
     flows,
     settings,
+    connection,
     ui,
 })
diff --git a/web/src/js/ducks/ui/flow.js b/web/src/js/ducks/ui/flow.js
index ba604ea2..51ad4184 100644
--- a/web/src/js/ducks/ui/flow.js
+++ b/web/src/js/ducks/ui/flow.js
@@ -26,7 +26,7 @@ const defaultState = {
 }
 
 export default function reducer(state = defaultState, action) {
-    let wasInEditMode = !!(state.modifiedFlow)
+    let wasInEditMode = state.modifiedFlow
 
     let content = action.content || state.content
     let isFullContentShown = content && content.length <= state.maxContentLines
@@ -89,14 +89,14 @@ export default function reducer(state = defaultState, action) {
                 ...state,
                 tab: action.tab ? action.tab : 'request',
                 displayLarge: false,
-                showFullContent: state.contentView == 'Edit'
+                showFullContent: state.contentView === 'Edit'
             }
 
         case SET_CONTENT_VIEW:
             return {
                 ...state,
                 contentView: action.contentView,
-                showFullContent: action.contentView == 'Edit'
+                showFullContent: action.contentView === 'Edit'
             }
 
         case SET_CONTENT:
diff --git a/web/src/js/ducks/ui/header.js b/web/src/js/ducks/ui/header.js
index 6581149e..274d82aa 100644
--- a/web/src/js/ducks/ui/header.js
+++ b/web/src/js/ducks/ui/header.js
@@ -30,7 +30,7 @@ export default function reducer(state = defaultState, action) {
             // Deselect
             if (action.flowIds.length === 0 && state.isFlowSelected) {
                 let activeMenu = state.activeMenu
-                if (activeMenu == 'Flow') {
+                if (activeMenu === 'Flow') {
                     activeMenu = 'Start'
                 }
                 return {