dohertj2/scadalink-design
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

2
src/ScadaLink.CentralUI/Components/Layout/NavMenu.razor
View File

@@ -21,7 +21,7 @@
<NavLink class="nav-link" href="/admin/sites">Sites</NavLink>
</li>
<li class="nav-item">
<NavLink class="nav-link" href="/admin/data-connections">Data Connections</NavLink>
<NavLink class="nav-link" href="/admin/connections">Connections</NavLink>
</li>
<li class="nav-item">
<NavLink class="nav-link" href="/admin/api-keys">API Keys</NavLink>

71
src/ScadaLink.CentralUI/Components/Pages/Admin/DataConnectionForm.razor
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");
}
}

133
src/ScadaLink.CentralUI/Components/Pages/Admin/DataConnections.razor
View File

@@ -1,3 +1,4 @@
@page "/admin/connections"
@page "/admin/data-connections"
@using ScadaLink.Security
@using ScadaLink.Commons.Entities.Sites
@@ -7,11 +8,6 @@
@inject NavigationManager NavigationManager
<div class="container-fluid mt-3">
<div class="d-flex justify-content-between align-items-center mb-3">
<h4 class="mb-0">Data Connections</h4>
<button class="btn btn-primary btn-sm" @onclick='() => NavigationManager.NavigateTo("/admin/data-connections/create")'>Add Connection</button>
</div>
<ToastNotification @ref="_toast" />
<ConfirmDialog @ref="_confirmDialog" />
@@ -25,28 +21,56 @@
}
else
{
<TreeView TItem="DcTreeNode" Items="_treeRoots"
<h6 class="mb-2">Connections</h6>
<div class="d-flex align-items-center mb-2 gap-2">
<input type="text" class="form-control form-control-sm" style="max-width: 320px;"
placeholder="Search sites or connections..."
@bind="_searchText" @bind:event="oninput" @bind:after="OnSearchChanged" />
<div class="btn-group btn-group-sm">
<button class="btn btn-outline-secondary"
disabled="@(!HasSiteSelected)"
@onclick="OnAddConnectionClicked">+ Connection</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>
</div>
</div>
<TreeView @ref="_tree" TItem="DcTreeNode" Items="_treeRoots"
ChildrenSelector="n => n.Children"
HasChildrenSelector="n => n.Children.Count > 0"
KeySelector="n => n.Key"
StorageKey="data-connections-tree">
KeySelector="n => (object)n.Key"
StorageKey="data-connections-tree"
Selectable="true"
SelectedKey="_selectedKey"
SelectedKeyChanged="OnTreeNodeSelected">
<NodeContent Context="node">
@{
var labelStyle = IsDimmed(node) ? "opacity: 0.4;" : "";
}
@if (node.Kind == DcNodeKind.Site)
{
<span class="fw-semibold">@node.Label</span>
<span class="tv-label fw-semibold" style="@labelStyle">@node.Label</span>
<span class="badge bg-secondary ms-1">@node.Children.Count</span>
}
else
{
<span>@node.Label</span>
<span class="tv-label" style="@labelStyle">@node.Label</span>
<span class="badge bg-info ms-2">@node.Connection!.Protocol</span>
}
</NodeContent>
<ContextMenu Context="node">
@if (node.Kind == DcNodeKind.DataConnection)
@if (node.Kind == DcNodeKind.Site)
{
<button class="dropdown-item"
@onclick='() => NavigationManager.NavigateTo($"/admin/data-connections/{node.Connection!.Id}/edit")'>
@onclick="() => AddConnectionForSite(node.SiteId!.Value)">
Add Connection here
</button>
}
else
{
<button class="dropdown-item"
@onclick='() => NavigationManager.NavigateTo($"/admin/connections/{node.Connection!.Id}/edit")'>
Edit
</button>
<div class="dropdown-divider"></div>
@@ -57,15 +81,19 @@
}
</ContextMenu>
<EmptyContent>
<span class="text-muted fst-italic">No data connections configured.</span>
<span class="text-muted fst-italic">No sites configured. Add sites under Admin → Sites.</span>
</EmptyContent>
</TreeView>
<div class="text-muted small mt-2">
@_connections.Count connection(s) across @_treeRoots.Count site(s).
</div>
}
</div>
@code {
record DcTreeNode(string Key, string Label, DcNodeKind Kind, List<DcTreeNode> Children,
DataConnection? Connection = null);
int? SiteId = null, DataConnection? Connection = null);
enum DcNodeKind { Site, DataConnection }
private List<DcTreeNode> _treeRoots = new();
@@ -73,9 +101,16 @@
private bool _loading = true;
private string? _errorMessage;
private TreeView<DcTreeNode>? _tree;
private object? _selectedKey;
private string _searchText = string.Empty;
private HashSet<string> _matchKeys = new();
private ToastNotification _toast = default!;
private ConfirmDialog _confirmDialog = default!;
private bool HasSiteSelected => ResolveSelectedSiteId() != null;
protected override async Task OnInitializedAsync()
{
await LoadDataAsync();
@@ -101,9 +136,12 @@
Label: c.Name,
Kind: DcNodeKind.DataConnection,
Children: new(),
SiteId: c.SiteId,
Connection: c))
.ToList()
.ToList(),
SiteId: site.Id
)).ToList();
RebuildMatchKeys();
}
catch (Exception ex)
{
@@ -112,6 +150,71 @@
_loading = false;
}
private void OnTreeNodeSelected(object? key)
{
_selectedKey = key;
}
private int? ResolveSelectedSiteId()
{
if (_selectedKey is not string keyStr) return null;
foreach (var site in _treeRoots)
{
if (site.Key == keyStr) return site.SiteId;
foreach (var child in site.Children)
{
if (child.Key == keyStr) return site.SiteId;
}
}
return null;
}
private void OnAddConnectionClicked()
{
var sid = ResolveSelectedSiteId();
if (sid == null) return;
AddConnectionForSite(sid.Value);
}
private void AddConnectionForSite(int siteId)
{
NavigationManager.NavigateTo($"/admin/connections/create?siteId={siteId}");
}
private void OnSearchChanged()
{
RebuildMatchKeys();
}
private void RebuildMatchKeys()
{
_matchKeys.Clear();
if (string.IsNullOrWhiteSpace(_searchText)) return;
var q = _searchText.Trim();
foreach (var root in _treeRoots)
{
SubtreeContainsMatch(root, q);
}
}
private bool SubtreeContainsMatch(DcTreeNode node, string query)
{
var selfMatch = node.Label.Contains(query, StringComparison.OrdinalIgnoreCase);
var childMatch = false;
foreach (var child in node.Children)
{
if (SubtreeContainsMatch(child, query)) childMatch = true;
}
if (selfMatch || childMatch) _matchKeys.Add(node.Key);
return selfMatch || childMatch;
}
private bool IsDimmed(DcTreeNode node)
{
if (string.IsNullOrWhiteSpace(_searchText)) return false;
return !_matchKeys.Contains(node.Key);
}
private async Task DeleteConnection(DataConnection conn)
{
var confirmed = await _confirmDialog.ShowAsync(