[web] add connection indicator

9 files changed, 142 insertions, 30 deletions

diff --git a/web/src/css/header.less b/web/src/css/header.less
index aa9abc76..55fc59d0 100644
--- a/web/src/css/header.less
+++ b/web/src/css/header.less
@@ -1,5 +1,7 @@
 @import (reference) '../../node_modules/bootstrap/less/variables.less';
 @import (reference) '../../node_modules/bootstrap/less/mixins/grid.less';
+@import (reference) "../../node_modules/bootstrap/less/mixins/labels.less";
+@import (reference) "../../node_modules/bootstrap/less/labels.less";
 
 @menu-height: 85px;
 
@@ -7,7 +9,7 @@ header {
     padding-top: 6px;
     background-color: white;
     @separator-color: lighten(grey, 15%);
-    menu {
+    > div {
         display: block;
         margin: 0;
         padding: 0;
@@ -45,7 +47,6 @@ header {
     }
 }
 
-
 .menu-entry {
     text-align: left;
     height: (@menu-height - @menu-legend-height)/3;
@@ -63,7 +64,6 @@ header {
     }
 }
 
-
 .menu-legend {
     height: @menu-legend-height;
     text-align: center;
@@ -130,3 +130,27 @@ header {
         }
     }
 }
+
+.connection-indicator {
+    .label();
+    float: right;
+    margin: 5px;
+    opacity: 1;
+    transition: all 1s linear;
+
+    &.init, &.fetching {
+        background-color: @label-info-bg;
+    }
+    &.established {
+        background-color: @label-success-bg;
+        opacity: 0;
+    }
+    &.error {
+        background-color: @label-danger-bg;
+        transition: all 0.2s linear;
+    }
+    &.offline {
+        background-color: @label-warning-bg;
+        opacity: 1;
+    }
+}
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 {
diff --git a/web/yarn.lock b/web/yarn.lock
index 6bdc7907..adf06635 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -1279,14 +1279,14 @@ content-type@~1.0.1:
   version "1.0.2"

   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.2.tgz#b7d113aee7a8dd27bd21133c4dc2529df1721eed"

 

-convert-source-map@1.X, convert-source-map@^1.2.0:

-  version "1.4.0"

-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.4.0.tgz#e3dad195bf61bfe13a7a3c73e9876ec14a0268f3"

-

-convert-source-map@^1.1.0, convert-source-map@~1.1.0:

+convert-source-map@1.X, convert-source-map@^1.1.0, convert-source-map@~1.1.0:

   version "1.1.3"

   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.1.3.tgz#4829c877e9fe49b3161f3bf3673888e204699860"

 

+convert-source-map@^1.2.0:

+  version "1.4.0"

+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.4.0.tgz#e3dad195bf61bfe13a7a3c73e9876ec14a0268f3"

+

 core-js@^1.0.0:

   version "1.2.7"

   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"

@@ -1860,7 +1860,7 @@ fb-watchman@^2.0.0:
   dependencies:

     bser "^2.0.0"

 

-fbjs@^0.8.1, fbjs@^0.8.4:

+fbjs@^0.8.1, fbjs@^0.8.4, fbjs@^0.8.9:

   version "0.8.9"

   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.9.tgz#180247fbd347dcc9004517b904f865400a0c8f14"

   dependencies:

@@ -2461,14 +2461,10 @@ https-browserify@~0.0.0:
   version "0.0.1"

   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"

 

-iconv-lite@0.4.13:

+iconv-lite@0.4.13, iconv-lite@~0.4.13:

   version "0.4.13"

   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"

 

-iconv-lite@~0.4.13:

-  version "0.4.15"

-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"

-

 ieee754@^1.1.4:

   version "1.1.8"

   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"

@@ -4068,6 +4064,12 @@ promise@^7.1.1:
   dependencies:

     asap "~2.0.3"

 

+prop-types@^15.5.0:

+  version "15.5.8"

+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394"

+  dependencies:

+    fbjs "^0.8.9"

+

 prr@~0.0.0:

   version "0.0.0"

   resolved "https://registry.yarnpkg.com/prr/-/prr-0.0.0.tgz#1a84b85908325501411853d0081ee3fa86e2926a"