Phases 4-6: Complete Central UI — Admin, Design, Deployment, and Operations pages

Phase 4 — Operator/Admin UI:
- Sites, DataConnections, Areas (hierarchical), API Keys (auto-generated) CRUD
- Health Dashboard (live refresh, per-site metrics from CentralHealthAggregator)
- Instance list with filtering/staleness/lifecycle actions
- Deployment status tracking with auto-refresh

Phase 5 — Authoring UI:
- Template authoring with inheritance tree, tabs (attrs/alarms/scripts/compositions)
- Lock indicators, on-demand validation, collision detection
- Shared scripts with syntax check
- External systems, DB connections, notification lists, Inbound API methods

Phase 6 — Deployment Operations UI:
- Staleness indicators, validation gating
- Debug view (instance selection, attribute/alarm live tables)
- Site event log viewer (filters, keyword search, keyset pagination)
- Parked message management, Audit log viewer with JSON state

Shared components: DataTable, ConfirmDialog, ToastNotification, LoadingSpinner, TimestampDisplay
623 tests pass, zero warnings. All Bootstrap 5, clean corporate design.
This commit is contained in:
Joseph Doherty
2026-03-16 21:47:37 -04:00
parent 6ea38faa6f
commit 3b2320bd35
22 changed files with 4821 additions and 32 deletions

View File

@@ -0,0 +1,188 @@
@page "/monitoring/audit-log"
@using ScadaLink.Security
@using ScadaLink.Commons.Entities.Audit
@using ScadaLink.Commons.Interfaces.Repositories
@attribute [Authorize(Policy = AuthorizationPolicies.RequireAdmin)]
@inject ICentralUiRepository CentralUiRepository
<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="col-md-2">
<label class="form-label small">User</label>
<input type="text" class="form-control form-control-sm" @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" />
</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" />
</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" />
</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" />
</div>
<div class="col-md-2 d-flex align-items-end">
<button class="btn btn-primary btn-sm" @onclick="Search" disabled="@_searching">
@if (_searching) { <span class="spinner-border spinner-border-sm"></span> }
Search
</button>
</div>
</div>
@if (_errorMessage != null)
{
<div class="alert alert-danger">@_errorMessage</div>
}
@if (_entries != null)
{
<table class="table table-sm table-striped table-hover">
<thead class="table-dark">
<tr>
<th>Timestamp</th>
<th>User</th>
<th>Action</th>
<th>Entity Type</th>
<th>Entity ID</th>
<th>Entity Name</th>
<th>State</th>
</tr>
</thead>
<tbody>
@if (_entries.Count == 0)
{
<tr><td colspan="7" class="text-muted text-center">No audit entries found.</td></tr>
}
@foreach (var entry in _entries)
{
<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">@entry.EntityName</td>
<td>
@if (!string.IsNullOrWhiteSpace(entry.AfterStateJson))
{
<button class="btn btn-outline-info btn-sm py-0 px-1"
@onclick="() => ToggleStateView(entry.Id)">
@(_expandedEntryId == entry.Id ? "Hide" : "View")
</button>
}
else
{
<span class="text-muted small">—</span>
}
</td>
</tr>
@if (_expandedEntryId == entry.Id && !string.IsNullOrWhiteSpace(entry.AfterStateJson))
{
<tr>
<td colspan="7">
<pre class="bg-light p-2 rounded small mb-0" style="max-height: 200px; overflow: auto;">@FormatJson(entry.AfterStateJson)</pre>
</td>
</tr>
}
}
</tbody>
</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>
<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>
</div>
</div>
}
</div>
@code {
private string? _filterUser;
private string? _filterEntityType;
private string? _filterAction;
private DateTime? _filterFrom;
private DateTime? _filterTo;
private List<AuditLogEntry>? _entries;
private int _totalCount;
private int _page = 1;
private int _pageSize = 50;
private bool _searching;
private string? _errorMessage;
private int? _expandedEntryId;
private ToastNotification _toast = default!;
private async Task Search()
{
_page = 1;
await FetchPage();
}
private async Task PrevPage() { _page--; await FetchPage(); }
private async Task NextPage() { _page++; await FetchPage(); }
private async Task FetchPage()
{
_searching = true;
_errorMessage = null;
try
{
var (entries, totalCount) = await CentralUiRepository.GetAuditLogEntriesAsync(
user: string.IsNullOrWhiteSpace(_filterUser) ? null : _filterUser.Trim(),
entityType: string.IsNullOrWhiteSpace(_filterEntityType) ? null : _filterEntityType.Trim(),
action: string.IsNullOrWhiteSpace(_filterAction) ? null : _filterAction.Trim(),
from: _filterFrom.HasValue ? new DateTimeOffset(_filterFrom.Value, TimeSpan.Zero) : null,
to: _filterTo.HasValue ? new DateTimeOffset(_filterTo.Value, TimeSpan.Zero) : null,
page: _page,
pageSize: _pageSize);
_entries = entries.ToList();
_totalCount = totalCount;
}
catch (Exception ex)
{
_errorMessage = $"Query failed: {ex.Message}";
}
_searching = false;
}
private void ToggleStateView(int entryId)
{
_expandedEntryId = _expandedEntryId == entryId ? null : entryId;
}
private static string GetActionBadge(string action) => action switch
{
"Create" => "bg-success",
"Update" => "bg-primary",
"Delete" => "bg-danger",
"Deploy" => "bg-info text-dark",
_ => "bg-secondary"
};
private static string FormatJson(string json)
{
try
{
var doc = System.Text.Json.JsonDocument.Parse(json);
return System.Text.Json.JsonSerializer.Serialize(doc, new System.Text.Json.JsonSerializerOptions { WriteIndented = true });
}
catch
{
return json;
}
}
}

