add battery charge to systems table

Author: henrygd

agent/system.go

@@ -205,6 +205,7 @@ func (a *Agent) getSystemStats(cacheTimeMs uint16) system.Stats {
 	a.systemInfo.LoadAvg15 = systemStats.LoadAvg[2]
 	a.systemInfo.MemPct = systemStats.MemPct
 	a.systemInfo.DiskPct = systemStats.DiskPct
+	a.systemInfo.Battery = systemStats.Battery
 	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)

internal/entities/system/system.go

@@ -148,6 +148,7 @@ type Info struct {
 	ConnectionType ConnectionType     `json:"ct,omitempty" cbor:"20,keyasint,omitempty,omitzero"`
 	ExtraFsPct     map[string]float64 `json:"efs,omitempty" cbor:"21,keyasint,omitempty"`
 	Services       []uint16           `json:"sv,omitempty" cbor:"22,keyasint,omitempty"` // [totalServices, numFailedServices]
+	Battery        [2]uint8           `json:"bat,omitzero" cbor:"23,keyasint,omitzero"`  // [percent, charge state]
 }
 
 // Final data structure to return to the hub

internal/site/src/components/active-alerts.tsx

@@ -61,6 +61,11 @@ export const ActiveAlerts = () => {
 										<AlertDescription>
 											{alert.name === "Status" ? (
 												<Trans>Connection is down</Trans>
+											) : info.invert ? (
+												<Trans>
+													Below {alert.value}
+													{info.unit} in last <Plural value={alert.min} one="# minute" other="# minutes" />
+												</Trans>
 											) : (
 												<Trans>
 													Exceeds {alert.value}

internal/site/src/components/alerts/alerts-sheet.tsx

@@ -245,7 +245,7 @@ export function AlertContent({
 						{!singleDescription && (
 							<div>
 								<p id={`v${name}`} className="text-sm block h-8">
-									{alertKey === "Battery" ? (
+									{alertData.invert ? (
 										<Trans>
 											Average drops below{" "}
 											<strong className="text-foreground">

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

@@ -233,7 +233,7 @@ export const columns: ColumnDef<DiskInfo>[] = [
 			if (!cycles && cycles !== 0) {
 				return <div className="text-muted-foreground ms-1.5">N/A</div>
 			}
-			return <span className="ms-1.5">{cycles}</span>
+			return <span className="ms-1.5">{cycles.toLocaleString()}</span>
 		},
 	},
 	{
@@ -329,41 +329,41 @@ export default function DisksTable({ systemId }: { systemId?: string }) {
 			? { fields: SMART_DEVICE_FIELDS, filter: pb.filter("system = {:system}", { system: systemId }) }
 			: { fields: SMART_DEVICE_FIELDS }
 
-			; (async () => {
-				try {
-					unsubscribe = await pb.collection("smart_devices").subscribe(
-						"*",
-						(event) => {
-							const record = event.record as SmartDeviceRecord
-							setSmartDevices((currentDevices) => {
-								const devices = currentDevices ?? []
-								const matchesSystemScope = !systemId || record.system === systemId
-
-								if (event.action === "delete") {
-									return devices.filter((device) => device.id !== record.id)
-								}
-
-								if (!matchesSystemScope) {
-									// Record moved out of scope; ensure it disappears locally.
-									return devices.filter((device) => device.id !== record.id)
-								}
-
-								const existingIndex = devices.findIndex((device) => device.id === record.id)
-								if (existingIndex === -1) {
-									return [record, ...devices]
-								}
-
-								const next = [...devices]
-								next[existingIndex] = record
-								return next
-							})
-						},
-						pbOptions
-					)
-				} catch (error) {
-					console.error("Failed to subscribe to SMART device updates:", error)
-				}
-			})()
+		;(async () => {
+			try {
+				unsubscribe = await pb.collection("smart_devices").subscribe(
+					"*",
+					(event) => {
+						const record = event.record as SmartDeviceRecord
+						setSmartDevices((currentDevices) => {
+							const devices = currentDevices ?? []
+							const matchesSystemScope = !systemId || record.system === systemId
+
+							if (event.action === "delete") {
+								return devices.filter((device) => device.id !== record.id)
+							}
+
+							if (!matchesSystemScope) {
+								// Record moved out of scope; ensure it disappears locally.
+								return devices.filter((device) => device.id !== record.id)
+							}
+
+							const existingIndex = devices.findIndex((device) => device.id === record.id)
+							if (existingIndex === -1) {
+								return [record, ...devices]
+							}
+
+							const next = [...devices]
+							next[existingIndex] = record
+							return next
+						})
+					},
+					pbOptions
+				)
+			} catch (error) {
+				console.error("Failed to subscribe to SMART device updates:", error)
+			}
+		})()
 
 		return () => {
 			unsubscribe?.()
@@ -421,14 +421,14 @@ export default function DisksTable({ systemId }: { systemId?: string }) {
 								<Button
 									variant="ghost"
 									size="icon"
-									className="size-8"
+									className="size-10"
 									onClick={(event) => event.stopPropagation()}
 									onMouseDown={(event) => event.stopPropagation()}
 								>
 									<span className="sr-only">
 										<Trans>Open menu</Trans>
 									</span>
-									<MoreHorizontalIcon className="size-4" />
+									<MoreHorizontalIcon className="w-5" />
 								</Button>
 							</DropdownMenuTrigger>
 							<DropdownMenuContent align="end" onClick={(event) => event.stopPropagation()}>

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

@@ -1,4 +1,4 @@
-/** biome-ignore-all lint/correctness/useHookAtTopLevel: <explanation> */
+/** biome-ignore-all lint/correctness/useHookAtTopLevel: Hooks live inside memoized column definitions */
 import { t } from "@lingui/core/macro"
 import { Trans, useLingui } from "@lingui/react/macro"
 import { useStore } from "@nanostores/react"
@@ -24,7 +24,7 @@ import {
 import { memo, useMemo, useRef, useState } from "react"
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"
 import { isReadOnlyUser, pb } from "@/lib/api"
-import { ConnectionType, connectionTypeLabels, MeterState, SystemStatus } from "@/lib/enums"
+import { BatteryState, ConnectionType, connectionTypeLabels, MeterState, SystemStatus } from "@/lib/enums"
 import { $longestSystemNameLen, $userSettings } from "@/lib/stores"
 import {
 	cn,
@@ -35,6 +35,7 @@ import {
 	getMeterState,
 	parseSemVer,
 } from "@/lib/utils"
+import { batteryStateTranslations } from "@/lib/i18n"
 import type { SystemRecord } from "@/types"
 import { SystemDialog } from "../add-system"
 import AlertButton from "../alerts/alert-button"
@@ -58,7 +59,18 @@ import {
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "../ui/dropdown-menu"
-import { EthernetIcon, GpuIcon, HourglassIcon, ThermometerIcon, WebSocketIcon } from "../ui/icons"
+import {
+	BatteryMediumIcon,
+	EthernetIcon,
+	GpuIcon,
+	HourglassIcon,
+	ThermometerIcon,
+	WebSocketIcon,
+	BatteryHighIcon,
+	BatteryLowIcon,
+	PlugChargingIcon,
+	BatteryFullIcon,
+} from "../ui/icons"
 
 const STATUS_COLORS = {
 	[SystemStatus.Up]: "bg-green-500",
@@ -261,6 +273,52 @@ export function SystemsTableColumns(viewMode: "table" | "grid"): ColumnDef<Syste
 				)
 			},
 		},
+		{
+			accessorFn: ({ info }) => info.bat?.[0],
+			id: "battery",
+			name: () => t({ message: "Bat", comment: "Battery label in systems table header" }),
+			size: 70,
+			Icon: BatteryMediumIcon,
+			header: sortableHeader,
+			hideSort: true,
+			cell(info) {
+				const [pct, state] = info.row.original.info.bat ?? []
+				if (pct === undefined) {
+					return null
+				}
+
+				const iconColor = pct < 10 ? "text-red-500" : pct < 25 ? "text-yellow-500" : "text-muted-foreground"
+
+				let Icon = PlugChargingIcon
+
+				if (state !== BatteryState.Charging) {
+					if (pct < 25) {
+						Icon = BatteryLowIcon
+					} else if (pct < 75) {
+						Icon = BatteryMediumIcon
+					} else if (pct < 95) {
+						Icon = BatteryHighIcon
+					} else {
+						Icon = BatteryFullIcon
+					}
+				}
+
+				const stateLabel =
+					state !== undefined ? (batteryStateTranslations[state as BatteryState]?.() ?? undefined) : undefined
+
+				return (
+					<Link
+						tabIndex={-1}
+						href={getPagePath($router, "system", { id: info.row.original.id })}
+						className="flex items-center gap-1 tabular-nums tracking-tight relative z-10"
+						title={stateLabel}
+					>
+						<Icon className={cn("size-3.5", iconColor)} />
+						<span className="min-w-10">{pct}%</span>
+					</Link>
+				)
+			},
+		},
 		{
 			accessorFn: ({ info }) => info.sv?.[0],
 			id: "services",
@@ -599,5 +657,5 @@ export const ActionsButton = memo(({ system }: { system: SystemRecord }) => {
 				</AlertDialog>
 			</>
 		)
-	}, [id, status, host, name, t, deleteOpen, editOpen])
+	}, [id, status, host, name, system, t, deleteOpen, editOpen])
 })

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

@@ -131,6 +131,7 @@ export function HourglassIcon(props: SVGProps<SVGSVGElement>) {
 	)
 }
 
+// Apache 2.0 https://github.com/Templarian/MaterialDesign/blob/master/LICENSE
 export function WebSocketIcon(props: SVGProps<SVGSVGElement>) {
 	return (
 		<svg viewBox="0 0 256 193" {...props} fill="currentColor">
@@ -140,10 +141,47 @@ export function WebSocketIcon(props: SVGProps<SVGSVGElement>) {
 	)
 }
 
-export function BatteryIcon(props: SVGProps<SVGSVGElement>) {
+// Apache 2.0 https://github.com/Templarian/MaterialDesign/blob/master/LICENSE
+export function BatteryMediumIcon(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg viewBox="0 0 24 24" {...props} fill="currentColor">
+			<path d="M16 13H8V6h8m.67-2H15V2H9v2H7.33A1.33 1.33 0 0 0 6 5.33v15.34C6 21.4 6.6 22 7.33 22h9.34A1.33 1.33 0 0 0 18 20.67V5.33C18 4.6 17.4 4 16.67 4" />
+		</svg>
+	)
+}
+
+// Apache 2.0 https://github.com/Templarian/MaterialDesign/blob/master/LICENSE
+export function BatteryLowIcon(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg viewBox="0 0 24 24" {...props} fill="currentColor">
+			<path d="M16 20H8V6h8m.67-2H15V2H9v2H7.33C6.6 4 6 4.6 6 5.33v15.34C6 21.4 6.6 22 7.33 22h9.34c.74 0 1.33-.59 1.33-1.33V5.33C18 4.6 17.4 4 16.67 4M15 16H9v3h6zm0-4.5H9v3h6z" />
+		</svg>
+	)
+}
+
+// Apache 2.0 https://github.com/Templarian/MaterialDesign/blob/master/LICENSE
+export function BatteryHighIcon(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg viewBox="0 0 24 24" {...props} fill="currentColor">
+			<path d="M16 9H8V6h8m.67-2H15V2H9v2H7.33A1.33 1.33 0 0 0 6 5.33v15.34C6 21.4 6.6 22 7.33 22h9.34A1.33 1.33 0 0 0 18 20.67V5.33C18 4.6 17.4 4 16.67 4" />
+		</svg>
+	)
+}
+
+// Apache 2.0 https://github.com/Templarian/MaterialDesign/blob/master/LICENSE
+export function BatteryFullIcon(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg viewBox="0 0 24 24" {...props} fill="currentColor">
+			<path d="M16.67 4H15V2H9v2H7.33A1.33 1.33 0 0 0 6 5.33v15.34C6 21.4 6.6 22 7.33 22h9.34A1.33 1.33 0 0 0 18 20.67V5.33C18 4.6 17.4 4 16.67 4" />
+		</svg>
+	)
+}
+
+// https://github.com/phosphor-icons/core (MIT license)
+export function PlugChargingIcon(props: SVGProps<SVGSVGElement>) {
 	return (
 		<svg viewBox="0 0 256 256" {...props} fill="currentColor">
-			<path d="M176,32H80A24,24,0,0,0,56,56V224a24,24,0,0,0,24,24h96a24,24,0,0,0,24-24V56A24,24,0,0,0,176,32Zm8,192a8,8,0,0,1-8,8H80a8,8,0,0,1-8-8V56a8,8,0,0,1,8-8h96a8,8,0,0,1,8,8Zm-16-24a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,200ZM88,8a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H96A8,8,0,0,1,88,8Zm80,152a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,160Z"></path>
+			<path d="M224,48H180V16a12,12,0,0,0-24,0V48H100V16a12,12,0,0,0-24,0V48H32.55C24.4,48,20,54.18,20,60A12,12,0,0,0,32,72H44v92a44.05,44.05,0,0,0,44,44h28v32a12,12,0,0,0,24,0V208h28a44.05,44.05,0,0,0,44-44V72h12a12,12,0,0,0,0-24ZM188,164a20,20,0,0,1-20,20H88a20,20,0,0,1-20-20V72H188Zm-85.86-29.17a12,12,0,0,1-1.38-11l12-32a12,12,0,1,1,22.48,8.42L129.32,116H144a12,12,0,0,1,11.24,16.21l-12,32a12,12,0,0,1-22.48-8.42L126.68,140H112A12,12,0,0,1,102.14,134.83Z" />
 		</svg>
 	)
-}
+}

internal/site/src/lib/alerts.ts

@@ -5,7 +5,7 @@ import { EthernetIcon, GpuIcon } from "@/components/ui/icons"
 import { $alerts } from "@/lib/stores"
 import type { AlertInfo, AlertRecord } from "@/types"
 import { pb } from "./api"
-import { ThermometerIcon, BatteryIcon, HourglassIcon } from "@/components/ui/icons"
+import { ThermometerIcon, BatteryMediumIcon, HourglassIcon } from "@/components/ui/icons"
 
 /** Alert info for each alert type */
 export const alertInfo: Record<string, AlertInfo> = {
@@ -87,9 +87,10 @@ export const alertInfo: Record<string, AlertInfo> = {
 	Battery: {
 		name: () => t`Battery`,
 		unit: "%",
-		icon: BatteryIcon,
+		icon: BatteryMediumIcon,
 		desc: () => t`Triggers when battery charge drops below a threshold`,
 		start: 20,
+		invert: true,
 	},
 } as const
 

internal/site/src/types.d.ts

@@ -61,6 +61,8 @@ export interface SystemInfo {
 	mp: number
 	/** disk percent */
 	dp: number
+	/** battery percent and state */
+	bat?: [number, BatteryState]
 	/** bandwidth (mb) */
 	b: number
 	/** bandwidth bytes */
@@ -331,6 +333,7 @@ export interface AlertInfo {
 	start?: number
 	/** Single value description (when there's only one value, like status) */
 	singleDesc?: () => string
+	invert?: boolean
 }
 
 export type AlertMap = Record<string, Map<string, AlertRecord>>