dohertj2/ScadaBridge
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

refactor(ui/deployment): live-updates toggle, DebugView guardrails

Browse Source 
New shared DiffDialog mirroring ConfirmDialog's API
(ShowAsync(title, before, after)) so live-data pages stop
hand-rolling Bootstrap modal markup.

Topology: <h4> in flex header, aria-labels on Expand/Collapse/Refresh
and the inline rename input, Live-updates toggle (suppresses the 15s
timer when off), instance/area counts moved into a summary alert
above the tree, Stale badge paired with bi-exclamation-triangle icon
+ aria-label, hand-rolled Diff modal replaced with <DiffDialog @ref>.

Deployments: pause/resume auto-refresh button replaces the static
"Auto-refresh: 10s" text; summary cards switch to
col-lg-3 col-md-6 col-12; InProgress spinner gets role="status" +
aria-label; failed rows pick up a bi-x-circle icon next to the
Status badge; Deployment ID + Revision folded into one
{id}@{revision[..8]} cell; inline Error column collapses behind a
per-row "View error" toggle; bare empty-state text upgraded to the
centered muted block.

DebugView: status-strip card at the top showing instance / connection
state / last snapshot timestamp plus a "Start fresh" button when the
page auto-reconnected from localStorage. Per-table filter input,
scroll-lock toggle, Clear button, and a 200-row queue-style cap.
<tbody> elements gain aria-live="polite" aria-atomic="false" for
screen-reader announcements. Quality and Alarm-State badges get
aria-labels; timestamps display HH:mm:ss with full ms in a hover
tooltip. Auto-reconnect surfaces a toast with autoDismissMs: 8000.
This commit is contained in:
Joseph Doherty
2026-05-12 03:32:53 -04:00
parent b6e2ec8a50
commit 321ca0bbbf
4 changed files with 541 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ScadaLink.CentralUI/Components/Pages/Deployment/DebugView.razor
+172 -26
View File
@@ -26,6 +26,47 @@
}
else
{
@* Status strip — connection state, instance, last snapshot. *@
<div class="alert alert-light py-2 mb-3 d-flex justify-content-between align-items-center small flex-wrap gap-2">
<div class="d-flex align-items-center gap-2">
<strong>
@if (_connected)
{
var inst = _siteInstances.FirstOrDefault(i => i.Id == _selectedInstanceId);
@(inst?.UniqueName ?? "Connected")
}
else
{
<span class="text-muted">Not connected</span>
}
</strong>
@if (_connected)
{
<span class="badge bg-success" aria-label="Connection state: Live">
<span class="spinner-grow spinner-grow-sm me-1" style="width: 0.5rem; height: 0.5rem;" aria-hidden="true"></span>
Live
</span>
}
else
{
<span class="badge bg-secondary" aria-label="Connection state: Disconnected">Disconnected</span>
}
</div>
<div class="d-flex align-items-center gap-2">
@if (_snapshot != null)
{
<span class="text-muted">
Last snapshot: @_snapshot.SnapshotTimestamp.LocalDateTime.ToString("HH:mm:ss")
</span>
}
@if (_connected && _connectedFromStorage)
{
<button class="btn btn-outline-secondary btn-sm" @onclick="StartFresh"
aria-label="Clear persisted selection and disconnect">Start fresh</button>
}
</div>
</div>
<div class="row mb-3 g-2">
<div class="col-md-3">
<label class="form-label small">Site</label>
@@ -52,17 +93,13 @@
{
<button class="btn btn-primary btn-sm" @onclick="Connect"
disabled="@(_selectedInstanceId == 0 || _selectedSiteId == 0 || _connecting)">
@if (_connecting) { <span class="spinner-border spinner-border-sm me-1"></span> }
@if (_connecting) { <span class="spinner-border spinner-border-sm me-1" role="status" aria-label="Connecting"></span> }
Connect
</button>
}
else
{
<button class="btn btn-outline-danger btn-sm" @onclick="Disconnect">Disconnect</button>
<span class="badge bg-success align-self-center">
<span class="spinner-grow spinner-grow-sm me-1" style="width: 0.5rem; height: 0.5rem;"></span>
Live
</span>
}
</div>
</div>
@@ -73,9 +110,25 @@
@* Attribute Values *@
<div class="col-md-7">
<div class="card">
<div class="card-header py-2 d-flex justify-content-between">
<strong>Attribute Values</strong>
<small class="text-muted">@_attributeValues.Count values</small>
<div class="card-header py-2 d-flex justify-content-between align-items-center flex-wrap gap-2">
<div class="d-flex align-items-center gap-2">
<strong>Attribute Values</strong>
<small class="text-muted">@FilteredAttributeValues.Count latest (cap @MaxRows)</small>
</div>
<div class="d-flex align-items-center gap-2">
<input type="text" class="form-control form-control-sm"
style="max-width: 240px;"
placeholder="Filter by attribute…"
@bind="_attrFilter" @bind:event="oninput" aria-label="Filter attributes" />
<button class="btn btn-link btn-sm py-0" type="button"
@onclick="() => _attrScrollLocked = !_attrScrollLocked"
aria-pressed="@(_attrScrollLocked ? "true" : "false")"
aria-label="@(_attrScrollLocked ? "Scroll locked" : "Auto-scroll enabled")">
@(_attrScrollLocked ? "🔒 Locked" : "🔓 Auto-scroll")
</button>
<button class="btn btn-outline-secondary btn-sm" type="button"
@onclick="ClearAttributes" aria-label="Clear attribute table">Clear</button>
</div>
</div>
<div class="card-body p-0" style="max-height: 500px; overflow-y: auto;">
<table class="table table-sm table-striped mb-0">
@@ -87,16 +140,20 @@
<th>Timestamp</th>
</tr>
</thead>
<tbody>
@foreach (var av in _attributeValues.Values.OrderBy(a => a.AttributeName))
<tbody aria-live="polite" aria-atomic="false">
@foreach (var av in FilteredAttributeValues)
{
<tr>
<td class="small">@av.AttributeName</td>
<td class="small font-monospace"><strong>@ValueFormatter.FormatDisplayValue(av.Value)</strong></td>
<td>
<span class="badge @GetQualityBadge(av.Quality)">@av.Quality</span>
<span class="badge @GetQualityBadge(av.Quality)"
aria-label="@($"Quality: {av.Quality}")">@av.Quality</span>
</td>
<td class="small text-muted"
title="@av.Timestamp.LocalDateTime.ToString("HH:mm:ss.fff")">
@av.Timestamp.LocalDateTime.ToString("HH:mm:ss")
</td>
<td class="small text-muted">@av.Timestamp.LocalDateTime.ToString("HH:mm:ss.fff")</td>
</tr>
}
</tbody>
@@ -108,9 +165,25 @@
@* Alarm States *@
<div class="col-md-5">
<div class="card">
<div class="card-header py-2 d-flex justify-content-between">
<strong>Alarm States</strong>
<small class="text-muted">@_alarmStates.Count alarms</small>
<div class="card-header py-2 d-flex justify-content-between align-items-center flex-wrap gap-2">
<div class="d-flex align-items-center gap-2">
<strong>Alarm States</strong>
<small class="text-muted">@FilteredAlarmStates.Count latest (cap @MaxRows)</small>
</div>
<div class="d-flex align-items-center gap-2">
<input type="text" class="form-control form-control-sm"
style="max-width: 240px;"
placeholder="Filter by alarm…"
@bind="_alarmFilter" @bind:event="oninput" aria-label="Filter alarms" />
<button class="btn btn-link btn-sm py-0" type="button"
@onclick="() => _alarmScrollLocked = !_alarmScrollLocked"
aria-pressed="@(_alarmScrollLocked ? "true" : "false")"
aria-label="@(_alarmScrollLocked ? "Scroll locked" : "Auto-scroll enabled")">
@(_alarmScrollLocked ? "🔒 Locked" : "🔓 Auto-scroll")
</button>
<button class="btn btn-outline-secondary btn-sm" type="button"
@onclick="ClearAlarms" aria-label="Clear alarm table">Clear</button>
</div>
</div>
<div class="card-body p-0" style="max-height: 500px; overflow-y: auto;">
<table class="table table-sm table-striped mb-0">
@@ -122,16 +195,20 @@
<th>Timestamp</th>
</tr>
</thead>
<tbody>
@foreach (var alarm in _alarmStates.Values.OrderBy(a => a.AlarmName))
<tbody aria-live="polite" aria-atomic="false">
@foreach (var alarm in FilteredAlarmStates)
{
<tr class="@GetAlarmRowClass(alarm.State)">
<td class="small">@alarm.AlarmName</td>
<td>
<span class="badge @GetAlarmStateBadge(alarm.State)">@alarm.State</span>
<span class="badge @GetAlarmStateBadge(alarm.State)"
aria-label="@($"Alarm state: {alarm.State}")">@alarm.State</span>
</td>
<td class="small">@alarm.Priority</td>
<td class="small text-muted">@alarm.Timestamp.LocalDateTime.ToString("HH:mm:ss.fff")</td>
<td class="small text-muted"
title="@alarm.Timestamp.LocalDateTime.ToString("HH:mm:ss.fff")">
@alarm.Timestamp.LocalDateTime.ToString("HH:mm:ss")
</td>
</tr>
}
</tbody>
@@ -140,11 +217,6 @@
</div>
</div>
</div>
<div class="text-muted small mt-2">
Snapshot received: @_snapshot.SnapshotTimestamp.LocalDateTime.ToString("HH:mm:ss") |
@_attributeValues.Count attributes, @_alarmStates.Count alarms
</div>
}
else if (_connected)
{
@@ -154,6 +226,8 @@
</div>
@code {
private const int MaxRows = 200;
private List<Site> _sites = new();
private List<Instance> _siteInstances = new();
private int _selectedSiteId;
@@ -161,11 +235,36 @@
private bool _loading = true;
private bool _connected;
private bool _connecting;
private bool _connectedFromStorage;
private DebugViewSnapshot? _snapshot;
// Keyed dictionaries hold the latest value per attribute/alarm; insertion order
// is preserved so we can trim the oldest when the count exceeds MaxRows.
private Dictionary<string, AttributeValueChanged> _attributeValues = new();
private Dictionary<string, AlarmStateChanged> _alarmStates = new();
// Filters and scroll-lock state per table.
private string _attrFilter = string.Empty;
private string _alarmFilter = string.Empty;
private bool _attrScrollLocked;
private bool _alarmScrollLocked;
private IReadOnlyList<AttributeValueChanged> FilteredAttributeValues =>
string.IsNullOrWhiteSpace(_attrFilter)
? _attributeValues.Values.OrderBy(a => a.AttributeName).ToList()
: _attributeValues.Values
.Where(a => a.AttributeName.Contains(_attrFilter, StringComparison.OrdinalIgnoreCase))
.OrderBy(a => a.AttributeName)
.ToList();
private IReadOnlyList<AlarmStateChanged> FilteredAlarmStates =>
string.IsNullOrWhiteSpace(_alarmFilter)
? _alarmStates.Values.OrderBy(a => a.AlarmName).ToList()
: _alarmStates.Values
.Where(a => a.AlarmName.Contains(_alarmFilter, StringComparison.OrdinalIgnoreCase))
.OrderBy(a => a.AlarmName)
.ToList();
private DebugStreamSession? _session;
private ToastNotification _toast = default!;
@@ -195,8 +294,15 @@
_selectedSiteId = siteId;
await LoadInstancesForSite();
_selectedInstanceId = instanceId;
_connectedFromStorage = true;
StateHasChanged();
await Connect();
// Auto-reconnect notice — the user didn't initiate this connection.
var inst = _siteInstances.FirstOrDefault(i => i.Id == instanceId);
_toast.ShowInfo(
$"Auto-reconnected to {inst?.UniqueName ?? "instance"} from previous session.",
autoDismissMs: 8000);
}
}
@@ -235,11 +341,11 @@
switch (evt)
{
case AttributeValueChanged av:
_attributeValues[av.AttributeName] = av;
UpsertWithCap(_attributeValues, av.AttributeName, av);
_ = InvokeAsync(StateHasChanged);
break;
case AlarmStateChanged al:
_alarmStates[al.AlarmName] = al;
UpsertWithCap(_alarmStates, al.AlarmName, al);
_ = InvokeAsync(StateHasChanged);
break;
}
@@ -296,11 +402,51 @@
await JS.InvokeVoidAsync("localStorage.removeItem", "debugView.instanceId");
_connected = false;
_connectedFromStorage = false;
_snapshot = null;
_attributeValues.Clear();
_alarmStates.Clear();
}
/// <summary>
/// Disconnect and forget the persisted selection. Surfaces in the status
/// strip whenever the page auto-reconnects from localStorage so the user
/// can opt out of the carry-over session.
/// </summary>
private async Task StartFresh()
{
await Disconnect();
_selectedSiteId = 0;
_selectedInstanceId = 0;
_siteInstances.Clear();
_toast.ShowInfo("Cleared previous session — select a site and instance to begin.", autoDismissMs: 5000);
}
private void ClearAttributes()
{
_attributeValues.Clear();
}
private void ClearAlarms()
{
_alarmStates.Clear();
}
/// <summary>
/// Replace or insert a value keyed by name, then trim the oldest entries
/// (queue-style) so the table size never exceeds MaxRows. Dictionary
/// preserves insertion order, so the first key is always the oldest.
/// </summary>
private static void UpsertWithCap<T>(Dictionary<string, T> map, string key, T value)
{
map[key] = value;
while (map.Count > MaxRows)
{
var oldest = map.Keys.First();
map.Remove(oldest);
}
}
private static string GetQualityBadge(string quality) => quality switch
{
"Good" => "bg-success",