dohertj2/scadalink-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): extract instance bindings and overrides to dedicated Configure page

Browse Source 
Move connection bindings, attribute overrides, and area assignment from
inline expandable rows on the Instances table to a separate page at
/deployment/instances/{id}/configure for a cleaner, less cramped UX.
This commit is contained in:
Joseph Doherty
2026-03-22 15:58:32 -04:00
parent 161dc406ed
commit bc4fc97652
2 changed files with 369 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

367
src/ScadaLink.CentralUI/Components/Pages/Deployment/InstanceConfigure.razor Normal file
View File

@@ -0,0 +1,367 @@
@page "/deployment/instances/{Id:int}/configure"
@using ScadaLink.Security
@using ScadaLink.Commons.Entities.Instances
@using ScadaLink.Commons.Entities.Sites
@using ScadaLink.Commons.Entities.Templates
@using ScadaLink.Commons.Interfaces.Repositories
@using ScadaLink.Commons.Types.Enums
@using ScadaLink.TemplateEngine.Services
@attribute [Authorize(Policy = AuthorizationPolicies.RequireDeployment)]
@inject ITemplateEngineRepository TemplateEngineRepository
@inject ISiteRepository SiteRepository
@inject InstanceService InstanceService
@inject AuthenticationStateProvider AuthStateProvider
@inject NavigationManager NavigationManager
<div class="container-fluid mt-3">
<div class="d-flex align-items-center mb-3">
<button class="btn btn-outline-secondary btn-sm me-3" @onclick="GoBack">&larr; Back to Instances</button>
<h4 class="mb-0">Configure Instance</h4>
</div>
<ToastNotification @ref="_toast" />
@if (_loading)
{
<LoadingSpinner IsLoading="true" />
}
else if (_errorMessage != null)
{
<div class="alert alert-danger">@_errorMessage</div>
}
else if (_instance != null)
{
@* Instance Identity *@
<div class="card mb-3">
<div class="card-body py-2">
<div class="row">
<div class="col-md-4">
<small class="text-muted">Instance</small>
<div><strong>@_instance.UniqueName</strong></div>
</div>
<div class="col-md-2">
<small class="text-muted">Template</small>
<div>@_templateName</div>
</div>
<div class="col-md-2">
<small class="text-muted">Site</small>
<div>@_siteName</div>
</div>
<div class="col-md-2">
<small class="text-muted">Status</small>
<div><span class="badge @GetStateBadge(_instance.State)">@_instance.State</span></div>
</div>
<div class="col-md-2">
<small class="text-muted">Area</small>
<div>@(_instance.AreaId.HasValue ? _areaName : "—")</div>
</div>
</div>
</div>
</div>
@* Connection Bindings *@
<div class="card mb-3">
<div class="card-header py-2 d-flex justify-content-between align-items-center">
<strong>Connection Bindings</strong>
@if (_bindingDataSourceAttrs.Count > 0 && _siteConnections.Count > 0)
{
<div class="d-flex align-items-center gap-1">
<select class="form-select form-select-sm" style="width: auto;" @bind="_bulkConnectionId">
<option value="0">Assign all to...</option>
@foreach (var c in _siteConnections)
{
<option value="@c.Id">@c.Name (@c.Protocol)</option>
}
</select>
<button class="btn btn-outline-primary btn-sm" @onclick="ApplyBulkBinding"
disabled="@(_bulkConnectionId == 0)">Apply</button>
</div>
}
</div>
<div class="card-body p-0">
@if (_bindingDataSourceAttrs.Count == 0)
{
<p class="text-muted small p-3 mb-0">No data-sourced attributes in this template.</p>
}
else
{
<table class="table table-sm table-bordered mb-0">
<thead class="table-light">
<tr>
<th>Attribute</th>
<th>Tag Path</th>
<th style="width: 280px;">Connection</th>
</tr>
</thead>
<tbody>
@foreach (var attr in _bindingDataSourceAttrs)
{
<tr>
<td class="small">@attr.Name</td>
<td class="small text-muted font-monospace">@attr.DataSourceReference</td>
<td>
<select class="form-select form-select-sm"
value="@GetBindingConnectionId(attr.Name)"
@onchange="(e) => OnBindingChanged(attr.Name, e)">
<option value="0">— none —</option>
@foreach (var c in _siteConnections)
{
<option value="@c.Id">@c.Name</option>
}
</select>
</td>
</tr>
}
</tbody>
</table>
<div class="p-2">
<button class="btn btn-success btn-sm" @onclick="SaveBindings" disabled="@_saving">Save Bindings</button>
</div>
}
</div>
</div>
@* Attribute Overrides *@
<div class="card mb-3">
<div class="card-header py-2">
<strong>Attribute Overrides</strong>
</div>
<div class="card-body p-0">
@if (_overrideAttrs.Count == 0)
{
<p class="text-muted small p-3 mb-0">No overridable (non-locked) attributes in this template.</p>
}
else
{
<table class="table table-sm table-bordered mb-0">
<thead class="table-light">
<tr>
<th>Attribute</th>
<th>Type</th>
<th>Template Value</th>
<th style="width: 280px;">Override Value</th>
</tr>
</thead>
<tbody>
@foreach (var attr in _overrideAttrs)
{
<tr>
<td class="small">@attr.Name</td>
<td><span class="badge bg-light text-dark">@attr.DataType</span></td>
<td class="small text-muted">@(attr.Value ?? "—")</td>
<td>
<input type="text" class="form-control form-control-sm"
value="@GetOverrideValue(attr.Name)"
@onchange="(e) => OnOverrideChanged(attr.Name, e)" />
</td>
</tr>
}
</tbody>
</table>
<div class="p-2">
<button class="btn btn-success btn-sm" @onclick="SaveOverrides" disabled="@_saving">Save Overrides</button>
</div>
}
</div>
</div>
@* Area Assignment *@
<div class="card mb-3">
<div class="card-header py-2">
<strong>Area Assignment</strong>
</div>
<div class="card-body py-2">
<div class="d-flex align-items-center gap-2">
<select class="form-select form-select-sm" style="width: auto;" @bind="_reassignAreaId">
<option value="0">No area</option>
@foreach (var a in _siteAreas)
{
<option value="@a.Id">@a.Name</option>
}
</select>
<button class="btn btn-outline-primary btn-sm" @onclick="ReassignArea" disabled="@_saving">Set Area</button>
</div>
</div>
</div>
}
</div>
@code {
[Parameter] public int Id { get; set; }
private Instance? _instance;
private string _templateName = "";
private string _siteName = "";
private string _areaName = "";
private bool _loading = true;
private bool _saving;
private string? _errorMessage;
private ToastNotification _toast = default!;
// Bindings
private List<TemplateAttribute> _bindingDataSourceAttrs = new();
private List<DataConnection> _siteConnections = new();
private Dictionary<string, int> _bindingSelections = new();
private int _bulkConnectionId;
// Overrides
private List<TemplateAttribute> _overrideAttrs = new();
private Dictionary<string, string?> _overrideValues = new();
// Area
private List<Area> _siteAreas = new();
private int _reassignAreaId;
protected override async Task OnInitializedAsync()
{
try
{
_instance = await TemplateEngineRepository.GetInstanceByIdAsync(Id);
if (_instance == null)
{
_errorMessage = $"Instance #{Id} not found.";
_loading = false;
return;
}
// Identity
var template = await TemplateEngineRepository.GetTemplateByIdAsync(_instance.TemplateId);
_templateName = template?.Name ?? $"#{_instance.TemplateId}";
var sites = await SiteRepository.GetAllSitesAsync();
_siteName = sites.FirstOrDefault(s => s.Id == _instance.SiteId)?.Name ?? $"#{_instance.SiteId}";
// Areas
_siteAreas = (await TemplateEngineRepository.GetAreasBySiteIdAsync(_instance.SiteId)).ToList();
_reassignAreaId = _instance.AreaId ?? 0;
_areaName = _siteAreas.FirstOrDefault(a => a.Id == _reassignAreaId)?.Name ?? "";
// Bindings
var attrs = await TemplateEngineRepository.GetAttributesByTemplateIdAsync(_instance.TemplateId);
_bindingDataSourceAttrs = attrs.Where(a => !string.IsNullOrEmpty(a.DataSourceReference)).ToList();
_siteConnections = (await SiteRepository.GetDataConnectionsBySiteIdAsync(_instance.SiteId)).ToList();
var existingBindings = await TemplateEngineRepository.GetBindingsByInstanceIdAsync(Id);
foreach (var b in existingBindings)
_bindingSelections[b.AttributeName] = b.DataConnectionId;
// Overrides
_overrideAttrs = attrs.Where(a => !a.IsLocked).ToList();
var existingOverrides = await TemplateEngineRepository.GetOverridesByInstanceIdAsync(Id);
foreach (var o in existingOverrides)
_overrideValues[o.AttributeName] = o.OverrideValue;
}
catch (Exception ex)
{
_errorMessage = $"Failed to load instance: {ex.Message}";
}
_loading = false;
}
private void GoBack() => NavigationManager.NavigateTo("/deployment/instances");
private async Task<string> GetCurrentUserAsync()
{
var authState = await AuthStateProvider.GetAuthenticationStateAsync();
return authState.User.FindFirst("Username")?.Value ?? "unknown";
}
// ── Bindings ────────────────────────────────────────────
private int GetBindingConnectionId(string attrName)
=> _bindingSelections.GetValueOrDefault(attrName, 0);
private void OnBindingChanged(string attrName, ChangeEventArgs e)
{
var val = int.TryParse(e.Value?.ToString(), out var id) ? id : 0;
if (val == 0) _bindingSelections.Remove(attrName);
else _bindingSelections[attrName] = val;
}
private void ApplyBulkBinding()
{
if (_bulkConnectionId == 0) return;
foreach (var attr in _bindingDataSourceAttrs)
_bindingSelections[attr.Name] = _bulkConnectionId;
}
private async Task SaveBindings()
{
_saving = true;
try
{
var bindings = _bindingSelections.Select(kv => (kv.Key, kv.Value)).ToList();
var user = await GetCurrentUserAsync();
var result = await InstanceService.SetConnectionBindingsAsync(Id, bindings, user);
if (result.IsSuccess)
_toast.ShowSuccess($"Saved {bindings.Count} connection binding(s).");
else
_toast.ShowError($"Save failed: {result.Error}");
}
catch (Exception ex)
{
_toast.ShowError($"Save failed: {ex.Message}");
}
_saving = false;
}
// ── Overrides ───────────────────────────────────────────
private string? GetOverrideValue(string attrName)
=> _overrideValues.GetValueOrDefault(attrName);
private void OnOverrideChanged(string attrName, ChangeEventArgs e)
{
var val = e.Value?.ToString();
if (string.IsNullOrEmpty(val)) _overrideValues.Remove(attrName);
else _overrideValues[attrName] = val;
}
private async Task SaveOverrides()
{
_saving = true;
try
{
var user = await GetCurrentUserAsync();
foreach (var (attrName, value) in _overrideValues)
await InstanceService.SetAttributeOverrideAsync(Id, attrName, value, user);
_toast.ShowSuccess($"Saved {_overrideValues.Count} override(s).");
}
catch (Exception ex)
{
_toast.ShowError($"Save overrides failed: {ex.Message}");
}
_saving = false;
}
// ── Area ────────────────────────────────────────────────
private async Task ReassignArea()
{
_saving = true;
try
{
var user = await GetCurrentUserAsync();
var result = await InstanceService.AssignToAreaAsync(Id, _reassignAreaId == 0 ? null : _reassignAreaId, user);
if (result.IsSuccess)
{
_areaName = _siteAreas.FirstOrDefault(a => a.Id == _reassignAreaId)?.Name ?? "";
_toast.ShowSuccess("Area reassigned.");
}
else
_toast.ShowError($"Reassign failed: {result.Error}");
}
catch (Exception ex)
{
_toast.ShowError($"Reassign failed: {ex.Message}");
}
_saving = false;
}
private static string GetStateBadge(InstanceState state) => state switch
{
InstanceState.Enabled => "bg-success",
InstanceState.Disabled => "bg-secondary",
InstanceState.NotDeployed => "bg-light text-dark",
_ => "bg-secondary"
};
}