View File

@@ -0,0 +1,183 @@
@page "/monitoring/event-logs"
@attribute [Authorize]
@using ScadaLink.Commons.Entities.Sites
@using ScadaLink.Commons.Interfaces.Repositories
@using ScadaLink.Commons.Messages.RemoteQuery
@using ScadaLink.Communication
@inject ISiteRepository SiteRepository
@inject CommunicationService CommunicationService
<div class="container-fluid mt-3">
<h4 class="mb-3">Site Event Logs</h4>
<ToastNotification @ref="_toast" />
<div class="row mb-3 g-2">
<div class="col-md-2">
<label class="form-label small">Site</label>
<select class="form-select form-select-sm" @bind="_selectedSiteId">
<option value="">Select site...</option>
@foreach (var site in _sites)
{
<option value="@site.SiteIdentifier">@site.Name</option>
}
</select>
</div>
<div class="col-md-2">
<label class="form-label small">Event Type</label>
<input type="text" class="form-control form-control-sm" @bind="_filterEventType" placeholder="e.g. ScriptError" />
</div>
<div class="col-md-1">
<label class="form-label small">Severity</label>
<select class="form-select form-select-sm" @bind="_filterSeverity">
<option value="">All</option>
<option>Info</option>
<option>Warning</option>
<option>Error</option>
</select>
</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" />
</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" />
</div>
<div class="col-md-2">
<label class="form-label small">Keyword</label>
<input type="text" class="form-control form-control-sm" @bind="_filterKeyword" />
</div>
<div class="col-md-1 d-flex align-items-end">
<button class="btn btn-primary btn-sm" @onclick="Search" disabled="@(string.IsNullOrEmpty(_selectedSiteId) || _searching)">
@if (_searching) { <span class="spinner-border spinner-border-sm"></span> }
Search
</button>
</div>
</div>
@if (_errorMessage != null)
{
<div class="alert alert-danger">@_errorMessage</div>
}
@if (_entries != null)
{
<table class="table table-sm table-striped table-hover">
<thead class="table-dark">
<tr>
<th>Timestamp</th>
<th>Type</th>
<th>Severity</th>
<th>Instance</th>
<th>Source</th>
<th>Message</th>
</tr>
</thead>
<tbody>
@if (_entries.Count == 0)
{
<tr><td colspan="6" class="text-muted text-center">No events found.</td></tr>
}
@foreach (var entry in _entries)
{
<tr class="@(entry.Severity == "Error" ? "table-danger" : entry.Severity == "Warning" ? "table-warning" : "")">
<td class="small"><TimestampDisplay Value="@entry.Timestamp" /></td>
<td class="small">@entry.EventType</td>
<td><span class="badge @GetSeverityBadge(entry.Severity)">@entry.Severity</span></td>
<td class="small">@(entry.InstanceId ?? "—")</td>
<td class="small">@entry.Source</td>
<td class="small">@entry.Message</td>
</tr>
}
</tbody>
</table>
<div class="d-flex justify-content-between align-items-center">
<span class="text-muted small">@_entries.Count entries loaded</span>
@if (_hasMore)
{
<button class="btn btn-outline-primary btn-sm" @onclick="LoadMore" disabled="@_searching">Load More</button>
}
</div>
}
</div>
@code {
private List<Site> _sites = new();
private string _selectedSiteId = string.Empty;
private string? _filterEventType;
private string _filterSeverity = string.Empty;
private DateTime? _filterFrom;
private DateTime? _filterTo;
private string? _filterKeyword;
private List<EventLogEntry>? _entries;
private bool _hasMore;
private long? _continuationToken;
private bool _searching;
private string? _errorMessage;
private ToastNotification _toast = default!;
protected override async Task OnInitializedAsync()
{
_sites = (await SiteRepository.GetAllSitesAsync()).ToList();
}
private async Task Search()
{
_entries = new();
_continuationToken = null;
await FetchPage();
}
private async Task LoadMore() => await FetchPage();
private async Task FetchPage()
{
_searching = true;
_errorMessage = null;
try
{
var request = new EventLogQueryRequest(
CorrelationId: Guid.NewGuid().ToString("N"),
SiteId: _selectedSiteId,
From: _filterFrom.HasValue ? new DateTimeOffset(_filterFrom.Value, TimeSpan.Zero) : null,
To: _filterTo.HasValue ? new DateTimeOffset(_filterTo.Value, TimeSpan.Zero) : null,
EventType: string.IsNullOrWhiteSpace(_filterEventType) ? null : _filterEventType.Trim(),
Severity: string.IsNullOrWhiteSpace(_filterSeverity) ? null : _filterSeverity,
InstanceId: null,
KeywordFilter: string.IsNullOrWhiteSpace(_filterKeyword) ? null : _filterKeyword.Trim(),
ContinuationToken: _continuationToken,
PageSize: 50,
Timestamp: DateTimeOffset.UtcNow);
var response = await CommunicationService.QueryEventLogsAsync(_selectedSiteId, request);
if (response.Success)
{
_entries ??= new();
_entries.AddRange(response.Entries);
_hasMore = response.HasMore;
_continuationToken = response.ContinuationToken;
}
else
{
_errorMessage = response.ErrorMessage ?? "Query failed.";
}
}
catch (Exception ex)
{
_errorMessage = $"Query failed: {ex.Message}";
}
_searching = false;
}
private static string GetSeverityBadge(string severity) => severity switch
{
"Error" => "bg-danger",
"Warning" => "bg-warning text-dark",
"Info" => "bg-info text-dark",
_ => "bg-secondary"
};
}

