134 lines
3.5 KiB
TypeScript
134 lines
3.5 KiB
TypeScript
import * as q from '../../../backend/src/Model'
|
|
import * as React from 'react'
|
|
import { AppState } from '../reducers'
|
|
import { connect } from 'react-redux'
|
|
import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
|
|
import { TopicViewModel } from '../TopicViewModel'
|
|
import { Typography } from '@material-ui/core'
|
|
import { Base64Message } from '../../../backend/src/Model/Base64Message';
|
|
import lime from '@material-ui/core/colors/teal'
|
|
|
|
const abbreviate = require('number-abbreviate')
|
|
|
|
interface Stats {
|
|
topic: string
|
|
title: string
|
|
}
|
|
|
|
const styles: StyleRulesCallback = theme => ({
|
|
flex: {
|
|
display: 'flex',
|
|
width: '100%',
|
|
},
|
|
container: {
|
|
width: '100%',
|
|
height: '224px',
|
|
backgroundColor: theme.palette.type === 'dark' ? 'rebeccapurple' : '#ebebeb',
|
|
marginBottom: 0,
|
|
padding: '8px',
|
|
},
|
|
})
|
|
|
|
interface Props {
|
|
classes: any
|
|
tree?: q.Tree<TopicViewModel>
|
|
}
|
|
|
|
class BrokerStatistics extends React.Component<Props, {}> {
|
|
constructor(props: any) {
|
|
super(props)
|
|
this.state = {}
|
|
}
|
|
|
|
public render() {
|
|
const { tree, classes } = this.props
|
|
if (!tree || !tree.findNode('$SYS/broker/clients/total')) {
|
|
return null
|
|
}
|
|
|
|
const stats: any = {
|
|
broker: {
|
|
topic: '$SYS/broker/version',
|
|
title: 'Broker',
|
|
},
|
|
clients: {
|
|
topic: '$SYS/broker/clients/total',
|
|
title: 'Clients',
|
|
},
|
|
subscriptions: {
|
|
topic: '$SYS/broker/subscriptions/count',
|
|
title: 'Subscriptions',
|
|
},
|
|
received: {
|
|
topic: '$SYS/broker/messages/received',
|
|
title: 'Received',
|
|
},
|
|
sent: {
|
|
topic: '$SYS/broker/messages/sent',
|
|
title: 'Sent',
|
|
},
|
|
received5m: {
|
|
topic: '$SYS/broker/load/messages/received/5min',
|
|
title: 'Received last 5min',
|
|
},
|
|
sent5m: {
|
|
topic: '$SYS/broker/load/messages/sent/5min',
|
|
title: 'Sent 5m',
|
|
},
|
|
heap: {
|
|
topic: '$SYS/broker/heap/current',
|
|
title: 'Memory',
|
|
},
|
|
heapMax: {
|
|
topic: '$SYS/broker/heap/maximum',
|
|
title: 'Memory (max)',
|
|
},
|
|
}
|
|
|
|
return (
|
|
<div className={classes.container}>
|
|
{this.renderStat(tree, stats.broker)}
|
|
{this.renderPair(tree, stats.sent, stats.received)}
|
|
{this.renderPair(tree, stats.clients, stats.subscriptions)}
|
|
{this.renderPair(tree, stats.sent5m, stats.received5m)}
|
|
{this.renderPair(tree, stats.heap, stats.heapMax)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
private renderPair(tree: q.Tree<TopicViewModel>, a: Stats, b: Stats) {
|
|
return (
|
|
<div className={this.props.classes.flex}>
|
|
<div style={{ flex: 1 }}>{this.renderStat(tree, a)}</div>
|
|
<div style={{ flex: 1 }}>{this.renderStat(tree, b)}</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
public renderStat(tree: q.Tree<TopicViewModel>, stat: Stats) {
|
|
const node = tree.findNode(stat.topic)
|
|
if (!node || !node.message) {
|
|
return null
|
|
}
|
|
|
|
const str = node.message.value ? Base64Message.toUnicodeString(node.message.value) : ''
|
|
let value = (node.message && node.message.value) ? parseFloat(str) : NaN
|
|
value = !isNaN(value) ? abbreviate(value) : str
|
|
|
|
return (
|
|
<div key={stat.title}>
|
|
<Typography><b>{stat.title}</b></Typography>
|
|
<Typography style={{ paddingLeft: '8px' }}><i>{value}</i></Typography>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state: AppState) => {
|
|
return {
|
|
tree: state.connection.tree,
|
|
}
|
|
}
|
|
|
|
export default withStyles(styles)(connect(mapStateToProps)(BrokerStatistics))
|