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/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>
+	)
+}