ipng/vpp-maglev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug fixes, config validation, SPA tightening, set-weight UI

Browse Source 
This session covers three distinct arcs: correctness bug fixes in the
VPP sync path and frontend reducers, new config validation, and a
large polish pass on the web frontend (tighter layout, backend kebab
dialogs, live grouped-table, live config-reload re-sync).

 - encap for a VIP is now derived from the backend address family,
   not the VIP's. A v6 VIP with v4 backends is programmed as IP6_GRE4
   (not the buggy IP6_GRE6), matching the VPP LB plugin's
   requirement that encap reflects the tunnel inner family. desiredVIP
   gained an Encap field populated in desiredFromFrontend.
 - ActivePoolIndex now requires at least one backend in a pool to be
   BOTH in StateUp AND pb.Weight>0 before the pool counts as active.
   Previously a primary pool with every backend manually zeroed would
   still win over a fallback with weight=100, so fallback traffic
   never materialized. New TestActivePoolIndexWeightedFailover table
   pins the rule in five subcases.
 - SyncLBStateVIP gained a flushAddress parameter threaded through
   reconcileVIP; it forces flush=true on the setASWeight call for a
   specific backend regardless of the usual 0→N heuristic. Wires up
   the explicit [flush] knob the CLI exposes.

 - convertFrontend already enforced that backends within one frontend
   share a family. New cross-frontend pass validateVIPFamilyConsistency
   rejects configs where two frontends share a VIP address but carry
   backends in different families — VPP's LB plugin requires every
   VIP on a prefix to have the same encap type, so such a config
   would fail at lb_add_del_vip_v2 time with VNET_API_ERROR_INVALID
   _ARGUMENT (-73). Catching it at config load turns a silent
   runtime failure into a clear startup error.
 - Two new TestValidationErrors cases pin the behavior: mismatched
   families reject, same-family frontends on one VIP address allowed.

 - Proto adds `bool flush = 5` to SetWeightRequest. The RPC now
   drives a VIP sync immediately after mutating config (fixing the
   latent "weight change only takes effect at the next 30s periodic
   reconcile" gap), passing flushAddress = backend IP when req.Flush
   is true.
 - maglevc grows an optional [flush] token: `set frontend F pool P
   backend B weight N [flush]`. Implementation uses two Run closures
   (runSetFrontendPoolBackendWeight and -Flush) because the tree
   walker only puts slot tokens in args — literal keywords like
   `flush` advance the node but don't appear in the arg list.
 - docs/user-guide.md updated with the [flush] optional and a
   three-paragraph explainer of the graceful-drain vs. flush
   semantics at the VPP level.

 - checker.ListFrontends now sorts alphabetically to match the
   existing sort in ListBackends / ListHealthChecks — RPC responses
   no longer shuffle VIPs per call. cmd/frontend/client.go also
   sorts defensively in refreshAll so an old maglevd build renders
   alphabetically too.
 - backendFromProto was returning out.Transitions[n-1] as the
   LastTransition, but maglevd stores (and the proto carries)
   transitions newest-first, so [n-1] was actually the oldest.
   Reverse on read, which normalizes the client's Transitions slice
   to oldest-first and makes [n-1] genuinely the newest. LastTransition
   now points at the actual latest transition record.
 - applyBackendTransition (Go and TS) derives Enabled = state!="disabled"
   so the two fields stay in lockstep — closed a drift window where
   a recently re-enabled backend still rendered with a stuck
   [disabled] tag. The tag was later removed entirely since state
   and enabled carry the same information.

 - Layout tightened substantially: "FRONTENDS" panel header removed,
   zippy-summary and zippy-body paddings cut, backend-table row
   padding dropped to 2px, per-pool <h3> removed. Pools now live in
   a single consolidated table per frontend with a dedicated "pool"
   column that shows the pool name only on the first row of each
   group — classic grouped-table layout, maximally dense.
 - Description moved inline into the Zippy summary as muted italic
   text, freeing a vertical line per frontend card.
 - formatVIPAddress() helper renders IPv6 VIPs as [addr]:port and
   IPv4 as addr:port, matching RFC 3986 authority syntax.
 - Pools with effective_weight=0 on every backend (standby
   fallbacks, fully-drained primaries) render at opacity 0.35 on
   their non-actions cells; the kebab column stays at full contrast
   because its menu is still fully functional on standby backends.
 - Config-reload propagation: a maglevd config-reload-done log
   event triggers triggerConfigResync() on the frontend side —
   refreshAll() runs off the event-dispatch goroutine, then a
   BrowserEvent{Type:"resync"} is published through the broker.
   writeEvent emits type="resync" as a named SSE frame so the
   SPA's existing addEventListener("resync") handler picks it up
   and calls fetchAllState → replaceAll.
 - recomputeEffectiveWeights in stores/state.ts mirrors the
   server-side health.EffectiveWeights logic so the SPA keeps
   pool.effective_weight correct the moment a backend transitions,
   without waiting for the 30s refresh. Fixed a nasty bug where
   applyBackendEffectiveWeight wrote VIP-scoped vpp-lb-sync-as-*
   event weights into every frontend sharing the backend,
   corrupting frontends with different per-pool configured weights.
   The old log-event reducer was removed; applyConfiguredWeight is
   the narrower replacement used by the kebab set-weight flow.
 - applyBackendTransition calls recomputeEffectiveWeights after
   state updates so pool-failover transitions (primary ⇌ fallback)
   reflect instantly in the UI.

 - Confirmation dialogs via a new Modal primitive
   (Portal-mounted to document.body, escape/click-outside close,
   click-outside debounced on mousedown so mid-row-text-selection
   drags don't dismiss).
 - pause/resume/enable/disable each show a Modal with a consequence
   paragraph explaining what hits live traffic ("will keep existing
   flows", "will flush VPP's flow table", etc.). The disable commit
   button is styled btn-danger red.
 - set-weight action shows a Modal with a range slider (0-100,
   seeded from the current configured weight, accent-colored live
   numeric readout via <output>) plus a flush checkbox and a live-
   swapping note/warn paragraph describing what will happen. On
   commit, the SPA also updates its local store via
   applyConfiguredWeight so the operator sees the new weight
   immediately without waiting for the next refresh.

 - ProbeHeartbeat is now state-aware: ▶ (play) at rest for up/
   down/unknown backends, ⏸ (pause) for paused, ⏹ (stop) for
   disabled/removed, ❤️ (heart) during an in-flight probe.
 - Drop the probe-done event listener — fast probes (<10ms)
   could fire probe-done in the same render tick as probe-start
   and the heart would never visibly paint. Each probe-start now
   runs a fixed 400ms scale-pop animation on a timer; subsequent
   probe-start events reset the timer, so fast cadences produce a
   continuous heart pulse.
 - Fixed wrapper box (16x14 px, overflow hidden) so the row
   doesn't jiggle when the glyph swaps between the narrow ▶/⏸/⏹
   text glyphs and the wider ❤️ emoji.

 - Brand wordmark changed from "maglev" to "vpp-maglev" and wrapped
   in an <a> linking to https://git.ipng.ch/ipng/vpp-maglev. Logo
   link changed to https://ipng.ch/. Both open in a new tab with
   rel="noopener".
 - .gitignore fix: `frontend`, `maglevc`, `maglevd` were matching
   ANY file or directory with those names anywhere in the tree,
   silently ignoring cmd/frontend and friends. Anchored with
   leading slashes so only repo-root build artifacts match.
This commit is contained in:
Pim van Pelt
2026-04-12 23:06:38 +02:00
parent 25e9d79aba
commit 4347bb9b05
33 changed files with 1729 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
cmd/frontend/web/src/stores/state.ts
View File

@@ -8,6 +8,48 @@ import type {
} from "../types";
import { tick } from "./tick";
// recomputeEffectiveWeights mirrors the server-side
// health.EffectiveWeights / ActivePoolIndex logic so the SPA can keep
// pool.effective_weight correct the moment a backend transitions,
// without waiting for the 30s refresh. Walking every frontend is cheap
// — O(frontends × pools × backends-per-pool) with tiny constants —
// and it's strictly a function of the backend state map, so there's no
// risk of drift vs. the server as long as the rule stays the same.
//
// Rule: a backend gets its configured pool weight iff it is up AND
// belongs to the currently-active pool; everything else is 0. The
// active pool is the first pool containing a backend that is both
// up AND has a non-zero configured weight — a pool whose up backends
// are all weight=0 contributes no serving capacity and gets skipped
// over in priority failover. Kept in lock-step with
// internal/health/weights.go.
function recomputeEffectiveWeights(snap: StateSnapshot) {
const stateOf: Record<string, string> = {};
for (const b of snap.backends) stateOf[b.name] = b.state;
for (const fe of snap.frontends) {
let activePool = 0;
for (let i = 0; i < fe.pools.length; i++) {
let anyServing = false;
for (const pb of fe.pools[i].backends) {
if (stateOf[pb.name] === "up" && pb.weight > 0) {
anyServing = true;
break;
}
}
if (anyServing) {
activePool = i;
break;
}
}
for (let i = 0; i < fe.pools.length; i++) {
for (const pb of fe.pools[i].backends) {
const st = stateOf[pb.name];
pb.effective_weight = st === "up" && i === activePool ? pb.weight : 0;
}
}
}
}
// FrontendState keys snapshots by maglevd name. A single store drives the
// whole UI; reducers produce() into the right branch.
export type FrontendState = {
@@ -40,12 +82,25 @@ export function applyBackendTransition(maglevd: string, p: BackendEventPayload)
const b = snap.backends.find((x) => x.name === p.backend);
if (!b) return;
b.state = p.transition.to;
// Derive enabled from state — see the matching comment in
// cmd/frontend/client.go applyBackendTransition. state="disabled"
// and enabled=false are two expressions of the same condition
// in maglevd, so keeping them in sync locally closes a drift
// window where the UI would show the wrong [disabled] tag.
b.enabled = p.transition.to !== "disabled";
b.last_transition = p.transition;
if (!b.transitions) b.transitions = [];
b.transitions.push(p.transition);
if (b.transitions.length > 20) {
b.transitions = b.transitions.slice(b.transitions.length - 20);
}
// A backend state change can shift which pool is active and
// therefore which pool-memberships get non-zero effective
// weights. Recompute for every frontend — not just the one
// pointed at by this backend — because pool-failover is a
// per-frontend computation and the same backend can appear in
// multiple frontends with different pool placements.
recomputeEffectiveWeights(snap);
}),
);
}
@@ -83,32 +138,50 @@ export function applyMaglevdStatus(maglevd: string, p: MaglevdStatusPayload) {
);
}
// applyBackendEffectiveWeight updates the effective_weight of every pool
// row that references the backend with the given address. Driven by the
// vpp-lb-sync-as-* log events so the UI reflects VPP LB changes without
// waiting for the 30s refresh tick.
export function applyBackendEffectiveWeight(maglevd: string, address: string, weight: number) {
// applyConfiguredWeight updates the configured weight of a specific
// backend's pool-membership within a named frontend/pool, then
// recomputes effective weights so pool-failover semantics stay
// consistent. Called from the BackendActionsMenu after a successful
// admin "set weight" POST so the UI reflects the change instantly
// without waiting for the 30s refresh tick. Unlike the previous
// log-event-driven reducer, this one is scoped to exactly the
// pool-membership the operator edited, so it can't leak weights
// across frontends that share the backend.
export function applyConfiguredWeight(
maglevd: string,
frontend: string,
pool: string,
backend: string,
weight: number,
) {
setState(
produce((s) => {
const snap = s.byName[maglevd];
if (!snap) return;
const b = snap.backends.find((x) => x.address === address);
if (!b) return;
for (const fe of snap.frontends) {
for (const pool of fe.pools) {
for (const pb of pool.backends) {
if (pb.name === b.name) {
pb.effective_weight = weight;
}
}
}
}
const fe = snap.frontends.find((f) => f.name === frontend);
if (!fe) return;
const p = fe.pools.find((x) => x.name === pool);
if (!p) return;
const pb = p.backends.find((x) => x.name === backend);
if (!pb) return;
pb.weight = weight;
recomputeEffectiveWeights(snap);
}),
);
}
// Helpers used by views.
// formatVIPAddress renders an address:port string with IPv6 addresses
// wrapped in square brackets. This matches the URL-authority
// convention (RFC 3986 §3.2.2) — without the brackets the colons in
// an IPv6 literal are ambiguous against the port separator. IPv4 is
// left bare.
export function formatVIPAddress(address: string, port: number): string {
if (address.includes(":")) return `[${address}]:${port}`;
return `${address}:${port}`;
}
export function lastTransitionAge(t?: TransitionRecord): string {
// Subscribe to the 1s ticker so the age string updates live as a
// real-time countdown. No effect on layout — the age column is