Pim van Pelt
284b4cc9a4
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.
118 lines
3.7 KiB
Go
118 lines
3.7 KiB
Go
// Copyright (c) 2026, Pim van Pelt <pim@ipng.ch>
|
|
|
|
package main
|
|
|
|
import "encoding/json"
|
|
|
|
// StateSnapshot is the full JSON snapshot served for a single maglevd.
|
|
type StateSnapshot struct {
|
|
Maglevd MaglevdInfo `json:"maglevd"`
|
|
Frontends []*FrontendSnapshot `json:"frontends"`
|
|
Backends []*BackendSnapshot `json:"backends"`
|
|
HealthChecks []*HealthCheckSnapshot `json:"healthchecks"`
|
|
VPPInfo *VPPInfoSnapshot `json:"vpp_info,omitempty"`
|
|
}
|
|
|
|
// MaglevdInfo is the per-maglevd connection status record.
|
|
type MaglevdInfo struct {
|
|
Name string `json:"name"`
|
|
Address string `json:"address"`
|
|
Connected bool `json:"connected"`
|
|
LastError string `json:"last_error,omitempty"`
|
|
}
|
|
|
|
// VersionInfo is the build metadata of this maglev-frontend binary.
|
|
type VersionInfo struct {
|
|
Version string `json:"version"`
|
|
Commit string `json:"commit"`
|
|
Date string `json:"date"`
|
|
}
|
|
|
|
type FrontendSnapshot struct {
|
|
Name string `json:"name"`
|
|
Address string `json:"address"`
|
|
Protocol string `json:"protocol"`
|
|
Port uint32 `json:"port"`
|
|
Description string `json:"description,omitempty"`
|
|
SrcIPSticky bool `json:"src_ip_sticky"`
|
|
Pools []*PoolSnapshot `json:"pools"`
|
|
}
|
|
|
|
type PoolSnapshot struct {
|
|
Name string `json:"name"`
|
|
Backends []*PoolBackendSnapshot `json:"backends"`
|
|
}
|
|
|
|
type PoolBackendSnapshot struct {
|
|
Name string `json:"name"`
|
|
Weight int32 `json:"weight"`
|
|
EffectiveWeight int32 `json:"effective_weight"`
|
|
}
|
|
|
|
type BackendSnapshot struct {
|
|
Name string `json:"name"`
|
|
Address string `json:"address"`
|
|
State string `json:"state"`
|
|
Enabled bool `json:"enabled"`
|
|
HealthCheck string `json:"healthcheck"`
|
|
LastTransition *TransitionRecord `json:"last_transition,omitempty"`
|
|
Transitions []*TransitionRecord `json:"transitions,omitempty"`
|
|
}
|
|
|
|
type TransitionRecord struct {
|
|
From string `json:"from"`
|
|
To string `json:"to"`
|
|
AtUnixNs int64 `json:"at_unix_ns"`
|
|
}
|
|
|
|
type HealthCheckSnapshot struct {
|
|
Name string `json:"name"`
|
|
Type string `json:"type"`
|
|
Port uint32 `json:"port"`
|
|
IntervalNs int64 `json:"interval_ns"`
|
|
FastIntervalNs int64 `json:"fast_interval_ns"`
|
|
DownIntervalNs int64 `json:"down_interval_ns"`
|
|
TimeoutNs int64 `json:"timeout_ns"`
|
|
Rise int32 `json:"rise"`
|
|
Fall int32 `json:"fall"`
|
|
}
|
|
|
|
type VPPInfoSnapshot struct {
|
|
Version string `json:"version"`
|
|
BuildDate string `json:"build_date"`
|
|
PID uint32 `json:"pid"`
|
|
BoottimeNs int64 `json:"boottime_ns"`
|
|
ConnecttimeNs int64 `json:"connecttime_ns"`
|
|
}
|
|
|
|
// BrowserEvent is the wire shape sent over SSE to the browser.
|
|
type BrowserEvent struct {
|
|
Maglevd string `json:"maglevd"`
|
|
Type string `json:"type"` // log|backend|frontend|maglevd-status|resync
|
|
AtUnixNs int64 `json:"at_unix_ns"`
|
|
Payload json.RawMessage `json:"payload"`
|
|
}
|
|
|
|
// BackendEventPayload is what we ship inside BrowserEvent.Payload for
|
|
// type == "backend".
|
|
type BackendEventPayload struct {
|
|
Backend string `json:"backend"`
|
|
Transition TransitionRecord `json:"transition"`
|
|
}
|
|
|
|
type FrontendEventPayload struct {
|
|
Frontend string `json:"frontend"`
|
|
Transition TransitionRecord `json:"transition"`
|
|
}
|
|
|
|
type LogEventPayload struct {
|
|
Level string `json:"level"`
|
|
Msg string `json:"msg"`
|
|
Attrs map[string]string `json:"attrs,omitempty"`
|
|
}
|
|
|
|
type MaglevdStatusPayload struct {
|
|
Connected bool `json:"connected"`
|
|
LastError string `json:"last_error,omitempty"`
|
|
}
|