From 8f1b763082d0d00bee0b1e97f9c8bfb740083c63 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Wed, 26 Apr 2017 17:51:33 +0200 Subject: [web] add connection indicator --- web/src/css/header.less | 30 +++++++++++++-- web/src/js/backends/websocket.js | 19 +++++++--- web/src/js/components/Header.jsx | 6 ++- .../js/components/Header/ConnectionIndicator.jsx | 29 ++++++++++++++ web/src/js/ducks/connection.js | 44 ++++++++++++++++++++++ web/src/js/ducks/index.js | 12 +++--- web/src/js/ducks/ui/flow.js | 6 +-- web/src/js/ducks/ui/header.js | 2 +- web/yarn.lock | 24 ++++++------ 9 files changed, 142 insertions(+), 30 deletions(-) create mode 100644 web/src/js/components/Header/ConnectionIndicator.jsx create mode 100644 web/src/js/ducks/connection.js (limited to 'web') 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} ))} + - +
-
+ ) } 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 connecting…; + case ConnectionState.FETCHING: + return fetching data…; + case ConnectionState.ESTABLISHED: + return connected; + case ConnectionState.ERROR: + return connection lost; + case ConnectionState.OFFLINE: + return offline; + } +} + +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" -- cgit v1.2.3