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/Topology.razor
+115 -77
View File
@@ -19,10 +19,11 @@
@inject AuthenticationStateProvider AuthStateProvider
@inject NavigationManager NavigationManager
@inject IJSRuntime JSRuntime
@implements IDisposable
<div class="container-fluid mt-3">
<ToastNotification @ref="_toast" />
<ConfirmDialog @ref="_confirmDialog" />
<ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" />
<CreateAreaDialog @bind-IsVisible="_showCreateAreaDialog"
RequireSitePicker="_createAreaRequireSitePicker"
@@ -60,8 +61,10 @@
}
else
{
<h6 class="mb-2">Topology</h6>
<div class="d-flex align-items-center mb-2 gap-2">
<div class="d-flex justify-content-between align-items-center mb-3">
<h4 class="mb-0">Topology</h4>
</div>
<div class="d-flex align-items-center mb-2 gap-2 flex-wrap">
<input type="text" class="form-control form-control-sm" style="max-width: 320px;"
placeholder="Search sites, areas, instances..."
@bind="_searchText" @bind:event="oninput" @bind:after="OnSearchChanged" />
@@ -69,13 +72,22 @@
<button class="btn btn-outline-secondary" @onclick="OpenCreateAreaDialogRoot">+ Area</button>
<button class="btn btn-outline-secondary"
@onclick='() => NavigationManager.NavigateTo("/deployment/instances/create")'>+ Instance</button>
<button class="btn btn-outline-secondary" @onclick="LoadDataAsync">Refresh</button>
<button class="btn btn-outline-secondary" @onclick="() => _tree?.ExpandAll()">Expand</button>
<button class="btn btn-outline-secondary" @onclick="() => _tree?.CollapseAll()">Collapse</button>
<button class="btn btn-outline-secondary" aria-label="Refresh topology" @onclick="LoadDataAsync">Refresh</button>
<button class="btn btn-outline-secondary" aria-label="Expand all areas" @onclick="() => _tree?.ExpandAll()">Expand</button>
<button class="btn btn-outline-secondary" aria-label="Collapse all areas" @onclick="() => _tree?.CollapseAll()">Collapse</button>
</div>
<div class="form-check form-switch ms-2 mb-0">
<input type="checkbox" class="form-check-input" id="live-updates"
checked="@_liveUpdates" @onchange="OnLiveUpdatesToggled" />
<label class="form-check-label small" for="live-updates">Live updates</label>
</div>
</div>
<div style="max-height: calc(100vh - 180px); overflow-y: auto; padding: 4px;">
<div class="alert alert-light py-2 mb-3 small">
@_allAreas.Count area(s) · @_allInstances.Count instance(s) across @_sites.Count site(s).
</div>
<div style="max-height: calc(100vh - 240px); overflow-y: auto; padding: 4px;">
<TreeView @ref="_tree" TItem="TopoNode" Items="_treeRoots"
ChildrenSelector="n => n.Children"
HasChildrenSelector="n => n.Children.Count > 0"
@@ -96,58 +108,7 @@
</TreeView>
</div>
<div class="text-muted small mt-2">
@_allInstances.Count instance(s) across @_sites.Count site(s).
</div>
@* Diff Modal — ported from Instances.razor *@
@if (_showDiffModal)
{
<div class="modal d-block" tabindex="-1" style="background-color: rgba(0,0,0,0.5);">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Deployment Diff — @_diffInstanceName</h5>
<button type="button" class="btn-close" @onclick="() => _showDiffModal = false"></button>
</div>
<div class="modal-body">
@if (_diffLoading)
{
<LoadingSpinner IsLoading="true" />
}
else if (_diffError != null)
{
<div class="alert alert-danger">@_diffError</div>
}
else if (_diffResult != null)
{
<div class="mb-2">
<span class="badge @(_diffResult.IsStale ? "bg-warning text-dark" : "bg-success")">
@(_diffResult.IsStale ? "Stale — changes pending" : "Current")
</span>
<span class="text-muted small ms-2">
Deployed: @_diffResult.DeployedRevisionHash[..8]
| Current: @_diffResult.CurrentRevisionHash[..8]
| Deployed at: @_diffResult.DeployedAt.LocalDateTime.ToString("yyyy-MM-dd HH:mm")
</span>
</div>
@if (!_diffResult.IsStale)
{
<p class="text-muted">No differences between deployed and current configuration.</p>
}
else
{
<p class="text-muted small">The deployed revision hash differs from the current template-derived hash. Redeploy to apply changes.</p>
}
}
</div>
<div class="modal-footer">
<button class="btn btn-secondary btn-sm" @onclick="() => _showDiffModal = false">Close</button>
</div>
</div>
</div>
</div>
}
<DiffDialog @ref="_diffDialog" />
}
</div>
@@ -167,6 +128,12 @@
private ToastNotification _toast = default!;
private ConfirmDialog _confirmDialog = default!;
private DiffDialog _diffDialog = default!;
// ---- Live updates ----
private bool _liveUpdates = true;
private Timer? _liveUpdatesTimer;
private static readonly TimeSpan LiveUpdatesInterval = TimeSpan.FromSeconds(15);
private TreeView<TopoNode> _tree = default!;
private object? _selectedKey;
@@ -199,6 +166,41 @@
protected override async Task OnInitializedAsync()
{
await LoadDataAsync();
StartLiveUpdatesTimer();
}
private void StartLiveUpdatesTimer()
{
_liveUpdatesTimer?.Dispose();
if (!_liveUpdates) return;
_liveUpdatesTimer = new Timer(_ =>
{
InvokeAsync(async () =>
{
if (!_liveUpdates) return;
await LoadDataAsync();
StateHasChanged();
});
}, null, LiveUpdatesInterval, LiveUpdatesInterval);
}
private void OnLiveUpdatesToggled(ChangeEventArgs e)
{
_liveUpdates = e.Value is bool b && b;
if (_liveUpdates)
{
StartLiveUpdatesTimer();
}
else
{
_liveUpdatesTimer?.Dispose();
_liveUpdatesTimer = null;
}
}
public void Dispose()
{
_liveUpdatesTimer?.Dispose();
}
protected override async Task OnAfterRenderAsync(bool firstRender)
@@ -364,6 +366,7 @@
@if (_renamingKey == node.Key)
{
<input class="form-control form-control-sm d-inline-block" style="width: auto; max-width: 220px;"
aria-label="@($"Rename {node.Label}")"
@ref="_renameInput"
@bind="_renameBuffer"
@onkeydown="(e) => OnRenameKeyDown(e, node)"
@@ -386,9 +389,16 @@
<span class="badge @GetStateBadge(node.Instance!.State) ms-1" style="@labelStyle">@node.Instance!.State</span>
@if (node.Instance!.State != InstanceState.NotDeployed)
{
<span class="badge @(node.IsStale ? "bg-warning text-dark" : "bg-light text-dark") ms-1" style="@labelStyle">
@(node.IsStale ? "Stale" : "Current")
</span>
@if (node.IsStale)
{
<span class="badge bg-warning text-dark ms-1" style="@labelStyle" aria-label="State: Stale">
<i class="bi bi-exclamation-triangle me-1"></i>Stale
</span>
}
else
{
<span class="badge bg-light text-dark ms-1" style="@labelStyle" aria-label="State: Current">Current</span>
}
}
break;
}
@@ -787,36 +797,64 @@
}
// ---- Diff modal ----
private bool _showDiffModal;
private bool _diffLoading;
private string? _diffError;
private string _diffInstanceName = string.Empty;
private DeploymentComparisonResult? _diffResult;
private async Task ShowDiff(Instance inst)
{
_showDiffModal = true;
_diffLoading = true;
_diffError = null;
_diffResult = null;
_diffInstanceName = inst.UniqueName;
DeploymentComparisonResult? diffResult = null;
string? diffError = null;
try
{
var result = await DeploymentService.GetDeploymentComparisonAsync(inst.Id);
if (result.IsSuccess)
{
_diffResult = result.Value;
diffResult = result.Value;
}
else
{
_diffError = result.Error;
diffError = result.Error;
}
}
catch (Exception ex)
{
_diffError = $"Failed to load diff: {ex.Message}";
diffError = $"Failed to load diff: {ex.Message}";
}
_diffLoading = false;
RenderFragment body = builder =>
{
if (diffError != null)
{
builder.OpenElement(0, "div");
builder.AddAttribute(1, "class", "alert alert-danger");
builder.AddContent(2, diffError);
builder.CloseElement();
}
else if (diffResult != null)
{
var stale = diffResult.IsStale;
builder.OpenElement(0, "div");
builder.AddAttribute(1, "class", "mb-2");
builder.OpenElement(2, "span");
builder.AddAttribute(3, "class", stale ? "badge bg-warning text-dark" : "badge bg-success");
builder.AddContent(4, stale ? "Stale — changes pending" : "Current");
builder.CloseElement();
builder.OpenElement(5, "span");
builder.AddAttribute(6, "class", "text-muted small ms-2");
builder.AddContent(7,
$"Deployed: {diffResult.DeployedRevisionHash[..8]} | " +
$"Current: {diffResult.CurrentRevisionHash[..8]} | " +
$"Deployed at: {diffResult.DeployedAt.LocalDateTime:yyyy-MM-dd HH:mm}");
builder.CloseElement();
builder.CloseElement();
builder.OpenElement(8, "p");
builder.AddAttribute(9, "class", "text-muted small mb-0");
builder.AddContent(10, stale
? "The deployed revision hash differs from the current template-derived hash. Redeploy to apply changes."
: "No differences between deployed and current configuration.");
builder.CloseElement();
}
};
await _diffDialog.ShowAsync($"Deployment Diff — {inst.UniqueName}", body);
}
// ---- Dropdown option helpers ----