refactor(ui/monitoring): KPI dashboard, message expand, copy, pagination fix
Dashboard: user-info card demoted; 4 KPI cards (Sites, Data
connections, Templates, API keys) sourced from existing repositories;
3 Quick-action link cards (Health, Audit Log, Templates). Inline
max-width style replaced with Bootstrap utilities.
Health: KPI row condensed to Online / Offline / Sites with active
errors (Total Sites and Total Script Errors dropped). Per-site cards
re-laid out 2-column with each subsection (Data Connections,
Instances & Queues, Errors & Parked Messages) inside Bootstrap
collapse panels collapsed by default. Online / Offline / Primary /
Standby badges paired with shape glyphs (o / * / triangle) plus
aria-label.
EventLogs: filter row wrapped in a Bootstrap collapse toggled by
"Filter options (n active)"; per-row View toggle reveals the full
message in a collapse row; "Keyword" relabeled "Message contains";
all filter inputs gain id+label-for+aria-label; severity badges paired
with a leading glyph; explicit "End of results" terminator on
Load more.
ParkedMessages: Message ID rendered as <code>{first 12}...</code>
plus a clipboard button; per-row View toggle reveals full error;
action buttons get aria-label="{Retry|Discard} message {id}";
in-flight spinner inside the active button.
AuditLog: pagination Next-disabled now uses
_page * _pageSize >= _totalCount via HasMore helper (fixes the
exactly-page-size edge case). Clear filters button added. Entity ID
rendered as code + clipboard button. View/Hide buttons gain
aria-label referencing the entry id. State JSON larger than 1 KB
renders a "View in modal" button instead of the inline overflow.
This commit is contained in:
Joseph Doherty
@@ -24,36 +24,28 @@
|
||||
else
|
||||
{
|
||||
@* Overview cards *@
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-3">
|
||||
<div class="card border-success">
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-lg-4 col-md-6 col-12">
|
||||
<div class="card border-success h-100">
|
||||
<div class="card-body text-center">
|
||||
<h3 class="mb-0 text-success">@_siteStates.Values.Count(s => s.IsOnline)</h3>
|
||||
<small class="text-muted">Sites Online</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card border-danger">
|
||||
<div class="col-lg-4 col-md-6 col-12">
|
||||
<div class="card border-danger h-100">
|
||||
<div class="card-body text-center">
|
||||
<h3 class="mb-0 text-danger">@_siteStates.Values.Count(s => !s.IsOnline)</h3>
|
||||
<small class="text-muted">Sites Offline</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card">
|
||||
<div class="col-lg-4 col-md-6 col-12">
|
||||
<div class="card border-warning h-100">
|
||||
<div class="card-body text-center">
|
||||
<h3 class="mb-0">@_siteStates.Count</h3>
|
||||
<small class="text-muted">Total Sites</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<h3 class="mb-0">@_siteStates.Values.Sum(s => s.LatestReport?.ScriptErrorCount ?? 0)</h3>
|
||||
<small class="text-muted">Total Script Errors</small>
|
||||
<h3 class="mb-0 text-warning">@_siteStates.Values.Count(SiteHasActiveErrors)</h3>
|
||||
<small class="text-muted">Sites with active errors</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -63,21 +55,22 @@
|
||||
@foreach (var (siteId, state) in _siteStates.OrderBy(s => s.Key))
|
||||
{
|
||||
var siteName = GetSiteName(siteId);
|
||||
var detailsCollapseId = $"site-details-{siteId}";
|
||||
<div class="card mb-3">
|
||||
<div class="card-header d-flex justify-content-between align-items-center py-2">
|
||||
<div>
|
||||
@if (state.IsOnline)
|
||||
{
|
||||
<span class="badge bg-success me-2">Online</span>
|
||||
<span class="badge bg-success me-2" aria-label="State: Online">@OnlineGlyph Online</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span class="badge bg-danger me-2">Offline</span>
|
||||
<span class="badge bg-danger me-2" aria-label="State: Offline">@OfflineGlyph Offline</span>
|
||||
}
|
||||
<strong class="fs-5">@siteName (@siteId)</strong>
|
||||
</div>
|
||||
<small class="text-muted">
|
||||
Last report: @state.LastReportReceivedAt.LocalDateTime.ToString("HH:mm:ss") | Seq: @state.LastSequenceNumber
|
||||
Last report: <TimestampDisplay Value="@state.LastReportReceivedAt" Format="HH:mm:ss" /> | Seq: @state.LastSequenceNumber
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-body p-3">
|
||||
@@ -86,7 +79,7 @@
|
||||
var report = state.LatestReport;
|
||||
<div class="row g-3">
|
||||
@* Column 1: Nodes *@
|
||||
<div class="col-md-3">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2 border-bottom pb-1">Nodes</h6>
|
||||
<table class="table table-sm table-borderless mb-0">
|
||||
<tbody>
|
||||
@@ -96,8 +89,18 @@
|
||||
{
|
||||
<tr>
|
||||
<td class="small">@node.Hostname</td>
|
||||
<td><span class="badge @(node.IsOnline ? "bg-success" : "bg-danger")">@(node.IsOnline ? "Online" : "Offline")</span></td>
|
||||
<td><span class="badge @(node.Role == "Primary" ? "bg-primary" : "bg-secondary")">@node.Role</span></td>
|
||||
<td>
|
||||
<span class="badge @(node.IsOnline ? "bg-success" : "bg-danger")"
|
||||
aria-label="State: @(node.IsOnline ? "Online" : "Offline")">
|
||||
@(node.IsOnline ? OnlineGlyph : OfflineGlyph) @(node.IsOnline ? "Online" : "Offline")
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge @(node.Role == "Primary" ? "bg-primary" : "bg-secondary")"
|
||||
aria-label="State: @node.Role">
|
||||
@(node.Role == "Primary" ? PrimaryGlyph : StandbyGlyph) @node.Role
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
}
|
||||
@@ -105,128 +108,164 @@
|
||||
{
|
||||
<tr>
|
||||
<td class="small">@(report.NodeHostname != "" ? report.NodeHostname : "Node")</td>
|
||||
<td><span class="badge @(state.IsOnline ? "bg-success" : "bg-danger")">@(state.IsOnline ? "Online" : "Offline")</span></td>
|
||||
<td><span class="badge @(report.NodeRole == "Active" ? "bg-primary" : "bg-secondary")">@(report.NodeRole == "Active" ? "Primary" : "Standby")</span></td>
|
||||
<td>
|
||||
<span class="badge @(state.IsOnline ? "bg-success" : "bg-danger")"
|
||||
aria-label="State: @(state.IsOnline ? "Online" : "Offline")">
|
||||
@(state.IsOnline ? OnlineGlyph : OfflineGlyph) @(state.IsOnline ? "Online" : "Offline")
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
@{
|
||||
var roleLabel = report.NodeRole == "Active" ? "Primary" : "Standby";
|
||||
}
|
||||
<span class="badge @(report.NodeRole == "Active" ? "bg-primary" : "bg-secondary")"
|
||||
aria-label="State: @roleLabel">
|
||||
@(roleLabel == "Primary" ? PrimaryGlyph : StandbyGlyph) @roleLabel
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@* Column 2: Data Connections *@
|
||||
<div class="col-md-3">
|
||||
<h6 class="text-muted mb-2 border-bottom pb-1">Data Connections</h6>
|
||||
@if (report.DataConnectionStatuses.Count == 0)
|
||||
{
|
||||
<span class="text-muted small">None</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
@foreach (var (connName, health) in report.DataConnectionStatuses)
|
||||
@* Column 2: Data Connections (collapsible) *@
|
||||
<div class="col-md-6">
|
||||
<button class="btn btn-link btn-sm p-0 text-decoration-none mb-2"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="@($"#{detailsCollapseId}-conns")"
|
||||
aria-expanded="false">
|
||||
Data Connections (@report.DataConnectionStatuses.Count)
|
||||
</button>
|
||||
<div class="collapse" id="@($"{detailsCollapseId}-conns")">
|
||||
@if (report.DataConnectionStatuses.Count == 0)
|
||||
{
|
||||
var endpoint = report.DataConnectionEndpoints?.GetValueOrDefault(connName);
|
||||
var quality = report.DataConnectionTagQuality?.GetValueOrDefault(connName);
|
||||
<div class="mb-2">
|
||||
<div class="d-flex justify-content-between">
|
||||
<strong class="small">@connName</strong>
|
||||
<span class="small">@(endpoint ?? health.ToString())</span>
|
||||
<span class="text-muted small">None</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
@foreach (var (connName, health) in report.DataConnectionStatuses)
|
||||
{
|
||||
var endpoint = report.DataConnectionEndpoints?.GetValueOrDefault(connName);
|
||||
var quality = report.DataConnectionTagQuality?.GetValueOrDefault(connName);
|
||||
<div class="mb-2">
|
||||
<div class="d-flex justify-content-between">
|
||||
<strong class="small">@connName</strong>
|
||||
<span class="small">@(endpoint ?? health.ToString())</span>
|
||||
</div>
|
||||
@if (quality != null)
|
||||
{
|
||||
<table class="table table-sm table-borderless mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="small text-muted py-0">Tags good</td>
|
||||
<td class="small text-end py-0">@quality.Good.ToString("N0")</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small text-muted py-0">Tags bad</td>
|
||||
<td class="small text-end py-0">@quality.Bad.ToString("N0")</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small text-muted py-0">Tags uncertain</td>
|
||||
<td class="small text-end py-0">@quality.Uncertain.ToString("N0")</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
</div>
|
||||
@if (quality != null)
|
||||
{
|
||||
<table class="table table-sm table-borderless mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="small text-muted py-0">Tags good</td>
|
||||
<td class="small text-end py-0">@quality.Good.ToString("N0")</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small text-muted py-0">Tags bad</td>
|
||||
<td class="small text-end py-0">@quality.Bad.ToString("N0")</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small text-muted py-0">Tags uncertain</td>
|
||||
<td class="small text-end py-0">@quality.Uncertain.ToString("N0")</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@* Column 3: Instances + Store-and-Forward *@
|
||||
<div class="col-md-3">
|
||||
<h6 class="text-muted mb-2 border-bottom pb-1">Instances</h6>
|
||||
<table class="table table-sm table-borderless mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="small">Deployed</td>
|
||||
<td class="text-end">@report.DeployedInstanceCount</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small">Enabled</td>
|
||||
<td class="text-end text-success">@report.EnabledInstanceCount</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small">Disabled</td>
|
||||
<td class="text-end">@report.DisabledInstanceCount</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@* Column 3: Instances + Store-and-Forward (collapsible) *@
|
||||
<div class="col-md-6">
|
||||
<button class="btn btn-link btn-sm p-0 text-decoration-none mb-2"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="@($"#{detailsCollapseId}-queues")"
|
||||
aria-expanded="false">
|
||||
Instances & Queues
|
||||
</button>
|
||||
<div class="collapse" id="@($"{detailsCollapseId}-queues")">
|
||||
<h6 class="text-muted mb-2 border-bottom pb-1">Instances</h6>
|
||||
<table class="table table-sm table-borderless mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="small">Deployed</td>
|
||||
<td class="text-end">@report.DeployedInstanceCount</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small">Enabled</td>
|
||||
<td class="text-end text-success">@report.EnabledInstanceCount</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small">Disabled</td>
|
||||
<td class="text-end">@report.DisabledInstanceCount</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h6 class="text-muted mb-2 mt-3 border-bottom pb-1">Store-and-Forward Buffers</h6>
|
||||
@if (report.StoreAndForwardBufferDepths.Count == 0)
|
||||
{
|
||||
<span class="text-muted small">Empty</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
@foreach (var (category, depth) in report.StoreAndForwardBufferDepths)
|
||||
<h6 class="text-muted mb-2 mt-3 border-bottom pb-1">Store-and-Forward Buffers</h6>
|
||||
@if (report.StoreAndForwardBufferDepths.Count == 0)
|
||||
{
|
||||
<div class="d-flex justify-content-between mb-1">
|
||||
<span class="small">@category</span>
|
||||
<span class="badge @(depth > 0 ? "bg-warning text-dark" : "bg-light text-dark")">@depth</span>
|
||||
</div>
|
||||
<span class="text-muted small">Empty</span>
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
@foreach (var (category, depth) in report.StoreAndForwardBufferDepths)
|
||||
{
|
||||
<div class="d-flex justify-content-between mb-1">
|
||||
<span class="small">@category</span>
|
||||
<span class="badge @(depth > 0 ? "bg-warning text-dark" : "bg-light text-dark")">@depth</span>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@* Column 4: Error Counts + Parked Messages *@
|
||||
<div class="col-md-3">
|
||||
<h6 class="text-muted mb-2 border-bottom pb-1">Error Counts</h6>
|
||||
<table class="table table-sm table-borderless mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="small">Script Errors</td>
|
||||
<td class="text-end">
|
||||
<span class="@(report.ScriptErrorCount > 0 ? "text-danger fw-bold" : "")">@report.ScriptErrorCount</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small">Alarm Eval Errors</td>
|
||||
<td class="text-end">
|
||||
<span class="@(report.AlarmEvaluationErrorCount > 0 ? "text-warning fw-bold" : "")">@report.AlarmEvaluationErrorCount</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small">Dead Letters</td>
|
||||
<td class="text-end">
|
||||
<span class="@(report.DeadLetterCount > 0 ? "text-danger fw-bold" : "")">@report.DeadLetterCount</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@* Column 4: Error Counts + Parked Messages (collapsible) *@
|
||||
<div class="col-md-6">
|
||||
<button class="btn btn-link btn-sm p-0 text-decoration-none mb-2"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="@($"#{detailsCollapseId}-errors")"
|
||||
aria-expanded="false">
|
||||
Errors & Parked Messages
|
||||
</button>
|
||||
<div class="collapse" id="@($"{detailsCollapseId}-errors")">
|
||||
<h6 class="text-muted mb-2 border-bottom pb-1">Error Counts</h6>
|
||||
<table class="table table-sm table-borderless mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="small">Script Errors</td>
|
||||
<td class="text-end">
|
||||
<span class="@(report.ScriptErrorCount > 0 ? "text-danger fw-bold" : "")">@report.ScriptErrorCount</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small">Alarm Eval Errors</td>
|
||||
<td class="text-end">
|
||||
<span class="@(report.AlarmEvaluationErrorCount > 0 ? "text-warning fw-bold" : "")">@report.AlarmEvaluationErrorCount</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small">Dead Letters</td>
|
||||
<td class="text-end">
|
||||
<span class="@(report.DeadLetterCount > 0 ? "text-danger fw-bold" : "")">@report.DeadLetterCount</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h6 class="text-muted mb-2 mt-3 border-bottom pb-1">Parked Messages</h6>
|
||||
@if (report.ParkedMessageCount == 0)
|
||||
{
|
||||
<span class="text-muted small">Empty</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span class="badge bg-warning text-dark">@report.ParkedMessageCount</span>
|
||||
}
|
||||
<h6 class="text-muted mb-2 mt-3 border-bottom pb-1">Parked Messages</h6>
|
||||
@if (report.ParkedMessageCount == 0)
|
||||
{
|
||||
<span class="text-muted small">Empty</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span class="badge bg-warning text-dark">@report.ParkedMessageCount</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@@ -241,11 +280,26 @@
|
||||
</div>
|
||||
|
||||
@code {
|
||||
// Shape-coded status glyphs to pair with badge colour.
|
||||
private const string OnlineGlyph = "●"; // ●
|
||||
private const string OfflineGlyph = "○"; // ○
|
||||
private const string PrimaryGlyph = "▲"; // ▲
|
||||
private const string StandbyGlyph = "△"; // △
|
||||
|
||||
private IReadOnlyDictionary<string, SiteHealthState> _siteStates = new Dictionary<string, SiteHealthState>();
|
||||
private Dictionary<string, string> _siteNames = new();
|
||||
private Timer? _refreshTimer;
|
||||
private int _autoRefreshSeconds = 10;
|
||||
|
||||
private static bool SiteHasActiveErrors(SiteHealthState state)
|
||||
{
|
||||
var report = state.LatestReport;
|
||||
if (report == null) return false;
|
||||
return report.ScriptErrorCount > 0
|
||||
|| report.AlarmEvaluationErrorCount > 0
|
||||
|| report.DeadLetterCount > 0;
|
||||
}
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
// Load site names for display
|
||||
|
||||
Reference in New Issue
Block a user