Skip to content

Dashboard redesign — Grafana-flavoured v3 cards

Motivation

The previous monitor cards drifted away from the calm/glassmorphic design charter as features were bolted on (warmup chips, shard badges, build buttons, etc.). Type sizes, chip styles, and grid spacing varied per card and made the dashboard feel busy rather than informative.

The user approved a Grafana-flavoured mockup (web/public/dashboard-redesign-mockup.html?v=3) as the new visual baseline: denser monospaced metrics, uppercase faint labels, accented left borders for node pools, a dedicated "shard capacity" strip under the AKS card, and a 4-cell job summary. This change applies that language to the real cards while preserving every existing button and link.

User-facing change

  • Cluster card — System / User pools are now coloured cards with SYSTEM / USER role chips and an accented left border (warning for system, accent for user). Pool name in monospace. A new Shard capacity strip appears below the pools when the cluster is running, surfacing the user pool node count, VM size, and the planned target N ≤ 10 heuristic used by the BLAST submit flow. Warmup chips replaced with a uniform dv3-warmup-chip (loading / warn variants). All Start / Stop / Delete / Add Cluster buttons preserved.
  • Storage card — Region / SKU / HNS / Public displayed as a 4-cell grid with Disabled = success, Enabled = warn to make the public-network posture obvious at a glance. Containers list rewritten as dv3-container-row rows (mono name, last-updated, faint access pill). BLAST Databases section now lives in a framed dv3-db-section block with non-uppercase title + ready/update counts pill.
  • ACR card — Login server / SKU / Images-built shown as a 3-cell grid. Image table rebuilt with dv3-acr-table (display:grid 1fr auto auto): repo names monospace, version monospace centered, status as dv3-pill dv3-pill-success (Built) / -danger (Failed). Per-image rebuild button preserved.
  • Terminal card — Status block with Sidecar healthy / degraded / down lead and an explicit <code>127.0.0.1:7681</code> upstream line. Three info bullets (auth, pre-installed tools, ephemeral note). Open Terminal CTA is a full-width accent pill that gracefully disables when the sidecar is not OK.
  • Job card — 4-cell summary (Total / Active / Completed / Failed) with active=accent, completed=success, failed=warn. Job rows render as dv3-job-row cards with a coloured phase chip (running / completed / failed / deleted / idle) and monospace job-id metadata. "New search" button preserved at the top-right; "View all N jobs" preserved below the list.

No buttons or links were dropped. Logic, polling, and routing are unchanged.

API / IaC diff

None. Pure UI change in web/.

Files touched

  • web/src/theme/glass.css — added ~360 lines of namespaced .dv3-* utility classes (cell-grid, pool-card, shard-capacity, warmup-chip, container-row, db-section, acr-table, terminal-status, term-cta, job-row, jobs-list). Tweaked .panel-hd background and title typography to match the mockup.
  • web/src/components/cards/storage/StorageMetaGrid.tsx — rewritten to use dv3-cell-grid--4.
  • web/src/components/cards/storage/StorageContainersTable.tsx — rewritten to use dv3-container-list (no more HTML table).
  • web/src/components/cards/storage/BlastDbSection.tsx — frame + head rewritten to use dv3-db-section + dv3-db-section-head.
  • web/src/components/cards/AcrCard.tsx — meta grid + image table converted to dv3-cell-grid--3 and dv3-acr-table.
  • web/src/components/cards/TerminalCard.tsx — body rewritten with dv3-terminal-status, dv3-term-info bullets, dv3-term-cta button.
  • web/src/components/cards/JobCard.tsx — added phaseClass helper and FAILED_PHASES; body now uses 4-cell summary + dv3-jobs-list.
  • web/src/components/ClusterItem.tsx — pool chips → dv3-pool-grid; injected dv3-shard-capacity strip; warmup chips → dv3-warmup-strip.
  • web/package-lock.json (regenerated by npm install to restore the declared @fontsource/jetbrains-mono package that had been pruned from node_modules/).

Validation evidence

  • cd web && npx tsc --noEmit — exit 0.
  • cd web && npm run build — built in 5.67s, JS 671.28 kB / CSS 89.19 kB.
  • Visual verification at http://127.0.0.1:18080/?dashboard-v3 in browser:
  • Top row: AKS card shows SYSTEM (orange border) + USER (blue border) pool cards, SHARD CAPACITY · 3 nodes · Standard_E32s_v5 · auto-selected per submit · target N ≤ 10 strip, Workspace ready warmup chip. ACR card shows 3-cell meta + 4 images in dv3-acr-table with green Built pills.
  • Middle row: Storage card with koreacentral / Standard_LRS / Enabled / Disabled cell grid (Disabled rendered green), three container rows with 🔒 None access pills, framed BLAST Databases section with 0/9 counter and Maximize2 button. Terminal card with Sidecar healthy · 127.0.0.1:7681 · upstream 200, three info bullets with <code> tool chips, full-width Open Terminal accent CTA.
  • Bottom: Sidecars topology card unchanged (already on the new design). Jobs card with 4-cell summary 0 / 0 / 0 / 0 and No jobs yet. empty state. New search button preserved top-right.
  • BLAST Databases modal still opens via the section's Maximize2 button and renders the existing degraded network_blocked state correctly.

Notes for future agents

  • New utility classes are namespaced .dv3-* and live in web/src/theme/glass.css. Reuse them when adding new cards instead of inventing one-off CSS.
  • The Grafana-flavoured tokens (--bg-canvas / --bg-primary / --bg-secondary / --bg-tertiary / --text-faint, etc.) and --font-mono: "JetBrains Mono" are the source of truth — do not reintroduce hard-coded hex colours or sans-serif overrides in metric chips.
  • The _v3 query string in the mockup HTML is for cache-busting only — the real dashboard does not branch on it.