feat(ui): notification report row double-click opens detail modal

This commit is contained in:
Joseph Doherty
2026-05-21 02:39:41 -04:00
parent 80076a3951
commit ef5cf76026
2 changed files with 287 additions and 2 deletions

View File

@@ -139,7 +139,9 @@
<tbody>
@foreach (var n in _notifications)
{
<tr @key="n.NotificationId" class="@(n.IsStuck ? "table-warning" : "")">
<tr @key="n.NotificationId" class="@(n.IsStuck ? "table-warning" : "")"
style="cursor: pointer;" @ondblclick="() => ShowDetail(n)"
title="Double-click for full detail">
<td><code class="small" title="@n.NotificationId">@ShortId(n.NotificationId)</code></td>
<td>@n.Type</td>
<td>@n.ListName</td>
@@ -162,7 +164,7 @@
<td><span class="small">@SiteName(n.SourceSiteId)</span></td>
<td><TimestampDisplay Value="@n.CreatedAt" Format="yyyy-MM-dd HH:mm" /></td>
<td><TimestampDisplay Value="@n.DeliveredAt" Format="yyyy-MM-dd HH:mm" NullText="—" /></td>
<td class="text-end">
<td class="text-end" @ondblclick:stopPropagation="true">
@* Bundle D (#23 M7-T10) drill-in: NotificationId is the audit
CorrelationId, so the link deep-links into the central Audit
Log pre-filtered to this notification's lifecycle events. *@
@@ -206,6 +208,86 @@
}
</div>
@* ── Row detail modal ── *@
@if (_detailNotification != null)
{
var d = _detailNotification;
<div class="modal show d-block" tabindex="-1" style="background: rgba(0,0,0,0.4);"
@onclick="CloseDetail">
<div class="modal-dialog modal-dialog-scrollable modal-lg" @onclick:stopPropagation="true">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title">Notification Detail — @ShortId(d.NotificationId)</h6>
<button type="button" class="btn-close" aria-label="Close"
@onclick="CloseDetail"></button>
</div>
<div class="modal-body">
<dl class="row mb-0">
<dt class="col-sm-3">Notification ID</dt>
<dd class="col-sm-9"><code>@d.NotificationId</code></dd>
<dt class="col-sm-3">Type</dt>
<dd class="col-sm-9">@d.Type</dd>
<dt class="col-sm-3">List</dt>
<dd class="col-sm-9">@d.ListName</dd>
<dt class="col-sm-3">Subject</dt>
<dd class="col-sm-9">@d.Subject</dd>
<dt class="col-sm-3">Status</dt>
<dd class="col-sm-9">
<span class="badge @StatusBadgeClass(d.Status)">@d.Status</span>
@if (d.IsStuck)
{
<span class="badge bg-warning text-dark ms-1">Stuck</span>
}
</dd>
<dt class="col-sm-3">Stuck</dt>
<dd class="col-sm-9">@(d.IsStuck ? "Yes" : "No")</dd>
<dt class="col-sm-3">Retry count</dt>
<dd class="col-sm-9 font-monospace">@d.RetryCount</dd>
<dt class="col-sm-3">Source site</dt>
<dd class="col-sm-9">@SiteName(d.SourceSiteId)</dd>
<dt class="col-sm-3">Source instance</dt>
<dd class="col-sm-9">@(string.IsNullOrEmpty(d.SourceInstanceId) ? "—" : d.SourceInstanceId)</dd>
<dt class="col-sm-3">Created</dt>
<dd class="col-sm-9"><TimestampDisplay Value="@d.CreatedAt" Format="yyyy-MM-dd HH:mm:ss" /></dd>
<dt class="col-sm-3">Delivered</dt>
<dd class="col-sm-9"><TimestampDisplay Value="@d.DeliveredAt" Format="yyyy-MM-dd HH:mm:ss" NullText="—" /></dd>
@if (!string.IsNullOrEmpty(d.LastError))
{
<dt class="col-sm-3">Last error</dt>
<dd class="col-sm-9 text-danger">@d.LastError</dd>
}
</dl>
</div>
<div class="modal-footer">
@if (d.Status == "Parked")
{
<button class="btn btn-outline-success btn-sm"
@onclick="() => RetryFromDetail(d)" disabled="@_actionInProgress">
Retry
</button>
<button class="btn btn-outline-danger btn-sm"
@onclick="() => DiscardFromDetail(d)" disabled="@_actionInProgress">
Discard
</button>
}
<button class="btn btn-outline-secondary btn-sm" @onclick="CloseDetail">Close</button>
</div>
</div>
</div>
</div>
}
@code {
private const int _pageSize = 50;
@@ -220,6 +302,9 @@
private string? _listError;
private bool _actionInProgress;
// Row detail modal
private NotificationSummary? _detailNotification;
// Filters
private string _statusFilter = string.Empty;
private string _typeFilter = string.Empty;
@@ -355,6 +440,24 @@
_actionInProgress = false;
}
private void ShowDetail(NotificationSummary n) => _detailNotification = n;
private void CloseDetail() => _detailNotification = null;
private async Task RetryFromDetail(NotificationSummary n)
{
await RetryNotification(n);
// RefreshAll replaces the row list; close the modal so the user sees the
// refreshed grid rather than a now-stale detail snapshot.
CloseDetail();
}
private async Task DiscardFromDetail(NotificationSummary n)
{
await DiscardNotification(n);
CloseDetail();
}
private void ClearFilters()
{
_statusFilter = string.Empty;

View File

@@ -0,0 +1,182 @@
using System.Security.Claims;
using Akka.Actor;
using Bunit;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging.Abstractions;
using Microsoft.Extensions.Options;
using ScadaLink.CentralUI.Components.Shared;
using NSubstitute;
using ScadaLink.Commons.Entities.Sites;
using ScadaLink.Commons.Interfaces.Repositories;
using ScadaLink.Commons.Messages.Notification;
using ScadaLink.Communication;
using NotificationReportPage = ScadaLink.CentralUI.Components.Pages.Notifications.NotificationReport;
namespace ScadaLink.CentralUI.Tests.Pages;
/// <summary>
/// bUnit tests for the Notification Report row-detail modal — double-clicking a
/// notification row opens a Bootstrap modal showing that notification's full,
/// untruncated details.
///
/// Mirrors <see cref="NotificationReportPageTests"/>'s seam: the report's
/// <see cref="CommunicationService"/> calls route through an injected scripted
/// actor (the notification-outbox proxy).
/// </summary>
public class NotificationReportDetailModalTests : BunitContext
{
private readonly ActorSystem _system = ActorSystem.Create("notif-report-modal-tests");
private readonly CommunicationService _comms;
private NotificationOutboxQueryResponse _queryReply =
new("q", true, null, new List<NotificationSummary>
{
new("notif-aaaaaaaa-1111-full-id", "Email", "Ops On-Call", "Pump fault at Plant-A",
"Parked", RetryCount: 3, LastError: "SMTP timeout connecting to mail relay",
SourceSiteId: "plant-a", SourceInstanceId: "Pump-001",
CreatedAt: DateTimeOffset.UtcNow.AddMinutes(-30),
DeliveredAt: null, IsStuck: true),
new("notif-bbbbbbbb-2222-full-id", "Email", "Maintenance", "Daily summary",
"Delivered", RetryCount: 0, LastError: null, SourceSiteId: "plant-b",
SourceInstanceId: null, CreatedAt: DateTimeOffset.UtcNow.AddHours(-2),
DeliveredAt: DateTimeOffset.UtcNow.AddHours(-2), IsStuck: false),
}, TotalCount: 2);
public NotificationReportDetailModalTests()
{
_comms = new CommunicationService(
Options.Create(new CommunicationOptions()),
NullLogger<CommunicationService>.Instance);
var outbox = _system.ActorOf(Props.Create(() => new ScriptedOutboxActor(this)));
_comms.SetNotificationOutbox(outbox);
Services.AddSingleton(_comms);
Services.AddSingleton<IDialogService>(new AlwaysConfirmDialogService());
var siteRepo = Substitute.For<ISiteRepository>();
siteRepo.GetAllSitesAsync(Arg.Any<CancellationToken>())
.Returns(Task.FromResult<IReadOnlyList<Site>>(new List<Site>
{
new("Plant A", "plant-a") { Id = 1 },
new("Plant B", "plant-b") { Id = 2 },
}));
Services.AddSingleton(siteRepo);
var claims = new[]
{
new Claim("Username", "tester"),
new Claim(ClaimTypes.Role, "Deployment"),
};
var user = new ClaimsPrincipal(new ClaimsIdentity(claims, "TestAuth"));
Services.AddSingleton<AuthenticationStateProvider>(new TestAuthStateProvider(user));
Services.AddAuthorizationCore();
}
[Fact]
public void DoubleClickRow_OpensDetailModal()
{
var cut = Render<NotificationReportPage>();
cut.WaitForState(() => cut.Markup.Contains("Pump fault at Plant-A"));
// No modal initially.
Assert.Empty(cut.FindAll(".modal.show"));
var row = cut.FindAll("tbody tr")
.First(r => r.TextContent.Contains("Pump fault at Plant-A"));
row.DoubleClick();
cut.WaitForAssertion(() =>
{
var modal = cut.Find(".modal.show");
Assert.Contains("Pump fault at Plant-A", modal.TextContent);
Assert.Contains("Ops On-Call", modal.TextContent);
});
}
[Fact]
public void Modal_ShowsFullNotificationId_NotTruncated()
{
var cut = Render<NotificationReportPage>();
cut.WaitForState(() => cut.Markup.Contains("Pump fault at Plant-A"));
var row = cut.FindAll("tbody tr")
.First(r => r.TextContent.Contains("Pump fault at Plant-A"));
row.DoubleClick();
cut.WaitForAssertion(() =>
{
var modal = cut.Find(".modal.show");
// The grid renders ShortId(...) (first 12 chars); the modal must show
// the complete identifier.
Assert.Contains("notif-aaaaaaaa-1111-full-id", modal.TextContent);
});
}
[Fact]
public void CloseButton_DismissesModal()
{
var cut = Render<NotificationReportPage>();
cut.WaitForState(() => cut.Markup.Contains("Pump fault at Plant-A"));
var row = cut.FindAll("tbody tr")
.First(r => r.TextContent.Contains("Pump fault at Plant-A"));
row.DoubleClick();
cut.WaitForState(() => cut.FindAll(".modal.show").Count > 0);
var closeButton = cut.Find(".modal.show .modal-footer button");
closeButton.Click();
cut.WaitForAssertion(() => Assert.Empty(cut.FindAll(".modal.show")));
}
[Fact]
public void Modal_ShowsLastError_WhenPresent()
{
var cut = Render<NotificationReportPage>();
cut.WaitForState(() => cut.Markup.Contains("Pump fault at Plant-A"));
var row = cut.FindAll("tbody tr")
.First(r => r.TextContent.Contains("Pump fault at Plant-A"));
row.DoubleClick();
cut.WaitForAssertion(() =>
{
var modal = cut.Find(".modal.show");
Assert.Contains("SMTP timeout connecting to mail relay", modal.TextContent);
});
}
protected override void Dispose(bool disposing)
{
if (disposing)
{
_system.Terminate().Wait(TimeSpan.FromSeconds(5));
}
base.Dispose(disposing);
}
private sealed class ScriptedOutboxActor : ReceiveActor
{
public ScriptedOutboxActor(NotificationReportDetailModalTests test)
{
Receive<NotificationOutboxQueryRequest>(_ => Sender.Tell(test._queryReply));
Receive<RetryNotificationRequest>(r =>
Sender.Tell(new RetryNotificationResponse(r.CorrelationId, true, null)));
Receive<DiscardNotificationRequest>(r =>
Sender.Tell(new DiscardNotificationResponse(r.CorrelationId, true, null)));
}
}
private sealed class AlwaysConfirmDialogService : IDialogService
{
public Task<bool> ConfirmAsync(string title, string message, bool danger = false)
=> Task.FromResult(true);
public Task<string?> PromptAsync(
string title, string label, string initialValue = "", string? placeholder = null)
=> Task.FromResult<string?>(null);
}
}