dohertj2/scadalink-design
1
0
Fork 0
Code Issues Pull Requests 1 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

158
src/ScadaLink.CentralUI/Components/Shared/DiffDialog.razor Normal file
View File

@@ -0,0 +1,158 @@
@* Reusable diff/comparison dialog using Bootstrap modal.
Mirrors the ConfirmDialog API: callers invoke ShowAsync(title, before, after)
via @ref to display a side-by-side or simple before/after comparison.
z-index ladder follows ConfirmDialog: modal 1055 > backdrop 1040 (toasts at 1090). *@
@inject IJSRuntime JS
@implements IAsyncDisposable
@if (_visible)
{
<div class="modal-backdrop fade show"></div>
<div @ref="_modalRef"
class="modal fade show d-block"
tabindex="-1"
role="dialog"
@onkeydown="OnKeyDownAsync">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">@Title</h5>
<button type="button" class="btn-close" aria-label="Close diff dialog" @onclick="Close"></button>
</div>
<div class="modal-body">
@if (BodyContent != null)
{
@BodyContent
}
else
{
<div class="row g-3">
<div class="col-md-6">
<div class="small text-muted mb-1">Before</div>
<pre class="border rounded p-2 small bg-light mb-0" style="max-height: 50vh; overflow: auto; white-space: pre-wrap;">@Before</pre>
</div>
<div class="col-md-6">
<div class="small text-muted mb-1">After</div>
<pre class="border rounded p-2 small bg-light mb-0" style="max-height: 50vh; overflow: auto; white-space: pre-wrap;">@After</pre>
</div>
</div>
}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" @onclick="Close">Close</button>
</div>
</div>
</div>
</div>
}
@code {
private bool _visible;
private bool _bodyLocked;
private TaskCompletionSource<bool>? _tcs;
private ElementReference _modalRef;
[Parameter] public string Title { get; set; } = "Diff";
[Parameter] public string Before { get; set; } = string.Empty;
[Parameter] public string After { get; set; } = string.Empty;
/// <summary>
/// Optional custom body content. When supplied, it replaces the default
/// before/after panes — useful when the caller wants to render a richer
/// comparison (e.g. metadata badges, file lists, etc.).
/// </summary>
[Parameter] public RenderFragment? BodyContent { get; set; }
/// <summary>
/// Show the dialog with the supplied title and before/after text.
/// Returns when the user dismisses the dialog.
/// </summary>
public Task<bool> ShowAsync(string title, string before, string after)
{
Title = title;
Before = before;
After = after;
BodyContent = null;
return OpenAsync();
}
/// <summary>
/// Show the dialog with a custom body. Useful when the diff is not a
/// simple before/after string pair (e.g. a deployment comparison summary).
/// </summary>
public Task<bool> ShowAsync(string title, RenderFragment body)
{
Title = title;
BodyContent = body;
return OpenAsync();
}
private Task<bool> OpenAsync()
{
_visible = true;
_tcs = new TaskCompletionSource<bool>();
StateHasChanged();
return _tcs.Task;
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (_visible && !_bodyLocked)
{
_bodyLocked = true;
await TryLockBodyAsync();
try { await _modalRef.FocusAsync(); }
catch { /* prerender or detached: ignore */ }
}
}
private async Task OnKeyDownAsync(KeyboardEventArgs e)
{
if (e.Key == "Escape")
{
Close();
await Task.CompletedTask;
}
}
private void Close()
{
_visible = false;
_ = TryUnlockBodyAsync();
_tcs?.TrySetResult(true);
}
private async Task TryLockBodyAsync()
{
try
{
await JS.InvokeVoidAsync("document.body.classList.add", "modal-open");
}
catch
{
try { await JS.InvokeVoidAsync("console.debug", "DiffDialog: JS interop unavailable for body lock."); }
catch { /* swallow */ }
}
}
private async Task TryUnlockBodyAsync()
{
_bodyLocked = false;
try
{
await JS.InvokeVoidAsync("document.body.classList.remove", "modal-open");
}
catch
{
try { await JS.InvokeVoidAsync("console.debug", "DiffDialog: JS interop unavailable for body unlock."); }
catch { /* swallow */ }
}
}
public async ValueTask DisposeAsync()
{
if (_bodyLocked)
{
await TryUnlockBodyAsync();
}
}
}