Fix broker statistic updates

app/src/components/SettingsDrawer/BrokerStatistics.tsx

@@ -7,6 +7,7 @@ import { Theme, withStyles } from '@material-ui/core/styles'
 import { TopicViewModel } from '../../model/TopicViewModel'
 import { Typography } from '@material-ui/core'
 import { usePollingToFetchTreeNode } from '../helper/usePollingToFetchTreeNode'
+import { useUpdateComponentWhenNodeUpdates } from '../helper/useUpdateComponentWhenNodeUpdates'
 const abbreviate = require('number-abbreviate')
 
 interface Stats {
@@ -32,6 +33,7 @@ interface Props {
 function BrokerStatistics(props: Props) {
   const { tree, classes } = props
   const sysTopic = usePollingToFetchTreeNode(props.tree, '$SYS')
+  useUpdateComponentWhenNodeUpdates(sysTopic)
 
   return useMemo(() => {
     if (!Boolean(sysTopic)) {

app/src/components/helper/useUpdateComponentWhenNodeUpdates.tsx

@@ -0,0 +1,17 @@
+import * as q from '../../../../backend/src/Model'
+import { useEffect, useState } from 'react'
+
+export function useUpdateComponentWhenNodeUpdates(node?: q.TreeNode<any>): number {
+  const [lastUpdate, setLastUpdate] = useState(0)
+  useEffect(() => {
+    if (!node) {
+      return
+    }
+    const updateComponent = () => setLastUpdate(Date.now())
+    node.onMerge.subscribe(updateComponent)
+    return function cleanup() {
+      node.onMerge.unsubscribe(updateComponent)
+    }
+  }, [node])
+  return lastUpdate
+}