55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
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))
|