View File

@@ -1,7 +1,195 @@
@page "/monitoring/health"
@attribute [Authorize]
@using ScadaLink.Commons.Types.Enums
@using ScadaLink.HealthMonitoring
@implements IDisposable
@inject ICentralHealthAggregator HealthAggregator
<div class="container mt-4">
<h4>Health Dashboard</h4>
<p class="text-muted">Site health monitoring will be available in a future phase.</p>
<div class="container-fluid mt-3">
<div class="d-flex justify-content-between align-items-center mb-3">
<h4 class="mb-0">Health Dashboard</h4>
<div>
<span class="text-muted small me-2">Auto-refresh: @(_autoRefreshSeconds)s</span>
<button class="btn btn-outline-secondary btn-sm" @onclick="RefreshNow">Refresh Now</button>
</div>
</div>
@if (_siteStates.Count == 0)
{
<div class="alert alert-info">No site health reports received yet.</div>
}
else
{
@* Overview cards *@
<div class="row mb-3">
<div class="col-md-3">
<div class="card border-success">
<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="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="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>
</div>
</div>
</div>
</div>
@* Per-site detail *@
@foreach (var (siteId, state) in _siteStates.OrderBy(s => s.Key))
{
<div class="card mb-3">
<div class="card-header d-flex justify-content-between align-items-center">
<div>
@if (state.IsOnline)
{
<span class="badge bg-success me-2">Online</span>
}
else
{
<span class="badge bg-danger me-2">Offline</span>
}
<strong>@siteId</strong>
</div>
<small class="text-muted">
Last report: @state.LastReportReceivedAt.LocalDateTime.ToString("HH:mm:ss") | Seq: @state.LastSequenceNumber
</small>
</div>
<div class="card-body">
@if (state.LatestReport != null)
{
var report = state.LatestReport;
<div class="row">
@* Connection Health *@
<div class="col-md-4">
<h6 class="text-muted mb-2">Data Connections</h6>
@if (report.DataConnectionStatuses.Count == 0)
{
<span class="text-muted small">None</span>
}
else
{
@foreach (var (connName, health) in report.DataConnectionStatuses)
{
<div class="d-flex justify-content-between mb-1">
<span class="small">@connName</span>
<span class="badge @GetConnectionHealthBadge(health)">@health</span>
</div>
}
}
</div>
@* Error Counts *@
<div class="col-md-4">
<h6 class="text-muted mb-2">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>
</div>
@* S&F Buffer Depths *@
<div class="col-md-4">
<h6 class="text-muted mb-2">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)
{
<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>
}
else
{
<span class="text-muted">No report data available.</span>
}
</div>
</div>
}
}
</div>
@code {
private IReadOnlyDictionary<string, SiteHealthState> _siteStates = new Dictionary<string, SiteHealthState>();
private Timer? _refreshTimer;
private int _autoRefreshSeconds = 10;
protected override void OnInitialized()
{
RefreshNow();
_refreshTimer = new Timer(_ =>
{
InvokeAsync(() =>
{
RefreshNow();
StateHasChanged();
});
}, null, TimeSpan.FromSeconds(_autoRefreshSeconds), TimeSpan.FromSeconds(_autoRefreshSeconds));
}
private void RefreshNow()
{
_siteStates = HealthAggregator.GetAllSiteStates();
}
private static string GetConnectionHealthBadge(ConnectionHealth health) => health switch
{
ConnectionHealth.Connected => "bg-success",
ConnectionHealth.Connecting => "bg-warning text-dark",
ConnectionHealth.Disconnected => "bg-danger",
_ => "bg-secondary"
};
public void Dispose()
{
_refreshTimer?.Dispose();
}
}

