From 20eed2127b328144dbcaabdf63b56c04f6c94ea7 Mon Sep 17 00:00:00 2001 From: rcourtman <8825017+rcourtman@users.noreply.github.com> Date: Mon, 5 Oct 2026 04:34:24 +0100 Subject: [PATCH] Show Mail Gateway alerts on the gateway they belong to A gateway Proxmox reported online could be failing its job: mail held in the queue past the configured age. The Mail Gateway table ignored alerts, so that gateway rendered green and counted as Healthy while the problem sat only on the Alerts page. Alerts are keyed by the PMG instance id and rows by the unified id, so nothing joined them. Rows now match unacknowledged alerts across the gateway's identity aliases. An alerted, reachable gateway reads and filters as needing attention (red when an alert is critical) and names the alert type under its name. Its expansion leads with the exact alert message. On phones, six tracks truncated "mail-gateway-eu" and "mail-gateway-us" to the same text; the node count moves into the expansion so names stay whole. --- .../subsystems/frontend-primitives.md | 8 + .../internal/subsystems/unified-resources.md | 10 ++ .../cae2f413241f8ddf.json | 38 +++++ .../proxmox/ProxmoxMailGatewayDrawer.tsx | 31 +++- .../proxmox/ProxmoxMailGatewayTable.tsx | 126 +++++++++++++-- .../ProxmoxMailGatewayTable.alerts.test.tsx | 147 ++++++++++++++++++ .../__tests__/ProxmoxMailGatewayTable.test.ts | 38 +++-- 7 files changed, 363 insertions(+), 35 deletions(-) create mode 100644 frontend-modern/browser-verification/cae2f413241f8ddf.json create mode 100644 frontend-modern/src/features/proxmox/__tests__/ProxmoxMailGatewayTable.alerts.test.tsx diff --git a/docs/release-control/v6/internal/subsystems/frontend-primitives.md b/docs/release-control/v6/internal/subsystems/frontend-primitives.md index 7986829379..65c8c56cd9 100644 --- a/docs/release-control/v6/internal/subsystems/frontend-primitives.md +++ b/docs/release-control/v6/internal/subsystems/frontend-primitives.md @@ -8109,6 +8109,14 @@ the vSphere Overview renders `VsphereAlertsTable` with `showToolbar={false}` above its hosts table, only when signals exist, matching the TrueNAS Overview's health-alert table. Filtering stays on the platform's Health tab. +### Platform drawers lead with the open problem + +`ProxmoxMailGatewayDrawer` takes the row's open alerts and renders the shared +`DrawerAttentionSection` above its statistics, and its header status follows +those alerts, so the drawer never shows a green "Healthy" beside an active +warning. Inline detail rows that hold wrapping prose set `whitespace-normal` on +the cell and content, since platform table cells do not wrap. + ### Large platform notices keep the inventory in view `PlatformOutdatedAgentNotice` is maintenance guidance, not an incident, so it diff --git a/docs/release-control/v6/internal/subsystems/unified-resources.md b/docs/release-control/v6/internal/subsystems/unified-resources.md index d706acae89..12444715e5 100644 --- a/docs/release-control/v6/internal/subsystems/unified-resources.md +++ b/docs/release-control/v6/internal/subsystems/unified-resources.md @@ -1138,6 +1138,16 @@ the daemon tally as width shrinks, keeps one five-value phone projection (cluster, health, OSDs, pools, capacity) whose values each fit whole, and leaves quorum membership and the FSID to the cluster disclosure, where the FSID stays searchable and is shown in full. +The Mail Gateway row reflects its open alerts, not only the provider status: +a reachable gateway with an unacknowledged alert (mail queued past its age +threshold, a backlog) renders and filters as needing attention, names the alert +type under the gateway name, and its expansion leads with the shared drawer +attention section carrying the exact alert message. Alerts are matched across +the row's identity aliases, because they are keyed by the PMG instance id while +the row carries the unified id. Its phone projection is the five-track +instance, uptime, mail, queue and deferred set with a 40 percent identity, so +gateways that share a name prefix stay distinguishable; node count lives in the +expansion. The Proxmox host table drops temperature from its phone projection (container widths under 440px) so the node name, expansion toggle, and status dot share the same five-column shape as the guest table beneath it, diff --git a/frontend-modern/browser-verification/cae2f413241f8ddf.json b/frontend-modern/browser-verification/cae2f413241f8ddf.json new file mode 100644 index 0000000000..e2515d4bb4 --- /dev/null +++ b/frontend-modern/browser-verification/cae2f413241f8ddf.json @@ -0,0 +1,38 @@ +{ + "version": 1, + "base_sha": "27f020f033119d589150ae90f4570a7d8a579132", + "verified_at": "2026-10-05T03:34:23Z", + "result": "passed", + "changed_paths": [ + "frontend-modern/src/features/proxmox/ProxmoxMailGatewayDrawer.tsx", + "frontend-modern/src/features/proxmox/ProxmoxMailGatewayTable.tsx" + ], + "content_sha256": { + "frontend-modern/src/features/proxmox/ProxmoxMailGatewayDrawer.tsx": "0b57910805f48b86ab1823e61e7fee52e5e514632cf53fcdb1490f39c17eed83", + "frontend-modern/src/features/proxmox/ProxmoxMailGatewayTable.tsx": "8032d6deec8859124834cf66bec7e12dbbeb430b9f25710ba64f5ca71811feb9" + }, + "routes": [ + "/proxmox/mail" + ], + "viewports": [ + { + "width": 1440, + "height": 900 + }, + { + "width": 390, + "height": 844 + } + ], + "states": [ + "mail-gateway-eu online with an open warning alert (messages queued 41 minutes, threshold 30): amber dot, row tint, Message Age under its name, filter counts Healthy 0 / Degraded 2", + "Before: the same gateway rendered green and counted Healthy", + "Phone 390 and 340: Instance, Age, In, Q, Def with whole, distinguishable gateway names; before both read mail-gatew...", + "Expanded drawer at 1440 and 390: amber header dot, Needs attention section first with the full alert message wrapping, statistics and cluster nodes below", + "No console errors" + ], + "interactions": [ + "Expanded mail-gateway-eu at desktop and phone widths", + "Compared rendered state against the active alert list from /api/alerts/active" + ] +} diff --git a/frontend-modern/src/features/proxmox/ProxmoxMailGatewayDrawer.tsx b/frontend-modern/src/features/proxmox/ProxmoxMailGatewayDrawer.tsx index 540bf20f42..94390fc24f 100644 --- a/frontend-modern/src/features/proxmox/ProxmoxMailGatewayDrawer.tsx +++ b/frontend-modern/src/features/proxmox/ProxmoxMailGatewayDrawer.tsx @@ -1,4 +1,7 @@ import { For, Show, createMemo, createResource, type Component } from 'solid-js'; +import { DrawerAttentionSection } from '@/components/shared/DrawerAttentionSection'; +import { alertTypeDisplayLabel } from '@/features/alerts/helpers'; +import type { Alert } from '@/types/api'; import { Card } from '@/components/shared/Card'; import { DrawerSubjectHeading } from '@/components/shared/DrawerSubjectHeading'; import { InfoCardKeyValueRow } from '@/components/shared/InfoCardFrame'; @@ -217,6 +220,8 @@ function InOutBar(props: { export const ProxmoxMailGatewayDrawer: Component<{ instanceRow: Resource; onClose?: () => void; + /** Open alerts for this gateway, matched across its identity aliases by the table. */ + alerts?: Alert[]; }> = (props) => { const id = () => { const meta = props.instanceRow.pmg; @@ -236,7 +241,19 @@ export const ProxmoxMailGatewayDrawer: Component<{ ); const relayDomains = createMemo(() => instance()?.relayDomains ?? []); - const health = () => classifyHealth(instance()?.status ?? props.instanceRow.status); + // A reachable gateway with open alerts reads as needing attention, matching + // its table row, rather than a green "Healthy" beside the alert below. + const health = () => { + const base = classifyHealth(instance()?.status ?? props.instanceRow.status); + const open = (props.alerts ?? []).filter((alert) => !alert.acknowledged); + if (open.length === 0 || base.variant === 'danger') return base; + return { + variant: open.some((alert) => alert.level === 'critical') + ? ('danger' as const) + : ('warning' as const), + label: 'Needs attention', + }; + }; const name = () => asTrimmedString(instance()?.name) || asTrimmedString(props.instanceRow.name) || @@ -330,6 +347,18 @@ export const ProxmoxMailGatewayDrawer: Component<{ )} + {/* The exact problem first: a phone cannot hover the row's short reason. */} + ({ + id: alert.id, + message: alert.message, + subject: name(), + metric: alertTypeDisplayLabel(alert.type), + severity: alert.level, + acknowledged: alert.acknowledged, + }))} + /> + > = { - instance: 30, - nodes: 12, - uptime: 16, - mail: 14, - queue: 14, - deferred: 14, + instance: 40, + nodes: 0, + uptime: 15, + mail: 15, + queue: 15, + deferred: 15, }; export const MAIL_GATEWAY_NARROW_PHONE_COLUMN_WIDTHS: Readonly< @@ -104,10 +112,59 @@ export const ProxmoxMailGatewayTable: Component<{ emptyTitle: string; emptyDescription: string; }> = (props) => { + // A gateway the provider reports online can still be failing its job (mail + // held in the queue past the configured age, a backlog). Its open alerts + // decide the row's state, the status filter counts and the reason shown + // under its name, so "is mail flowing" is answered here, not only on Alerts. + const { activeAlerts } = useWebSocket(); + const alertsActivation = useAlertsActivation(); + // Alerts are keyed by the PMG instance id while the row carries the unified + // id, so match across the resource's identity aliases (alerts contract). + // There is deliberately no node-name fallback: PMG node alerts carry node + // names, and matching on them could pin one gateway's alert on another. + const alertIdsFor = (resource: Resource): string[] => [ + resource.id, + ...getResourceIdentityAliases(resource), + ]; + // One scan of the active-alert map per gateway, shared by the filter, the + // status counts, the row and its drawer. + const openAlertsById = createMemo(() => { + const byId = new Map(); + for (const resource of props.resources) { + byId.set( + resource.id, + getAlertsForResource( + alertIdsFor(resource), + activeAlerts, + alertsActivation.detectionEnabled(), + ) + .filter((alert) => !alert.acknowledged) + .sort((a, b) => Number(b.level === 'critical') - Number(a.level === 'critical')), + ); + } + return byId; + }); + const openAlertsFor = (resource: Resource): Alert[] => openAlertsById().get(resource.id) ?? []; + // Filtering keeps the provider's buckets: an alerted, reachable gateway + // counts under attention (degraded), an unreachable one stays offline. + const effectiveStatus = (resource: Resource): string | undefined => { + if (openAlertsFor(resource).length === 0) return resource.status; + return getSimpleStatusIndicator(resource.status).variant === 'danger' + ? resource.status + : 'warning'; + }; + // The dot follows the most severe open alert, so a critical one reads red. + const indicatorFor = (resource: Resource) => { + const base = getSimpleStatusIndicator(effectiveStatus(resource)); + return openAlertsFor(resource)[0]?.level === 'critical' + ? { ...base, variant: 'danger' as const } + : base; + }; const tableState = createPlatformTableFilterState({ resources: () => props.resources, initialStatus: 'all' as PlatformResourceStatusFilter, - filter: filterPlatformResources, + filter: (resources, search, status) => + filterPlatformResources(resources, search, status, effectiveStatus), }); const detail = createPlatformResourceDetailState({ idPrefix: 'proxmox-mail-gateway-detail' }); const observedWidth = useObservedElementWidth(); @@ -118,9 +175,9 @@ export const ProxmoxMailGatewayTable: Component<{ const width = observedWidth.width(); return typeof width === 'number' && width > 0 && width < 360; }); - // Uptime and mail-flow counters remain in the narrow projection; node count - // moves into the existing instance detail expansion below 360px. - const showNodes = createMemo(() => !isNarrowPhone()); + // Uptime and mail-flow counters remain in the phone projection; node count + // moves into the existing instance detail expansion on phones. + const showNodes = createMemo(() => layout() !== 'compact'); const showUptime = createMemo(() => true); const showOperational = createMemo(() => ['operational', 'expanded', 'full'].includes(layout())); const showVirus = createMemo(() => ['expanded', 'full'].includes(layout())); @@ -262,7 +319,16 @@ export const ProxmoxMailGatewayTable: Component<{ const pmg = () => instance.pmg; const name = () => asTrimmedString(instance.name) || instance.id; const version = () => asTrimmedString(pmg()?.version) || '—'; - const indicator = () => getSimpleStatusIndicator(instance.status); + const rowAlerts = createMemo(() => openAlertsFor(instance)); + const indicator = () => indicatorFor(instance); + // Same tint as the other platform tables, from the cached alerts. + const rowAlertBg = () => { + const top = rowAlerts()[0]; + if (!top) return ''; + return top.level === 'critical' + ? 'bg-red-50 dark:bg-red-950/25' + : 'bg-yellow-50 dark:bg-yellow-950/25'; + }; const isOpen = () => detail.isExpanded(instance); const detailRowId = () => detail.detailRowId(instance); return ( @@ -271,6 +337,7 @@ export const ProxmoxMailGatewayTable: Component<{ {...getPlatformResourceDetailRowInteractionProps({ expanded: isOpen(), onToggle: () => detail.toggle(instance), + class: rowAlertBg(), })} > @@ -284,12 +351,35 @@ export const ProxmoxMailGatewayTable: Component<{ - - {name()} - +
+ + {name()} + + + {(alert) => ( + open.message) + .join('\n')} + data-mail-gateway-alert-reason + > + {alertTypeDisplayLabel(alert().type)} + {rowAlerts().length > 1 ? ` +${rowAlerts().length - 1}` : ''} + + )} + +
@@ -377,12 +467,14 @@ export const ProxmoxMailGatewayTable: Component<{ detail.close(instance)} + alerts={rowAlerts()} /> diff --git a/frontend-modern/src/features/proxmox/__tests__/ProxmoxMailGatewayTable.alerts.test.tsx b/frontend-modern/src/features/proxmox/__tests__/ProxmoxMailGatewayTable.alerts.test.tsx new file mode 100644 index 0000000000..b8c8e9b791 --- /dev/null +++ b/frontend-modern/src/features/proxmox/__tests__/ProxmoxMailGatewayTable.alerts.test.tsx @@ -0,0 +1,147 @@ +import { cleanup, fireEvent, render, screen } from '@solidjs/testing-library'; +import { afterEach, describe, expect, it, vi } from 'vitest'; +import type { Alert } from '@/types/api'; +import type { Resource } from '@/types/resource'; +import { ProxmoxMailGatewayTable } from '../ProxmoxMailGatewayTable'; + +const activeAlerts: Record = {}; + +vi.mock('@/contexts/appRuntime', () => ({ + useWebSocket: () => ({ activeAlerts }), +})); + +vi.mock('@/stores/alertsActivation', () => ({ + useAlertsActivation: () => ({ detectionEnabled: () => true }), +})); + +vi.mock('@/utils/apiClient', () => ({ + apiFetch: vi.fn(async () => new Response(JSON.stringify(null), { status: 200 })), +})); + +const gateway = (id: string, name: string, instanceId: string): Resource => + ({ + id, + type: 'pmg', + name, + displayName: name, + platformType: 'proxmox-pmg', + sourceType: 'api', + status: 'online', + lastSeen: Date.now(), + canonicalIdentity: { primaryId: `agent:${instanceId}`, aliases: [instanceId, name] }, + pmg: { instanceId, nodeCount: 1, mailCountTotal: 10, queueTotal: 3, queueDeferred: 1 }, + }) as unknown as Resource; + +describe('ProxmoxMailGatewayTable open alerts', () => { + afterEach(() => { + cleanup(); + for (const key of Object.keys(activeAlerts)) delete activeAlerts[key]; + }); + + it('marks an online gateway with an open alert and says why, keyed by its instance id', async () => { + activeAlerts['pmg-main::oldest'] = { + id: 'pmg-main::oldest', + type: 'message-age', + level: 'warning', + resourceId: 'pmg-main', + resourceName: 'mail-gateway-eu', + node: 'https://pmg.example:8006', + message: 'PMG mail-gateway-eu has messages queued for 41 minutes (threshold: 30 minutes)', + acknowledged: false, + } as unknown as Alert; + + render(() => ( + + )); + + const reason = document.querySelector('[data-mail-gateway-alert-reason]'); + expect(reason?.textContent).toBe('Message Age'); + expect(reason?.getAttribute('title')).toContain('queued for 41 minutes'); + expect(document.querySelectorAll('[data-mail-gateway-alert-reason]')).toHaveLength(1); + + fireEvent.click(screen.getByRole('button', { name: /mail-gateway-eu/ })); + expect( + await screen.findByText(/queued for 41 minutes \(threshold: 30 minutes\)/), + ).toBeVisible(); + expect(screen.getByText('Needs attention')).toBeInTheDocument(); + }); + + it('ignores acknowledged alerts', () => { + activeAlerts['pmg-main::oldest'] = { + id: 'pmg-main::oldest', + type: 'message-age', + level: 'warning', + resourceId: 'pmg-main', + resourceName: 'mail-gateway-eu', + node: 'https://pmg.example:8006', + message: 'queued', + acknowledged: true, + } as unknown as Alert; + + render(() => ( + + )); + + expect(document.querySelector('[data-mail-gateway-alert-reason]')).toBeNull(); + }); + + it("does not pin another gateway's node alert on a row that shares its node name", () => { + activeAlerts['pmg-edge::node'] = { + id: 'pmg-edge::node', + type: 'message-age', + level: 'warning', + resourceId: 'pmg-edge', + resourceName: 'mail-gateway-us', + node: 'mail-gateway-eu', + message: 'queued on edge', + acknowledged: false, + } as unknown as Alert; + + render(() => ( + + )); + + expect(document.querySelector('[data-mail-gateway-alert-reason]')).toBeNull(); + }); + + it('reads red for a critical open alert', () => { + activeAlerts['pmg-main::queue'] = { + id: 'pmg-main::queue', + type: 'queue-total', + level: 'critical', + resourceId: 'pmg-main', + resourceName: 'mail-gateway-eu', + node: 'https://pmg.example:8006', + message: 'Queue above critical', + acknowledged: false, + } as unknown as Alert; + + render(() => ( + + )); + + const reason = document.querySelector('[data-mail-gateway-alert-reason]'); + expect(reason?.className).toContain('text-red-600'); + const row = reason?.closest('tr'); + expect(row?.querySelector('[class*="bg-red"]')).not.toBeNull(); + }); +}); diff --git a/frontend-modern/src/features/proxmox/__tests__/ProxmoxMailGatewayTable.test.ts b/frontend-modern/src/features/proxmox/__tests__/ProxmoxMailGatewayTable.test.ts index 5a741b4ee3..3018142336 100644 --- a/frontend-modern/src/features/proxmox/__tests__/ProxmoxMailGatewayTable.test.ts +++ b/frontend-modern/src/features/proxmox/__tests__/ProxmoxMailGatewayTable.test.ts @@ -10,6 +10,7 @@ import { MAIL_GATEWAY_PHONE_COLUMN_WIDTHS, } from '../ProxmoxMailGatewayTable'; import mailGatewayDrawerSource from '../ProxmoxMailGatewayDrawer.tsx?raw'; +import mailGatewayTableSource from '../ProxmoxMailGatewayTable.tsx?raw'; describe('ProxmoxMailGatewayTable phone presentation', () => { it('keeps compact drawer statistics on the shared responsive row contract', () => { @@ -22,23 +23,17 @@ describe('ProxmoxMailGatewayTable phone presentation', () => { ).toHaveLength(3); }); - it('keeps fleet context and mail-flow counters visible without scrolling', () => { - expect(MAIL_GATEWAY_PHONE_COLUMNS).toEqual([ - 'instance', - 'nodes', - 'uptime', - 'mail', - 'queue', - 'deferred', - ]); - expect(MAIL_GATEWAY_PHONE_COLUMN_WIDTHS).toEqual({ - instance: 30, - nodes: 12, - uptime: 16, - mail: 14, - queue: 14, - deferred: 14, - }); + it('keeps gateway names distinguishable with five phone tracks', () => { + // A sixth track (node count) truncated "mail-gateway-eu" and + // "mail-gateway-us" to the same text; the count lives in the expansion. + expect(MAIL_GATEWAY_PHONE_COLUMNS).toEqual(['instance', 'uptime', 'mail', 'queue', 'deferred']); + expect(MAIL_GATEWAY_PHONE_COLUMN_WIDTHS.instance).toBe(40); + expect( + MAIL_GATEWAY_PHONE_COLUMNS.reduce( + (total, column) => total + MAIL_GATEWAY_PHONE_COLUMN_WIDTHS[column], + 0, + ), + ).toBe(100); }); it('demotes node count below 360px while keeping five mail-flow fields', () => { @@ -73,4 +68,13 @@ describe('ProxmoxMailGatewayTable phone presentation', () => { expect(Math.min(...widths)).toBeGreaterThan(7); expect(widths.reduce((total, width) => total + width, 0)).toBeCloseTo(100, 1); }); + + it('matches gateway alerts across identity aliases and shows the problem in the drawer', () => { + // Alerts are keyed by the PMG instance id, rows by the unified id. + expect(mailGatewayTableSource).toContain('getResourceIdentityAliases(resource)'); + expect(mailGatewayTableSource).toContain( + 'filterPlatformResources(resources, search, status, effectiveStatus)', + ); + expect(mailGatewayDrawerSource).toContain('