Pim van Pelt
1a1c48ef54
SPA (cmd/frontend/web): - New "lb buckets" column backed by a 1s-debounced GetVPPLBState fetch loop with leading+trailing edge coalesce. - Per-frontend health icon (✅/⚠️/❗/‼️/❓) in the Zippy header, gated by a settling flag that suppresses ‼️ until the next lb-state reconciliation after a backend transition or weight change. - In-place leaf merge on lb-state so stable bucket values (e.g. "0") don't retrigger the Flash animation on every refresh. - Zippy cards remember open state in a cookie, default closed on fresh load; fixed-width frontend-title-name + reserved icon slot so headers line up across all cards. - Clock-drift watchdog in sse.ts that forces a fresh EventSource on laptop-wake so the broker emits a resync instead of hanging on a dead half-open socket. Frontend service (cmd/frontend): - maglevClient.lbStateLoop, trigger on backend transitions + vpp-connect, best-effort fetch on refreshAll. - Admin handlers explicitly wake the lb-state loop after lifecycle ops and set-weight (the latter emits no transition event on the maglevd side, so the WatchEvents path wouldn't have caught it). - /favicon.ico served from embedded web/public IPng logo. VPP integration: - internal/vpp/lbstate.go: dumpASesForVIP drops Pfx from the dump request (setting it silently wipes IPv4 replies in the LB plugin) and filters results by prefix on the response side instead, which also demuxes multi-VIP-on-same-port cases correctly. maglevc: - Walk now returns the unconsumed token tail; dispatch and the question listener reject unknown commands with a targeted error instead of dumping the full command tree prefixed with garbage. - On '?', echo the current line (including the '?') before the help list so the output reads like birdc. Checker / prober: - internal/checker: ±10% jitter on NextInterval so probes across restart don't all fire on the same tick. - internal/prober: HTTP User-Agent now carries the build version and project URL. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
86 lines
3.2 KiB
TypeScript
86 lines
3.2 KiB
TypeScript
import { Show, createMemo, type Component } from "solid-js";
|
|
import type { BackendSnapshot, PoolBackendSnapshot } from "../types";
|
|
import StatusBadge from "../components/StatusBadge";
|
|
import ProbeHeartbeat from "../components/ProbeHeartbeat";
|
|
import Flash from "../components/Flash";
|
|
import BackendActionsMenu from "../components/BackendActionsMenu";
|
|
import { lastTransitionAge, lbBucketsFor, state as appState } from "../stores/state";
|
|
import { isAdmin } from "../stores/mode";
|
|
|
|
type Props = {
|
|
maglevd: string;
|
|
frontend: string;
|
|
pool: string;
|
|
// showPool=true renders the pool name in the first column. Set
|
|
// only on the first backend row of each pool; subsequent rows in
|
|
// the same pool leave the cell blank, giving the "grouped table"
|
|
// look where the pool label appears once above its members.
|
|
showPool: boolean;
|
|
// poolActive=false means every backend in this row's pool has
|
|
// effective_weight=0 right now — a standby fallback or a fully
|
|
// drained primary. The row is rendered dimmer so the operator
|
|
// can scan which pool is actually carrying traffic.
|
|
poolActive: boolean;
|
|
backend: BackendSnapshot;
|
|
poolBackend: PoolBackendSnapshot;
|
|
};
|
|
|
|
const BackendRow: Component<Props> = (props) => {
|
|
const b = () => props.backend;
|
|
// Subscribed lookup: lbBucketsFor reads from the reactive store, so
|
|
// the cell re-renders the moment a "lb-state" SSE event mutates the
|
|
// map. A missing entry (VPP disconnected, backend not yet programmed)
|
|
// renders as an em-dash; an explicit 0 means "in VPP, drained".
|
|
// createMemo guarantees Flash only sees a new value when the leaf
|
|
// actually changed — without it, any spurious upstream re-run (e.g.
|
|
// a sibling backend's transition triggering recomputeDerivedState)
|
|
// would pop the bucket cell on every backend in the table.
|
|
const bucketsLabel = createMemo<number | "—">(() => {
|
|
const v = lbBucketsFor(appState.byName[props.maglevd], props.frontend, b().name);
|
|
return v === undefined ? "—" : v;
|
|
});
|
|
return (
|
|
<tr
|
|
class="backend-row"
|
|
classList={{ "pool-standby": !props.poolActive }}
|
|
data-state={b().state}
|
|
>
|
|
<td class="col-pool">{props.showPool ? props.pool : ""}</td>
|
|
<td class="backend-name">
|
|
<ProbeHeartbeat maglevd={props.maglevd} backend={b().name} state={b().state} />
|
|
<span class="backend-name-text">{b().name}</span>
|
|
</td>
|
|
<td class="backend-address">{b().address}</td>
|
|
<td>
|
|
<Flash value={b().state}>
|
|
<StatusBadge state={b().state} />
|
|
</Flash>
|
|
</td>
|
|
<td class="numeric">
|
|
<Flash value={props.poolBackend.weight} />
|
|
</td>
|
|
<td class="numeric">
|
|
<Flash value={props.poolBackend.effective_weight} />
|
|
</td>
|
|
<td class="numeric">
|
|
<Flash value={bucketsLabel()} />
|
|
</td>
|
|
<td class="age">{lastTransitionAge(b().last_transition)}</td>
|
|
<Show when={isAdmin}>
|
|
<td class="actions">
|
|
<BackendActionsMenu
|
|
maglevd={props.maglevd}
|
|
frontend={props.frontend}
|
|
pool={props.pool}
|
|
backend={b().name}
|
|
state={b().state}
|
|
configuredWeight={props.poolBackend.weight}
|
|
/>
|
|
</td>
|
|
</Show>
|
|
</tr>
|
|
);
|
|
};
|
|
|
|
export default BackendRow;
|