View File

@@ -0,0 +1,153 @@
@page "/monitoring/parked-messages"
@attribute [Authorize]
@using ScadaLink.Commons.Entities.Sites
@using ScadaLink.Commons.Interfaces.Repositories
@using ScadaLink.Commons.Messages.RemoteQuery
@using ScadaLink.Communication
@inject ISiteRepository SiteRepository
@inject CommunicationService CommunicationService
<div class="container-fluid mt-3">
<h4 class="mb-3">Parked Messages</h4>
<ToastNotification @ref="_toast" />
<ConfirmDialog @ref="_confirmDialog" />
<div class="row mb-3 g-2">
<div class="col-md-3">
<label class="form-label small">Site</label>
<select class="form-select form-select-sm" @bind="_selectedSiteId">
<option value="">Select site...</option>
@foreach (var site in _sites)
{
<option value="@site.SiteIdentifier">@site.Name</option>
}
</select>
</div>
<div class="col-md-2 d-flex align-items-end">
<button class="btn btn-primary btn-sm" @onclick="Search"
disabled="@(string.IsNullOrEmpty(_selectedSiteId) || _searching)">
@if (_searching) { <span class="spinner-border spinner-border-sm"></span> }
Query
</button>
</div>
</div>
@if (_errorMessage != null)
{
<div class="alert alert-danger">@_errorMessage</div>
}
@if (_messages != null)
{
<table class="table table-sm table-striped table-hover">
<thead class="table-dark">
<tr>
<th>Message ID</th>
<th>Target System</th>
<th>Method</th>
<th>Error</th>
<th>Attempts</th>
<th>Original</th>
<th>Last Attempt</th>
<th style="width: 120px;">Actions</th>
</tr>
</thead>
<tbody>
@if (_messages.Count == 0)
{
<tr><td colspan="8" class="text-muted text-center">No parked messages.</td></tr>
}
@foreach (var msg in _messages)
{
<tr>
<td class="small"><code>@msg.MessageId[..Math.Min(12, msg.MessageId.Length)]</code></td>
<td class="small">@msg.TargetSystem</td>
<td class="small">@msg.MethodName</td>
<td class="small text-danger">@msg.ErrorMessage</td>
<td class="small text-center">@msg.AttemptCount</td>
<td class="small"><TimestampDisplay Value="@msg.OriginalTimestamp" /></td>
<td class="small"><TimestampDisplay Value="@msg.LastAttemptTimestamp" /></td>
<td>
<button class="btn btn-outline-success btn-sm py-0 px-1 me-1"
title="Retry message (not yet implemented)">Retry</button>
<button class="btn btn-outline-danger btn-sm py-0 px-1"
title="Discard message (not yet implemented)">Discard</button>
</td>
</tr>
}
</tbody>
</table>
@if (_totalCount > 0)
{
<div class="d-flex justify-content-between align-items-center">
<span class="text-muted small">Page @_pageNumber of @((_totalCount + _pageSize - 1) / _pageSize) (@_totalCount total)</span>
<div>
<button class="btn btn-outline-secondary btn-sm me-1" @onclick="PrevPage" disabled="@(_pageNumber <= 1)">Previous</button>
<button class="btn btn-outline-secondary btn-sm" @onclick="NextPage" disabled="@(_messages.Count < _pageSize)">Next</button>
</div>
</div>
}
}
</div>
@code {
private List<Site> _sites = new();
private string _selectedSiteId = string.Empty;
private List<ParkedMessageEntry>? _messages;
private int _totalCount;
private int _pageNumber = 1;
private int _pageSize = 25;
private bool _searching;
private string? _errorMessage;
private ToastNotification _toast = default!;
private ConfirmDialog _confirmDialog = default!;
protected override async Task OnInitializedAsync()
{
_sites = (await SiteRepository.GetAllSitesAsync()).ToList();
}
private async Task Search()
{
_pageNumber = 1;
await FetchPage();
}
private async Task PrevPage() { _pageNumber--; await FetchPage(); }
private async Task NextPage() { _pageNumber++; await FetchPage(); }
private async Task FetchPage()
{
_searching = true;
_errorMessage = null;
try
{
var request = new ParkedMessageQueryRequest(
CorrelationId: Guid.NewGuid().ToString("N"),
SiteId: _selectedSiteId,
PageNumber: _pageNumber,
PageSize: _pageSize,
Timestamp: DateTimeOffset.UtcNow);
var response = await CommunicationService.QueryParkedMessagesAsync(_selectedSiteId, request);
if (response.Success)
{
_messages = response.Messages.ToList();
_totalCount = response.TotalCount;
}
else
{
_errorMessage = response.ErrorMessage ?? "Query failed.";
}
}
catch (Exception ex)
{
_errorMessage = $"Query failed: {ex.Message}";
}
_searching = false;
}
}