feat: live docker/database widgets over WebSocket (M2)

Adds a custom server.ts (http server + Next request handler + a
noServer:true WebSocket server on /ws) so the app can push live data
without polling. A CollectorScheduler runs one interval-based job per
docker/database widget instance, backed by dockerode against
/var/run/docker.sock, and reconciles jobs when config.yml changes.

Config hot-reload is now fully wired: chokidar watches config.yml/.env,
re-validates on change, and broadcasts config:update (or a
non-destructive config:error, keeping the last-good config) to every
connected browser. The client subscribes to per-widget topics over a
single shared WebSocket with exponential-backoff reconnect and
last-result caching for instant resubscribe.

Verified end-to-end against real throwaway containers (nginx, redis):
live CPU/mem/uptime/health streamed over the socket, interval changes
picked up without a server restart, and a broken config.yml correctly
falls back to the last-valid config instead of crashing the app.
This commit is contained in:
2026-08-17 14:01:53 +02:00
parent 80c2362ac2
commit 9890f964c5
17 changed files with 693 additions and 7 deletions
+8 -3
View File
@@ -1,14 +1,19 @@
"use client";
import type { Config } from "@/lib/config/schema";
import { useConfigSubscription } from "@/lib/ws/client";
import { GroupSection } from "./GroupSection";
export function Dashboard({ config }: { config: Config }) {
export function Dashboard({ config: initialConfig }: { config: Config }) {
const config = useConfigSubscription(initialConfig);
return (
<main className="mx-auto flex max-w-6xl flex-col gap-8 px-6 py-10">
<header className="flex items-center justify-between">
<h1 className="text-lg font-semibold text-fg">{config.settings.title}</h1>
</header>
{config.groups.map((group) => (
<GroupSection key={group.name} group={group} />
{config.groups.map((group, groupIndex) => (
<GroupSection key={group.name} group={group} groupIndex={groupIndex} />
))}
</main>
);
+4 -2
View File
@@ -1,7 +1,8 @@
import type { Group } from "@/lib/config/schema";
import { widgetId } from "@/lib/config/widgets";
import { widgetRegistry } from "@/components/widgets/registry";
export function GroupSection({ group }: { group: Group }) {
export function GroupSection({ group, groupIndex }: { group: Group; groupIndex: number }) {
return (
<section className="flex flex-col gap-3">
<h2 className="text-xs font-semibold tracking-wide text-fg-muted uppercase">
@@ -10,7 +11,8 @@ export function GroupSection({ group }: { group: Group }) {
<div className="grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-3">
{group.widgets.map((widget, index) => {
const Component = widgetRegistry[widget.type];
return <Component key={index} widget={widget as never} />;
const id = widgetId(groupIndex, index);
return <Component key={id} widget={widget as never} widgetId={id} />;
})}
</div>
</section>