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
@@ -4,38 +4,65 @@
|
||||
@using ScadaLink.Commons.Interfaces.Repositories
|
||||
@attribute [Authorize(Policy = AuthorizationPolicies.RequireAdmin)]
|
||||
@inject ICentralUiRepository CentralUiRepository
|
||||
@inject IJSRuntime JS
|
||||
|
||||
<div class="container-fluid mt-3">
|
||||
<h4 class="mb-3">Audit Log</h4>
|
||||
|
||||
<ToastNotification @ref="_toast" />
|
||||
|
||||
<div class="row mb-3 g-2">
|
||||
<div class="row mb-3 g-2 align-items-end">
|
||||
<div class="col-md-2">
|
||||
<label class="form-label small">User</label>
|
||||
<input type="text" class="form-control form-control-sm" @bind="_filterUser" placeholder="Username" />
|
||||
<label class="form-label small" for="audit-filter-user">User</label>
|
||||
<input id="audit-filter-user"
|
||||
type="text"
|
||||
class="form-control form-control-sm"
|
||||
aria-label="User"
|
||||
@bind="_filterUser"
|
||||
placeholder="Username" />
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label class="form-label small">Entity Type</label>
|
||||
<input type="text" class="form-control form-control-sm" @bind="_filterEntityType" placeholder="e.g. Template" />
|
||||
<label class="form-label small" for="audit-filter-entity-type">Entity Type</label>
|
||||
<input id="audit-filter-entity-type"
|
||||
type="text"
|
||||
class="form-control form-control-sm"
|
||||
aria-label="Entity type"
|
||||
@bind="_filterEntityType"
|
||||
placeholder="e.g. Template" />
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label class="form-label small">Action</label>
|
||||
<input type="text" class="form-control form-control-sm" @bind="_filterAction" placeholder="e.g. Create" />
|
||||
<label class="form-label small" for="audit-filter-action">Action</label>
|
||||
<input id="audit-filter-action"
|
||||
type="text"
|
||||
class="form-control form-control-sm"
|
||||
aria-label="Action"
|
||||
@bind="_filterAction"
|
||||
placeholder="e.g. Create" />
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label class="form-label small">From</label>
|
||||
<input type="datetime-local" class="form-control form-control-sm" @bind="_filterFrom" />
|
||||
<label class="form-label small" for="audit-filter-from">From</label>
|
||||
<input id="audit-filter-from"
|
||||
type="datetime-local"
|
||||
class="form-control form-control-sm"
|
||||
aria-label="From timestamp"
|
||||
@bind="_filterFrom" />
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label class="form-label small">To</label>
|
||||
<input type="datetime-local" class="form-control form-control-sm" @bind="_filterTo" />
|
||||
<label class="form-label small" for="audit-filter-to">To</label>
|
||||
<input id="audit-filter-to"
|
||||
type="datetime-local"
|
||||
class="form-control form-control-sm"
|
||||
aria-label="To timestamp"
|
||||
@bind="_filterTo" />
|
||||
</div>
|
||||
<div class="col-md-2 d-flex align-items-end">
|
||||
<div class="col-md-2 d-flex gap-1">
|
||||
<button class="btn btn-primary btn-sm" @onclick="Search" disabled="@_searching">
|
||||
@if (_searching) { <span class="spinner-border spinner-border-sm"></span> }
|
||||
@if (_searching) { <span class="spinner-border spinner-border-sm me-1" role="status"></span> }
|
||||
Search
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary btn-sm" @onclick="ClearFilters" disabled="@_searching">
|
||||
Clear filters
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -65,20 +92,50 @@
|
||||
}
|
||||
@foreach (var entry in _entries)
|
||||
{
|
||||
var entityIdShort = entry.EntityId is { Length: > 0 }
|
||||
? entry.EntityId[..Math.Min(12, entry.EntityId.Length)]
|
||||
: "";
|
||||
var hasState = !string.IsNullOrWhiteSpace(entry.AfterStateJson);
|
||||
var isLarge = hasState && entry.AfterStateJson!.Length > 1024;
|
||||
<tr>
|
||||
<td class="small"><TimestampDisplay Value="@entry.Timestamp" /></td>
|
||||
<td class="small">@entry.User</td>
|
||||
<td><span class="badge @GetActionBadge(entry.Action)">@entry.Action</span></td>
|
||||
<td class="small">@entry.EntityType</td>
|
||||
<td class="small"><code>@entry.EntityId</code></td>
|
||||
<td class="small">
|
||||
@if (!string.IsNullOrEmpty(entry.EntityId))
|
||||
{
|
||||
<code>@entityIdShort…</code>
|
||||
<button class="btn btn-link btn-sm p-0 ms-1"
|
||||
@onclick="() => CopyAsync(entry.EntityId)"
|
||||
title="Copy entity ID"
|
||||
aria-label="Copy entity ID @entry.EntityId">📋</button>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span class="text-muted">—</span>
|
||||
}
|
||||
</td>
|
||||
<td class="small">@entry.EntityName</td>
|
||||
<td>
|
||||
@if (!string.IsNullOrWhiteSpace(entry.AfterStateJson))
|
||||
@if (hasState)
|
||||
{
|
||||
<button class="btn btn-outline-info btn-sm py-0 px-1"
|
||||
@onclick="() => ToggleStateView(entry.Id)">
|
||||
@(_expandedEntryId == entry.Id ? "Hide" : "View")
|
||||
</button>
|
||||
if (isLarge)
|
||||
{
|
||||
<button class="btn btn-outline-info btn-sm py-0 px-1"
|
||||
@onclick="() => ShowStateModal(entry)"
|
||||
aria-label="Open state details in modal for audit entry @entry.Id">
|
||||
View in modal
|
||||
</button>
|
||||
}
|
||||
else
|
||||
{
|
||||
<button class="btn btn-outline-info btn-sm py-0 px-1"
|
||||
@onclick="() => ToggleStateView(entry.Id)"
|
||||
aria-label="Toggle state details for audit entry @entry.Id">
|
||||
@(_expandedEntryId == entry.Id ? "Hide" : "View")
|
||||
</button>
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
@@ -86,11 +143,11 @@
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
@if (_expandedEntryId == entry.Id && !string.IsNullOrWhiteSpace(entry.AfterStateJson))
|
||||
@if (hasState && !isLarge && _expandedEntryId == entry.Id)
|
||||
{
|
||||
<tr>
|
||||
<td colspan="7">
|
||||
<pre class="bg-light p-2 rounded small mb-0" style="max-height: 200px; overflow: auto;">@FormatJson(entry.AfterStateJson)</pre>
|
||||
<pre class="bg-light p-2 rounded small mb-0" style="max-height: 200px; overflow: auto;">@FormatJson(entry.AfterStateJson!)</pre>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
@@ -99,10 +156,33 @@
|
||||
</table>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span class="text-muted small">Page @_page of @((_totalCount + _pageSize - 1) / _pageSize) (@_totalCount total)</span>
|
||||
<span class="text-muted small">Page @_page of @TotalPages (@_totalCount total)</span>
|
||||
<div>
|
||||
<button class="btn btn-outline-secondary btn-sm me-1" @onclick="PrevPage" disabled="@(_page <= 1)">Previous</button>
|
||||
<button class="btn btn-outline-secondary btn-sm" @onclick="NextPage" disabled="@(_entries.Count < _pageSize)">Next</button>
|
||||
<button class="btn btn-outline-secondary btn-sm" @onclick="NextPage" disabled="@(!HasMore)">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (_modalEntry != null)
|
||||
{
|
||||
<div class="modal-backdrop fade show"></div>
|
||||
<div class="modal fade show d-block" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">
|
||||
Audit entry @_modalEntry.Id — @_modalEntry.EntityType state
|
||||
</h5>
|
||||
<button type="button" class="btn-close" @onclick="CloseStateModal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<pre class="bg-light p-2 rounded small mb-0">@FormatJson(_modalEntry.AfterStateJson!)</pre>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" @onclick="CloseStateModal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@@ -122,15 +202,30 @@
|
||||
private bool _searching;
|
||||
private string? _errorMessage;
|
||||
private int? _expandedEntryId;
|
||||
private AuditLogEntry? _modalEntry;
|
||||
|
||||
private ToastNotification _toast = default!;
|
||||
|
||||
private int TotalPages => _pageSize > 0 ? Math.Max(1, (_totalCount + _pageSize - 1) / _pageSize) : 1;
|
||||
private bool HasMore => _page * _pageSize < _totalCount;
|
||||
|
||||
private async Task Search()
|
||||
{
|
||||
_page = 1;
|
||||
await FetchPage();
|
||||
}
|
||||
|
||||
private async Task ClearFilters()
|
||||
{
|
||||
_filterUser = null;
|
||||
_filterEntityType = null;
|
||||
_filterAction = null;
|
||||
_filterFrom = null;
|
||||
_filterTo = null;
|
||||
_page = 1;
|
||||
await FetchPage();
|
||||
}
|
||||
|
||||
private async Task PrevPage() { _page--; await FetchPage(); }
|
||||
private async Task NextPage() { _page++; await FetchPage(); }
|
||||
|
||||
@@ -164,6 +259,29 @@
|
||||
_expandedEntryId = _expandedEntryId == entryId ? null : entryId;
|
||||
}
|
||||
|
||||
private void ShowStateModal(AuditLogEntry entry)
|
||||
{
|
||||
_modalEntry = entry;
|
||||
}
|
||||
|
||||
private void CloseStateModal()
|
||||
{
|
||||
_modalEntry = null;
|
||||
}
|
||||
|
||||
private async Task CopyAsync(string text)
|
||||
{
|
||||
try
|
||||
{
|
||||
await JS.InvokeVoidAsync("navigator.clipboard.writeText", text);
|
||||
_toast.ShowSuccess("Copied to clipboard.");
|
||||
}
|
||||
catch
|
||||
{
|
||||
_toast.ShowError("Copy failed.");
|
||||
}
|
||||
}
|
||||
|
||||
private static string GetActionBadge(string action) => action switch
|
||||
{
|
||||
"Create" => "bg-success",
|
||||
|
||||
Reference in New Issue
Block a user