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/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 +- 7 files changed, 102 insertions(+), 16 deletions(-) create mode 100644 web/src/js/components/Header/ConnectionIndicator.jsx create mode 100644 web/src/js/ducks/connection.js (limited to 'web/src/js') 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 { -- cgit v1.2.3 From 97a00728a85a32ca6a8e98a991f6dcf28809e73b Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Sat, 29 Apr 2017 19:43:59 +0200 Subject: [web] add connection tests --- web/src/js/__tests__/ducks/connectionSpec.js | 41 ++++++++++++++++++++++ .../js/components/Header/ConnectionIndicator.jsx | 11 +++--- web/src/js/components/common/DocsLink.jsx | 2 +- 3 files changed, 48 insertions(+), 6 deletions(-) create mode 100644 web/src/js/__tests__/ducks/connectionSpec.js (limited to 'web/src/js') 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/components/Header/ConnectionIndicator.jsx b/web/src/js/components/Header/ConnectionIndicator.jsx index e8feb20e..1ee42e25 100644 --- a/web/src/js/components/Header/ConnectionIndicator.jsx +++ b/web/src/js/components/Header/ConnectionIndicator.jsx @@ -1,7 +1,7 @@ -import React, { PropTypes } from "react" +import React from "react" +import PropTypes from "prop-types" import { connect } from "react-redux" -import classnames from "classnames" -import {ConnectionState} from "../../ducks/connection" +import { ConnectionState } from "../../ducks/connection" ConnectionIndicator.propTypes = { @@ -10,7 +10,7 @@ ConnectionIndicator.propTypes = { } function ConnectionIndicator({ state, message }) { - switch(state){ + switch (state) { case ConnectionState.INIT: return connecting…; case ConnectionState.FETCHING: @@ -18,7 +18,8 @@ function ConnectionIndicator({ state, message }) { case ConnectionState.ESTABLISHED: return connected; case ConnectionState.ERROR: - return connection lost; + return connection lost; case ConnectionState.OFFLINE: return offline; } 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, -- cgit v1.2.3