Add connection health indicator

app/src/components/ConnectionHealthIndicator.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react'
+import DeviceHubOutlined from '@material-ui/icons/DeviceHubOutlined'
+import { AppState } from '../reducers'
+import { connect } from 'react-redux'
+import { ConnectionHealth } from '../reducers/Connection'
+import { green, orange, red } from '@material-ui/core/colors'
+import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
+import { Tooltip } from '@material-ui/core';
+
+const styles: StyleRulesCallback = theme => ({
+  offline: {
+    color: red[700],
+  },
+  online: {
+    color: green[500],
+  },
+  connecting: {
+    color: orange[600],
+  },
+})
+
+interface Props {
+  classes: any
+  connected: boolean
+  health?: ConnectionHealth
+}
+
+class ConnectionHealthIndicator extends React.Component<Props, {}> {
+  constructor(props: any) {
+    super(props)
+  }
+
+  public render() {
+    const { classes, health, connected } = this.props
+    if (!health || !connected) {
+      return null
+    }
+
+    return (
+      <Tooltip title={`Connection health "${health}"`}>
+        <DeviceHubOutlined className={classes[health]} />
+      </Tooltip>
+    )
+  }
+}
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    health: state.connection.health,
+    connected: state.connection.connected || state.connection.connecting,
+  }
+}
+
+export default connect(mapStateToProps)(withStyles(styles)(ConnectionHealthIndicator))

app/src/components/ConnectionSetup/ConnectionSettings.tsx

@@ -14,7 +14,6 @@ import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
 
 import {
   Button,
-  CircularProgress,
   FormControl,
   FormControlLabel,
   Grid,
@@ -26,6 +25,7 @@ import {
   Switch,
   TextField,
 } from '@material-ui/core'
+import ConnectionHealthIndicator from '../ConnectionHealthIndicator'
 
 interface Props {
   connection: ConnectionOptions
@@ -284,7 +284,7 @@ class ConnectionSettings extends React.Component<Props, State> {
     if (this.props.connecting) {
       return (
         <Button variant="contained" color="primary" className={classes.button} onClick={actions.disconnect}>
-          <CircularProgress size={22} style={{ marginRight: '10px' }} color="secondary" /> Abort
+          <ConnectionHealthIndicator />&nbsp;&nbsp;Abort
         </Button>
       )
     }

app/src/components/TitleBar.tsx

@@ -17,6 +17,7 @@ import { connect } from 'react-redux'
 import { connectionActions, settingsActions } from '../actions'
 import { fade } from '@material-ui/core/styles/colorManipulator'
 import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
+import ConnectionHealthIndicator from './ConnectionHealthIndicator';
 
 const styles: StyleRulesCallback = theme => ({
   title: {
@@ -99,6 +100,7 @@ class TitleBar extends React.Component<Props, {}> {
           <Button style={{ margin: 'auto 8px auto auto' }} onClick={actions.connection.disconnect}>
             Disconnect <CloudOff style={{ marginRight: '8px', paddingLeft: '8px' }}/>
           </Button>
+          <ConnectionHealthIndicator />
         </Toolbar>
       </AppBar>
     )