diff --git a/frontend-modern/src/pages/Alerts.tsx b/frontend-modern/src/pages/Alerts.tsx index 9efb0adfb..ebbde7519 100644 --- a/frontend-modern/src/pages/Alerts.tsx +++ b/frontend-modern/src/pages/Alerts.tsx @@ -87,7 +87,7 @@ interface UIEmailConfig { } export function Alerts() { - const { state, activeAlerts } = useWebSocket(); + const { state, activeAlerts, updateAlert } = useWebSocket(); const [activeTab, setActiveTab] = createSignal('overview'); const [hasUnsavedChanges, setHasUnsavedChanges] = createSignal(false); @@ -644,6 +644,7 @@ export function Alerts() { @@ -718,6 +719,7 @@ export function Alerts() { function OverviewTab(props: { overrides: Override[]; activeAlerts: Record; + updateAlert: (alertId: string, updates: Partial) => void; showQuickTip: () => boolean; dismissQuickTip: () => void; }) { @@ -779,6 +781,13 @@ function OverviewTab(props: { const successCount = response.results.filter(r => r.success).length; const errorCount = response.results.filter(r => !r.success).length; + // Update local state for successfully acknowledged alerts + response.results.forEach((result: any) => { + if (result.success) { + props.updateAlert(result.id, { acknowledged: true }); + } + }); + if (successCount > 0) { showSuccess(`Acknowledged ${successCount} alert${successCount > 1 ? 's' : ''}`); } @@ -984,6 +993,8 @@ function OverviewTab(props: { setProcessingAlerts(prev => new Set(prev).add(alert.id)); try { await AlertsAPI.acknowledge(alert.id); + // Update the local state immediately + props.updateAlert(alert.id, { acknowledged: true }); showSuccess('Alert acknowledged'); } catch (err) { console.error('Failed to acknowledge alert:', err); diff --git a/frontend-modern/src/stores/websocket.ts b/frontend-modern/src/stores/websocket.ts index 355cbe5b9..bbc726ad6 100644 --- a/frontend-modern/src/stores/websocket.ts +++ b/frontend-modern/src/stores/websocket.ts @@ -326,6 +326,13 @@ export function createWebSocketStore(url: string) { window.clearTimeout(reconnectTimeout); reconnectAttempt = 0; // Reset attempts for manual reconnect connect(); + }, + // Method to update an alert locally (e.g., after acknowledgment) + updateAlert: (alertId: string, updates: Partial) => { + const existingAlert = activeAlerts[alertId]; + if (existingAlert) { + setActiveAlerts(alertId, { ...existingAlert, ...updates }); + } } }; } \ No newline at end of file