improve container network stats granularity by using bytes instead of MB

Changes container network statistics to use raw byte values instead of converting to megabytes agent-side, providing more accurate measurements for low-bandwidth containers. Maintains backward compatibility with older agents/hubs through fallback logic.

- Agent now sends Bandwidth field as [sent_bytes, recv_bytes] array
- Deprecated NetworkSent/NetworkRecv fields still populated for compatibility
- Hub and frontend fall back to deprecated fields when Bandwidth is zero
- Record averaging correctly handles both old and new formats
- TODO markers added for cleanup in version 0.19+

internal/site/src/components/charts/container-chart.tsx

@@ -2,7 +2,14 @@
 import { useStore } from "@nanostores/react"
 import { memo, useMemo } from "react"
 import { Area, AreaChart, CartesianGrid, YAxis } from "recharts"
-import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, pinnedAxisDomain, xAxis } from "@/components/ui/chart"
+import {
+	type ChartConfig,
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+	pinnedAxisDomain,
+	xAxis,
+} from "@/components/ui/chart"
 import { ChartType, Unit } from "@/lib/enums"
 import { $containerFilter, $userSettings } from "@/lib/stores"
 import { chartMargin, cn, decimalString, formatBytes, formatShortDate, toFixedFloat } from "@/lib/utils"
