New maglev-frontend component; promote LB sync events to INFO
Introduces maglev-frontend, a responsive, real-time web dashboard for one
or more running maglevd instances. Source lives at cmd/frontend/; the
built binary is maglev-frontend. It is a single Go process with the
SolidJS SPA embedded via //go:embed — no runtime file dependencies.
Architecture
- One persistent gRPC connection per configured maglevd (-server A,B,C).
Each connection runs three background loops: a WatchEvents stream
subscribed at log_level=debug for live events, a 30s refresh loop as
a safety net for drift, and a 5s health loop that surfaces connection
drops quickly.
- In-process pub/sub broker with a 30s / 2000-event replay ring using
<epoch>-<seq> monotonic IDs. Short browser reconnects (nginx idle,
wifi flap, laptop wake) silently replay buffered events via the
EventSource Last-Event-ID header; longer outages or frontend restarts
fall through to a "resync" event that triggers a full state refetch.
- HTTP surface: /view/ (SPA), /view/api/state, /view/api/state/{name},
/view/api/maglevds, /view/api/version, /view/api/events (SSE),
/healthz, and an /admin/* placeholder returning 501 for a future
basic-auth mutation surface.
- SSE handler follows the full operational checklist: retry hint, 15s
: ping heartbeat, Flush after every write, r.Context().Done() teardown,
X-Accel-Buffering: no, and no gzip.
SolidJS SPA (cmd/frontend/web/, Vite + TypeScript)
- solid-js/store for a reactive per-maglevd state tree; reducers apply
backend transitions, maglevd-status flips, and resync refetches.
- Scope selector tabs for multi-maglevd support, per-maglevd frontend
cards with pool tables showing state, configured weight, effective
weight, and last-transition age.
- ProbeHeartbeat component turns a middle-dot into ❤️ on probe-start and
back on probe-done, driven by real log events; fixed-size wrapper so
the emoji swap doesn't jiggle the row.
- Flash wrapper animates any primitive on change (1s yellow fade via
Web Animations API, skipped on first mount). Wired into the state
badge, configured weight, and effective weight columns.
- DebugPanel: chronological rolling event tail with tail-style auto-
scroll, pause/resume, and scope/firehose filter. Syntactic highlight
for vpp-lb-sync-* events with fixed-order attribute formatting.
- Live effective_weight updates: vpp-lb-sync-as-added/removed/weight-
updated log events are routed through a reducer that walks the
snapshot's pool rows and sets effective_weight on every match
without waiting for the 30s refresh.
- Header shows build version + commit with build date in a tooltip,
fetched once from /view/api/version on mount.
- Prettier wired in as the web-side fixstyle; make fixstyle now tidies
both Go and web in one shot via a new fixstyle-web target.
Per-mutation VPP LB sync logging
- Promotes the addVIP/delVIP/addAS/delAS/setASWeight helpers from
slog.Debug to slog.Info and renames them from vpp-lbsync-* to
vpp-lb-sync-{vip-added,vip-removed,as-added,as-removed,as-weight-
updated}. Matching rename for vpp-lb-sync-start / -done / -error /
-vip-recreate. The Prometheus metric name (maglev_vpp_lbsync_total)
is left alone to preserve dashboards.
- setASWeight now takes the prior weight so the event can emit
from=X to=Y and the UI can show the delta.
- The vip field in every event is the bare address (no /32 or /128
mask), matching the CLI output style.
- Any listener on the gRPC WatchEvents stream — CLI watch events or
maglev-frontend — now sees every VIP/AS dataplane change in real
time without needing to raise the log level.
Build and tooling
- Makefile: maglev-frontend added to BINARIES; build / build-amd64 /
build-arm64 emit the binary alongside maglevd and maglevc. A new
maglev-frontend-web target rebuilds the SolidJS bundle via npm.
- web/dist/ is tracked so a bare `go build` keeps working for Go-only
contributors and CI.
- .gitignore skips cmd/frontend/web/node_modules/.
Stability fixes
- maglevd's WatchEvents synthetic replay events (from==to, at_unix_ns=0)
were corrupting the frontend's LastTransition cache with at=0,
rendering as "20555d ago" in the browser. Client now skips synthetic
events: the cache comes from refreshAll and doesn't need them.
- Frontends, Backends, and HealthChecks are now served in the order
returned by the corresponding List* RPC instead of Go map iteration
order, so reloads and refreshes keep the SPA stable.
This commit is contained in:
23
cmd/frontend/web/src/api/rest.ts
Normal file
23
cmd/frontend/web/src/api/rest.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import type { MaglevdInfo, StateSnapshot, VersionInfo } from "../types";
|
||||
|
||||
async function getJSON<T>(path: string): Promise<T> {
|
||||
const r = await fetch(path, { credentials: "same-origin" });
|
||||
if (!r.ok) throw new Error(`${path}: ${r.status} ${r.statusText}`);
|
||||
return (await r.json()) as T;
|
||||
}
|
||||
|
||||
export function listMaglevds(): Promise<MaglevdInfo[]> {
|
||||
return getJSON<MaglevdInfo[]>("/view/api/maglevds");
|
||||
}
|
||||
|
||||
export function fetchAllState(): Promise<StateSnapshot[]> {
|
||||
return getJSON<StateSnapshot[]>("/view/api/state");
|
||||
}
|
||||
|
||||
export function fetchState(name: string): Promise<StateSnapshot> {
|
||||
return getJSON<StateSnapshot>(`/view/api/state/${encodeURIComponent(name)}`);
|
||||
}
|
||||
|
||||
export function fetchVersion(): Promise<VersionInfo> {
|
||||
return getJSON<VersionInfo>("/view/api/version");
|
||||
}
|
||||
92
cmd/frontend/web/src/api/sse.ts
Normal file
92
cmd/frontend/web/src/api/sse.ts
Normal file
@@ -0,0 +1,92 @@
|
||||
import type {
|
||||
BackendEventPayload,
|
||||
BrowserEvent,
|
||||
FrontendEventPayload,
|
||||
LogEventPayload,
|
||||
MaglevdStatusPayload,
|
||||
} from "../types";
|
||||
import { fetchAllState } from "./rest";
|
||||
import {
|
||||
applyBackendEffectiveWeight,
|
||||
applyBackendTransition,
|
||||
applyFrontendTransition,
|
||||
applyMaglevdStatus,
|
||||
replaceAll,
|
||||
} from "../stores/state";
|
||||
import { pushEvent } from "../stores/events";
|
||||
|
||||
// openEventStream wires the SPA to /view/api/events. EventSource auto-
|
||||
// reconnects with the Last-Event-ID header set, which the Go broker uses
|
||||
// to replay events from its 30s ring buffer. A "resync" event tells us to
|
||||
// refetch full state and redraw.
|
||||
export function openEventStream(): EventSource {
|
||||
const es = new EventSource("/view/api/events");
|
||||
|
||||
es.onmessage = (msg) => {
|
||||
try {
|
||||
const ev = JSON.parse(msg.data) as BrowserEvent;
|
||||
dispatch(ev);
|
||||
} catch (err) {
|
||||
console.error("sse parse error", err, msg.data);
|
||||
}
|
||||
};
|
||||
|
||||
// "resync" is emitted as a named event so we can listen for it
|
||||
// without it going through the default onmessage dispatch.
|
||||
es.addEventListener("resync", async () => {
|
||||
try {
|
||||
const snaps = await fetchAllState();
|
||||
replaceAll(snaps);
|
||||
} catch (err) {
|
||||
console.error("resync refetch failed", err);
|
||||
}
|
||||
});
|
||||
|
||||
es.onerror = (err) => {
|
||||
// EventSource handles reconnection on its own — just log.
|
||||
console.debug("sse error, browser will reconnect", err);
|
||||
};
|
||||
|
||||
return es;
|
||||
}
|
||||
|
||||
function dispatch(ev: BrowserEvent) {
|
||||
pushEvent(ev);
|
||||
switch (ev.type) {
|
||||
case "backend":
|
||||
applyBackendTransition(ev.maglevd, ev.payload as BackendEventPayload);
|
||||
break;
|
||||
case "frontend":
|
||||
applyFrontendTransition(ev.maglevd, ev.payload as FrontendEventPayload);
|
||||
break;
|
||||
case "maglevd-status":
|
||||
applyMaglevdStatus(ev.maglevd, ev.payload as MaglevdStatusPayload);
|
||||
break;
|
||||
case "log":
|
||||
applyLogEvent(ev.maglevd, ev.payload as LogEventPayload);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// applyLogEvent surfaces the few log messages that carry data we want to
|
||||
// reflect in the store. Probe-start/probe-done drive the heartbeat and are
|
||||
// handled by BackendRow watching the events signal directly; here we only
|
||||
// react to VPP LB sync mutations so the effective weight column updates
|
||||
// live when a backend is disabled, enabled, or reweighted.
|
||||
function applyLogEvent(maglevd: string, p: LogEventPayload) {
|
||||
if (!p.msg.startsWith("vpp-lb-sync-as-")) return;
|
||||
const attrs = p.attrs ?? {};
|
||||
const address = attrs.address;
|
||||
if (!address) return;
|
||||
switch (p.msg) {
|
||||
case "vpp-lb-sync-as-added":
|
||||
applyBackendEffectiveWeight(maglevd, address, Number(attrs.weight ?? 0));
|
||||
break;
|
||||
case "vpp-lb-sync-as-removed":
|
||||
applyBackendEffectiveWeight(maglevd, address, 0);
|
||||
break;
|
||||
case "vpp-lb-sync-as-weight-updated":
|
||||
applyBackendEffectiveWeight(maglevd, address, Number(attrs.to ?? 0));
|
||||
break;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user