281
src/ScadaLink.CentralUI/Components/Pages/Deployment/Instances.razor
View File

@@ -7,13 +7,11 @@
@using ScadaLink.Commons.Interfaces.Repositories
@using ScadaLink.Commons.Types.Enums
@using ScadaLink.DeploymentManager
@using ScadaLink.TemplateEngine.Services
@attribute [Authorize(Policy = AuthorizationPolicies.RequireDeployment)]
@inject ITemplateEngineRepository TemplateEngineRepository
@inject ISiteRepository SiteRepository
@inject IDeploymentManagerRepository DeploymentManagerRepository
@inject DeploymentService DeploymentService
@inject InstanceService InstanceService
@inject AuthenticationStateProvider AuthStateProvider
@inject NavigationManager NavigationManager
@@ -138,118 +136,13 @@
@onclick="() => EnableInstance(inst)" disabled="@_actionInProgress">Enable</button>
}
<button class="btn btn-outline-info btn-sm py-0 px-1 me-1"
@onclick="() => ToggleBindings(inst)">Bindings</button>
<button class="btn btn-outline-secondary btn-sm py-0 px-1 me-1"
@onclick="() => ToggleOverrides(inst)">Overrides</button>
@onclick='() => NavigationManager.NavigateTo($"/deployment/instances/{inst.Id}/configure")'>Configure</button>
<button class="btn btn-outline-info btn-sm py-0 px-1 me-1"
@onclick="() => ShowDiff(inst)" disabled="@(_actionInProgress || inst.State == InstanceState.NotDeployed)">Diff</button>
<button class="btn btn-outline-danger btn-sm py-0 px-1"
@onclick="() => DeleteInstance(inst)" disabled="@_actionInProgress">Delete</button>
</td>
</tr>
@if (_overrideInstanceId == inst.Id)
{
<tr>
<td colspan="7" class="bg-light p-3">
<div class="d-flex justify-content-between align-items-center mb-2">
<strong>Attribute Overrides for @inst.UniqueName</strong>
<div>
<label class="form-label small d-inline me-1">Reassign Area:</label>
<select class="form-select form-select-sm d-inline-block me-1" style="width:auto;" @bind="_reassignAreaId">
<option value="0">No area</option>
@foreach (var a in _allAreas.Where(a => a.SiteId == inst.SiteId))
{
<option value="@a.Id">@a.Name</option>
}
</select>
<button class="btn btn-sm btn-outline-primary" @onclick="() => ReassignArea(inst)" disabled="@_actionInProgress">Set Area</button>
</div>
</div>
@if (_overrideAttrs.Count == 0)
{
<p class="text-muted small mb-0">No overridable (non-locked) attributes in this template.</p>
}
else
{
<table class="table table-sm table-bordered mb-2">
<thead class="table-light">
<tr><th>Attribute</th><th>Template Value</th><th>Override Value</th></tr>
</thead>
<tbody>
@foreach (var attr in _overrideAttrs)
{
<tr>
<td class="small">@attr.Name <span class="badge bg-light text-dark">@attr.DataType</span></td>
<td class="small text-muted">@(attr.Value ?? "—")</td>
<td>
<input type="text" class="form-control form-control-sm"
value="@GetOverrideValue(attr.Name)"
@onchange="(e) => OnOverrideChanged(attr.Name, e)" />
</td>
</tr>
}
</tbody>
</table>
<button class="btn btn-success btn-sm" @onclick="SaveOverrides" disabled="@_actionInProgress">Save Overrides</button>
}
</td>
</tr>
}
@if (_bindingInstanceId == inst.Id)
{
<tr>
<td colspan="7" class="bg-light p-3">
<div class="d-flex justify-content-between align-items-center mb-2">
<strong>Connection Bindings for @inst.UniqueName</strong>
@if (_bindingDataSourceAttrs.Count > 0 && _siteConnections.Count > 0)
{
<div>
<select class="form-select form-select-sm d-inline-block me-1" style="width:auto;" @bind="_bulkConnectionId">
<option value="0">Select connection...</option>
@foreach (var c in _siteConnections)
{
<option value="@c.Id">@c.Name (@c.Protocol)</option>
}
</select>
<button class="btn btn-sm btn-outline-primary" @onclick="ApplyBulkBinding" disabled="@(_bulkConnectionId == 0)">Assign All</button>
</div>
}
</div>
@if (_bindingDataSourceAttrs.Count == 0)
{
<p class="text-muted small mb-0">No data-sourced attributes in this template.</p>
}
else
{
<table class="table table-sm table-bordered mb-2">
<thead class="table-light">
<tr><th>Attribute</th><th>Tag Path</th><th>Connection</th></tr>
</thead>
<tbody>
@foreach (var attr in _bindingDataSourceAttrs)
{
<tr>
<td class="small">@attr.Name</td>
<td class="small text-muted font-monospace">@attr.DataSourceReference</td>
<td>
<select class="form-select form-select-sm" value="@GetBindingConnectionId(attr.Name)"
@onchange="(e) => OnBindingChanged(attr.Name, e)">
<option value="0">— none —</option>
@foreach (var c in _siteConnections)
{
<option value="@c.Id">@c.Name</option>
}
</select>
</td>
</tr>
}
</tbody>
</table>
<button class="btn btn-success btn-sm" @onclick="SaveBindings" disabled="@_actionInProgress">Save Bindings</button>
}
</td>
</tr>
}
}
</tbody>
</table>
@@ -375,7 +268,7 @@
_sites = (await SiteRepository.GetAllSitesAsync()).ToList();
_templates = (await TemplateEngineRepository.GetAllTemplatesAsync()).ToList();
// Load areas for all sites
// Load areas for display
_allAreas.Clear();
foreach (var site in _sites)
{
@@ -562,85 +455,6 @@
_actionInProgress = false;
}
// Override state
private int _overrideInstanceId;
private List<TemplateAttribute> _overrideAttrs = new();
private Dictionary<string, string?> _overrideValues = new();
private int _reassignAreaId;
private async Task ToggleOverrides(Instance inst)
{
if (_overrideInstanceId == inst.Id) { _overrideInstanceId = 0; return; }
_overrideInstanceId = inst.Id;
_overrideValues.Clear();
_reassignAreaId = inst.AreaId ?? 0;
var attrs = await TemplateEngineRepository.GetAttributesByTemplateIdAsync(inst.TemplateId);
_overrideAttrs = attrs.Where(a => !a.IsLocked).ToList();
var overrides = await TemplateEngineRepository.GetOverridesByInstanceIdAsync(inst.Id);
foreach (var o in overrides)
{
_overrideValues[o.AttributeName] = o.OverrideValue;
}
}
private string? GetOverrideValue(string attrName) =>
_overrideValues.GetValueOrDefault(attrName);
private void OnOverrideChanged(string attrName, ChangeEventArgs e)
{
var val = e.Value?.ToString();
if (string.IsNullOrEmpty(val))
_overrideValues.Remove(attrName);
else
_overrideValues[attrName] = val;
}
private async Task SaveOverrides()
{
_actionInProgress = true;
try
{
var user = await GetCurrentUserAsync();
foreach (var (attrName, value) in _overrideValues)
{
await InstanceService.SetAttributeOverrideAsync(_overrideInstanceId, attrName, value, user);
}
_toast.ShowSuccess($"Saved {_overrideValues.Count} override(s).");
_overrideInstanceId = 0;
}
catch (Exception ex)
{
_toast.ShowError($"Save overrides failed: {ex.Message}");
}
_actionInProgress = false;
}
private async Task ReassignArea(Instance inst)
{
_actionInProgress = true;
try
{
var user = await GetCurrentUserAsync();
var result = await InstanceService.AssignToAreaAsync(inst.Id, _reassignAreaId == 0 ? null : _reassignAreaId, user);
if (result.IsSuccess)
{
_toast.ShowSuccess($"Area reassigned for '{inst.UniqueName}'.");
await LoadDataAsync();
}
else
{
_toast.ShowError($"Reassign failed: {result.Error}");
}
}
catch (Exception ex)
{
_toast.ShowError($"Reassign failed: {ex.Message}");
}
_actionInProgress = false;
}
// Diff state
private bool _showDiffModal;
private bool _diffLoading;
@@ -674,95 +488,4 @@
_diffLoading = false;
}
// Connection binding state
private int _bindingInstanceId;
private List<TemplateAttribute> _bindingDataSourceAttrs = new();
private List<DataConnection> _siteConnections = new();
private Dictionary<string, int> _bindingSelections = new();
private int _bulkConnectionId;
private async Task ToggleBindings(Instance inst)
{
if (_bindingInstanceId == inst.Id)
{
_bindingInstanceId = 0;
return;
}
_bindingInstanceId = inst.Id;
_bindingSelections.Clear();
_bulkConnectionId = 0;
// Load template attributes with DataSourceReference
var attrs = await TemplateEngineRepository.GetAttributesByTemplateIdAsync(inst.TemplateId);
_bindingDataSourceAttrs = attrs.Where(a => !string.IsNullOrEmpty(a.DataSourceReference)).ToList();
// Load data connections for this site (each connection now belongs to exactly one site)
_siteConnections = (await SiteRepository.GetDataConnectionsBySiteIdAsync(inst.SiteId)).ToList();
// Load existing bindings
var existingBindings = await TemplateEngineRepository.GetBindingsByInstanceIdAsync(inst.Id);
foreach (var b in existingBindings)
{
_bindingSelections[b.AttributeName] = b.DataConnectionId;
}
}
private int GetBindingConnectionId(string attrName)
{
return _bindingSelections.GetValueOrDefault(attrName, 0);
}
private void OnBindingChanged(string attrName, ChangeEventArgs e)
{
var val = int.TryParse(e.Value?.ToString(), out var id) ? id : 0;
SetBinding(attrName, val);
}
private void SetBinding(string attrName, int connectionId)
{
if (connectionId == 0)
_bindingSelections.Remove(attrName);
else
_bindingSelections[attrName] = connectionId;
}
private void ApplyBulkBinding()
{
if (_bulkConnectionId == 0) return;
foreach (var attr in _bindingDataSourceAttrs)
{
_bindingSelections[attr.Name] = _bulkConnectionId;
}
}
private async Task SaveBindings()
{
_actionInProgress = true;
try
{
var bindings = _bindingSelections
.Select(kv => (kv.Key, kv.Value))
.ToList();
var user = await GetCurrentUserAsync();
var result = await InstanceService.SetConnectionBindingsAsync(
_bindingInstanceId, bindings, user);
if (result.IsSuccess)
{
_toast.ShowSuccess($"Saved {bindings.Count} connection bindings.");
_bindingInstanceId = 0;
}
else
{
_toast.ShowError($"Save failed: {result.Error}");
}
}
catch (Exception ex)
{
_toast.ShowError($"Save failed: {ex.Message}");
}
_actionInProgress = false;
}
}