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

198
src/ScadaLink.CentralUI/Components/Pages/Deployment/DebugView.razor
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",

120
src/ScadaLink.CentralUI/Components/Pages/Deployment/Deployments.razor
View File

@@ -12,9 +12,12 @@
<div class="container-fluid mt-3">
<div class="d-flex justify-content-between align-items-center mb-3">
<h4 class="mb-0">Deployment Status</h4>
<div>
<span class="text-muted small me-2">Auto-refresh: 10s</span>
<button class="btn btn-outline-secondary btn-sm" @onclick="LoadDataAsync">Refresh</button>
<div class="d-flex gap-2 align-items-center">
<button class="btn btn-outline-secondary btn-sm" @onclick="ToggleAutoRefresh"
aria-label="@(_autoRefresh ? "Pause auto-refresh" : "Resume auto-refresh")">
@(_autoRefresh ? "⏸ Pause updates" : "▶ Resume updates")
</button>
<button class="btn btn-outline-secondary btn-sm" @onclick="LoadDataAsync" aria-label="Refresh deployments">Refresh</button>
</div>
</div>
@@ -30,7 +33,7 @@
{
@* Summary cards *@
<div class="row mb-3">
<div class="col-md-3">
<div class="col-lg-3 col-md-6 col-12">
<div class="card border-warning">
<div class="card-body text-center py-2">
<h4 class="mb-0 text-warning">@_records.Count(r => r.Status == DeploymentStatus.Pending)</h4>
@@ -38,7 +41,7 @@
</div>
</div>
</div>
<div class="col-md-3">
<div class="col-lg-3 col-md-6 col-12">
<div class="card border-info">
<div class="card-body text-center py-2">
<h4 class="mb-0 text-info">@_records.Count(r => r.Status == DeploymentStatus.InProgress)</h4>
@@ -46,7 +49,7 @@
</div>
</div>
</div>
<div class="col-md-3">
<div class="col-lg-3 col-md-6 col-12">
<div class="card border-success">
<div class="card-body text-center py-2">
<h4 class="mb-0 text-success">@_records.Count(r => r.Status == DeploymentStatus.Success)</h4>
@@ -54,7 +57,7 @@
</div>
</div>
</div>
<div class="col-md-3">
<div class="col-lg-3 col-md-6 col-12">
<div class="card border-danger">
<div class="card-body text-center py-2">
<h4 class="mb-0 text-danger">@_records.Count(r => r.Status == DeploymentStatus.Failed)</h4>
@@ -64,37 +67,51 @@
</div>
</div>
<table class="table table-sm table-striped table-hover">
@if (_records.Count == 0)
{
<div class="text-center py-5 text-muted">
<p class="mb-0">No deployments recorded.</p>
</div>
}
else
{
<table class="table table-sm table-striped table-hover align-middle">
<thead class="table-dark">
<tr>
<th>Deployment ID</th>
<th>Deployment</th>
<th>Instance</th>
<th>Status</th>
<th>Deployed By</th>
<th>Started</th>
<th>Completed</th>
<th>Revision</th>
<th>Error</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
@if (_records.Count == 0)
{
<tr>
<td colspan="8" class="text-muted text-center">No deployments recorded.</td>
</tr>
}
@foreach (var record in _pagedRecords)
{
<tr class="@GetRowClass(record.Status)">
<td><code class="small">@record.DeploymentId[..Math.Min(12, record.DeploymentId.Length)]...</code></td>
var rowId = $"deploy-row-{record.DeploymentId}";
var errorCollapseId = $"deploy-err-{record.DeploymentId}";
var isFailed = record.Status == DeploymentStatus.Failed;
var idShort = record.DeploymentId[..Math.Min(12, record.DeploymentId.Length)];
var revShort = record.RevisionHash?[..Math.Min(8, record.RevisionHash?.Length ?? 0)];
<tr id="@rowId" class="@GetRowClass(record.Status)">
<td>
<code class="small">@idShort@(string.IsNullOrEmpty(revShort) ? "" : $"@{revShort}")</code>
</td>
<td>@GetInstanceName(record.InstanceId)</td>
<td>
<span class="badge @GetStatusBadge(record.Status)">
@if (isFailed)
{
<i class="bi bi-x-circle text-danger me-1" aria-hidden="true"></i>
}
<span class="badge @GetStatusBadge(record.Status)"
aria-label="@($"Deployment status: {record.Status}")">
@record.Status
@if (record.Status == DeploymentStatus.InProgress)
{
<span class="spinner-border spinner-border-sm ms-1" style="width: 0.7rem; height: 0.7rem;"></span>
<span class="spinner-border spinner-border-sm ms-1" style="width: 0.7rem; height: 0.7rem;"
role="status" aria-label="Deployment in progress"></span>
}
</span>
</td>
@@ -112,12 +129,33 @@
<span class="text-muted">—</span>
}
</td>
<td class="small"><code>@(record.RevisionHash?[..Math.Min(8, record.RevisionHash?.Length ?? 0)])</code></td>
<td class="small text-danger">@(record.ErrorMessage ?? "")</td>
<td class="small text-end">
@if (isFailed && !string.IsNullOrEmpty(record.ErrorMessage))
{
<button class="btn btn-link btn-sm p-0" type="button"
@onclick="() => ToggleErrorExpansion(record.DeploymentId)"
aria-expanded="@(IsErrorExpanded(record.DeploymentId) ? "true" : "false")"
aria-controls="@errorCollapseId">
@(IsErrorExpanded(record.DeploymentId) ? "Hide error" : "View error")
</button>
}
</td>
</tr>
@if (isFailed && !string.IsNullOrEmpty(record.ErrorMessage) && IsErrorExpanded(record.DeploymentId))
{
<tr id="@errorCollapseId" class="table-danger">
<td colspan="7">
<div class="small">
<strong>Error:</strong>
<pre class="mb-0 mt-1 small" style="white-space: pre-wrap; word-break: break-word;">@record.ErrorMessage</pre>
</div>
</td>
</tr>
}
}
</tbody>
</table>
}
@if (_totalPages > 1)
{
@@ -149,22 +187,56 @@
private bool _loading = true;
private string? _errorMessage;
private Timer? _refreshTimer;
private bool _autoRefresh = true;
private readonly HashSet<string> _expandedErrors = new();
private int _currentPage = 1;
private int _totalPages;
private const int PageSize = 25;
private static readonly TimeSpan RefreshInterval = TimeSpan.FromSeconds(10);
protected override async Task OnInitializedAsync()
{
await LoadDataAsync();
StartTimer();
}
private void StartTimer()
{
_refreshTimer?.Dispose();
_refreshTimer = new Timer(_ =>
{
InvokeAsync(async () =>
{
if (!_autoRefresh) return;
await LoadDataAsync();
StateHasChanged();
});
}, null, TimeSpan.FromSeconds(10), TimeSpan.FromSeconds(10));
}, null, RefreshInterval, RefreshInterval);
}
private void ToggleAutoRefresh()
{
_autoRefresh = !_autoRefresh;
if (_autoRefresh)
{
StartTimer();
}
else
{
_refreshTimer?.Dispose();
_refreshTimer = null;
}
}
private bool IsErrorExpanded(string deploymentId) => _expandedErrors.Contains(deploymentId);
private void ToggleErrorExpansion(string deploymentId)
{
if (!_expandedErrors.Remove(deploymentId))
{
_expandedErrors.Add(deploymentId);
}
}
private async Task LoadDataAsync()

192
src/ScadaLink.CentralUI/Components/Pages/Deployment/Topology.razor
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 ----

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();
}
}
}