Add broker statistics

app/src/components/BrokerStatistics.tsx

@@ -0,0 +1,131 @@
+import * as React from 'react'
+import * as q from '../../../backend/src/Model'
+
+import { AppState } from '../reducers'
+import { Typography } from '@material-ui/core'
+import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
+
+import { connect } from 'react-redux'
+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: 'rebeccapurple',
+    marginBottom: 0,
+    marginTop: 'auto',
+    padding: '8px',
+  },
+})
+
+interface Props {
+  classes: any
+  tree?: q.Tree
+}
+
+class BrokerStatistics extends React.Component<Props, {}> {
+  constructor(props: any) {
+    super(props)
+    this.state = {}
+  }
+
+  public render() {
+    const { tree, classes } = this.props
+    if (!tree) {
+      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, 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, stat: Stats) {
+    const node = tree.findNode(stat.topic)
+    if (!node) {
+      return null
+    }
+
+    let value = node.message && node.message.value
+    value = !isNaN(value) ? abbreviate(value) : value
+
+    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))

app/src/components/Settings.tsx

@@ -16,8 +16,9 @@ import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
 import ChevronRight from '@material-ui/icons/ChevronRight'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { settingsActions } from '../actions'
+import { settingsActions, treeActions } from '../actions'
 import { TopicOrder } from '../reducers/Settings'
+import BrokerStatistics from './BrokerStatistics'
 
 const styles: StyleRulesCallback = theme => ({
   drawer: {
@@ -39,12 +40,12 @@ const styles: StyleRulesCallback = theme => ({
 })
 
 interface Props {
-  actions: typeof settingsActions
   autoExpandLimit: number
   visible: boolean
   store?: any
-  classes: any
   topicOrder: TopicOrder
+  classes: any
+  actions: typeof settingsActions
 }
 
 class Settings extends React.Component<Props, {}> {
@@ -79,6 +80,7 @@ class Settings extends React.Component<Props, {}> {
           {this.renderAutoExpand()}
           {this.renderNodeOrder()}
         </div>
+        <BrokerStatistics />
       </Drawer>
     )
   }
@@ -115,8 +117,8 @@ class Settings extends React.Component<Props, {}> {
 
     return (
       <div style={{ padding: '8px', display: 'flex' }}>
-      <InputLabel htmlFor="auto-expand" style={{ flex: '1', marginTop: '8px' }}>Topic order</InputLabel>
-      <Select
+        <InputLabel htmlFor="auto-expand" style={{ flex: '1', marginTop: '8px' }}>Topic order</InputLabel>
+        <Select
           value={topicOrder}
           onChange={this.onChangeSorting}
           input={<Input name="node-order" id="node-order-label-placeholder" />}
@@ -124,12 +126,12 @@ class Settings extends React.Component<Props, {}> {
           name="node-order"
           className={classes.input}
           style={{ flex: '1' }}
-      >
-        <MenuItem value={TopicOrder.none}><em>default</em></MenuItem>
-        <MenuItem value={TopicOrder.abc}>a-z</MenuItem>
-        <MenuItem value={TopicOrder.messages}>{TopicOrder.messages}</MenuItem>
-        <MenuItem value={TopicOrder.topics}>{TopicOrder.topics}</MenuItem>
-      </Select>
+        >
+          <MenuItem value={TopicOrder.none}><em>default</em></MenuItem>
+          <MenuItem value={TopicOrder.abc}>a-z</MenuItem>
+          <MenuItem value={TopicOrder.messages}>{TopicOrder.messages}</MenuItem>
+          <MenuItem value={TopicOrder.topics}>{TopicOrder.topics}</MenuItem>
+        </Select>
     </div>)
   }
 

app/src/components/TitleBar.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import * as q from '../../../backend/src/Model'
 
 import { AppBar, Button, IconButton, InputBase, Toolbar, Typography } from '@material-ui/core'
 import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'

app/src/components/Tree/TreeNodeTitle.tsx

@@ -56,7 +56,6 @@ class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
 
   private renderValue() {
     const style: React.CSSProperties = {
-      maxWidth: '15em',
       whiteSpace: 'nowrap',
       overflow: 'hidden',
       textOverflow: 'ellipsis',