add dedicated S.M.A.R.T. page with persistent device storage

- Add /smart route to view SMART data across all systems
- Store SMART devices in new smart_devices collection
- Auto-fetch SMART data when system first comes online
- Add refresh/delete actions per device with realtime updates
- Add navbar and command palette entries

internal/site/src/components/command-palette.tsx

@@ -8,10 +8,11 @@ import {
 	ContainerIcon,
 	DatabaseBackupIcon,
 	FingerprintIcon,
-	LayoutDashboard,
+	HardDriveIcon,
 	LogsIcon,
 	MailIcon,
 	Server,
+	ServerIcon,
 	SettingsIcon,
 	UsersIcon,
 } from "lucide-react"
@@ -81,15 +82,15 @@ export default memo(function CommandPalette({ open, setOpen }: { open: boolean;
 					)}
 					<CommandGroup heading={t`Pages / Settings`}>
 						<CommandItem
-							keywords={["home", t`All Systems`]}
+							keywords={["home"]}
 							onSelect={() => {
 								navigate(basePath)
 								setOpen(false)
 							}}
 						>
-							<LayoutDashboard className="me-2 size-4" />
+							<ServerIcon className="me-2 size-4" />
 							<span>
-								<Trans>Dashboard</Trans>
+								<Trans>All Systems</Trans>
 							</span>
 							<CommandShortcut>
 								<Trans>Page</Trans>
@@ -109,6 +110,18 @@ export default memo(function CommandPalette({ open, setOpen }: { open: boolean;
 								<Trans>Page</Trans>
 							</CommandShortcut>
 						</CommandItem>
+						<CommandItem
+							onSelect={() => {
+								navigate(getPagePath($router, "smart"))
+								setOpen(false)
+							}}
+						>
+							<HardDriveIcon className="me-2 size-4" />
+							<span>S.M.A.R.T.</span>
+							<CommandShortcut>
+								<Trans>Page</Trans>
+							</CommandShortcut>
+						</CommandItem>
 						<CommandItem
 							onSelect={() => {
 								navigate(getPagePath($router, "settings", { name: "general" }))

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

@@ -26,7 +26,7 @@ import { Sheet, SheetTitle, SheetHeader, SheetContent, SheetDescription } from "
 import { Dialog, DialogContent, DialogTitle } from "../ui/dialog"
 import { Button } from "@/components/ui/button"
 import { $allSystemsById } from "@/lib/stores"
-import { MaximizeIcon, RefreshCwIcon, XIcon } from "lucide-react"
+import { LoaderCircleIcon, MaximizeIcon, RefreshCwIcon, XIcon } from "lucide-react"
 import { Separator } from "../ui/separator"
 import { $router, Link } from "../router"
 import { listenKeys } from "nanostores"
@@ -36,7 +36,7 @@ const syntaxTheme = "github-dark-dimmed"
 
 export default function ContainersTable({ systemId }: { systemId?: string }) {
 	const loadTime = Date.now()
-	const [data, setData] = useState<ContainerRecord[]>([])
+	const [data, setData] = useState<ContainerRecord[] | undefined>(undefined)
 	const [sorting, setSorting] = useBrowserStorage<SortingState>(
 		`sort-c-${systemId ? 1 : 0}`,
 		[{ id: systemId ? "name" : "system", desc: false }],
@@ -67,7 +67,7 @@ export default function ContainersTable({ systemId }: { systemId?: string }) {
 									newItems.push(item)
 								}
 							}
-							for (const item of curItems) {
+							for (const item of curItems ?? []) {
 								if (!containerIds.has(item.id) && lastUpdated - item.updated < 70_000) {
 									newItems.push(item)
 								}
@@ -97,7 +97,7 @@ export default function ContainersTable({ systemId }: { systemId?: string }) {
 	}, [])
 
 	const table = useReactTable({
-		data,
+		data: data ?? [],
 		columns: containerChartCols.filter((col) => (systemId ? col.id !== "system" : true)),
 		getCoreRowModel: getCoreRowModel(),
 		getSortedRowModel: getSortedRowModel(),
@@ -174,7 +174,7 @@ export default function ContainersTable({ systemId }: { systemId?: string }) {
 				</div>
 			</CardHeader>
 			<div className="rounded-md">
-				<AllContainersTable table={table} rows={rows} colLength={visibleColumns.length} />
+				<AllContainersTable table={table} rows={rows} colLength={visibleColumns.length} data={data} />
 			</div>
 		</Card>
 	)
@@ -184,10 +184,12 @@ const AllContainersTable = memo(function AllContainersTable({
 	table,
 	rows,
 	colLength,
+	data,
 }: {
 	table: TableType<ContainerRecord>
 	rows: Row<ContainerRecord>[]
 	colLength: number
+	data: ContainerRecord[] | undefined
 }) {
 	// The virtualizer will need a reference to the scrollable container element
 	const scrollRef = useRef<HTMLDivElement>(null)
@@ -231,7 +233,11 @@ const AllContainersTable = memo(function AllContainersTable({
 						) : (
 							<TableRow>
 								<TableCell colSpan={colLength} className="h-37 text-center pointer-events-none">
-									<Trans>No results.</Trans>
+									{data ? (
+										<Trans>No results.</Trans>
+									) : (
+										<LoaderCircleIcon className="animate-spin size-10 opacity-60 mx-auto" />
+									)}
 								</TableCell>
 							</TableRow>
 						)}

internal/site/src/components/navbar.tsx

@@ -3,6 +3,7 @@ import { getPagePath } from "@nanostores/router"
 import {
 	ContainerIcon,
 	DatabaseBackupIcon,
+	HardDriveIcon,
 	LogOutIcon,
 	LogsIcon,
 	SearchIcon,
@@ -29,6 +30,7 @@ import { LangToggle } from "./lang-toggle"
 import { Logo } from "./logo"
 import { ModeToggle } from "./mode-toggle"
 import { $router, basePath, Link, prependBasePath } from "./router"
+import { t } from "@lingui/core/macro"
 
 const CommandPalette = lazy(() => import("./command-palette"))
 
@@ -55,6 +57,13 @@ export default function Navbar() {
 				>
 					<ContainerIcon className="h-[1.2rem] w-[1.2rem]" strokeWidth={1.5} />
 				</Link>
+				<Link
+					href={getPagePath($router, "smart")}
+					className={cn("hidden md:grid", buttonVariants({ variant: "ghost", size: "icon" }))}
+					aria-label="S.M.A.R.T."
+				>
+					<HardDriveIcon className="h-[1.2rem] w-[1.2rem]" strokeWidth={1.5} />
+				</Link>
 				<LangToggle />
 				<ModeToggle />
 				<Link

internal/site/src/components/router.tsx

@@ -3,6 +3,7 @@ import { createRouter } from "@nanostores/router"
 const routes = {
 	home: "/",
 	containers: "/containers",
+	smart: "/smart",
 	system: `/system/:id`,
 	settings: `/settings/:name?`,
 	forgot_password: `/forgot-password`,

internal/site/src/components/routes/settings/general.tsx

@@ -21,7 +21,7 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 	const [isLoading, setIsLoading] = useState(false)
 	const { i18n } = useLingui()
 	const currentUserSettings = useStore($userSettings)
-	const layoutWidth = currentUserSettings.layoutWidth ?? 1480
+	const layoutWidth = currentUserSettings.layoutWidth ?? 1500
 
 	async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
 		e.preventDefault()

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

@@ -0,0 +1,20 @@
+import { useEffect } from "react"
+import SmartTable from "@/components/routes/system/smart-table"
+import { ActiveAlerts } from "@/components/active-alerts"
+import { FooterRepoLink } from "@/components/footer-repo-link"
+
+export default function Smart() {
+	useEffect(() => {
+		document.title = `S.M.A.R.T. / Beszel`
+	}, [])
+
+	return (
+		<>
+			<div className="grid gap-4">
+				<ActiveAlerts />
+				<SmartTable />
+			</div>
+			<FooterRepoLink />
+		</>
+	)
+}

internal/site/src/index.css

@@ -34,7 +34,7 @@
 	--table-header: hsl(225, 6%, 97%);
 	--chart-saturation: 65%;
 	--chart-lightness: 50%;
-	--container: 1480px;
+	--container: 1500px;
 }
 
 .dark {
@@ -117,7 +117,6 @@
 }
 
 @layer utilities {
-
 	/* Fonts */
 	@supports (font-variation-settings: normal) {
 		:root {

internal/site/src/main.tsx

@@ -20,6 +20,7 @@ import * as systemsManager from "@/lib/systemsManager.ts"
 const LoginPage = lazy(() => import("@/components/login/login.tsx"))
 const Home = lazy(() => import("@/components/routes/home.tsx"))
 const Containers = lazy(() => import("@/components/routes/containers.tsx"))
+const Smart = lazy(() => import("@/components/routes/smart.tsx"))
 const SystemDetail = lazy(() => import("@/components/routes/system.tsx"))
 const CopyToClipboardDialog = lazy(() => import("@/components/copy-to-clipboard.tsx"))
 
@@ -62,6 +63,8 @@ const App = memo(() => {
 		return <SystemDetail id={page.params.id} />
 	} else if (page.route === "containers") {
 		return <Containers />
+	} else if (page.route === "smart") {
+		return <Smart />
 	} else if (page.route === "settings") {
 		return <Settings />
 	}
@@ -97,7 +100,7 @@ const Layout = () => {
 					<LoginPage />
 				</Suspense>
 			) : (
-				<div style={{"--container": `${userSettings.layoutWidth ?? 1480}px`} as React.CSSProperties}>
+				<div style={{ "--container": `${userSettings.layoutWidth ?? 1500}px` } as React.CSSProperties}>
 					<div className="container">
 						<Navbar />
 					</div>

internal/site/src/types.d.ts

@@ -377,6 +377,23 @@ export interface SmartAttribute {
 	wf?: string
 }
 
+export interface SmartDeviceRecord extends RecordModel {
+	id: string
+	system: string
+	name: string
+	model: string
+	state: string
+	capacity: number
+	temp: number
+	firmware: string
+	serial: string
+	type: string
+	hours: number
+	cycles: number
+	attributes: SmartAttribute[]
+	updated: string
+}
+
 export interface SystemdRecord extends RecordModel {
 	system: string
 	name: string