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
2026-03-23 14:06:18 +01:00 · 2025-10-18 16:32:16 -04:00
parent 0d464787f2
commit 5360f762e4
33 changed files with 1558 additions and 209 deletions
--- a/internal/site/src/components/containers-table/containers-table-columns.tsx
+++ b/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>
+	)
+}