expand container monitoring functionality (#928)

- Add new /containers route with virtualized table showing all containers across systems
- Implement container stats collection (CPU, memory, network usage) with health status tracking
- Add container logs and info API endpoints with syntax highlighting using Shiki
- Create detailed container views with fullscreen logs/info dialogs and refresh functionality
- Add container table to individual system pages with lazy loading
- Implement container record storage with automatic cleanup and historical averaging
- Update navbar with container navigation icon
- Extract reusable ActiveAlerts component from home page
- Add FooterRepoLink component for consistent GitHub/version display
- Enhance filtering and search capabilities across container tables

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

@@ -0,0 +1,85 @@
+import { alertInfo } from "@/lib/alerts"
+import { $alerts, $allSystemsById } from "@/lib/stores"
+import type { AlertRecord } from "@/types"
+import { Plural, Trans } from "@lingui/react/macro"
+import { useStore } from "@nanostores/react"
+import { getPagePath } from "@nanostores/router"
+import { useMemo } from "react"
+import { $router, Link } from "./router"
+import { Alert, AlertTitle, AlertDescription } from "./ui/alert"
+import { Card, CardHeader, CardTitle, CardContent } from "./ui/card"
+
+export const ActiveAlerts = () => {
+	const alerts = useStore($alerts)
+	const systems = useStore($allSystemsById)
+
+	const { activeAlerts, alertsKey } = useMemo(() => {
+		const activeAlerts: AlertRecord[] = []
+		// key to prevent re-rendering if alerts change but active alerts didn't
+		const alertsKey: string[] = []
+
+		for (const systemId of Object.keys(alerts)) {
+			for (const alert of alerts[systemId].values()) {
+				if (alert.triggered && alert.name in alertInfo) {
+					activeAlerts.push(alert)
+					alertsKey.push(`${alert.system}${alert.value}${alert.min}`)
+				}
+			}
+		}
+
+		return { activeAlerts, alertsKey }
+	}, [alerts])
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: alertsKey is inclusive
+	return useMemo(() => {
+		if (activeAlerts.length === 0) {
+			return null
+		}
+		return (
+			<Card>
+				<CardHeader className="pb-4 px-2 sm:px-6 max-sm:pt-5 max-sm:pb-1">
+					<div className="px-2 sm:px-1">
+						<CardTitle>
+							<Trans>Active Alerts</Trans>
+						</CardTitle>
+					</div>
+				</CardHeader>
+				<CardContent className="max-sm:p-2">
+					{activeAlerts.length > 0 && (
+						<div className="grid sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-3">
+							{activeAlerts.map((alert) => {
+								const info = alertInfo[alert.name as keyof typeof alertInfo]
+								return (
+									<Alert
+										key={alert.id}
+										className="hover:-translate-y-px duration-200 bg-transparent border-foreground/10 hover:shadow-md shadow-black/5"
+									>
+										<info.icon className="h-4 w-4" />
+										<AlertTitle>
+											{systems[alert.system]?.name} {info.name().toLowerCase().replace("cpu", "CPU")}
+										</AlertTitle>
+										<AlertDescription>
+											{alert.name === "Status" ? (
+												<Trans>Connection is down</Trans>
+											) : (
+												<Trans>
+													Exceeds {alert.value}
+													{info.unit} in last <Plural value={alert.min} one="# minute" other="# minutes" />
+												</Trans>
+											)}
+										</AlertDescription>
+										<Link
+											href={getPagePath($router, "system", { id: systems[alert.system]?.id })}
+											className="absolute inset-0 w-full h-full"
+											aria-label="View system"
+										></Link>
+									</Alert>
+								)
+							})}
+						</div>
+					)}
+				</CardContent>
+			</Card>
+		)
+	}, [alertsKey.join("")])
+}

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

@@ -5,6 +5,7 @@ import { DialogDescription } from "@radix-ui/react-dialog"
 import {
 	AlertOctagonIcon,
 	BookIcon,
+	ContainerIcon,
 	DatabaseBackupIcon,
 	FingerprintIcon,
 	LayoutDashboard,
@@ -80,7 +81,7 @@ export default memo(function CommandPalette({ open, setOpen }: { open: boolean;
 					)}
 					<CommandGroup heading={t`Pages / Settings`}>
 						<CommandItem
-							keywords={["home"]}
+							keywords={["home", t`All Systems`]}
 							onSelect={() => {
 								navigate(basePath)
 								setOpen(false)
@@ -94,6 +95,20 @@ export default memo(function CommandPalette({ open, setOpen }: { open: boolean;
 								<Trans>Page</Trans>
 							</CommandShortcut>
 						</CommandItem>
+						<CommandItem
+							onSelect={() => {
+								navigate(getPagePath($router, "containers"))
+								setOpen(false)
+							}}
+						>
+							<ContainerIcon className="me-2 size-4" />
+							<span>
+								<Trans>All Containers</Trans>
+							</span>
+							<CommandShortcut>
+								<Trans>Page</Trans>
+							</CommandShortcut>
+						</CommandItem>
 						<CommandItem
 							onSelect={() => {
 								navigate(getPagePath($router, "settings", { name: "general" }))

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

@@ -0,0 +1,152 @@
+import type { Column, ColumnDef } from "@tanstack/react-table"
+import { Button } from "@/components/ui/button"
+import { cn, decimalString, formatBytes, hourWithSeconds } from "@/lib/utils"
+import type { ContainerRecord } from "@/types"
+import { ContainerHealth, ContainerHealthLabels } from "@/lib/enums"
+import {
+	ArrowUpDownIcon,
+	ClockIcon,
+	ContainerIcon,
+	CpuIcon,
+	HashIcon,
+	MemoryStickIcon,
+	ServerIcon,
+	ShieldCheckIcon,
+} from "lucide-react"
+import { EthernetIcon, HourglassIcon } from "../ui/icons"
+import { Badge } from "../ui/badge"
+import { t } from "@lingui/core/macro"
+import { $allSystemsById } from "@/lib/stores"
+import { useStore } from "@nanostores/react"
+
+export const containerChartCols: ColumnDef<ContainerRecord>[] = [
+	{
+		id: "name",
+		sortingFn: (a, b) => a.original.name.localeCompare(b.original.name),
+		accessorFn: (record) => record.name,
+		header: ({ column }) => <HeaderButton column={column} name={t`Name`} Icon={ContainerIcon} />,
+		cell: ({ getValue }) => {
+			return <span className="ms-1.5 xl:w-45 block truncate">{getValue() as string}</span>
+		},
+	},
+	{
+		id: "system",
+		accessorFn: (record) => record.system,
+		sortingFn: (a, b) => {
+			const allSystems = $allSystemsById.get()
+			const systemNameA = allSystems[a.original.system]?.name ?? ""
+			const systemNameB = allSystems[b.original.system]?.name ?? ""
+			return systemNameA.localeCompare(systemNameB)
+		},
+		header: ({ column }) => <HeaderButton column={column} name={t`System`} Icon={ServerIcon} />,
+		cell: ({ getValue }) => {
+			const allSystems = useStore($allSystemsById)
+			return <span className="ms-1.5 xl:w-32 block truncate">{allSystems[getValue() as string]?.name ?? ""}</span>
+		},
+	},
+	{
+		id: "id",
+		accessorFn: (record) => record.id,
+		sortingFn: (a, b) => a.original.id.localeCompare(b.original.id),
+		header: ({ column }) => <HeaderButton column={column} name="ID" Icon={HashIcon} />,
+		cell: ({ getValue }) => {
+			return <span className="ms-1.5 me-3 font-mono">{getValue() as string}</span>
+		},
+	},
+	{
+		id: "cpu",
+		accessorFn: (record) => record.cpu,
+		invertSorting: true,
+		header: ({ column }) => <HeaderButton column={column} name={t`CPU`} Icon={CpuIcon} />,
+		cell: ({ getValue }) => {
+			const val = getValue() as number
+			return <span className="ms-1.5 tabular-nums">{`${decimalString(val, val >= 10 ? 1 : 2)}%`}</span>
+		},
+	},
+	{
+		id: "memory",
+		accessorFn: (record) => record.memory,
+		invertSorting: true,
+		header: ({ column }) => <HeaderButton column={column} name={t`Memory`} Icon={MemoryStickIcon} />,
+		cell: ({ getValue }) => {
+			const val = getValue() as number
+			const formatted = formatBytes(val, false, undefined, true)
+			return (
+				<span className="ms-1.5 tabular-nums">{`${decimalString(formatted.value, formatted.value >= 10 ? 1 : 2)} ${formatted.unit}`}</span>
+			)
+		},
+	},
+	{
+		id: "net",
+		accessorFn: (record) => record.net,
+		invertSorting: true,
+		header: ({ column }) => <HeaderButton column={column} name={t`Net`} Icon={EthernetIcon} />,
+		cell: ({ getValue }) => {
+			const val = getValue() as number
+			const formatted = formatBytes(val, true, undefined, true)
+			return (
+				<span className="ms-1.5 tabular-nums">{`${decimalString(formatted.value, formatted.value >= 10 ? 1 : 2)} ${formatted.unit}`}</span>
+			)
+		},
+	},
+	{
+		id: "health",
+		invertSorting: true,
+		accessorFn: (record) => record.health,
+		header: ({ column }) => <HeaderButton column={column} name={t`Health`} Icon={ShieldCheckIcon} />,
+		cell: ({ getValue }) => {
+			const healthValue = getValue() as number
+			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>
+					{healthStatus}
+				</Badge>
+			)
+		},
+	},
+	{
+		id: "status",
+		accessorFn: (record) => record.status,
+		invertSorting: true,
+		header: ({ column }) => <HeaderButton column={column} name={t`Status`} Icon={HourglassIcon} />,
+		cell: ({ getValue }) => {
+			return <span className="ms-1.5 w-25 block truncate">{getValue() as string}</span>
+		},
+	},
+	{
+		id: "updated",
+		invertSorting: true,
+		accessorFn: (record) => record.updated,
+		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>
+			)
+		},
+	},
+]
+
+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")}
+			variant="ghost"
+			onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+		>
+			{Icon && <Icon className="size-4" />}
+			{name}
+			<ArrowUpDownIcon className="size-4" />
+		</Button>
+	)
+}

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

@@ -0,0 +1,489 @@
+import { t } from "@lingui/core/macro"
+import { Trans } from "@lingui/react/macro"
+import {
+	type ColumnFiltersState,
+	flexRender,
+	getCoreRowModel,
+	getFilteredRowModel,
+	getSortedRowModel,
+	type Row,
+	type SortingState,
+	type Table as TableType,
+	useReactTable,
+	type VisibilityState,
+} from "@tanstack/react-table"
+import { useVirtualizer, type VirtualItem } from "@tanstack/react-virtual"
+import { memo, RefObject, useEffect, useRef, useState } from "react"
+import { Input } from "@/components/ui/input"
+import { TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { pb } from "@/lib/api"
+import type { ContainerRecord } from "@/types"
+import { containerChartCols } from "@/components/containers-table/containers-table-columns"
+import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { type ContainerHealth, ContainerHealthLabels } from "@/lib/enums"
+import { cn, useBrowserStorage } from "@/lib/utils"
+import { Sheet, SheetTitle, SheetHeader, SheetContent, SheetDescription } from "../ui/sheet"
+import { Dialog, DialogContent, DialogTitle } from "../ui/dialog"
+import { Button } from "@/components/ui/button"
+import { $allSystemsById } from "@/lib/stores"
+import { MaximizeIcon, RefreshCwIcon } from "lucide-react"
+import { Separator } from "../ui/separator"
+import { Link } from "../router"
+import { listenKeys } from "nanostores"
+
+const syntaxTheme = "github-dark-dimmed"
+
+export default function ContainersTable({ systemId }: { systemId?: string }) {
+	const [data, setData] = useState<ContainerRecord[]>([])
+	const [sorting, setSorting] = useBrowserStorage<SortingState>(
+		`sort-c-${systemId ? 1 : 0}`,
+		[{ id: systemId ? "name" : "system", desc: false }],
+		sessionStorage
+	)
+	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+	const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
+	const [rowSelection, setRowSelection] = useState({})
+	const [globalFilter, setGlobalFilter] = useState("")
+
+	useEffect(() => {
+		const pbOptions = {
+			fields: "id,name,cpu,memory,net,health,status,system,updated",
+		}
+
+		const fetchData = (lastXMs: number) => {
+			let filter: string
+			if (systemId) {
+				filter = pb.filter("system={:system}", { system: systemId })
+			} else {
+				filter = pb.filter("updated > {:updated}", { updated: Date.now() - lastXMs })
+			}
+			pb.collection<ContainerRecord>("containers")
+				.getList(0, 2000, {
+					...pbOptions,
+					filter,
+				})
+				.then(({ items }) => setData((curItems) => {
+					const containerIds = new Set(items.map(item => item.id))
+					const now = Date.now()
+					for (const item of curItems) {
+						if (!containerIds.has(item.id) && now - item.updated < 70_000) {
+							items.push(item)
+						}
+					}
+					return items
+				}))
+		}
+
+		// initial load
+		fetchData(70_000)
+
+		// if no systemId, poll every 10 seconds
+		if (!systemId) {
+			// poll every 10 seconds
+			const intervalId = setInterval(() => fetchData(10_500), 10_000)
+			// clear interval on unmount
+			return () => clearInterval(intervalId)
+		}
+
+		// if systemId, fetch containers after the system is updated
+		return listenKeys($allSystemsById, [systemId], (_newSystems) => {
+			setTimeout(() => fetchData(1000), 100)
+		})
+	}, [])
+
+	const table = useReactTable({
+		data,
+		columns: containerChartCols.filter(col => systemId ? col.id !== "system" : true),
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		onSortingChange: setSorting,
+		onColumnFiltersChange: setColumnFilters,
+		onColumnVisibilityChange: setColumnVisibility,
+		onRowSelectionChange: setRowSelection,
+		defaultColumn: {
+			sortUndefined: "last",
+			size: 100,
+			minSize: 0,
+		},
+		state: {
+			sorting,
+			columnFilters,
+			columnVisibility,
+			rowSelection,
+			globalFilter,
+		},
+		onGlobalFilterChange: setGlobalFilter,
+		globalFilterFn: (row, _columnId, filterValue) => {
+			const container = row.original
+			const systemName = $allSystemsById.get()[container.system]?.name ?? ""
+			const id = container.id ?? ""
+			const name = container.name ?? ""
+			const status = container.status ?? ""
+			const healthLabel = ContainerHealthLabels[container.health as ContainerHealth] ?? ""
+			const searchString = `${systemName} ${id} ${name} ${healthLabel} ${status}`.toLowerCase()
+
+			return (filterValue as string)
+				.toLowerCase()
+				.split(" ")
+				.every((term) => searchString.includes(term))
+		},
+	})
+
+	const rows = table.getRowModel().rows
+	const visibleColumns = table.getVisibleLeafColumns()
+
+	return (
+		<Card className="p-6 @container w-full">
+			<CardHeader className="p-0 mb-4">
+				<div className="grid md:flex gap-5 w-full items-end">
+					<div className="px-2 sm:px-1">
+						<CardTitle className="mb-2">
+							<Trans>All Containers</Trans>
+						</CardTitle>
+						<CardDescription className="flex">
+							<Trans>Click on a container to view more information.</Trans>
+						</CardDescription>
+					</div>
+					<Input
+						placeholder={t`Filter...`}
+						value={globalFilter}
+						onChange={(e) => setGlobalFilter(e.target.value)}
+						className="ms-auto px-4 w-full max-w-full md:w-64"
+					/>
+				</div>
+			</CardHeader>
+			<div className="rounded-md">
+				<AllContainersTable table={table} rows={rows} colLength={visibleColumns.length} />
+			</div>
+		</Card>
+	)
+}
+
+const AllContainersTable = memo(
+	function AllContainersTable({ table, rows, colLength }: { table: TableType<ContainerRecord>; rows: Row<ContainerRecord>[]; colLength: number }) {
+		// The virtualizer will need a reference to the scrollable container element
+		const scrollRef = useRef<HTMLDivElement>(null)
+		const activeContainer = useRef<ContainerRecord | null>(null)
+		const [sheetOpen, setSheetOpen] = useState(false)
+		const openSheet = (container: ContainerRecord) => {
+			activeContainer.current = container
+			setSheetOpen(true)
+		}
+
+		const virtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({
+			count: rows.length,
+			estimateSize: () => 54,
+			getScrollElement: () => scrollRef.current,
+			overscan: 5,
+		})
+		const virtualRows = virtualizer.getVirtualItems()
+
+		const paddingTop = Math.max(0, virtualRows[0]?.start ?? 0 - virtualizer.options.scrollMargin)
+		const paddingBottom = Math.max(0, virtualizer.getTotalSize() - (virtualRows[virtualRows.length - 1]?.end ?? 0))
+
+		return (
+			<div
+				className={cn(
+					"h-min max-h-[calc(100dvh-17rem)] max-w-full relative overflow-auto border rounded-md",
+					// don't set min height if there are less than 2 rows, do set if we need to display the empty state
+					(!rows.length || rows.length > 2) && "min-h-50"
+				)}
+				ref={scrollRef}
+			>
+				{/* add header height to table size */}
+				<div style={{ height: `${virtualizer.getTotalSize() + 50}px`, paddingTop, paddingBottom }}>
+					<table className="text-sm w-full h-full">
+						<ContainersTableHead table={table} />
+						<TableBody>
+							{rows.length ? (
+								virtualRows.map((virtualRow) => {
+									const row = rows[virtualRow.index]
+									return (
+										<ContainerTableRow
+											key={row.id}
+											row={row}
+											virtualRow={virtualRow}
+											openSheet={openSheet}
+										/>
+									)
+								})
+							) : (
+								<TableRow>
+									<TableCell colSpan={colLength} className="h-37 text-center pointer-events-none">
+										<Trans>No results.</Trans>
+									</TableCell>
+								</TableRow>
+							)}
+						</TableBody>
+					</table>
+				</div>
+				<ContainerSheet sheetOpen={sheetOpen} setSheetOpen={setSheetOpen} activeContainer={activeContainer} />
+			</div>
+		)
+	}
+)
+
+
+async function getLogsHtml(container: ContainerRecord): Promise<string> {
+	try {
+		const [{ highlighter }, logsHtml] = await Promise.all([import('@/lib/shiki'), pb.send<{ logs: string }>("/api/beszel/containers/logs", {
+			system: container.system,
+			container: container.id,
+		})])
+		return highlighter.codeToHtml(logsHtml.logs, { lang: "log", theme: syntaxTheme })
+	} catch (error) {
+		console.error(error)
+		return ""
+	}
+}
+
+async function getInfoHtml(container: ContainerRecord): Promise<string> {
+	try {
+		let [{ highlighter }, { info }] = await Promise.all([import('@/lib/shiki'), pb.send<{ info: string }>("/api/beszel/containers/info", {
+			system: container.system,
+			container: container.id,
+		})])
+		try {
+			info = JSON.stringify(JSON.parse(info), null, 2)
+		} catch (_) { }
+		return highlighter.codeToHtml(info, { lang: "json", theme: syntaxTheme })
+	} catch (error) {
+		console.error(error)
+		return ""
+	}
+}
+
+function ContainerSheet({ sheetOpen, setSheetOpen, activeContainer }: { sheetOpen: boolean, setSheetOpen: (open: boolean) => void, activeContainer: RefObject<ContainerRecord | null> }) {
+	const container = activeContainer.current
+	if (!container) return null
+
+	const [logsDisplay, setLogsDisplay] = useState<string>("")
+	const [infoDisplay, setInfoDisplay] = useState<string>("")
+	const [logsFullscreenOpen, setLogsFullscreenOpen] = useState<boolean>(false)
+	const [infoFullscreenOpen, setInfoFullscreenOpen] = useState<boolean>(false)
+	const [isRefreshingLogs, setIsRefreshingLogs] = useState<boolean>(false)
+	const logsContainerRef = useRef<HTMLDivElement>(null)
+
+	function scrollLogsToBottom() {
+		if (logsContainerRef.current) {
+			logsContainerRef.current.scrollTo({ top: logsContainerRef.current.scrollHeight })
+		}
+	}
+
+	const refreshLogs = async () => {
+		setIsRefreshingLogs(true)
+		const startTime = Date.now()
+
+		try {
+			const logsHtml = await getLogsHtml(container)
+			setLogsDisplay(logsHtml)
+			setTimeout(scrollLogsToBottom, 20)
+		} catch (error) {
+			console.error(error)
+		} finally {
+			// Ensure minimum spin duration of 800ms
+			const elapsed = Date.now() - startTime
+			const remaining = Math.max(0, 500 - elapsed)
+			setTimeout(() => {
+				setIsRefreshingLogs(false)
+			}, remaining)
+		}
+	}
+
+	useEffect(() => {
+		setLogsDisplay("")
+		setInfoDisplay("");
+		if (!container) return
+		(async () => {
+			const [logsHtml, infoHtml] = await Promise.all([getLogsHtml(container), getInfoHtml(container)])
+			setLogsDisplay(logsHtml)
+			setInfoDisplay(infoHtml)
+			setTimeout(scrollLogsToBottom, 20)
+		})()
+	}, [container])
+
+	return (
+		<>
+			<LogsFullscreenDialog
+				open={logsFullscreenOpen}
+				onOpenChange={setLogsFullscreenOpen}
+				logsDisplay={logsDisplay}
+				containerName={container.name}
+				onRefresh={refreshLogs}
+				isRefreshing={isRefreshingLogs}
+			/>
+			<InfoFullscreenDialog
+				open={infoFullscreenOpen}
+				onOpenChange={setInfoFullscreenOpen}
+				infoDisplay={infoDisplay}
+				containerName={container.name}
+			/>
+			<Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
+				<SheetContent className="w-full sm:max-w-220 p-2">
+					<SheetHeader>
+						<SheetTitle>{container.name}</SheetTitle>
+						<SheetDescription className="flex items-center gap-2">
+							<Link className="hover:underline" href={`/system/${container.system}`}>{$allSystemsById.get()[container.system]?.name ?? ""}</Link>
+							<Separator orientation="vertical" className="h-2.5 bg-muted-foreground opacity-70" />
+							{container.status}
+							<Separator orientation="vertical" className="h-2.5 bg-muted-foreground opacity-70" />
+							{container.id}
+							<Separator orientation="vertical" className="h-2.5 bg-muted-foreground opacity-70" />
+							{ContainerHealthLabels[container.health as ContainerHealth]}
+						</SheetDescription>
+					</SheetHeader>
+					<div className="px-3 pb-3 -mt-4 flex flex-col gap-3 h-full items-start">
+						<div className="flex items-center w-full">
+							<h3>{t`Logs`}</h3>
+							<Button
+								variant="ghost"
+								size="sm"
+								onClick={refreshLogs}
+								className="h-8 w-8 p-0 ms-auto"
+								disabled={isRefreshingLogs}
+							>
+								<RefreshCwIcon
+									className={`size-4 transition-transform duration-300 ${isRefreshingLogs ? 'animate-spin' : ''}`}
+								/>
+							</Button>
+							<Button
+								variant="ghost"
+								size="sm"
+								onClick={() => setLogsFullscreenOpen(true)}
+								className="h-8 w-8 p-0"
+							>
+								<MaximizeIcon className="size-4" />
+							</Button>
+						</div>
+						<div ref={logsContainerRef} className={cn("max-h-[calc(50dvh-10rem)] w-full overflow-auto p-3 rounded-md bg-gh-dark text-sm", !logsDisplay && ["animate-pulse", "h-full"])}>
+							<div dangerouslySetInnerHTML={{ __html: logsDisplay }} />
+						</div>
+						<div className="flex items-center w-full">
+							<h3>{t`Detail`}</h3>
+							<Button
+								variant="ghost"
+								size="sm"
+								onClick={() => setInfoFullscreenOpen(true)}
+								className="h-8 w-8 p-0 ms-auto"
+							>
+								<MaximizeIcon className="size-4" />
+							</Button>
+						</div>
+						<div className={cn("grow h-[calc(50dvh-2rem)] w-full overflow-auto p-3 rounded-md bg-gh-dark text-sm", !infoDisplay && "animate-pulse")}>
+							<div dangerouslySetInnerHTML={{ __html: infoDisplay }} />
+						</div>
+
+					</div>
+				</SheetContent>
+			</Sheet>
+		</>
+
+	)
+}
+
+function ContainersTableHead({ table }: { table: TableType<ContainerRecord> }) {
+	return (
+		<TableHeader className="sticky top-0 z-50 w-full border-b-2">
+			{table.getHeaderGroups().map((headerGroup) => (
+				<tr key={headerGroup.id}>
+					{headerGroup.headers.map((header) => {
+						return (
+							<TableHead className="px-2" key={header.id}>
+								{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+							</TableHead>
+						)
+					})}
+				</tr>
+			))}
+		</TableHeader>
+	)
+}
+
+const ContainerTableRow = memo(
+	function ContainerTableRow({
+		row,
+		virtualRow,
+		openSheet,
+	}: {
+		row: Row<ContainerRecord>
+		virtualRow: VirtualItem
+		openSheet: (container: ContainerRecord) => void
+	}) {
+		return (
+			<TableRow
+				data-state={row.getIsSelected() && "selected"}
+				className="cursor-pointer transition-opacity"
+				onClick={() => openSheet(row.original)}
+			>
+				{row.getVisibleCells().map((cell) => (
+					<TableCell
+						key={cell.id}
+						style={{
+							height: virtualRow.size,
+						}}
+					>
+						{flexRender(cell.column.columnDef.cell, cell.getContext())}
+					</TableCell>
+				))}
+			</TableRow>
+		)
+	}
+)
+
+function LogsFullscreenDialog({ open, onOpenChange, logsDisplay, containerName, onRefresh, isRefreshing }: { open: boolean, onOpenChange: (open: boolean) => void, logsDisplay: string, containerName: string, onRefresh: () => void | Promise<void>, isRefreshing: boolean }) {
+	const outerContainerRef = useRef<HTMLDivElement>(null)
+
+	useEffect(() => {
+		if (open && logsDisplay) {
+			// Scroll the outer container to bottom
+			const scrollToBottom = () => {
+				if (outerContainerRef.current) {
+					outerContainerRef.current.scrollTop = outerContainerRef.current.scrollHeight
+				}
+			}
+			setTimeout(scrollToBottom, 50)
+		}
+	}, [open, logsDisplay])
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="w-[calc(100vw-20px)] h-[calc(100dvh-20px)] max-w-none p-0 bg-gh-dark border-0 text-white">
+				<DialogTitle className="sr-only">{containerName} logs</DialogTitle>
+				<div ref={outerContainerRef} className="h-full overflow-auto">
+					<div className="h-full w-full px-3 leading-relaxed rounded-md bg-gh-dark text-sm">
+						<div className="py-3" dangerouslySetInnerHTML={{ __html: logsDisplay }} />
+					</div>
+				</div>
+				<button
+					onClick={() => {
+						void onRefresh()
+					}}
+					className="absolute top-3 right-11 opacity-60 hover:opacity-100 p-1"
+					disabled={isRefreshing}
+					title={t`Refresh logs`}
+					aria-label={t`Refresh logs`}
+				>
+					<RefreshCwIcon
+						className={`size-4 transition-transform duration-300 ${isRefreshing ? 'animate-spin' : ''}`}
+					/>
+				</button>
+			</DialogContent>
+		</Dialog>
+	)
+}
+
+function InfoFullscreenDialog({ open, onOpenChange, infoDisplay, containerName }: { open: boolean, onOpenChange: (open: boolean) => void, infoDisplay: string, containerName: string }) {
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="w-[calc(100vw-20px)] h-[calc(100dvh-20px)] max-w-none p-0 bg-gh-dark border-0 text-white">
+				<DialogTitle className="sr-only">{containerName} info</DialogTitle>
+				<div className="flex-1 overflow-auto">
+					<div className="h-full w-full overflow-auto p-3 rounded-md bg-gh-dark text-sm leading-relaxed">
+						<div dangerouslySetInnerHTML={{ __html: infoDisplay }} />
+					</div>
+				</div>
+			</DialogContent>
+		</Dialog>
+	)
+}

internal/site/src/components/footer-repo-link.tsx

@@ -0,0 +1,26 @@
+import { GithubIcon } from "lucide-react"
+import { Separator } from "./ui/separator"
+
+export function FooterRepoLink() {
+	return (
+		<div className="flex gap-1.5 justify-end items-center pe-3 sm:pe-6 mt-3.5 mb-4 text-xs opacity-80">
+			<a
+				href="https://github.com/henrygd/beszel"
+				target="_blank"
+				className="flex items-center gap-0.5 text-muted-foreground hover:text-foreground duration-75"
+				rel="noopener"
+			>
+				<GithubIcon className="h-3 w-3" /> GitHub
+			</a>
+			<Separator orientation="vertical" className="h-2.5 bg-muted-foreground opacity-70" />
+			<a
+				href="https://github.com/henrygd/beszel/releases"
+				target="_blank"
+				className="text-muted-foreground hover:text-foreground duration-75"
+				rel="noopener"
+			>
+				Beszel {globalThis.BESZEL.HUB_VERSION}
+			</a>
+		</div>
+	)
+}

internal/site/src/components/navbar.tsx

@@ -1,6 +1,7 @@
 import { Trans } from "@lingui/react/macro"
 import { getPagePath } from "@nanostores/router"
 import {
+	ContainerIcon,
 	DatabaseBackupIcon,
 	LogOutIcon,
 	LogsIcon,
@@ -47,6 +48,13 @@ export default function Navbar() {
 			<SearchButton />
 
 			<div className="flex items-center ms-auto" onMouseEnter={() => import("@/components/routes/settings/general")}>
+				<Link
+					href={getPagePath($router, "containers")}
+					className={cn("", buttonVariants({ variant: "ghost", size: "icon" }))}
+					aria-label="Containers"
+				>
+					<ContainerIcon className="h-[1.2rem] w-[1.2rem]" strokeWidth={1.5} />
+				</Link>
 				<LangToggle />
 				<ModeToggle />
 				<Link

internal/site/src/components/router.tsx

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

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

@@ -0,0 +1,26 @@
+import { useLingui } from "@lingui/react/macro"
+import { memo, useEffect, useMemo } from "react"
+import ContainersTable from "@/components/containers-table/containers-table"
+import { ActiveAlerts } from "@/components/active-alerts"
+import { FooterRepoLink } from "@/components/footer-repo-link"
+
+export default memo(() => {
+	const { t } = useLingui()
+
+	useEffect(() => {
+		document.title = `${t`All Containers`} / Beszel`
+	}, [t])
+
+	return useMemo(
+		() => (
+			<>
+				<div className="grid gap-4">
+					<ActiveAlerts />
+					<ContainersTable />
+				</div>
+				<FooterRepoLink />
+			</>
+		),
+		[]
+	)
+})

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

@@ -1,128 +1,28 @@
-import { Plural, Trans, useLingui } from "@lingui/react/macro"
-import { useStore } from "@nanostores/react"
-import { getPagePath } from "@nanostores/router"
-import { GithubIcon } from "lucide-react"
+import { useLingui } from "@lingui/react/macro"
 import { memo, Suspense, useEffect, useMemo } from "react"
-import { $router, Link } from "@/components/router"
 import SystemsTable from "@/components/systems-table/systems-table"
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Separator } from "@/components/ui/separator"
-import { alertInfo } from "@/lib/alerts"
-import { $alerts, $allSystemsById } from "@/lib/stores"
-import type { AlertRecord } from "@/types"
+import { ActiveAlerts } from "@/components/active-alerts"
+import { FooterRepoLink } from "@/components/footer-repo-link"
 
 export default memo(() => {
 	const { t } = useLingui()
 
 	useEffect(() => {
-		document.title = `${t`Dashboard`} / Beszel`
+		document.title = `${t`All Systems`} / Beszel`
 	}, [t])
 
 	return useMemo(
 		() => (
 			<>
-				<ActiveAlerts />
-				<Suspense>
-					<SystemsTable />
-				</Suspense>
-
-				<div className="flex gap-1.5 justify-end items-center pe-3 sm:pe-6 mt-3.5 mb-4 text-xs opacity-80">
-					<a
-						href="https://github.com/henrygd/beszel"
-						target="_blank"
-						className="flex items-center gap-0.5 text-muted-foreground hover:text-foreground duration-75"
-						rel="noopener"
-					>
-						<GithubIcon className="h-3 w-3" /> GitHub
-					</a>
-					<Separator orientation="vertical" className="h-2.5 bg-muted-foreground opacity-70" />
-					<a
-						href="https://github.com/henrygd/beszel/releases"
-						target="_blank"
-						className="text-muted-foreground hover:text-foreground duration-75"
-						rel="noopener"
-					>
-						Beszel {globalThis.BESZEL.HUB_VERSION}
-					</a>
+				<div className="grid gap-4">
+					<ActiveAlerts />
+					<Suspense>
+						<SystemsTable />
+					</Suspense>
 				</div>
+				<FooterRepoLink />
 			</>
 		),
 		[]
 	)
 })
-
-const ActiveAlerts = () => {
-	const alerts = useStore($alerts)
-	const systems = useStore($allSystemsById)
-
-	const { activeAlerts, alertsKey } = useMemo(() => {
-		const activeAlerts: AlertRecord[] = []
-		// key to prevent re-rendering if alerts change but active alerts didn't
-		const alertsKey: string[] = []
-
-		for (const systemId of Object.keys(alerts)) {
-			for (const alert of alerts[systemId].values()) {
-				if (alert.triggered && alert.name in alertInfo) {
-					activeAlerts.push(alert)
-					alertsKey.push(`${alert.system}${alert.value}${alert.min}`)
-				}
-			}
-		}
-
-		return { activeAlerts, alertsKey }
-	}, [alerts])
-
-	// biome-ignore lint/correctness/useExhaustiveDependencies: alertsKey is inclusive
-	return useMemo(() => {
-		if (activeAlerts.length === 0) {
-			return null
-		}
-		return (
-			<Card className="mb-4">
-				<CardHeader className="pb-4 px-2 sm:px-6 max-sm:pt-5 max-sm:pb-1">
-					<div className="px-2 sm:px-1">
-						<CardTitle>
-							<Trans>Active Alerts</Trans>
-						</CardTitle>
-					</div>
-				</CardHeader>
-				<CardContent className="max-sm:p-2">
-					{activeAlerts.length > 0 && (
-						<div className="grid sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-3">
-							{activeAlerts.map((alert) => {
-								const info = alertInfo[alert.name as keyof typeof alertInfo]
-								return (
-									<Alert
-										key={alert.id}
-										className="hover:-translate-y-px duration-200 bg-transparent border-foreground/10 hover:shadow-md shadow-black/5"
-									>
-										<info.icon className="h-4 w-4" />
-										<AlertTitle>
-											{systems[alert.system]?.name} {info.name().toLowerCase().replace("cpu", "CPU")}
-										</AlertTitle>
-										<AlertDescription>
-											{alert.name === "Status" ? (
-												<Trans>Connection is down</Trans>
-											) : (
-												<Trans>
-													Exceeds {alert.value}
-													{info.unit} in last <Plural value={alert.min} one="# minute" other="# minutes" />
-												</Trans>
-											)}
-										</AlertDescription>
-										<Link
-											href={getPagePath($router, "system", { id: systems[alert.system]?.id })}
-											className="absolute inset-0 w-full h-full"
-											aria-label="View system"
-										></Link>
-									</Alert>
-								)
-							})}
-						</div>
-					)}
-				</CardContent>
-			</Card>
-		)
-	}, [alertsKey.join("")])
-}

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

@@ -13,7 +13,7 @@ import {
 	XIcon,
 } from "lucide-react"
 import { subscribeKeys } from "nanostores"
-import React, { type JSX, memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
+import React, { type JSX, lazy, memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
 import AreaChartDefault, { type DataPoint } from "@/components/charts/area-chart"
 import ContainerChart from "@/components/charts/container-chart"
 import DiskChart from "@/components/charts/disk-chart"
@@ -73,6 +73,8 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/
 import NetworkSheet from "./system/network-sheet"
 import LineChartDefault from "../charts/line-chart"
 
+
+
 type ChartTimeData = {
 	time: number
 	data: {
@@ -214,7 +216,7 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 	// subscribe to realtime metrics if chart time is 1m
 	// biome-ignore lint/correctness/useExhaustiveDependencies: not necessary
 	useEffect(() => {
-		let unsub = () => {}
+		let unsub = () => { }
 		if (!system.id || chartTime !== "1m") {
 			return
 		}
@@ -987,6 +989,9 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 						})}
 					</div>
 				)}
+				{id && containerData.length > 0 && (
+					<LazyContainersTable systemId={id} />
+				)}
 			</div>
 
 			{/* add space for tooltip if more than 12 containers */}
@@ -1116,3 +1121,14 @@ export function ChartCard({
 		</Card>
 	)
 }
+
+const ContainersTable = lazy(() => import("../containers-table/containers-table"))
+
+function LazyContainersTable({ systemId }: { systemId: string }) {
+	const { isIntersecting, ref } = useIntersectionObserver()
+	return (
+		<div ref={ref}>
+			{isIntersecting && <ContainersTable systemId={systemId} />}
+		</div>
+	)
+}

internal/site/src/index.css

@@ -82,6 +82,8 @@
 	--color-green-900: hsl(140 54% 12%);
 	--color-green-950: hsl(140 57% 6%);
 
+	--color-gh-dark: #22272e;
+
 	--color-background: var(--background);
 	--color-foreground: var(--foreground);
 	--color-card: var(--card);
@@ -110,12 +112,14 @@
 }
 
 @layer utilities {
+
 	/* Fonts */
 	@supports (font-variation-settings: normal) {
 		:root {
 			font-family: Inter, InterVariable, sans-serif;
 		}
 	}
+
 	@font-face {
 		font-family: InterVariable;
 		font-style: normal;
@@ -130,9 +134,11 @@
 		@apply border-border outline-ring/50;
 		overflow-anchor: none;
 	}
+
 	body {
 		@apply bg-background text-foreground;
 	}
+
 	button {
 		cursor: pointer;
 	}
@@ -149,6 +155,7 @@
 @utility ns-dialog {
 	/* New system dialog width */
 	min-width: 30.3rem;
+
 	:where(:lang(zh), :lang(zh-CN), :lang(ko)) & {
 		min-width: 27.9rem;
 	}
@@ -161,4 +168,4 @@
 
 .recharts-yAxis {
 	@apply tabular-nums;
-}
+}

internal/site/src/lib/enums.ts

@@ -54,6 +54,16 @@ export enum HourFormat {
 	"24h" = "24h",
 }
 
+/** Container health status */
+export enum ContainerHealth {
+	None,
+	Starting,
+	Healthy,
+	Unhealthy,
+}
+
+export const ContainerHealthLabels = ["None", "Starting", "Healthy", "Unhealthy"] as const
+
 /** Connection type */
 export enum ConnectionType {
 	SSH = 1,

internal/site/src/lib/shiki.ts

@@ -0,0 +1,28 @@
+// https://shiki.style/guide/bundles#fine-grained-bundle
+
+// directly import the theme and language modules, only the ones you imported will be bundled.
+import githubDarkDimmed from '@shikijs/themes/github-dark-dimmed'
+
+// `shiki/core` entry does not include any themes or languages or the wasm binary.
+import { createHighlighterCore } from 'shiki/core'
+import { createOnigurumaEngine } from 'shiki/engine/oniguruma'
+
+export const highlighter = await createHighlighterCore({
+   themes: [
+      // instead of strings, you need to pass the imported module
+      githubDarkDimmed,
+      // or a dynamic import if you want to do chunk splitting
+      //  import('@shikijs/themes/material-theme-ocean')
+   ],
+   langs: [
+      import('@shikijs/langs/log'),
+      import('@shikijs/langs/json'),
+      // shiki will try to interop the module with the default export
+      // () => import('@shikijs/langs/css'),
+   ],
+   // `shiki/wasm` contains the wasm binary inlined as base64 string.
+   engine: createOnigurumaEngine(import('shiki/wasm'))
+})
+
+// optionally, load themes and languages after creation
+// await highlighter.loadTheme(import('@shikijs/themes/vitesse-light'))

internal/site/src/main.tsx

@@ -19,6 +19,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 SystemDetail = lazy(() => import("@/components/routes/system.tsx"))
 const CopyToClipboardDialog = lazy(() => import("@/components/copy-to-clipboard.tsx"))
 
@@ -59,6 +60,8 @@ const App = memo(() => {
 		return <Home />
 	} else if (page.route === "system") {
 		return <SystemDetail id={page.params.id} />
+	} else if (page.route === "containers") {
+		return <Containers />
 	} else if (page.route === "settings") {
 		return <Settings />
 	}

internal/site/src/types.d.ts

@@ -236,6 +236,18 @@ export interface AlertsHistoryRecord extends RecordModel {
 	resolved?: string | null
 }
 
+export interface ContainerRecord extends RecordModel {
+	id: string
+	system: string
+	name: string
+	cpu: number
+	memory: number
+	net: number
+	health: number
+	status: string
+	updated: number
+}
+
 export type ChartTimes = "1m" | "1h" | "12h" | "24h" | "1w" | "30d"
 
 export interface ChartTimeData {