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>
2 lines
11 KiB
CSS
2 lines
11 KiB
CSS
*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:1.4;color:var(--fg);background:var(--bg)}h1,h2,h3,h4,p,dl,dd,ol,ul{margin:0;padding:0}ol,ul{list-style:none}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:1px solid var(--border);border-radius:4px;padding:4px 8px;cursor:pointer}button:hover{background:var(--bg-soft)}table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:4px 8px}code,pre,.mono{font-family:SF Mono,Menlo,Consolas,monospace}:root{--bg: #fafafa;--bg-soft: #f0f0f0;--bg-card: #ffffff;--fg: #0f172a;--fg-muted: #6b7280;--border: #e5e7eb;--accent: #2563eb;--state-up: #16a34a;--state-down: #dc2626;--state-paused: #2563eb;--state-disabled: #6b7280;--state-unknown: #eab308;--state-removed: #374151}.flash-target{display:inline-block;padding:0 4px;border-radius:3px;transform-origin:center center;will-change:transform,background-color,box-shadow}.backend-row td{overflow:visible}.app{max-width:1400px;margin:0 auto;padding:16px}.app-header{display:flex;align-items:center;gap:16px;padding:4px 0;border-bottom:1px solid var(--border);margin-bottom:16px}.brand{display:flex;align-items:center;gap:8px}.brand strong{font-size:18px}.brand-name{color:inherit;text-decoration:none}.brand-name:hover{color:var(--accent)}.brand-logo{display:inline-flex;align-items:center}.brand-logo img{height:56px;width:56px;display:block}.brand-logo:hover img{opacity:.8}.app-header .mode-tag{margin-left:auto;padding:2px 6px;border-radius:3px;background:var(--bg-soft);color:var(--fg-muted);font-size:11px;text-transform:uppercase}.brand .version{margin-left:8px;color:var(--fg-muted);font-family:SF Mono,Menlo,Consolas,monospace;font-size:11px;cursor:help}.admin-toggle{padding:4px 10px;border:1px solid var(--border);border-radius:4px;color:var(--accent)}.scope-selector{display:flex;gap:6px;flex-wrap:wrap}.scope-tab{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px}.scope-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}.scope-tab .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--state-down)}.scope-tab.connected .dot{background:var(--state-up)}.status-badge{display:inline-block;padding:2px 10px;border-radius:10px;font-size:12px;font-weight:500;color:#fff;text-transform:capitalize}.status-badge[data-state=up]{background:var(--state-up)}.status-badge[data-state=down]{background:var(--state-down)}.status-badge[data-state=paused]{background:var(--state-paused)}.status-badge[data-state=disabled]{background:var(--state-disabled)}.status-badge[data-state=unknown]{background:var(--state-unknown);color:#1f2937}.status-badge[data-state=removed]{background:var(--state-removed);text-decoration:line-through}.frontend-list{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}.frontend-title{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}.frontend-title-icon{display:inline-block;width:1.5em;text-align:center;font-size:14px;line-height:1}.frontend-title-name{font-size:15px;font-weight:600;display:inline-block;width:40ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}.frontend-title-addr{font-family:SF Mono,Menlo,Consolas,monospace;font-size:12px;color:var(--fg-muted)}.frontend-title-proto{font-size:11px;font-weight:600;color:var(--fg-muted);text-transform:uppercase}.frontend-title-desc{font-size:12px;color:var(--fg-muted);font-style:italic;font-weight:400}.tag{display:inline-block;padding:1px 6px;border-radius:3px;background:var(--bg-soft);color:var(--fg-muted);font-size:11px;margin-left:4px}.backend-table{table-layout:fixed;width:100%}.backend-table th,.backend-table td{white-space:nowrap}.backend-table th{font-size:11px;color:var(--fg-muted);text-transform:uppercase;border-bottom:1px solid var(--border);padding:2px 8px}.backend-table .numeric{text-align:right}.backend-table .col-pool{width:10ch}.backend-row .col-pool{color:var(--fg-muted);font-weight:500}.backend-row.pool-standby>td:not(.actions){opacity:.35}.backend-table .col-address{width:42ch}.backend-table .col-state{width:90px}.backend-table .col-weight{width:80px}.backend-table .col-effective,.backend-table .col-buckets{width:95px}.backend-table .col-age{width:110px}.backend-row td.backend-name{overflow:hidden}.backend-name-text{display:inline-block;max-width:calc(100% - 22px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}.backend-row td{border-bottom:1px solid var(--border);font-size:13px;padding:2px 8px}.backend-row .backend-name{font-weight:500}.backend-row .backend-address,.backend-row .age{color:var(--fg-muted);font-family:SF Mono,Menlo,Consolas,monospace;font-size:12px}.backend-table th.actions,.backend-row td.actions{width:28px;padding:0 4px;text-align:center}.kebab-wrap{position:relative;display:inline-block}.kebab-btn{width:20px;height:20px;padding:0;line-height:1;font-size:16px;color:var(--fg-muted);border:1px solid transparent;background:transparent;cursor:pointer;border-radius:3px}.kebab-btn:hover,.kebab-btn[aria-expanded=true]{color:var(--fg);background:var(--bg-soft);border-color:var(--border)}.kebab-menu{position:absolute;top:22px;right:0;z-index:20;min-width:120px;background:var(--bg-card);border:1px solid var(--border);border-radius:4px;box-shadow:0 4px 12px #0000001f;padding:4px 0}.kebab-item{display:block;width:100%;padding:6px 12px;border:none;background:transparent;text-align:left;cursor:pointer;font-size:13px;color:var(--fg)}.kebab-item:hover{background:var(--bg-soft)}.kebab-item:disabled{color:var(--fg-muted);cursor:wait}.kebab-error{padding:4px 12px 8px;color:var(--state-down);font-size:11px;font-family:SF Mono,Menlo,Consolas,monospace;max-width:260px;white-space:normal}.modal-backdrop{position:fixed;inset:0;background:#0f172a73;display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}.modal-card{background:var(--bg-card);border:1px solid var(--border);border-radius:6px;box-shadow:0 20px 50px #00000040;width:100%;max-width:480px;display:flex;flex-direction:column}.modal-header{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border)}.modal-header h3{margin:0;font-size:15px;flex:1}.modal-close{width:28px;height:28px;padding:0;font-size:20px;line-height:1;border:none;background:transparent;color:var(--fg-muted);cursor:pointer;border-radius:3px}.modal-close:hover{background:var(--bg-soft);color:var(--fg)}.modal-body{padding:16px}.dialog-body{margin-bottom:12px}.dialog-target{margin-bottom:12px;font-size:13px;color:var(--fg-muted)}.dialog-target code{font-family:SF Mono,Menlo,Consolas,monospace;font-size:13px;background:var(--bg-soft);padding:1px 5px;border-radius:3px;color:var(--fg)}.dialog-consequence{font-size:13px;line-height:1.5;color:var(--fg)}.dialog-field{display:flex;flex-direction:column;margin-bottom:12px;font-size:13px}.dialog-field>span{font-weight:500;margin-bottom:4px}.dialog-field input[type=number]{font:inherit;padding:6px 8px;border:1px solid var(--border);border-radius:4px;width:100px}.dialog-field .weight-slider-label{display:flex;align-items:baseline;justify-content:space-between}.dialog-field .weight-slider-value{font-family:SF Mono,Menlo,Consolas,monospace;font-size:18px;font-weight:600;color:var(--accent);min-width:3ch;text-align:right}.dialog-field .weight-slider{width:100%;margin:4px 0;accent-color:var(--accent)}.dialog-field small{margin-top:4px;color:var(--fg-muted);font-size:11px}.dialog-field.checkbox{flex-direction:row;align-items:center;gap:8px}.dialog-field.checkbox>span{margin-bottom:0;font-weight:400}.dialog-note{font-size:12px;color:var(--fg-muted);line-height:1.5;padding:8px 10px;background:var(--bg-soft);border-radius:4px}.dialog-warn{font-size:12px;color:#991b1b;line-height:1.5;padding:8px 10px;background:#fee2e2;border:1px solid #fecaca;border-radius:4px;font-weight:500}.dialog-error{margin-top:8px;padding:8px 10px;background:#fee2e2;color:#991b1b;border-radius:4px;font-family:SF Mono,Menlo,Consolas,monospace;font-size:12px;white-space:pre-wrap;word-break:break-word}.dialog-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}.btn-primary,.btn-secondary{font:inherit;padding:6px 14px;border-radius:4px;cursor:pointer;border:1px solid var(--border)}.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn-primary:hover:not(:disabled){background:var(--accent);filter:brightness(1.12)}.btn-primary.btn-danger{background:var(--state-down);border-color:var(--state-down)}.btn-primary.btn-danger:hover:not(:disabled){background:var(--state-down);filter:brightness(1.12)}.btn-secondary{background:transparent;color:var(--fg)}.btn-secondary:hover:not(:disabled){background:var(--bg-soft)}.btn-primary:disabled,.btn-secondary:disabled{opacity:.6;cursor:wait}.probe-heartbeat{display:inline-block;width:16px;height:14px;line-height:14px;margin-right:6px;text-align:center;font-size:11px;color:var(--state-disabled);overflow:hidden;vertical-align:middle;transform-origin:center center}.probe-heartbeat.in-flight{color:inherit;font-size:10px}.banner{padding:8px 12px;border-radius:4px;margin-bottom:12px;font-size:13px}.banner.warn{background:#fef3c7;color:#92400e}.banner.err{background:#fee2e2;color:#991b1b}.loading,.empty{color:var(--fg-muted);padding:16px}.zippy{border:1px solid var(--border);border-radius:6px;background:var(--bg-card)}.zippy summary{padding:4px 12px;cursor:pointer;font-weight:500}.zippy-body{padding:4px 10px 6px;border-top:1px solid var(--border)}.zippy-title{display:inline-flex;align-items:center;gap:10px}.vpp-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500;text-transform:lowercase;color:#fff}.vpp-badge[data-state=connected]{background:var(--state-up)}.vpp-badge[data-state=disconnected]{background:var(--state-down)}.vpp-io{display:inline-flex;align-items:center;gap:0;margin-left:4px;font-size:13px;font-weight:600;line-height:1;letter-spacing:-.15em;padding-right:.15em}.vpp-io-label{color:var(--fg-muted);font-weight:500;letter-spacing:normal;margin-right:4px}.vpp-tx,.vpp-rx{display:inline-block;color:var(--fg-muted);opacity:.25;transition:color .12s ease-out,opacity .12s ease-out,transform .12s ease-out;transform:translateY(0)}.vpp-tx.lit{color:var(--accent);opacity:1;transform:translateY(-1px)}.vpp-rx.lit{color:var(--accent);opacity:1;transform:translateY(1px)}.kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px}.kv dt{color:var(--fg-muted)}.debug-toolbar{display:flex;gap:12px;align-items:center;margin-top:8px;font-size:12px}.debug-toolbar .count{margin-left:auto;color:var(--fg-muted)}.event-tail{max-height:320px;overflow:auto;font-family:SF Mono,Menlo,Consolas,monospace;font-size:11px;line-height:1.5}.event-row{padding:2px 4px;white-space:pre-wrap;word-break:break-all}.event-row.event-backend{color:var(--state-up)}.event-row.event-frontend{color:var(--accent)}.event-row.event-log{color:var(--fg-muted)}.event-row.event-maglevd-status{color:var(--state-down)}.event-row.event-sync{color:var(--state-paused);font-weight:500}
|