improve bandwidth measurement precision + refactor default area chart

beszel/internal/agent/system.go

@@ -174,24 +174,27 @@ func (a *Agent) getSystemStats() system.Stats {
 		a.initializeNetIoStats()
 	}
 	if netIO, err := psutilNet.IOCounters(true); err == nil {
-		secondsElapsed := time.Since(a.netIoStats.Time).Seconds()
+		msElapsed := uint64(time.Since(a.netIoStats.Time).Milliseconds())
 		a.netIoStats.Time = time.Now()
-		bytesSent := uint64(0)
-		bytesRecv := uint64(0)
+		totalBytesSent := uint64(0)
+		totalBytesRecv := uint64(0)
 		// sum all bytes sent and received
 		for _, v := range netIO {
 			// skip if not in valid network interfaces list
 			if _, exists := a.netInterfaces[v.Name]; !exists {
 				continue
 			}
-			bytesSent += v.BytesSent
-			bytesRecv += v.BytesRecv
+			totalBytesSent += v.BytesSent
+			totalBytesRecv += v.BytesRecv
 		}
 		// add to systemStats
-		sentPerSecond := float64(bytesSent-a.netIoStats.BytesSent) / secondsElapsed
-		recvPerSecond := float64(bytesRecv-a.netIoStats.BytesRecv) / secondsElapsed
-		networkSentPs := bytesToMegabytes(sentPerSecond)
-		networkRecvPs := bytesToMegabytes(recvPerSecond)
+		var bytesSentPerSecond, bytesRecvPerSecond uint64
+		if msElapsed > 0 {
+			bytesSentPerSecond = (totalBytesSent - a.netIoStats.BytesSent) * 1000 / msElapsed
+			bytesRecvPerSecond = (totalBytesRecv - a.netIoStats.BytesRecv) * 1000 / msElapsed
+		}
+		networkSentPs := bytesToMegabytes(float64(bytesSentPerSecond))
+		networkRecvPs := bytesToMegabytes(float64(bytesRecvPerSecond))
 		// add check for issue (#150) where sent is a massive number
 		if networkSentPs > 10_000 || networkRecvPs > 10_000 {
 			slog.Warn("Invalid net stats. Resetting.", "sent", networkSentPs, "recv", networkRecvPs)
@@ -206,9 +209,10 @@ func (a *Agent) getSystemStats() system.Stats {
 		} else {
 			systemStats.NetworkSent = networkSentPs
 			systemStats.NetworkRecv = networkRecvPs
+			systemStats.Bandwidth[0], systemStats.Bandwidth[1] = bytesSentPerSecond, bytesRecvPerSecond
 			// update netIoStats
-			a.netIoStats.BytesSent = bytesSent
-			a.netIoStats.BytesRecv = bytesRecv
+			a.netIoStats.BytesSent = totalBytesSent
+			a.netIoStats.BytesRecv = totalBytesRecv
 		}
 	}
 
@@ -257,7 +261,9 @@ func (a *Agent) getSystemStats() system.Stats {
 	a.systemInfo.MemPct = systemStats.MemPct
 	a.systemInfo.DiskPct = systemStats.DiskPct
 	a.systemInfo.Uptime, _ = host.Uptime()
+	// TODO: in future release, remove MB bandwidth values in favor of bytes
 	a.systemInfo.Bandwidth = twoDecimals(systemStats.NetworkSent + systemStats.NetworkRecv)
+	a.systemInfo.BandwidthBytes = systemStats.Bandwidth[0] + systemStats.Bandwidth[1]
 	slog.Debug("sysinfo", "data", a.systemInfo)
 
 	return systemStats

beszel/internal/entities/system/system.go

@@ -34,6 +34,8 @@ type Stats struct {
 	LoadAvg1       float64             `json:"l1,omitempty" cbor:"23,keyasint,omitempty,omitzero"`
 	LoadAvg5       float64             `json:"l5,omitempty" cbor:"24,keyasint,omitempty,omitzero"`
 	LoadAvg15      float64             `json:"l15,omitempty" cbor:"25,keyasint,omitempty,omitzero"`
+	Bandwidth      [2]uint64           `json:"b,omitzero" cbor:"26,keyasint,omitzero"`  // [sent bytes, recv bytes]
+	MaxBandwidth   [2]uint64           `json:"bm,omitzero" cbor:"27,keyasint,omitzero"` // [sent bytes, recv bytes]
 }
 
 type GPUData struct {
@@ -95,6 +97,7 @@ type Info struct {
 	LoadAvg1       float64 `json:"l1,omitempty" cbor:"15,keyasint,omitempty"`
 	LoadAvg5       float64 `json:"l5,omitempty" cbor:"16,keyasint,omitempty"`
 	LoadAvg15      float64 `json:"l15,omitempty" cbor:"17,keyasint,omitempty"`
+	BandwidthBytes uint64  `json:"bb" cbor:"18,keyasint"`
 }
 
 // Final data structure to return to the hub

beszel/internal/records/records.go

@@ -206,12 +206,16 @@ func (rm *RecordManager) AverageSystemStats(db dbx.Builder, records RecordIds) *
 		sum.LoadAvg1 += stats.LoadAvg1
 		sum.LoadAvg5 += stats.LoadAvg5
 		sum.LoadAvg15 += stats.LoadAvg15
+		sum.Bandwidth[0] += stats.Bandwidth[0]
+		sum.Bandwidth[1] += stats.Bandwidth[1]
 		// Set peak values
 		sum.MaxCpu = max(sum.MaxCpu, stats.MaxCpu, stats.Cpu)
 		sum.MaxNetworkSent = max(sum.MaxNetworkSent, stats.MaxNetworkSent, stats.NetworkSent)
 		sum.MaxNetworkRecv = max(sum.MaxNetworkRecv, stats.MaxNetworkRecv, stats.NetworkRecv)
 		sum.MaxDiskReadPs = max(sum.MaxDiskReadPs, stats.MaxDiskReadPs, stats.DiskReadPs)
 		sum.MaxDiskWritePs = max(sum.MaxDiskWritePs, stats.MaxDiskWritePs, stats.DiskWritePs)
+		sum.MaxBandwidth[0] = max(sum.MaxBandwidth[0], stats.MaxBandwidth[0], stats.Bandwidth[0])
+		sum.MaxBandwidth[1] = max(sum.MaxBandwidth[1], stats.MaxBandwidth[1], stats.Bandwidth[1])
 
 		// Accumulate temperatures
 		if stats.Temperatures != nil {
@@ -284,6 +288,8 @@ func (rm *RecordManager) AverageSystemStats(db dbx.Builder, records RecordIds) *
 		sum.LoadAvg1 = twoDecimals(sum.LoadAvg1 / count)
 		sum.LoadAvg5 = twoDecimals(sum.LoadAvg5 / count)
 		sum.LoadAvg15 = twoDecimals(sum.LoadAvg15 / count)
+		sum.Bandwidth[0] = sum.Bandwidth[0] / uint64(count)
+		sum.Bandwidth[1] = sum.Bandwidth[1] / uint64(count)
 		// Average temperatures
 		if sum.Temperatures != nil && tempCount > 0 {
 			for key := range sum.Temperatures {

beszel/site/src/components/charts/area-chart.tsx

@@ -1,79 +1,42 @@
-import { t } from "@lingui/core/macro"
-
 import { Area, AreaChart, CartesianGrid, YAxis } from "recharts"
 import { ChartContainer, ChartTooltip, ChartTooltipContent, xAxis } from "@/components/ui/chart"
 import { useYAxisWidth, cn, formatShortDate, chartMargin } from "@/lib/utils"
-// import Spinner from '../spinner'
-import { ChartData } from "@/types"
-import { memo, useMemo } from "react"
-import { useLingui } from "@lingui/react/macro"
+import { ChartData, SystemStatsRecord } from "@/types"
+import { useMemo } from "react"
 
-/** [label, key, color, opacity] */
-type DataKeys = [string, string, number, number]
-
-const getNestedValue = (path: string, max = false, data: any): number | null => {
-	// fallback value (obj?.stats?.cpum ? 0 : null) should only come into play when viewing
-	// a max value which doesn't exist, or the value was zero and omitted from the stats object.
-	// so we check if cpum is present. if so, return 0 to make sure the zero value is displayed.
-	// if not, return null - there is no max data so do not display anything.
-	return `stats.${path}${max ? "m" : ""}`
-		.split(".")
-		.reduce((acc: any, key: string) => acc?.[key] ?? (data.stats?.cpum ? 0 : null), data)
+export type DataPoint = {
+	label: string
+	dataKey: (data: SystemStatsRecord) => number | undefined
+	color: string
+	opacity: number
 }
 
-export default memo(function AreaChartDefault({
-	maxToggled = false,
-	chartName,
+export default function AreaChartDefault({
 	chartData,
 	max,
+	maxToggled,
 	tickFormatter,
 	contentFormatter,
-}: {
-	maxToggled?: boolean
-	chartName: string
+	dataPoints,
+}: // logRender = false,
+{
 	chartData: ChartData
 	max?: number
-	tickFormatter: (value: number) => string
-	contentFormatter: ({ value }: { value: number }) => string
+	maxToggled?: boolean
+	tickFormatter: (value: number, index: number) => string
+	contentFormatter: ({ value, payload }: { value: number; payload: SystemStatsRecord }) => string
+	dataPoints?: DataPoint[]
+	// logRender?: boolean
 }) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
-	const { i18n } = useLingui()
-
-	const { chartTime } = chartData
-
-	const showMax = chartTime !== "1h" && maxToggled
-
-	const dataKeys: DataKeys[] = useMemo(() => {
-		// [label, key, color, opacity]
-		if (chartName === "CPU Usage") {
-			return [[t`CPU Usage`, "cpu", 1, 0.4]]
-		} else if (chartName === "dio") {
-			return [
-				[t({ message: "Write", comment: "Disk write" }), "dw", 3, 0.3],
-				[t({ message: "Read", comment: "Disk read" }), "dr", 1, 0.3],
-			]
-		} else if (chartName === "bw") {
-			return [
-				[t({ message: "Sent", comment: "Network bytes sent (upload)" }), "ns", 5, 0.2],
-				[t({ message: "Received", comment: "Network bytes received (download)" }), "nr", 2, 0.2],
-			]
-		} else if (chartName.startsWith("efs")) {
-			return [
-				[t`Write`, `${chartName}.w`, 3, 0.3],
-				[t`Read`, `${chartName}.r`, 1, 0.3],
-			]
-		} else if (chartName.startsWith("g.")) {
-			return [chartName.includes("mu") ? [t`Used`, chartName, 2, 0.25] : [t`Usage`, chartName, 1, 0.4]]
-		}
-		return []
-	}, [chartName, i18n.locale])
-
-	// console.log('Rendered at', new Date())
 
+	return useMemo(() => {
 		if (chartData.systemStats.length === 0) {
 			return null
 		}
-
+		// if (logRender) {
+		// 	console.log("Rendered at", new Date())
+		// }
 		return (
 			<div>
 				<ChartContainer
@@ -89,7 +52,7 @@ export default memo(function AreaChartDefault({
 							className="tracking-tighter"
 							width={yAxisWidth}
 							domain={[0, max ?? "auto"]}
-						tickFormatter={(value) => updateYAxisWidth(tickFormatter(value))}
+							tickFormatter={(value, index) => updateYAxisWidth(tickFormatter(value, index))}
 							tickLine={false}
 							axisLine={false}
 						/>
@@ -101,20 +64,19 @@ export default memo(function AreaChartDefault({
 								<ChartTooltipContent
 									labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
 									contentFormatter={contentFormatter}
-								// indicator="line"
 								/>
 							}
 						/>
-					{dataKeys.map((key, i) => {
-						const color = `hsl(var(--chart-${key[2]}))`
+						{dataPoints?.map((dataPoint, i) => {
+							const color = `hsl(var(--chart-${dataPoint.color}))`
 							return (
 								<Area
 									key={i}
-								dataKey={getNestedValue.bind(null, key[1], showMax)}
-								name={key[0]}
+									dataKey={dataPoint.dataKey}
+									name={dataPoint.label}
 									type="monotoneX"
 									fill={color}
-								fillOpacity={key[3]}
+									fillOpacity={dataPoint.opacity}
 									stroke={color}
 									isAnimationActive={false}
 								/>
@@ -125,4 +87,5 @@ export default memo(function AreaChartDefault({
 				</ChartContainer>
 			</div>
 		)
-})
+	}, [chartData.systemStats.length, yAxisWidth, maxToggled])
+}

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

@@ -371,6 +371,7 @@ export default function SystemDetail({ name }: { name: string }) {
 
 	// select field for switching between avg and max values
 	const maxValSelect = isLongerChart ? <SelectAvgMax max={maxValues} /> : null
+	const showMax = chartTime !== "1h" && maxValues
 
 	// if no data, show empty message
 	const dataEmpty = !chartLoading && chartData.systemStats.length === 0
@@ -477,8 +478,15 @@ export default function SystemDetail({ name }: { name: string }) {
 					>
 						<AreaChartDefault
 							chartData={chartData}
-							chartName="CPU Usage"
 							maxToggled={maxValues}
+							dataPoints={[
+								{
+									label: t`CPU Usage`,
+									dataKey: ({ stats }) => (showMax ? stats?.cpum : stats?.cpu),
+									color: "1",
+									opacity: 0.4,
+								},
+							]}
 							tickFormatter={(val) => toFixedFloat(val, 2) + "%"}
 							contentFormatter={({ value }) => decimalString(value) + "%"}
 						/>
@@ -530,8 +538,21 @@ export default function SystemDetail({ name }: { name: string }) {
 					>
 						<AreaChartDefault
 							chartData={chartData}
-							chartName="dio"
 							maxToggled={maxValues}
+							dataPoints={[
+								{
+									label: t({ message: "Write", comment: "Disk write" }),
+									dataKey: ({ stats }) => (showMax ? stats?.dwm : stats?.dw),
+									color: "3",
+									opacity: 0.3,
+								},
+								{
+									label: t({ message: "Read", comment: "Disk read" }),
+									dataKey: ({ stats }) => (showMax ? stats?.drm : stats?.dr),
+									color: "1",
+									opacity: 0.3,
+								},
+							]}
 							tickFormatter={(val) => {
 								const { value, unit } = formatBytes(val, true, userSettings.unitDisk, true)
 								return toFixedFloat(value, value >= 10 ? 0 : 1) + " " + unit
@@ -552,15 +573,39 @@ export default function SystemDetail({ name }: { name: string }) {
 					>
 						<AreaChartDefault
 							chartData={chartData}
-							chartName="bw"
 							maxToggled={maxValues}
+							dataPoints={[
+								{
+									label: t`Sent`,
+									// use bytes if available, otherwise multiply old MB (can remove in future)
+									dataKey(data) {
+										if (showMax) {
+											return data?.stats?.bm?.[0] ?? (data?.stats?.nsm ?? 0) * 1024 * 1024
+										}
+										return data?.stats?.b?.[0] ?? data?.stats?.ns * 1024 * 1024
+									},
+									color: "5",
+									opacity: 0.2,
+								},
+								{
+									label: t`Received`,
+									dataKey(data) {
+										if (showMax) {
+											return data?.stats?.bm?.[1] ?? (data?.stats?.nrm ?? 0) * 1024 * 1024
+										}
+										return data?.stats?.b?.[1] ?? data?.stats?.nr * 1024 * 1024
+									},
+									color: "2",
+									opacity: 0.2,
+								},
+							]}
 							tickFormatter={(val) => {
-								let { value, unit } = formatBytes(val, true, userSettings.unitNet, true)
+								let { value, unit } = formatBytes(val, true, userSettings.unitNet, false)
 								return toFixedFloat(value, value >= 10 ? 0 : 1) + " " + unit
 							}}
-							contentFormatter={({ value }) => {
-								const { value: convertedValue, unit } = formatBytes(value, true, userSettings.unitNet, true)
-								return decimalString(convertedValue, convertedValue >= 100 ? 1 : 2) + " " + unit
+							contentFormatter={(data) => {
+								const { value, unit } = formatBytes(data.value, true, userSettings.unitNet, false)
+								return decimalString(value, value >= 100 ? 1 : 2) + " " + unit
 							}}
 						/>
 					</ChartCard>
@@ -649,7 +694,14 @@ export default function SystemDetail({ name }: { name: string }) {
 									>
 										<AreaChartDefault
 											chartData={chartData}
-											chartName={`g.${id}.u`}
+											dataPoints={[
+												{
+													label: t`Usage`,
+													dataKey: ({ stats }) => stats?.g?.[id]?.u ?? 0,
+													color: "1",
+													opacity: 0.35,
+												},
+											]}
 											tickFormatter={(val) => toFixedFloat(val, 2) + "%"}
 											contentFormatter={({ value }) => decimalString(value) + "%"}
 										/>
@@ -662,7 +714,14 @@ export default function SystemDetail({ name }: { name: string }) {
 									>
 										<AreaChartDefault
 											chartData={chartData}
-											chartName={`g.${id}.mu`}
+											dataPoints={[
+												{
+													label: t`Usage`,
+													dataKey: ({ stats }) => stats?.g?.[id]?.mu ?? 0,
+													color: "2",
+													opacity: 0.25,
+												},
+											]}
 											max={gpu.mt}
 											tickFormatter={(val) => {
 												const { value, unit } = formatBytes(val, false, Unit.Bytes, true)
@@ -707,7 +766,20 @@ export default function SystemDetail({ name }: { name: string }) {
 									>
 										<AreaChartDefault
 											chartData={chartData}
-											chartName={`efs.${extraFsName}`}
+											dataPoints={[
+												{
+													label: t`Write`,
+													dataKey: ({ stats }) => stats?.efs?.[extraFsName]?.[showMax ? "wm" : "w"] ?? 0,
+													color: "3",
+													opacity: 0.3,
+												},
+												{
+													label: t`Read`,
+													dataKey: ({ stats }) => stats?.efs?.[extraFsName]?.[showMax ? "rm" : "r"] ?? 0,
+													color: "1",
+													opacity: 0.3,
+												},
+											]}
 											maxToggled={maxValues}
 											tickFormatter={(val) => {
 												const { value, unit } = formatBytes(val, true, userSettings.unitDisk, true)

beszel/site/src/components/systems-table/systems-table.tsx

@@ -260,19 +260,19 @@ export default function SystemsTable() {
 				},
 			},
 			{
-				accessorFn: (originalRow) => originalRow.info.b || 0,
+				accessorFn: ({ info }) => info.bb || (info.b || 0) * 1024 * 1024,
 				id: "net",
 				name: () => t`Net`,
 				size: 0,
 				Icon: EthernetIcon,
 				header: sortableHeader,
 				cell(info) {
-					if (info.row.original.status === "paused") {
+					const sys = info.row.original
+					if (sys.status === "paused") {
 						return null
 					}
-					const val = info.getValue() as number
 					const userSettings = useStore($userSettings)
-					const { value, unit } = formatBytes(val, true, userSettings.unitNet, true)
+					const { value, unit } = formatBytes(info.getValue() as number, true, userSettings.unitNet, false)
 					return (
 						<span className="tabular-nums whitespace-nowrap">
 							{decimalString(value, value >= 100 ? 1 : 2)} {unit}

beszel/site/src/types.d.ts

@@ -60,6 +60,8 @@ export interface SystemInfo {
 	dp: number
 	/** bandwidth (mb) */
 	b: number
+	/** bandwidth bytes */
+	bb?: number
 	/** agent version */
 	v: string
 	/** system is using podman */
@@ -115,10 +117,14 @@ export interface SystemStats {
 	ns: number
 	/** network received (mb) */
 	nr: number
+	/** bandwidth bytes [sent, recv] */
+	b?: [number, number]
 	/** max network sent (mb) */
 	nsm?: number
 	/** max network received (mb) */
 	nrm?: number
+	/** max network sent (bytes) */
+	bm?: [number, number]
 	/** temperatures */
 	t?: Record<string, number>
 	/** extra filesystems */