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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user