diff --git a/docs_test/src/dashboard/components/MainGrid.tsx b/docs_test/src/dashboard/components/MainGrid.tsx index eccbaea..e98c298 100644 --- a/docs_test/src/dashboard/components/MainGrid.tsx +++ b/docs_test/src/dashboard/components/MainGrid.tsx @@ -20,6 +20,7 @@ export default function MainGrid() { const [received, setReceived] = useState([]); const [bytesIn, setBytesIn] = useState([]); const [bytesOut, setBytesOut] = useState([]); + const [clientsConnected, setClientsConnected] = useState([]); const [serverStart, setServerStart] = useState(''); const [serverUptime, setServerUptime] = useState(''); @@ -63,6 +64,7 @@ export default function MainGrid() { mqttSubscribe('$SYS/broker/load/bytes/#'); mqttSubscribe('$SYS/broker/uptime/formatted'); mqttSubscribe('$SYS/broker/uptime'); + mqttSubscribe('$SYS/broker/clients/connected'); } }, [isConnected, mqttSubscribe]); @@ -97,6 +99,13 @@ export default function MainGrid() { value: d } setBytesOut(bytesOut => [...bytesOut, newPoint]); + } else if (payload.topic === '$SYS/broker/clients/connected') { + const newPoint: DataPoint = { + timestamp: new Date().toISOString(), + value: d + } + setClientsConnected(clientsConnected => [...clientsConnected, newPoint]); + } else if (payload.topic === '$SYS/broker/uptime/formatted') { const dt = new Date(d + "Z"); setServerStart(dt.toLocaleString()); @@ -237,6 +246,9 @@ export default function MainGrid() { + + +