@@ -47,27 +54,49 @@ export default memo(function ContainerChart({
 		} else {
 			const chartUnit = isNetChart ? userSettings.unitNet : Unit.Bytes
 			obj.tickFormatter = (val) => {
-				const { value, unit } = formatBytes(val, isNetChart, chartUnit, true)
+				const { value, unit } = formatBytes(val, isNetChart, chartUnit, !isNetChart)
 				return updateYAxisWidth(`${toFixedFloat(value, value >= 10 ? 0 : 1)} ${unit}`)
 			}
 		}
 		// tooltip formatter
 		if (isNetChart) {
+			const getRxTxBytes = (record?: { b?: [number, number]; ns?: number; nr?: number }) => {
+				if (record?.b?.length && record.b.length >= 2) {
+					return [Number(record.b[0]) || 0, Number(record.b[1]) || 0]
+				}
+				return [(record?.ns ?? 0) * 1024 * 1024, (record?.nr ?? 0) * 1024 * 1024]
+			}
+			const formatRxTx = (recv: number, sent: number) => {
+				const { value: receivedValue, unit: receivedUnit } = formatBytes(recv, true, userSettings.unitNet, false)
+				const { value: sentValue, unit: sentUnit } = formatBytes(sent, true, userSettings.unitNet, false)
+				return (
+					<span className="flex">
+						{decimalString(receivedValue)} {receivedUnit}
+						<span className="opacity-70 ms-0.5"> rx </span>
+						<Separator orientation="vertical" className="h-3 mx-1.5 bg-primary/40" />
+						{decimalString(sentValue)} {sentUnit}
+						<span className="opacity-70 ms-0.5"> tx</span>
+					</span>
+				)
+			}
 			obj.toolTipFormatter = (item: any, key: string) => {
 				try {
-					const sent = item?.payload?.[key]?.ns ?? 0
-					const received = item?.payload?.[key]?.nr ?? 0
-					const { value: receivedValue, unit: receivedUnit } = formatBytes(received, true, userSettings.unitNet, true)
-					const { value: sentValue, unit: sentUnit } = formatBytes(sent, true, userSettings.unitNet, true)
-					return (
-						<span className="flex">
-							{decimalString(receivedValue)} {receivedUnit}
-							<span className="opacity-70 ms-0.5"> rx </span>
-							<Separator orientation="vertical" className="h-3 mx-1.5 bg-primary/40" />
-							{decimalString(sentValue)} {sentUnit}
-							<span className="opacity-70 ms-0.5"> tx</span>
-						</span>
-					)
+					if (key === "__total__") {
+						let totalSent = 0
+						let totalRecv = 0
+						const payloadData = item?.payload && typeof item.payload === "object" ? item.payload : {}
+						for (const value of Object.values(payloadData)) {
+							if (!value || typeof value !== "object") {
+								continue
+							}
+							const [sent, recv] = getRxTxBytes(value as { b?: [number, number]; ns?: number; nr?: number })
+							totalSent += sent
+							totalRecv += recv
+						}
+						return formatRxTx(totalRecv, totalSent)
+					}
+					const [sent, recv] = getRxTxBytes(item?.payload?.[key])
+					return formatRxTx(recv, sent)
 				} catch (e) {
 					return null
 				}
@@ -82,7 +111,15 @@ export default memo(function ContainerChart({
 		}
 		// data function
 		if (isNetChart) {
-			obj.dataFunction = (key: string, data: any) => (data[key] ? data[key].nr + data[key].ns : null)
+			obj.dataFunction = (key: string, data: any) => {
+				const payload = data[key]
+				if (!payload) {
+					return null
+				}
+				const sent = payload?.b?.[0] ?? (payload?.ns ?? 0) * 1024 * 1024
+				const recv = payload?.b?.[1] ?? (payload?.nr ?? 0) * 1024 * 1024
+				return sent + recv
+			}
 		} else {
 			obj.dataFunction = (key: string, data: any) => data[key]?.[dataKey] ?? null
 		}
@@ -94,11 +131,16 @@ export default memo(function ContainerChart({
 		if (!filter) {
 			return new Set<string>()
 		}
-		const filterTerms = filter.toLowerCase().split(" ").filter(term => term.length > 0)
-		return new Set(Object.keys(chartConfig).filter((key) => {
-			const keyLower = key.toLowerCase()
-			return !filterTerms.some(term => keyLower.includes(term))
-		}))
+		const filterTerms = filter
+			.toLowerCase()
+			.split(" ")
+			.filter((term) => term.length > 0)
+		return new Set(
+			Object.keys(chartConfig).filter((key) => {
+				const keyLower = key.toLowerCase()
+				return !filterTerms.some((term) => keyLower.includes(term))
+			})
+		)
 	}, [chartConfig, filter])
 
 	// console.log('rendered at', new Date())

internal/site/src/components/charts/hooks.ts

@@ -50,10 +50,12 @@ export function useContainerChartConfigs(containerData: ChartData["containerData
 				const currentCpu = totalUsage.cpu.get(containerName) ?? 0
 				const currentMemory = totalUsage.memory.get(containerName) ?? 0
 				const currentNetwork = totalUsage.network.get(containerName) ?? 0
+				const sentBytes = containerStats.b?.[0] ?? (containerStats.ns ?? 0) * 1024 * 1024
+				const recvBytes = containerStats.b?.[1] ?? (containerStats.nr ?? 0) * 1024 * 1024
 
 				totalUsage.cpu.set(containerName, currentCpu + (containerStats.c ?? 0))
 				totalUsage.memory.set(containerName, currentMemory + (containerStats.m ?? 0))
-				totalUsage.network.set(containerName, currentNetwork + (containerStats.nr ?? 0) + (containerStats.ns ?? 0))
+				totalUsage.network.set(containerName, currentNetwork + sentBytes + recvBytes)
 			}
 		}
 

internal/site/src/components/containers-table/containers-table-columns.tsx

@@ -20,7 +20,14 @@ import { $allSystemsById } from "@/lib/stores"
 import { useStore } from "@nanostores/react"
 
 // Unit names and their corresponding number of seconds for converting docker status strings
-const unitSeconds = [["s", 1], ["mi", 60], ["h", 3600], ["d", 86400], ["w", 604800], ["mo", 2592000]] as const
+const unitSeconds = [
+	["s", 1],
+	["mi", 60],
+	["h", 3600],
+	["d", 86400],
+	["w", 604800],
+	["mo", 2592000],
+] as const
 // Convert docker status string to number of seconds ("Up X minutes", "Up X hours", etc.)
 function getStatusValue(status: string): number {
 	const [_, num, unit] = status.split(" ")
@@ -97,7 +104,7 @@ export const containerChartCols: ColumnDef<ContainerRecord>[] = [
 		header: ({ column }) => <HeaderButton column={column} name={t`Net`} Icon={EthernetIcon} />,
 		cell: ({ getValue }) => {
 			const val = getValue() as number
-			const formatted = formatBytes(val, true, undefined, true)
+			const formatted = formatBytes(val, true, undefined, false)
 			return (
 				<span className="ms-1.5 tabular-nums">{`${decimalString(formatted.value, formatted.value >= 10 ? 1 : 2)} ${formatted.unit}`}</span>
 			)
@@ -113,13 +120,14 @@ export const containerChartCols: ColumnDef<ContainerRecord>[] = [
 			const healthStatus = ContainerHealthLabels[healthValue] || "Unknown"
 			return (
 				<Badge variant="outline" className="dark:border-white/12">
-					<span className={cn("size-2 me-1.5 rounded-full", {
-						"bg-green-500": healthValue === ContainerHealth.Healthy,
-						"bg-red-500": healthValue === ContainerHealth.Unhealthy,
-						"bg-yellow-500": healthValue === ContainerHealth.Starting,
-						"bg-zinc-500": healthValue === ContainerHealth.None,
-					})}>
-					</span>
+					<span
+						className={cn("size-2 me-1.5 rounded-full", {
+							"bg-green-500": healthValue === ContainerHealth.Healthy,
+							"bg-red-500": healthValue === ContainerHealth.Unhealthy,
+							"bg-yellow-500": healthValue === ContainerHealth.Starting,
+							"bg-zinc-500": healthValue === ContainerHealth.None,
+						})}
+					></span>
 					{healthStatus}
 				</Badge>
 			)
@@ -129,7 +137,9 @@ export const containerChartCols: ColumnDef<ContainerRecord>[] = [
 		id: "image",
 		sortingFn: (a, b) => a.original.image.localeCompare(b.original.image),
 		accessorFn: (record) => record.image,
-		header: ({ column }) => <HeaderButton column={column} name={t({ message: "Image", context: "Docker image" })} Icon={LayersIcon} />,
+		header: ({ column }) => (
+			<HeaderButton column={column} name={t({ message: "Image", context: "Docker image" })} Icon={LayersIcon} />
+		),
 		cell: ({ getValue }) => {
 			return <span className="ms-1.5 xl:w-40 block truncate">{getValue() as string}</span>
 		},
@@ -151,20 +161,27 @@ export const containerChartCols: ColumnDef<ContainerRecord>[] = [
 		header: ({ column }) => <HeaderButton column={column} name={t`Updated`} Icon={ClockIcon} />,
 		cell: ({ getValue }) => {
 			const timestamp = getValue() as number
-			return (
-				<span className="ms-1.5 tabular-nums">
-					{hourWithSeconds(new Date(timestamp).toISOString())}
-				</span>
-			)
+			return <span className="ms-1.5 tabular-nums">{hourWithSeconds(new Date(timestamp).toISOString())}</span>
 		},
 	},
 ]
 
-function HeaderButton({ column, name, Icon }: { column: Column<ContainerRecord>; name: string; Icon: React.ElementType }) {
+function HeaderButton({
+	column,
+	name,
+	Icon,
+}: {
+	column: Column<ContainerRecord>
+	name: string
+	Icon: React.ElementType
+}) {
 	const isSorted = column.getIsSorted()
 	return (
 		<Button
-			className={cn("h-9 px-3 flex items-center gap-2 duration-50", isSorted && "bg-accent/70 light:bg-accent text-accent-foreground/90")}
+			className={cn(
+				"h-9 px-3 flex items-center gap-2 duration-50",
+				isSorted && "bg-accent/70 light:bg-accent text-accent-foreground/90"
+			)}
 			variant="ghost"
 			onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
 		>
@@ -173,4 +190,4 @@ function HeaderButton({ column, name, Icon }: { column: Column<ContainerRecord>;
 			<ArrowUpDownIcon className="size-4" />
 		</Button>
 	)
-}
+}

internal/site/src/components/ui/chart.tsx

@@ -94,18 +94,18 @@ const ChartTooltip = RechartsPrimitive.Tooltip
 const ChartTooltipContent = React.forwardRef<
 	HTMLDivElement,
 	React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-	React.ComponentProps<"div"> & {
-		hideLabel?: boolean
-		indicator?: "line" | "dot" | "dashed"
-		nameKey?: string
-		labelKey?: string
-		unit?: string
-		filter?: string
-		contentFormatter?: (item: any, key: string) => React.ReactNode | string
-		truncate?: boolean
-		showTotal?: boolean
-		totalLabel?: React.ReactNode
-	}
+		React.ComponentProps<"div"> & {
+			hideLabel?: boolean
+			indicator?: "line" | "dot" | "dashed"
+			nameKey?: string
+			labelKey?: string
+			unit?: string
+			filter?: string
+			contentFormatter?: (item: any, key: string) => React.ReactNode | string
+			truncate?: boolean
+			showTotal?: boolean
+			totalLabel?: React.ReactNode
+		}
 >(
 	(
 		{
@@ -139,10 +139,13 @@ const ChartTooltipContent = React.forwardRef<
 
 		React.useMemo(() => {
 			if (filter) {
-				const filterTerms = filter.toLowerCase().split(" ").filter(term => term.length > 0)
+				const filterTerms = filter
+					.toLowerCase()
+					.split(" ")
+					.filter((term) => term.length > 0)
 				payload = payload?.filter((item) => {
 					const itemName = (item.name as string)?.toLowerCase()
-					return filterTerms.some(term => itemName?.includes(term))
+					return filterTerms.some((term) => itemName?.includes(term))
 				})
 			}
 			if (itemSorter) {
@@ -158,7 +161,6 @@ const ChartTooltipContent = React.forwardRef<
 
 			let totalValue = 0
 			let hasNumericValue = false
-			const aggregatedNestedValues: Record<string, number> = {}
 
 			for (const item of payload) {
 				const numericValue = typeof item.value === "number" ? item.value : Number(item.value)
@@ -166,19 +168,6 @@ const ChartTooltipContent = React.forwardRef<
 					totalValue += numericValue
 					hasNumericValue = true
 				}
-
-				if (content && item?.payload) {
-					const payloadKey = `${nameKey || item.name || item.dataKey || "value"}`
-					const nestedPayload = (item.payload as Record<string, unknown> | undefined)?.[payloadKey]
-
-					if (nestedPayload && typeof nestedPayload === "object") {
-						for (const [nestedKey, nestedValue] of Object.entries(nestedPayload)) {
-							if (typeof nestedValue === "number" && Number.isFinite(nestedValue)) {
-								aggregatedNestedValues[nestedKey] = (aggregatedNestedValues[nestedKey] ?? 0) + nestedValue
-							}
-						}
-					}
-				}
 			}
 
 			if (!hasNumericValue) {
@@ -194,24 +183,11 @@ const ChartTooltipContent = React.forwardRef<
 			}
 
 			if (content) {
-				const basePayload =
-					payload[0]?.payload && typeof payload[0].payload === "object"
-						? { ...(payload[0].payload as Record<string, unknown>) }
-						: {}
-				totalItem.payload = {
-					...basePayload,
-					[totalKey]: aggregatedNestedValues,
-				}
+				totalItem.payload = payload[0]?.payload
 			}
 
 			if (typeof formatter === "function") {
-				return formatter(
-					totalValue,
-					totalName,
-					totalItem,
-					payload.length,
-					totalItem.payload ?? payload[0]?.payload
-				)
+				return formatter(totalValue, totalName, totalItem, payload.length, totalItem.payload ?? payload[0]?.payload)
 			}
 
 			if (content) {
@@ -343,11 +319,11 @@ const ChartLegend = RechartsPrimitive.Legend
 const ChartLegendContent = React.forwardRef<
 	HTMLDivElement,
 	React.ComponentProps<"div"> &
-	Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-		hideIcon?: boolean
-		nameKey?: string
-		reverse?: boolean
-	}
+		Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+			hideIcon?: boolean
+			nameKey?: string
+			reverse?: boolean
+		}
 >(({ className, payload, verticalAlign = "bottom", reverse = false }, ref) => {
 	// const { config } = useChart()
 
@@ -457,13 +433,16 @@ export {
 }
 
 export function pinnedAxisDomain(): AxisDomain {
-	return [0, (dataMax: number) => {
-		if (dataMax > 10) {
-			return Math.round(dataMax)
-		}
-		if (dataMax > 1) {
-			return Math.round(dataMax / 0.1) * 0.1
-		}
-		return dataMax
-	}]
-}
+	return [
+		0,
+		(dataMax: number) => {
+			if (dataMax > 10) {
+				return Math.round(dataMax)
+			}
+			if (dataMax > 1) {
+				return Math.round(dataMax / 0.1) * 0.1
+			}
+			return dataMax
+		},
+	]
+}

internal/site/src/types.d.ts

@@ -215,9 +215,11 @@ interface ContainerStats {
 	/** memory used (gb) */
 	m: number
 	// network sent (mb)
-	ns: number
+	ns?: number
 	// network received (mb)
-	nr: number
+	nr?: number
+	/** bandwidth bytes [sent, recv] */
+	b?: [number, number]
 }
 
 export interface SystemStatsRecord extends RecordModel {