feat: restyle Admin UI with the technical-light design system

Adopt the technical-light design system across the Admin web UI:

- Vendor theme.css + IBM Plex woff2 fonts into wwwroot; include
  theme.css globally after Bootstrap.
- Rebuild MainLayout: top app-bar (brand mark, breadcrumb, connection
  pill) + hairline-ruled side rail with accent-bordered active link.
- Convert all 33 pages to the component catalog — tables to
  panel + data-table (num/mono columns), KPI cards to agg-grid,
  detail blocks to metric-card/kv rows, badges to chips, alerts to
  panel notice, headings to page-title/panel-head, .rise reveals.
- Buttons/forms stay on Bootstrap; theme.css restyles them via
  --bs-* overrides. View-specific layout lives in app.css; all
  colour/type comes from theme.css tokens.

Also fix a pre-existing /fleet 500: the node-state query ordered on
a property of a constructed FleetNodeRow record, which EF Core
cannot translate. Order the join's columns before projecting.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Joseph Doherty
2026-05-18 02:20:09 -04:00
parent 31b9468102
commit 482d5f5637
40 changed files with 1837 additions and 1206 deletions

View File

@@ -4,43 +4,46 @@
@inject GenerationService GenerationSvc
@inject NavigationManager Nav
<h4>Generations</h4>
@if (_generations is null) { <p>Loading…</p> }
else if (_generations.Count == 0) { <p class="text-muted">No generations in this cluster yet.</p> }
else
{
<table class="table table-sm">
<thead>
<tr><th>ID</th><th>Status</th><th>Created</th><th>Published</th><th>PublishedBy</th><th>Notes</th><th></th></tr>
</thead>
<tbody>
@foreach (var g in _generations)
{
<tr>
<td><code>@g.GenerationId</code></td>
<td>@StatusBadge(g.Status)</td>
<td><small>@g.CreatedAt.ToString("u") by @g.CreatedBy</small></td>
<td><small>@(g.PublishedAt?.ToString("u") ?? "-")</small></td>
<td><small>@g.PublishedBy</small></td>
<td><small>@g.Notes</small></td>
<td>
@if (g.Status == GenerationStatus.Draft)
{
<a class="btn btn-sm btn-primary" href="/clusters/@ClusterId/draft/@g.GenerationId">Open</a>
}
else if (g.Status is GenerationStatus.Published or GenerationStatus.Superseded)
{
<button class="btn btn-sm btn-outline-warning" @onclick="() => RollbackAsync(g.GenerationId)">Roll back to this</button>
}
</td>
</tr>
}
</tbody>
</table>
<section class="panel rise" style="animation-delay:.08s">
<div class="panel-head">Generations</div>
<div class="table-wrap">
<table class="data-table">
<thead>
<tr><th class="num">ID</th><th>Status</th><th>Created</th><th>Published</th><th>PublishedBy</th><th>Notes</th><th></th></tr>
</thead>
<tbody>
@foreach (var g in _generations)
{
<tr>
<td class="num mono">@g.GenerationId</td>
<td>@StatusBadge(g.Status)</td>
<td><small>@g.CreatedAt.ToString("u") by @g.CreatedBy</small></td>
<td><small>@(g.PublishedAt?.ToString("u") ?? "-")</small></td>
<td><small>@g.PublishedBy</small></td>
<td><small>@g.Notes</small></td>
<td>
@if (g.Status == GenerationStatus.Draft)
{
<a class="btn btn-sm btn-primary" href="/clusters/@ClusterId/draft/@g.GenerationId">Open</a>
}
else if (g.Status is GenerationStatus.Published or GenerationStatus.Superseded)
{
<button class="btn btn-sm btn-outline-warning" @onclick="() => RollbackAsync(g.GenerationId)">Roll back to this</button>
}
</td>
</tr>
}
</tbody>
</table>
</div>
</section>
}
@if (_error is not null) { <div class="alert alert-danger">@_error</div> }
@if (_error is not null) { <section class="panel notice rise" style="animation-delay:.02s">@_error</section> }
@code {
[Parameter] public string ClusterId { get; set; } = string.Empty;
@@ -65,9 +68,9 @@ else
private static MarkupString StatusBadge(GenerationStatus s) => s switch
{
GenerationStatus.Draft => new MarkupString("<span class='badge bg-info'>Draft</span>"),
GenerationStatus.Published => new MarkupString("<span class='badge bg-success'>Published</span>"),
GenerationStatus.Superseded => new MarkupString("<span class='badge bg-secondary'>Superseded</span>"),
_ => new MarkupString($"<span class='badge bg-light text-dark'>{s}</span>"),
GenerationStatus.Draft => new MarkupString("<span class='chip chip-idle'>Draft</span>"),
GenerationStatus.Published => new MarkupString("<span class='chip chip-ok'>Published</span>"),
GenerationStatus.Superseded => new MarkupString("<span class='chip chip-idle'>Superseded</span>"),
_ => new MarkupString($"<span class='chip chip-idle'>{s}</span>"),
};
}