Merge pull request #2271 from mhils/mitmweb-connection-indicator

[web] add connection indicator [WIP]

10 files changed, 172 insertions, 20 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/__tests__/ducks/connectionSpec.js b/web/src/js/__tests__/ducks/connectionSpec.js
new file mode 100644
index 00000000..d087e867
--- /dev/null
+++ b/web/src/js/__tests__/ducks/connectionSpec.js
@@ -0,0 +1,41 @@
+import reduceConnection from "../../ducks/connection"
+import * as ConnectionActions from "../../ducks/connection"
+import { ConnectionState } from "../../ducks/connection"
+
+describe('connection reducer', () => {
+    it('should return initial state', () => {
+        expect(reduceConnection(undefined, {})).toEqual({
+            state: ConnectionState.INIT,
+            message: null,
+        })
+    })
+
+    it('should handle start fetch', () => {
+        expect(reduceConnection(undefined, ConnectionActions.startFetching())).toEqual({
+            state: ConnectionState.FETCHING,
+            message: undefined,
+        })
+    })
+
+    it('should handle connection established', () => {
+        expect(reduceConnection(undefined, ConnectionActions.connectionEstablished())).toEqual({
+            state: ConnectionState.ESTABLISHED,
+            message: undefined,
+        })
+    })
+
+    it('should handle connection error', () => {
+        expect(reduceConnection(undefined, ConnectionActions.connectionError("no internet"))).toEqual({
+            state: ConnectionState.ERROR,
+            message: "no internet",
+        })
+    })
+
+    it('should handle offline mode', () => {
+        expect(reduceConnection(undefined, ConnectionActions.setOffline())).toEqual({
+            state: ConnectionState.OFFLINE,
+            message: undefined,
+        })
+    })
+
+})
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..1ee42e25
--- /dev/null
+++ b/web/src/js/components/Header/ConnectionIndicator.jsx
@@ -0,0 +1,30 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { connect } from "react-redux"
+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/components/common/DocsLink.jsx b/web/src/js/components/common/DocsLink.jsx
index 182811a3..53c7aca8 100644
--- a/web/src/js/components/common/DocsLink.jsx
+++ b/web/src/js/components/common/DocsLink.jsx
@@ -1,4 +1,4 @@
-import { PropTypes } from 'react'
+import PropTypes from "prop-types"
 
 DocsLink.propTypes = {
     resource: PropTypes.string.isRequired,
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 {