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>
180 lines
7.1 KiB
Plaintext
180 lines
7.1 KiB
Plaintext
@using Microsoft.AspNetCore.SignalR.Client
|
|
@using ZB.MOM.WW.OtOpcUa.Admin.Hubs
|
|
@using ZB.MOM.WW.OtOpcUa.Admin.Services
|
|
@using ZB.MOM.WW.OtOpcUa.Configuration.Entities
|
|
@using ZB.MOM.WW.OtOpcUa.Configuration.Enums
|
|
@inject ClusterNodeService NodeSvc
|
|
@inject NavigationManager Nav
|
|
@implements IAsyncDisposable
|
|
|
|
<h4 class="panel-head">Redundancy topology</h4>
|
|
@if (_roleChangedBanner is not null)
|
|
{
|
|
<section class="panel notice rise" style="animation-delay:.02s">@_roleChangedBanner</section>
|
|
}
|
|
<p class="text-muted small">
|
|
One row per <span class="mono">ClusterNode</span> in this cluster. Role, <span class="mono">ApplicationUri</span>,
|
|
and <span class="mono">ServiceLevelBase</span> are authored separately; the Admin UI shows them read-only
|
|
here so operators can confirm the published topology without touching it. LastSeen older than
|
|
@((int)ClusterNodeService.StaleThreshold.TotalSeconds)s is flagged Stale — the node has
|
|
stopped heart-beating and is likely down. Role swap goes through the server-side
|
|
<span class="mono">RedundancyCoordinator</span> apply-lease flow, not direct DB edits.
|
|
</p>
|
|
|
|
@if (_nodes is null)
|
|
{
|
|
<p>Loading…</p>
|
|
}
|
|
else if (_nodes.Count == 0)
|
|
{
|
|
<section class="panel notice rise" style="animation-delay:.02s">
|
|
No ClusterNode rows for this cluster. The server process needs at least one entry
|
|
(with a non-blank <span class="mono">ApplicationUri</span>) before it can start up per OPC UA spec.
|
|
</section>
|
|
}
|
|
else
|
|
{
|
|
var primaries = _nodes.Count(n => n.RedundancyRole == RedundancyRole.Primary);
|
|
var secondaries = _nodes.Count(n => n.RedundancyRole == RedundancyRole.Secondary);
|
|
var standalone = _nodes.Count(n => n.RedundancyRole == RedundancyRole.Standalone);
|
|
var staleCount = _nodes.Count(ClusterNodeService.IsStale);
|
|
|
|
<section class="agg-grid rise" style="animation-delay:.02s">
|
|
<div class="agg-card">
|
|
<div class="agg-label">Nodes</div>
|
|
<div class="agg-value numeric">@_nodes.Count</div>
|
|
</div>
|
|
<div class="agg-card">
|
|
<div class="agg-label">Primary</div>
|
|
<div class="agg-value numeric @(primaries > 0 ? "s-ok" : "")">@primaries</div>
|
|
</div>
|
|
<div class="agg-card">
|
|
<div class="agg-label">Secondary</div>
|
|
<div class="agg-value numeric">@secondaries</div>
|
|
</div>
|
|
<div class="agg-card">
|
|
<div class="agg-label">Stale</div>
|
|
<div class="agg-value numeric @(staleCount > 0 ? "s-warn" : "")">@staleCount</div>
|
|
</div>
|
|
</section>
|
|
|
|
@if (primaries == 0 && standalone == 0)
|
|
{
|
|
<section class="panel notice rise" style="animation-delay:.08s">
|
|
<span class="s-bad">No Primary or Standalone node — the cluster has no authoritative write target. Secondaries
|
|
stay read-only until one of them gets promoted via <span class="mono">RedundancyCoordinator</span>.</span>
|
|
</section>
|
|
}
|
|
else if (primaries > 1)
|
|
{
|
|
<section class="panel notice rise" style="animation-delay:.08s">
|
|
<span class="s-bad"><strong>Split-brain:</strong> @primaries nodes claim the Primary role. Apply-lease
|
|
enforcement should have made this impossible at the coordinator level. Investigate
|
|
immediately — one of the rows was likely hand-edited.</span>
|
|
</section>
|
|
}
|
|
|
|
<section class="panel rise" style="animation-delay:.14s">
|
|
<div class="table-wrap">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Node</th>
|
|
<th>Role</th>
|
|
<th>Host</th>
|
|
<th class="num">OPC UA port</th>
|
|
<th class="num">ServiceLevel base</th>
|
|
<th>ApplicationUri</th>
|
|
<th>Enabled</th>
|
|
<th>Last seen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach (var n in _nodes)
|
|
{
|
|
<tr>
|
|
<td><span class="mono">@n.NodeId</span></td>
|
|
<td><span class="chip @RoleBadge(n.RedundancyRole)">@n.RedundancyRole</span></td>
|
|
<td>@n.Host</td>
|
|
<td class="num mono">@n.OpcUaPort</td>
|
|
<td class="num">@n.ServiceLevelBase</td>
|
|
<td class="mono">@n.ApplicationUri</td>
|
|
<td>
|
|
@if (n.Enabled) { <span class="chip chip-ok">Enabled</span> }
|
|
else { <span class="chip chip-idle">Disabled</span> }
|
|
</td>
|
|
<td class="@(ClusterNodeService.IsStale(n) ? "s-warn" : "")">
|
|
@(n.LastSeenAt is null ? "never" : FormatAge(n.LastSeenAt.Value))
|
|
@if (ClusterNodeService.IsStale(n)) { <span class="chip chip-warn ms-1">Stale</span> }
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
}
|
|
|
|
@code {
|
|
[Parameter] public string ClusterId { get; set; } = string.Empty;
|
|
|
|
private List<ClusterNode>? _nodes;
|
|
private HubConnection? _hub;
|
|
private string? _roleChangedBanner;
|
|
|
|
protected override async Task OnParametersSetAsync()
|
|
{
|
|
_nodes = await NodeSvc.ListByClusterAsync(ClusterId, CancellationToken.None);
|
|
if (_hub is null) await ConnectHubAsync();
|
|
}
|
|
|
|
private async Task ConnectHubAsync()
|
|
{
|
|
_hub = new HubConnectionBuilder()
|
|
.WithUrl(Nav.ToAbsoluteUri("/hubs/fleet-status"))
|
|
.WithAutomaticReconnect()
|
|
.Build();
|
|
|
|
_hub.On<RoleChangedMessage>("RoleChanged", async msg =>
|
|
{
|
|
if (msg.ClusterId != ClusterId) return;
|
|
_roleChangedBanner = $"Role changed on {msg.NodeId}: {msg.FromRole} → {msg.ToRole} at {msg.ObservedAtUtc:HH:mm:ss 'UTC'}";
|
|
_nodes = await NodeSvc.ListByClusterAsync(ClusterId, CancellationToken.None);
|
|
await InvokeAsync(StateHasChanged);
|
|
});
|
|
|
|
await _hub.StartAsync();
|
|
await _hub.SendAsync("SubscribeCluster", ClusterId);
|
|
}
|
|
|
|
public async ValueTask DisposeAsync()
|
|
{
|
|
if (_hub is not null)
|
|
{
|
|
await _hub.DisposeAsync();
|
|
_hub = null;
|
|
}
|
|
}
|
|
|
|
private static string RowClass(ClusterNode n) =>
|
|
ClusterNodeService.IsStale(n) ? "table-warning" :
|
|
!n.Enabled ? "table-secondary" : "";
|
|
|
|
private static string RoleBadge(RedundancyRole r) => r switch
|
|
{
|
|
RedundancyRole.Primary => "chip-ok",
|
|
RedundancyRole.Secondary => "chip-idle",
|
|
RedundancyRole.Standalone => "chip-idle",
|
|
_ => "chip-idle",
|
|
};
|
|
|
|
private static string FormatAge(DateTime t)
|
|
{
|
|
var age = DateTime.UtcNow - t;
|
|
if (age.TotalSeconds < 60) return $"{(int)age.TotalSeconds}s ago";
|
|
if (age.TotalMinutes < 60) return $"{(int)age.TotalMinutes}m ago";
|
|
if (age.TotalHours < 24) return $"{(int)age.TotalHours}h ago";
|
|
return t.ToString("yyyy-MM-dd HH:mm 'UTC'");
|
|
}
|
|
}
|