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))