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

feat(ui/admin): Topology-style refresh of Data Connections page

Browse Source 
Brings the Data Connections admin page up to the same UX standard as the
Topology page:
- Search box with dim non-matches (opacity 0.4, shape preserved)
- Toolbar: + Connection (disabled until a site is selected), Refresh,
  Expand, Collapse
- Site context menu gains "Add Connection here" that navigates with
  ?siteId= so the form preselects + locks the Site field
- Form gains "Primary Endpoint" / "Backup Endpoint" h6 subsection
  headers matching the SiteForm convention; Failover Retry Count moved
  inside the Backup subsection
- URL renamed: /admin/connections (primary) + /admin/data-connections
  (legacy secondary @page). Same dual-route treatment on the form
- Nav label: "Data Connections" -> "Connections"
- Adds DataConnectionsPageTests bUnit suite (6 tests)
This commit is contained in:
Joseph Doherty
2026-05-11 22:42:48 -04:00
parent f3386d0278
commit da5fdf0e63
6 changed files with 447 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ScadaLink.CentralUI/Components/Pages/Admin/DataConnectionForm.razor
+43 -28
View File
@@ -1,3 +1,5 @@
@page "/admin/connections/create"
@page "/admin/connections/{Id:int}/edit"
@page "/admin/data-connections/create"
@page "/admin/data-connections/{Id:int}/edit"
@using ScadaLink.Security
@@ -21,17 +23,14 @@
{
<div class="card mb-3">
<div class="card-body">
@if (Id.HasValue)
{
<div class="mb-2">
<label class="form-label small">Site</label>
<input type="text" class="form-control form-control-sm" value="@(_siteName)" disabled />
</div>
}
else
{
<div class="mb-2">
<label class="form-label small">Site</label>
<div class="mb-2">
<label class="form-label small">Site</label>
@if (_siteLocked)
{
<input type="text" class="form-control form-control-sm" value="@_siteName" disabled />
}
else
{
<select class="form-select form-select-sm" @bind="_formSiteId">
<option value="0">Select site...</option>
@foreach (var site in _sites)
@@ -39,13 +38,13 @@
<option value="@site.Id">@site.Name</option>
}
</select>
</div>
}
}
</div>
<div class="mb-2">
<label class="form-label small">Name</label>
<input type="text" class="form-control form-control-sm" @bind="_formName" />
</div>
<div class="mb-2">
<div class="mb-3">
<label class="form-label small">Protocol</label>
<select class="form-select form-select-sm" @bind="_formProtocol">
<option value="">Select...</option>
@@ -53,12 +52,15 @@
<option value="Custom">Custom</option>
</select>
</div>
<div class="mb-2">
<label class="form-label small">Primary Endpoint Configuration</label>
<h6 class="text-muted border-bottom pb-1">Primary Endpoint</h6>
<div class="mb-3">
<label class="form-label small">Configuration</label>
<input type="text" class="form-control form-control-sm" @bind="_formConfiguration"
placeholder='e.g. {"endpoint":"opc.tcp://..."}' />
</div>
<h6 class="text-muted border-bottom pb-1">Backup Endpoint</h6>
@if (!_showBackup)
{
<div class="mb-3">
@@ -70,27 +72,27 @@
}
else
{
<div class="mb-3">
<div class="d-flex justify-content-between align-items-center mb-1">
<label class="form-label small mb-0">Backup Endpoint Configuration</label>
<button type="button" class="btn btn-outline-danger btn-sm"
@onclick="RemoveBackup">
Remove Backup
</button>
</div>
<div class="mb-2">
<label class="form-label small">Configuration</label>
<textarea class="form-control form-control-sm" rows="4"
@bind="_formBackupConfiguration"
placeholder='{"Host": "backup-host", "Port": 50101}' />
</div>
<div class="mb-3">
<div class="mb-2">
<label class="form-label small">Failover Retry Count</label>
<input type="number" class="form-control form-control-sm" style="max-width: 120px;"
min="1" max="20"
@bind="_formFailoverRetryCount" />
<div class="form-text">Retries on active endpoint before switching to backup (default: 3)</div>
</div>
<div class="mb-3">
<button type="button" class="btn btn-outline-danger btn-sm"
@onclick="RemoveBackup">
Remove Backup
</button>
</div>
}
@if (_formError != null)
{
<div class="text-danger small mt-2">@_formError</div>
@@ -106,12 +108,14 @@
@code {
[Parameter] public int? Id { get; set; }
[SupplyParameterFromQuery] public int? SiteId { get; set; }
private bool _loading = true;
private DataConnection? _editingConnection;
private List<Site> _sites = new();
private int _formSiteId;
private string _siteName = string.Empty;
private bool _siteLocked;
private string _formName = string.Empty;
private string _formProtocol = string.Empty;
private string? _formConfiguration;
@@ -133,6 +137,7 @@
{
_formSiteId = _editingConnection.SiteId;
_siteName = _sites.FirstOrDefault(s => s.Id == _formSiteId)?.Name ?? $"Site {_formSiteId}";
_siteLocked = true;
_formName = _editingConnection.Name;
_formProtocol = _editingConnection.Protocol;
_formConfiguration = _editingConnection.PrimaryConfiguration;
@@ -146,6 +151,16 @@
_formError = $"Failed to load connection: {ex.Message}";
}
}
else if (SiteId.HasValue)
{
var site = _sites.FirstOrDefault(s => s.Id == SiteId.Value);
if (site != null)
{
_formSiteId = site.Id;
_siteName = site.Name;
_siteLocked = true;
}
}
_loading = false;
}
@@ -178,7 +193,7 @@
await SiteRepository.AddDataConnectionAsync(conn);
}
await SiteRepository.SaveChangesAsync();
NavigationManager.NavigateTo("/admin/data-connections");
NavigationManager.NavigateTo("/admin/connections");
}
catch (Exception ex)
{
@@ -195,6 +210,6 @@
private void GoBack()
{
NavigationManager.NavigateTo("/admin/data-connections");
NavigationManager.NavigateTo("/admin/connections");
}
}