From 55863f849c976b3180b079bb0052ea34ee275eed Mon Sep 17 00:00:00 2001 From: Henry Dollman Date: Wed, 21 Aug 2024 12:50:12 -0400 Subject: [PATCH] get rid of updatedSystem store --- beszel/site/src/components/routes/home.tsx | 20 +++++- beszel/site/src/components/routes/system.tsx | 67 +++++++++++--------- beszel/site/src/lib/stores.ts | 3 - beszel/site/src/main.tsx | 41 ++---------- 4 files changed, 60 insertions(+), 71 deletions(-) diff --git a/beszel/site/src/components/routes/home.tsx b/beszel/site/src/components/routes/home.tsx index 60df5e7..d08bd0b 100644 --- a/beszel/site/src/components/routes/home.tsx +++ b/beszel/site/src/components/routes/home.tsx @@ -1,9 +1,11 @@ import { Suspense, lazy, useEffect } from 'react' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card' -import { $hubVersion } from '@/lib/stores' +import { $alerts, $hubVersion, $systems, pb } from '@/lib/stores' import { useStore } from '@nanostores/react' import { GithubIcon } from 'lucide-react' import { Separator } from '../ui/separator' +import { updateRecordList } from '@/lib/utils' +import { AlertRecord, SystemRecord } from '@/types' const SystemsTable = lazy(() => import('../systems-table/systems-table')) @@ -12,6 +14,18 @@ export default function () { useEffect(() => { document.title = 'Dashboard / Beszel' + + // subscribe to real time updates for systems / alerts + pb.collection('systems').subscribe('*', (e) => { + updateRecordList(e, $systems) + }) + pb.collection('alerts').subscribe('*', (e) => { + updateRecordList(e, $alerts) + }) + return () => { + pb.collection('systems').unsubscribe('*') + pb.collection('alerts').unsubscribe('*') + } }, []) return ( @@ -34,7 +48,7 @@ export default function () { {hubVersion && ( -
+
GitHub - + import('../charts/bandwidth-chart')) const ContainerNetChart = lazy(() => import('../charts/container-net-chart')) const SwapChart = lazy(() => import('../charts/swap-chart')) -export default function ServerDetail({ name }: { name: string }) { +export default function SystemDetail({ name }: { name: string }) { const systems = useStore($systems) - const updatedSystem = useStore($updatedSystem) const chartTime = useStore($chartTime) const [ticks, setTicks] = useState([] as number[]) - const [server, setServer] = useState({} as SystemRecord) + const [system, setSystem] = useState({} as SystemRecord) const [systemStats, setSystemStats] = useState([] as SystemStatsRecord[]) const [hasDockerStats, setHasDocker] = useState(false) const [dockerCpuChartData, setDockerCpuChartData] = useState[]>( @@ -58,26 +57,32 @@ export default function ServerDetail({ name }: { name: string }) { useEffect(resetCharts, [chartTime]) useEffect(() => { - if (server.id && server.name === name) { + if (system.id && system.name === name) { return } - const matchingServer = systems.find((s) => s.name === name) as SystemRecord - if (matchingServer) { - setServer(matchingServer) + const matchingSystem = systems.find((s) => s.name === name) as SystemRecord + if (matchingSystem) { + setSystem(matchingSystem) } - }, [name, server, systems]) + }, [name, system, systems]) - // update server when new data is available + // update system when new data is available useEffect(() => { - if (updatedSystem.id === server.id) { - setServer(updatedSystem) + if (!system.id) { + return } - }, [updatedSystem]) + pb.collection('systems').subscribe(system.id, (e) => { + setSystem(e.record) + }) + return () => { + pb.collection('systems').unsubscribe(system.id) + } + }, [system]) async function getStats(collection: string): Promise { return await pb.collection(collection).getFullList({ filter: pb.filter('system={:id} && created > {:created} && type={:type}', { - id: server.id, + id: system.id, created: getPbTimestamp(chartTime), type: chartTimeData[chartTime].type, }), @@ -112,7 +117,7 @@ export default function ServerDetail({ name }: { name: string }) { // get stats useEffect(() => { - if (!server.id || !chartTime) { + if (!system.id || !chartTime) { return } Promise.allSettled([ @@ -128,7 +133,7 @@ export default function ServerDetail({ name }: { name: string }) { setSystemStats(addEmptyValues(systemStats.value, expectedInterval)) } }) - }, [server, chartTime]) + }, [system, chartTime]) useEffect(() => { if (!systemStats.length) { @@ -173,14 +178,14 @@ export default function ServerDetail({ name }: { name: string }) { }, []) const uptime = useMemo(() => { - let uptime = server.info?.u || 0 + let uptime = system.info?.u || 0 if (uptime < 172800) { return `${Math.trunc(uptime / 3600)} hours` } - return `${Math.trunc(server.info?.u / 86400)} days` - }, [server.info?.u]) + return `${Math.trunc(system.info?.u / 86400)} days` + }, [system.info?.u]) - if (!server.id) { + if (!system.id) { return null } @@ -188,11 +193,11 @@ export default function ServerDetail({ name }: { name: string }) {
-

{server.name}

+

{system.name}

- {server.status === 'up' && ( + {system.status === 'up' && ( - {server.status} + {system.status}
- {server.host} + {system.host}
- {server.info?.u && ( + {system.info?.u && ( @@ -226,12 +231,12 @@ export default function ServerDetail({ name }: { name: string }) { )} - {server.info?.m && ( + {system.info?.m && ( <>
- {server.info.m} ({server.info.c}c / {server.info.t}t) + {system.info.m} ({system.info.c}c / {system.info.t}t)
)} diff --git a/beszel/site/src/lib/stores.ts b/beszel/site/src/lib/stores.ts index 5dbdd79..a72b469 100644 --- a/beszel/site/src/lib/stores.ts +++ b/beszel/site/src/lib/stores.ts @@ -11,9 +11,6 @@ export const $authenticated = atom(pb.authStore.isValid) /** List of system records */ export const $systems = atom([] as SystemRecord[]) -/** Last updated system record (realtime) */ -export const $updatedSystem = atom({} as SystemRecord) - /** List of alert records */ export const $alerts = atom([] as AlertRecord[]) diff --git a/beszel/site/src/main.tsx b/beszel/site/src/main.tsx index d702962..c316c1d 100644 --- a/beszel/site/src/main.tsx +++ b/beszel/site/src/main.tsx @@ -3,24 +3,9 @@ import React, { Suspense, lazy, useEffect } from 'react' import ReactDOM from 'react-dom/client' import Home from './components/routes/home.tsx' import { ThemeProvider } from './components/theme-provider.tsx' -import { - $alerts, - $authenticated, - $updatedSystem, - $systems, - pb, - $publicKey, - $hubVersion, -} from './lib/stores.ts' +import { $authenticated, $systems, pb, $publicKey, $hubVersion } from './lib/stores.ts' import { ModeToggle } from './components/mode-toggle.tsx' -import { - cn, - isAdmin, - updateAlerts, - updateFavicon, - updateRecordList, - updateSystemList, -} from './lib/utils.ts' +import { cn, isAdmin, updateAlerts, updateFavicon, updateSystemList } from './lib/utils.ts' import { buttonVariants } from './components/ui/button.tsx' import { DatabaseBackupIcon, @@ -45,7 +30,7 @@ import { } from './components/ui/dropdown-menu.tsx' import { AlertRecord, SystemRecord } from './types' import { $router, Link, navigate } from './components/router.tsx' -import ServerDetail from './components/routes/system.tsx' +import SystemDetail from './components/routes/system.tsx' // const ServerDetail = lazy(() => import('./components/routes/system.tsx')) const CommandPalette = lazy(() => import('./components/command-palette.tsx')) @@ -62,25 +47,13 @@ const App = () => { $authenticated.set(pb.authStore.isValid) }) // get version / public key - pb.send('/api/beszel/getkey', {}).then(({ key, v }) => { - $publicKey.set(key) - $hubVersion.set(v) + pb.send('/api/beszel/getkey', {}).then((data) => { + $publicKey.set(data.key) + $hubVersion.set(data.v) }) // get servers / alerts updateSystemList() updateAlerts() - // subscribe to real time updates for systems / alerts - pb.collection('systems').subscribe('*', (e) => { - updateRecordList(e, $systems) - $updatedSystem.set(e.record) - }) - pb.collection('alerts').subscribe('*', (e) => { - updateRecordList(e, $alerts) - }) - return () => { - pb.collection('systems').unsubscribe('*') - pb.collection('alerts').unsubscribe('*') - } }, []) // update favicon @@ -110,7 +83,7 @@ const App = () => { } else if (page.path === '/') { return } else if (page.route === 'server') { - return + return } }