diff --git a/beszel/site/src/components/routes/system.tsx b/beszel/site/src/components/routes/system.tsx index 8e35b7b..e8eb6dd 100644 --- a/beszel/site/src/components/routes/system.tsx +++ b/beszel/site/src/components/routes/system.tsx @@ -25,6 +25,8 @@ const ContainerNetChart = lazy(() => import('../charts/container-net-chart')) const SwapChart = lazy(() => import('../charts/swap-chart')) const TemperatureChart = lazy(() => import('../charts/temperature-chart')) +const cache = new Map() + export default function SystemDetail({ name }: { name: string }) { const systems = useStore($systems) const chartTime = useStore($chartTime) @@ -95,10 +97,12 @@ export default function SystemDetail({ name }: { name: string }) { }, [system]) async function getStats(collection: string): Promise { + const lastCached = cache.get(`${system.id}_${chartTime}_${collection}`)?.at(-1) + ?.created as number return await pb.collection(collection).getFullList({ filter: pb.filter('system={:id} && created > {:created} && type={:type}', { id: system.id, - created: getPbTimestamp(chartTime), + created: getPbTimestamp(chartTime, lastCached ? new Date(lastCached + 1000) : undefined), type: chartTimeData[chartTime].type, }), fields: 'created,stats', @@ -139,16 +143,34 @@ export default function SystemDetail({ name }: { name: string }) { getStats('system_stats'), getStats('container_stats'), ]).then(([systemStats, containerStats]) => { - const expectedInterval = chartTimeData[chartTime].expectedInterval - if (systemStats.status === 'fulfilled') { - setSystemStats(addEmptyValues(systemStats.value, expectedInterval)) + const { expectedInterval } = chartTimeData[chartTime] + // make new system stats + const ss_cache_key = `${system.id}_${chartTime}_system_stats` + let systemData = (cache.get(ss_cache_key) || []) as SystemStatsRecord[] + if (systemStats.status === 'fulfilled' && systemStats.value.length) { + systemData = systemData.concat(addEmptyValues(systemStats.value, expectedInterval)) + if (systemData.length > 120) { + systemData = systemData.slice(-100) + } + cache.set(ss_cache_key, systemData) } + setSystemStats(systemData) + // make new container stats + const cs_cache_key = `${system.id}_${chartTime}_container_stats` + let containerData = (cache.get(cs_cache_key) || []) as ContainerStatsRecord[] if (containerStats.status === 'fulfilled' && containerStats.value.length) { + containerData = containerData.concat(addEmptyValues(containerStats.value, expectedInterval)) + if (containerData.length > 120) { + containerData = containerData.slice(-100) + } + cache.set(cs_cache_key, containerData) + } + if (containerData.length) { !containerFilterBar && setContainerFilterBar() - makeContainerData(addEmptyValues(containerStats.value, expectedInterval)) - } else { + } else if (containerFilterBar) { setContainerFilterBar(null) } + makeContainerData(containerData) }) }, [system, chartTime]) diff --git a/beszel/site/src/lib/utils.ts b/beszel/site/src/lib/utils.ts index 92edb27..5015e71 100644 --- a/beszel/site/src/lib/utils.ts +++ b/beszel/site/src/lib/utils.ts @@ -136,8 +136,8 @@ export function updateRecordList( $store.set(newRecords) } -export function getPbTimestamp(timeString: ChartTimes) { - const d = chartTimeData[timeString].getOffset(new Date()) +export function getPbTimestamp(timeString: ChartTimes, d?: Date) { + d ||= chartTimeData[timeString].getOffset(new Date()) const year = d.getUTCFullYear() const month = String(d.getUTCMonth() + 1).padStart(2, '0') const day = String(d.getUTCDate()).padStart(2, '0')