4 files changed, 55 insertions, 9 deletions
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 {