feat: monitor connected Wi-Fi signal per interface (#2367)

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

@@ -11,6 +11,7 @@ import { RootDiskCharts, ExtraFsCharts } from "./system/charts/disk-charts"
 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 { WiFiChart } from "./system/charts/wifi-chart"
 import { GpuPowerChart, GpuCharts } from "./system/charts/gpu-charts"
 import {
 	LazyContainersTable,
@@ -135,6 +136,7 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 					<FanChart {...coreProps} />
 
 					<BatteryChart system={system} {...coreProps} />
+					<WiFiChart system={system} {...coreProps} />
 
 					{hasGpuPowerData && <GpuPowerChart chartData={chartData} grid={grid} dataEmpty={dataEmpty} />}
 				</div>
@@ -211,6 +213,7 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 						<TemperatureChart {...coreProps} setPageBottomExtraMargin={setPageBottomExtraMargin} />
 						<FanChart {...coreProps} />
 						<BatteryChart system={system} {...coreProps} />
+						<WiFiChart system={system} {...coreProps} />
 						{pageBottomExtraMargin > 0 && <div style={{ marginBottom: pageBottomExtraMargin }}></div>}
 					</div>
 				</TabsContent>

internal/site/src/components/routes/system/charts/wifi-chart.tsx

@@ -0,0 +1,47 @@
+import { t } from "@lingui/core/macro"
+import LineChartDefault from "@/components/charts/line-chart"
+import { connectedWiFi, wifiColor } from "@/lib/wifi"
+import type { ChartData, SystemRecord, SystemStatsRecord } from "@/types"
+import { ChartCard } from "../chart-card"
+
+export function WiFiChart({
+	system,
+	chartData,
+	grid,
+	dataEmpty,
+}: {
+	system: SystemRecord
+	chartData: ChartData
+	grid: boolean
+	dataEmpty: boolean
+}) {
+	const interfaces = connectedWiFi(system)
+	if (!interfaces.length) return null
+	const dataPoints = interfaces.map(([id, current]) => ({
+		label: current.s ? `${id} (${current.s})` : id,
+		color: wifiColor(id),
+		dataKey: ({ stats }: SystemStatsRecord) => stats?.wifi?.[id]?.r,
+	}))
+	return (
+		<ChartCard
+			empty={dataEmpty}
+			grid={grid}
+			title={t`Wi-Fi signal`}
+			description={interfaces
+				.map(
+					([id, value]) =>
+						`${id}${value.s ? ` (${value.s})` : ""}: ${value.r == null ? t`Unavailable` : `${value.r} dBm`}`,
+				)
+				.join(" · ")}
+		>
+			<LineChartDefault
+				chartData={chartData}
+				dataPoints={dataPoints}
+				domain={["auto", "auto"]}
+				legend={true}
+				tickFormatter={(value) => `${value} dBm`}
+				contentFormatter={({ value }) => `${value} dBm`}
+			/>
+		</ChartCard>
+	)
+}