feat: network monitoring from agents (#2266, #1911)

Co-authored-by: Sven van Ginkel <svenvanginkel@icloud.com>
Co-authored-by: xiaomiku01 <xiaomiku01@outlook.com>

internal/site/src/components/routes/monitors.tsx

@@ -0,0 +1,33 @@
+import { useLingui } from "@lingui/react/macro"
+import { memo, useEffect } from "react"
+import NetworkMonitorsTableNew from "@/components/network-monitors-table/network-monitors-table"
+import { ActiveAlerts } from "@/components/active-alerts"
+import { FooterRepoLink } from "@/components/footer-repo-link"
+import { useNetworkMonitors } from "@/lib/use-network-monitors"
+import { $allSystemsById } from "@/lib/stores"
+import { supportsNetworkMonitors } from "@/lib/utils"
+import { useStore } from "@nanostores/react"
+
+export default memo(() => {
+	const { t } = useLingui()
+	const { monitors, isLoading } = useNetworkMonitors({})
+	const systems = useStore($allSystemsById)
+	const visibleMonitors = monitors.filter((monitor) => {
+		const system = systems[monitor.system]
+		return !system || supportsNetworkMonitors(system)
+	})
+
+	useEffect(() => {
+		document.title = `${t`Network Monitors`} / Beszel`
+	}, [t])
+
+	return (
+		<>
+			<div className="grid gap-4">
+				<ActiveAlerts />
+				<NetworkMonitorsTableNew monitors={visibleMonitors} isLoading={isLoading} />
+			</div>
+			<FooterRepoLink />
+		</>
+	)
+})

internal/site/src/components/routes/settings/alerts-history-data-table.tsx

@@ -78,7 +78,7 @@ export default function AlertsHistoryDataTable() {
 		let unsubscribe: (() => void) | undefined
 		const pbOptions = {
 			expand: "system",
-			fields: "id,name,value,state,created,resolved,expand.system.name",
+			fields: "id,name,monitor_name,value,state,created,resolved,expand.system.name",
 		}
 		// Initial load
 		pb.collection<AlertsHistoryRecord>("alerts_history")
@@ -199,7 +199,7 @@ export default function AlertsHistoryDataTable() {
 		if (!selectedRows.length) return
 		const cells: Record<string, (record: AlertsHistoryRecord) => string> = {
 			system: (record) => record.expand?.system?.name || record.system,
-			name: (record) => alertInfo[record.name]?.name() || record.name,
+			name: (record) => [alertInfo[record.name]?.name() || record.name, record.monitor_name].filter(Boolean).join(": "),
 			value: (record) => record.value + (alertInfo[record.name]?.unit ?? ""),
 			state: (record) => (record.resolved ? t`Resolved` : t`Active`),
 			created: (record) => formatShortDate(record.created),

internal/site/src/components/routes/system.tsx

@@ -1,6 +1,6 @@
 import { memo, useState } from "react"
 import { Trans } from "@lingui/react/macro"
-import { compareSemVer, parseSemVer } from "@/lib/utils"
+import { compareSemVer, parseSemVer, supportsNetworkMonitors } from "@/lib/utils"
 import type { GPUData } from "@/types"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import InfoBar from "./system/info-bar"
@@ -12,9 +12,15 @@ import { ZfsCharts } from "./system/charts/storage-pool-charts"
 import { BandwidthChart, ContainerNetworkChart } from "./system/charts/network-charts"
 import { TemperatureChart, FanChart, BatteryChart } from "./system/charts/sensor-charts"
 import { GpuPowerChart, GpuCharts } from "./system/charts/gpu-charts"
-import { LazyContainersTable, LazySmartTable, LazySystemdTable, LazyZfsTable } from "./system/lazy-tables"
+import {
+	LazyContainersTable,
+	LazyNetworkMonitorsTable,
+	LazySmartTable,
+	LazySystemdTable,
+	LazyZfsTable,
+} from "./system/lazy-tables"
 import { LoadAverageChart } from "./system/charts/load-average-chart"
-import { ContainerIcon, CpuIcon, HardDriveIcon, TerminalSquareIcon } from "lucide-react"
+import { ContainerIcon, CpuIcon, HardDriveIcon, NetworkIcon, TerminalSquareIcon } from "lucide-react"
 import { GpuIcon } from "../ui/icons"
 import SystemdTable from "../systemd-table/systemd-table"
 import ContainersTable from "../containers-table/containers-table"
@@ -65,9 +71,10 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 	const hasSystemd = system.info.sv
 	const hasGpu = hasGpuData || hasGpuPowerData
 	const hasZfs = Object.keys(systemStats.at(-1)?.stats?.z ?? {}).length > 0
+	const hasNetworkMonitors = supportsNetworkMonitors(system)
 
 	// keep tabsRef in sync for keyboard navigation
-	const tabs = ["core", "disk"]
+	const tabs = ["core", "network", "disk"]
 	if (hasGpu) tabs.push("gpu")
 	if (hasContainers) tabs.push("containers")
 	if (hasSystemd) tabs.push("services")
@@ -153,6 +160,8 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 				{hasContainersTable && <LazyContainersTable systemId={system.id} />}
 
 				{hasSystemd && <LazySystemdTable systemId={system.id} />}
+
+				{hasNetworkMonitors && <LazyNetworkMonitorsTable systemId={system.id} />}
 			</>
 		)
 	}
@@ -165,6 +174,10 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 						<CpuIcon className="size-3.5" />
 						<Trans context="Core system metrics">Core</Trans>
 					</TabsTrigger>
+					<TabsTrigger value="network" className="w-full flex items-center gap-1.5">
+						<NetworkIcon className="size-3.5" />
+						<Trans>Network</Trans>
+					</TabsTrigger>
 					<TabsTrigger value="disk" className="w-full flex items-center gap-1.5">
 						<HardDriveIcon className="size-3.5" />
 						<Trans>Disk</Trans>
@@ -192,9 +205,9 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 				<TabsContent value="core" forceMount className={activeTab === "core" ? "contents" : "hidden"}>
 					<div className="grid xl:grid-cols-2 gap-4">
 						<CpuChart {...coreProps} />
-						<MemoryChart {...coreProps} />
 						<LoadAverageChart chartData={chartData} grid={grid} dataEmpty={dataEmpty} />
-						<BandwidthChart {...coreProps} systemStats={systemStats} />
+						<MemoryChart {...coreProps} />
+						<SwapChart chartData={chartData} grid={grid} dataEmpty={dataEmpty} systemStats={systemStats} />
 						<TemperatureChart {...coreProps} setPageBottomExtraMargin={setPageBottomExtraMargin} />
 						<FanChart {...coreProps} />
 						<BatteryChart system={system} {...coreProps} />
@@ -203,6 +216,17 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 					</div>
 				</TabsContent>
 
+				<TabsContent value="network" forceMount className={activeTab === "network" ? "contents" : "hidden"}>
+					{mountedTabs.has("network") && (
+						<>
+							<div className="grid xl:grid-cols-2 gap-4">
+								<BandwidthChart {...coreProps} systemStats={systemStats} />
+							</div>
+							{hasNetworkMonitors && <LazyNetworkMonitorsTable systemId={system.id} />}
+						</>
+					)}
+				</TabsContent>
+
 				<TabsContent value="disk" forceMount className={activeTab === "disk" ? "contents" : "hidden"}>
 					{mountedTabs.has("disk") && (
 						<>

internal/site/src/components/routes/system/chart-card.tsx

@@ -44,6 +44,7 @@ export function FilterBar({ store = $containerFilter }: { store?: typeof $contai
 		<>
 			<Input
 				placeholder={t`Filter...`}
+				title={t`Use commas to match any of multiple terms, e.g. "system1, system2"`}
 				className="ps-4 pe-8 w-full sm:w-44"
 				onChange={handleChange}
 				value={inputValue}

internal/site/src/components/routes/system/chart-data.ts

@@ -1,7 +1,13 @@
-import { timeTicks } from "d3-time"
 import { getPbTimestamp, pb } from "@/lib/api"
 import { chartTimeData } from "@/lib/utils"
-import type { ChartData, ChartTimes, ContainerStatsRecord, SystemStatsRecord } from "@/types"
+import type {
+	ChartData,
+	ChartDataContainer,
+	ChartTimes,
+	ContainerStatsRecord,
+	NetworkMonitorStatsRecord,
+	SystemStatsRecord,
+} from "@/types"
 
 type ChartTimeData = {
 	time: number
@@ -17,31 +23,10 @@ export const cache = new Map<
 	ChartTimeData | SystemStatsRecord[] | ContainerStatsRecord[] | ChartData["containerData"]
 >()
 
-// create ticks and domain for charts
-export function getTimeData(chartTime: ChartTimes, lastCreated: number) {
-	const cached = cache.get("td") as ChartTimeData | undefined
-	if (cached && cached.chartTime === chartTime) {
-		if (!lastCreated || cached.time >= lastCreated) {
-			return cached.data
-		}
-	}
-
-	// const buffer = chartTime === "1m" ? 400 : 20_000
-	const now = new Date(Date.now())
-	const startTime = chartTimeData[chartTime].getOffset(now)
-	const ticks = timeTicks(startTime, now, chartTimeData[chartTime].ticks ?? 12).map((date) => date.getTime())
-	const data = {
-		ticks,
-		domain: [chartTimeData[chartTime].getOffset(now).getTime(), now.getTime()],
-	}
-	cache.set("td", { time: now.getTime(), data, chartTime })
-	return data
-}
-
 /** Append new records onto prev with gap detection. Converts string `created` values to ms timestamps in place.
  * Pass `maxLen` to cap the result length in one copy instead of slicing again after the call. */
 export function appendData<T extends { created: string | number | null }>(
-	prev: T[],
+	prev: T[] = [],
 	newRecords: T[],
 	expectedInterval: number,
 	maxLen?: number
@@ -66,17 +51,18 @@ export function appendData<T extends { created: string | number | null }>(
 	return result
 }
 
-export async function getStats<T extends SystemStatsRecord | ContainerStatsRecord>(
+export async function getStats<T extends SystemStatsRecord | ContainerStatsRecord | NetworkMonitorStatsRecord>(
 	collection: string,
 	systemId: string,
-	chartTime: ChartTimes
+	chartTime: ChartTimes,
+	cachedStats?: { created: string | number | null }[],
+	createdIsNumber?: boolean
 ): Promise<T[]> {
-	const cachedStats = cache.get(`${systemId}_${chartTime}_${collection}`) as T[] | undefined
 	const lastCached = cachedStats?.at(-1)?.created as number
 	return await pb.collection<T>(collection).getFullList({
 		filter: pb.filter("system={:id} && created > {:created} && type={:type}", {
 			id: systemId,
-			created: getPbTimestamp(chartTime, lastCached ? new Date(lastCached + 1000) : undefined),
+			created: getPbTimestamp(chartTime, lastCached ? new Date(lastCached + 1000) : undefined, createdIsNumber),
 			type: chartTimeData[chartTime].type,
 		}),
 		fields: "created,stats",
@@ -84,11 +70,11 @@ export async function getStats<T extends SystemStatsRecord | ContainerStatsRecor
 	})
 }
 
-export function makeContainerData(containers: ContainerStatsRecord[]): ChartData["containerData"] {
-	const result = [] as ChartData["containerData"]
+export function makeContainerData(containers: ContainerStatsRecord[]): ChartDataContainer[] {
+	const result = [] as ChartDataContainer[]
 	for (const { created, stats } of containers) {
 		if (!created) {
-			result.push({ created: null } as ChartData["containerData"][0])
+			result.push({ created: null } as ChartDataContainer)
 			continue
 		}
 		result.push(makeContainerPoint(new Date(created).getTime(), stats))
@@ -97,11 +83,8 @@ export function makeContainerData(containers: ContainerStatsRecord[]): ChartData
 }
 
 /** Transform a single realtime container stats message into a ChartDataContainer point. */
-export function makeContainerPoint(
-	created: number,
-	stats: ContainerStatsRecord["stats"]
-): ChartData["containerData"][0] {
-	const point: ChartData["containerData"][0] = { created } as ChartData["containerData"][0]
+export function makeContainerPoint(created: number, stats: ContainerStatsRecord["stats"]): ChartDataContainer {
+	const point: ChartDataContainer = { created } as ChartDataContainer
 	for (const container of stats) {
 		;(point as Record<string, unknown>)[container.n] = container
 	}

internal/site/src/components/routes/system/charts/monitors-charts.tsx

@@ -0,0 +1,212 @@
+import { getMonitorTarget } from "@/lib/network-monitor-utils"
+import LineChartDefault from "@/components/charts/line-chart"
+import type { DataPoint } from "@/components/charts/line-chart"
+import { decimalString, formatMicroseconds, matchesFilterGroups, parseFilterGroups, toFixedFloat } from "@/lib/utils"
+import { $monitorFilter } from "@/lib/stores"
+import { useLingui } from "@lingui/react/macro"
+import { ChartCard, FilterBar } from "../chart-card"
+import type { ChartData, MonitorStats, NetworkMonitorRecord, NetworkMonitorStatsRecord } from "@/types"
+import { useMemo } from "react"
+import { useStore } from "@nanostores/react"
+
+type MonitorChartProps = {
+	monitorStats: NetworkMonitorStatsRecord[]
+	grid?: boolean
+	monitors: NetworkMonitorRecord[]
+	chartData: ChartData
+	empty: boolean
+	showFilter?: boolean
+	/** Prepended to the chart title, e.g. a target/system name (rendered as "{titlePrefix} — Response"). */
+	titlePrefix?: string
+}
+
+type MonitorChartBaseProps = MonitorChartProps & {
+	metric: keyof MonitorStats
+	title: string
+	description: string
+	tickFormatter: (value: number) => string
+	contentFormatter: ({ value }: { value: number | string }) => string | number
+	domain?: [number | "auto", number | "auto"]
+}
+
+function MonitorChart({
+	monitorStats,
+	grid,
+	monitors,
+	chartData,
+	empty,
+	metric,
+	title,
+	description,
+	tickFormatter,
+	contentFormatter,
+	domain,
+	showFilter = monitors.length > 1,
+}: MonitorChartBaseProps) {
+	const storedFilter = useStore($monitorFilter)
+	const filter = showFilter ? storedFilter : ""
+
+	const { dataPoints, visibleKeys } = useMemo(() => {
+		const sortedMonitors = [...monitors].sort((a, b) => b.resAvg1h - a.resAvg1h)
+		const count = sortedMonitors.length
+		const points: DataPoint<NetworkMonitorStatsRecord>[] = []
+		const visibleIDs: string[] = []
+		const filterGroups = parseFilterGroups(filter)
+		const dot = chartData.chartTime === "1m"
+		for (let i = 0; i < count; i++) {
+			const p = sortedMonitors[i]
+			const label = getMonitorTarget(p)
+			const labelLower = label.toLowerCase()
+			const filtered = filterGroups.length > 0 && !matchesFilterGroups(labelLower, filterGroups)
+			if (filtered) {
+				continue
+			}
+			visibleIDs.push(p.id)
+			points.push({
+				order: i,
+				label,
+				dataKey: (record: NetworkMonitorStatsRecord) => record.stats?.[p.id]?.[metric] ?? null,
+				dot,
+				color: count <= 5 ? i + 1 : `hsl(${(i * 360) / count}, var(--chart-saturation), var(--chart-lightness))`,
+			})
+		}
+		return { dataPoints: points, visibleKeys: visibleIDs }
+	}, [monitors, filter, metric, chartData.chartTime])
+
+	const filteredMonitorStats = useMemo(() => {
+		if (!visibleKeys.length) return monitorStats
+		return monitorStats.filter((record) => visibleKeys.some((id) => record.stats?.[id] != null))
+	}, [monitorStats, visibleKeys])
+
+	const legend = dataPoints.length < 10 && showFilter
+
+	return (
+		<ChartCard
+			legend={legend || !showFilter}
+			cornerEl={showFilter ? <FilterBar store={$monitorFilter} /> : undefined}
+			empty={empty}
+			title={title}
+			description={description}
+			grid={grid}
+		>
+			<LineChartDefault
+				truncate
+				chartData={chartData}
+				customData={filteredMonitorStats}
+				dataPoints={dataPoints}
+				domain={domain ?? ["auto", "auto"]}
+				connectNulls
+				tickFormatter={tickFormatter}
+				contentFormatter={contentFormatter}
+				legend={legend}
+				filter={filter}
+			/>
+		</ChartCard>
+	)
+}
+
+interface AvgMinMaxResponseChartProps {
+	monitorStats: NetworkMonitorStatsRecord[]
+	monitor: NetworkMonitorRecord | null
+	chartData: ChartData
+	empty: boolean
+}
+
+export function AvgMinMaxResponseChart({ monitorStats, monitor, chartData, empty }: AvgMinMaxResponseChartProps) {
+	const { t } = useLingui()
+
+	const { chartTime } = chartData
+	const hasLongInterval = (monitor?.interval ?? 61) > 60
+
+	// only one monitor is relevant for this chart
+	const dataPoints: DataPoint<NetworkMonitorStatsRecord>[] = useMemo(() => {
+		const dataFn = (metric: keyof MonitorStats) => (record: NetworkMonitorStatsRecord) =>
+			record.stats?.[monitor?.id ?? ""]?.[metric] ?? "-"
+		const avgPoint = {
+			label: "Avg",
+			dataKey: dataFn("res_avg"),
+			color: 1,
+			order: 0,
+		}
+		if (chartTime === "1m" || (hasLongInterval && chartTime === "1h")) {
+			// avg, min, max are all the same for 1m interval, so just show avg
+			return [avgPoint]
+		}
+		return [
+			{
+				label: "Max",
+				dataKey: dataFn("res_max"),
+				color: 3,
+				order: 0,
+			},
+			avgPoint,
+			{
+				label: "Min",
+				dataKey: dataFn("res_min"),
+				color: 2,
+				order: 2,
+			},
+		]
+	}, [chartTime, hasLongInterval, monitor?.id])
+
+	const data = useMemo(() => {
+		if (!monitor) return []
+		return monitorStats.filter((record) => record.stats && monitor.id in record.stats)
+	}, [monitor, monitorStats])
+
+	const legend = dataPoints.length > 1
+
+	return (
+		<ChartCard
+			legend={true}
+			empty={empty}
+			title={t`Response`}
+			description={t`Average, minimum, and maximum response time`}
+			grid={false}
+		>
+			<LineChartDefault
+				truncate
+				chartData={chartData}
+				customData={data}
+				dataPoints={dataPoints}
+				domain={["auto", "auto"]}
+				connectNulls
+				legend={legend}
+				tickFormatter={(value) => formatMicroseconds(value, false)}
+				contentFormatter={({ value }) => {
+					if (typeof value !== "number") {
+						return value
+					}
+					return formatMicroseconds(value)
+				}}
+			/>
+		</ChartCard>
+	)
+}
+
+export function LossChart({ monitorStats, grid, monitors, chartData, empty, titlePrefix }: MonitorChartProps) {
+	const { t } = useLingui()
+	const lossTitle = t`Loss`
+	const title = titlePrefix ? `${titlePrefix} — ${lossTitle}` : lossTitle
+
+	return (
+		<MonitorChart
+			monitorStats={monitorStats}
+			grid={grid}
+			monitors={monitors}
+			chartData={chartData}
+			empty={empty}
+			metric="loss"
+			title={title}
+			description={t`Packet loss (%)`}
+			domain={[0, 100]}
+			tickFormatter={(value) => `${toFixedFloat(value, value >= 10 ? 0 : 1)}%`}
+			contentFormatter={({ value }) => {
+				if (typeof value !== "number") {
+					return value
+				}
+				return `${decimalString(value, 2)}%`
+			}}
+		/>
+	)
+}

internal/site/src/components/routes/system/lazy-tables.tsx

@@ -1,6 +1,7 @@
 import { lazy } from "react"
 import { useIntersectionObserver } from "@/lib/use-intersection-observer"
 import { cn } from "@/lib/utils"
+import { useNetworkMonitors } from "@/lib/use-network-monitors"
 
 const ContainersTable = lazy(() => import("../../containers-table/containers-table"))
 
@@ -45,3 +46,19 @@ export function LazySystemdTable({ systemId }: { systemId: string }) {
 		</div>
 	)
 }
+
+const NetworkMonitorsTable = lazy(() => import("../../network-monitors-table/network-monitors-table"))
+
+export function LazyNetworkMonitorsTable({ systemId }: { systemId: string }) {
+	const { isIntersecting, ref } = useIntersectionObserver({ rootMargin: "90px" })
+	return (
+		<div ref={ref} className={cn(isIntersecting && "contents")}>
+			{isIntersecting && <SystemNetworkMonitorsTable systemId={systemId} />}
+		</div>
+	)
+}
+
+function SystemNetworkMonitorsTable({ systemId }: { systemId: string }) {
+	const { monitors, isLoading } = useNetworkMonitors({ systemId })
+	return <NetworkMonitorsTable systemId={systemId} monitors={monitors} isLoading={isLoading} />
+}

internal/site/src/components/routes/system/smart-table.tsx

@@ -43,7 +43,6 @@ import {
 	toFixedFloat,
 	formatTemperature,
 	cn,
-	getVisualStringWidth,
 	secondsToString,
 	hourWithSeconds,
 	formatShortDate,
@@ -117,9 +116,9 @@ function formatDataUnits(units: number): string {
 const SMART_DEVICE_FIELDS = "id,system,name,model,state,capacity,temp,type,hours,cycles,updated"
 
 export const createColumns = (
-	longestName: number,
-	longestModel: number,
-	longestDevice: number
+	longestName: string,
+	longestModel: string,
+	longestDevice: string
 ): ColumnDef<SmartDeviceRecord>[] => [
 	{
 		id: "system",
@@ -134,8 +133,11 @@ export const createColumns = (
 		cell: ({ getValue }) => {
 			const allSystems = useStore($allSystemsById)
 			return (
-				<div className="ms-1.5 max-w-40 block truncate" style={{ width: `${longestName / 1.05}ch` }}>
-					{allSystems[getValue() as string]?.name ?? ""}
+				<div className="ms-1.5 relative w-fit max-w-44">
+					<span className="invisible block whitespace-nowrap" aria-hidden="true">
+						{longestName}
+					</span>
+					<span className="absolute inset-0 truncate">{allSystems[getValue() as string]?.name ?? ""}</span>
 				</div>
 			)
 		},
@@ -145,12 +147,11 @@ export const createColumns = (
 		sortingFn: (a, b) => a.original.name.localeCompare(b.original.name),
 		header: ({ column }) => <HeaderButton column={column} name={t`Device`} Icon={HardDrive} />,
 		cell: ({ getValue }) => (
-			<div
-				className="font-medium max-w-40 truncate ms-1"
-				title={getValue() as string}
-				style={{ width: `${longestDevice / 1.05}ch` }}
-			>
-				{getValue() as string}
+			<div className="font-medium ms-1 relative w-fit max-w-44" title={getValue() as string}>
+				<span className="invisible block whitespace-nowrap" aria-hidden="true">
+					{longestDevice}
+				</span>
+				<span className="absolute inset-0 truncate">{getValue() as string}</span>
 			</div>
 		),
 	},
@@ -161,12 +162,11 @@ export const createColumns = (
 			<HeaderButton column={column} name={t({ message: "Model", comment: "Device model" })} Icon={Box} />
 		),
 		cell: ({ getValue }) => (
-			<div
-				className="max-w-48 truncate ms-1"
-				title={getValue() as string}
-				style={{ width: `${longestModel / 1.05}ch` }}
-			>
-				{getValue() as string}
+			<div className="ms-1 relative w-fit max-w-44" title={getValue() as string}>
+				<span className="invisible block whitespace-nowrap" aria-hidden="true">
+					{longestModel}
+				</span>
+				<span className="absolute inset-0 truncate">{getValue() as string}</span>
 			</div>
 		),
 	},
@@ -320,7 +320,7 @@ export default function DisksTable({ systemId }: { systemId?: string }) {
 
 	// Calculate the right width for the columns based on the longest strings among the displayed devices
 	const { longestName, longestModel, longestDevice } = useMemo(() => {
-		const result = { longestName: 0, longestModel: 0, longestDevice: 0 }
+		const result = { longestName: "", longestModel: "", longestDevice: "" }
 		if (!smartDevices || Object.keys(allSystems).length === 0) {
 			return result
 		}
@@ -329,10 +329,16 @@ export default function DisksTable({ systemId }: { systemId?: string }) {
 			if (!systemId && !seenSystems.has(device.system)) {
 				seenSystems.add(device.system)
 				const name = allSystems[device.system]?.name ?? ""
-				result.longestName = Math.max(result.longestName, getVisualStringWidth(name))
+				if (name.length > result.longestName.length) {
+					result.longestName = name
+				}
+			}
+			if ((device.model ?? "").length > result.longestModel.length) {
+				result.longestModel = device.model ?? ""
+			}
+			if ((device.name ?? "").length > result.longestDevice.length) {
+				result.longestDevice = device.name ?? ""
 			}
-			result.longestModel = Math.max(result.longestModel, getVisualStringWidth(device.model ?? ""))
-			result.longestDevice = Math.max(result.longestDevice, getVisualStringWidth(device.name ?? ""))
 		}
 		return result
 	}, [smartDevices, systemId, allSystems])

internal/site/src/components/routes/system/use-system-data.ts

@@ -26,7 +26,7 @@ import type {
 	SystemStatsRecord,
 } from "@/types"
 import { $router, navigate } from "../../router"
-import { appendData, cache, getStats, getTimeData, makeContainerData, makeContainerPoint } from "./chart-data"
+import { appendData, cache, getStats, makeContainerData, makeContainerPoint } from "./chart-data"
 
 export type SystemData = ReturnType<typeof useSystemData>
 
@@ -185,16 +185,11 @@ export function useSystemData(id: string) {
 	const agentVersion = useMemo(() => parseSemVer(system?.info?.v), [system?.info?.v])
 
 	const chartData: ChartData = useMemo(() => {
-		const lastCreated = Math.max(
-			(systemStats.at(-1)?.created as number) ?? 0,
-			(containerData.at(-1)?.created as number) ?? 0
-		)
 		return {
 			systemStats,
 			containerData,
 			chartTime,
 			orientation: direction === "rtl" ? "right" : "left",
-			...getTimeData(chartTime, lastCreated),
 			agentVersion,
 		}
 	}, [systemStats, containerData, direction])
@@ -234,8 +229,8 @@ export function useSystemData(id: string) {
 		}
 
 		Promise.allSettled([
-			getStats<SystemStatsRecord>("system_stats", systemId, chartTime),
-			getStats<ContainerStatsRecord>("container_stats", systemId, chartTime),
+			getStats<SystemStatsRecord>("system_stats", systemId, chartTime, cachedSystemStats),
+			getStats<ContainerStatsRecord>("container_stats", systemId, chartTime, cachedContainerData),
 		]).then(([systemStats, containerStats]) => {
 			// Ignore responses for a previous system or chart time
 			if (requestId !== statsRequestId.current) {
@@ -327,7 +322,7 @@ export function useSystemData(id: string) {
 	// derived values
 	const isLongerChart = !["1m", "1h"].includes(chartTime)
 	const showMax = maxValues && isLongerChart
-	const dataEmpty = !chartLoading && chartData.systemStats.length === 0
+	const dataEmpty = !chartLoading && chartData.systemStats?.length === 0
 	const lastGpus = systemStats.at(-1)?.stats?.g
 	const isPodman = details?.podman ?? system.info?.p ?? false