From 269a63af1fcda34b0c0ff2b190c92cbd1140ebe0 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Mon, 20 Apr 2026 13:49:52 +0200
Subject: [PATCH] feat(ui/alerts): AllAlertsPage + HistoryPage

AllAlertsPage: state filter chips (Open/Firing/Acked/All).
HistoryPage: RESOLVED filter, respects retention window.
---
 ui/src/pages/Alerts/AllAlertsPage.tsx | 50 ++++++++++++++++++++++++++-
 ui/src/pages/Alerts/HistoryPage.tsx   | 26 +++++++++++++-
 2 files changed, 74 insertions(+), 2 deletions(-)

diff --git a/ui/src/pages/Alerts/AllAlertsPage.tsx b/ui/src/pages/Alerts/AllAlertsPage.tsx
index 22aec1f6..db462ba4 100644
--- a/ui/src/pages/Alerts/AllAlertsPage.tsx
+++ b/ui/src/pages/Alerts/AllAlertsPage.tsx
@@ -1,3 +1,51 @@
+import { useState } from 'react';
+import { SectionHeader, Button } from '@cameleer/design-system';
+import { PageLoader } from '../../components/PageLoader';
+import { useAlerts, type AlertDto } from '../../api/queries/alerts';
+import { AlertRow } from './AlertRow';
+import css from './alerts-page.module.css';
+
+type AlertState = NonNullable<AlertDto['state']>;
+
+const STATE_FILTERS: Array<{ label: string; values: AlertState[] }> = [
+  { label: 'Open',  values: ['PENDING', 'FIRING', 'ACKNOWLEDGED'] },
+  { label: 'Firing', values: ['FIRING'] },
+  { label: 'Acked',  values: ['ACKNOWLEDGED'] },
+  { label: 'All',    values: ['PENDING', 'FIRING', 'ACKNOWLEDGED', 'RESOLVED'] },
+];
+
 export default function AllAlertsPage() {
-  return <div>AllAlertsPage — coming soon</div>;
+  const [filterIdx, setFilterIdx] = useState(0);
+  const filter = STATE_FILTERS[filterIdx];
+  const { data, isLoading, error } = useAlerts({ state: filter.values, limit: 200 });
+
+  if (isLoading) return <PageLoader />;
+  if (error) return <div className={css.page}>Failed to load alerts: {String(error)}</div>;
+
+  const rows = data ?? [];
+
+  return (
+    <div className={css.page}>
+      <div className={css.toolbar}>
+        <SectionHeader>All alerts</SectionHeader>
+        <div style={{ display: 'flex', gap: 4 }}>
+          {STATE_FILTERS.map((f, i) => (
+            <Button
+              key={f.label}
+              size="sm"
+              variant={i === filterIdx ? 'primary' : 'secondary'}
+              onClick={() => setFilterIdx(i)}
+            >
+              {f.label}
+            </Button>
+          ))}
+        </div>
+      </div>
+      {rows.length === 0 ? (
+        <div className={css.empty}>No alerts match this filter.</div>
+      ) : (
+        rows.map((a) => <AlertRow key={a.id} alert={a} unread={false} />)
+      )}
+    </div>
+  );
 }
diff --git a/ui/src/pages/Alerts/HistoryPage.tsx b/ui/src/pages/Alerts/HistoryPage.tsx
index 6807b6d4..27f01bb0 100644
--- a/ui/src/pages/Alerts/HistoryPage.tsx
+++ b/ui/src/pages/Alerts/HistoryPage.tsx
@@ -1,3 +1,27 @@
+import { SectionHeader } from '@cameleer/design-system';
+import { PageLoader } from '../../components/PageLoader';
+import { useAlerts } from '../../api/queries/alerts';
+import { AlertRow } from './AlertRow';
+import css from './alerts-page.module.css';
+
 export default function HistoryPage() {
-  return <div>HistoryPage — coming soon</div>;
+  const { data, isLoading, error } = useAlerts({ state: 'RESOLVED', limit: 200 });
+
+  if (isLoading) return <PageLoader />;
+  if (error) return <div className={css.page}>Failed to load history: {String(error)}</div>;
+
+  const rows = data ?? [];
+
+  return (
+    <div className={css.page}>
+      <div className={css.toolbar}>
+        <SectionHeader>History</SectionHeader>
+      </div>
+      {rows.length === 0 ? (
+        <div className={css.empty}>No resolved alerts in retention window.</div>
+      ) : (
+        rows.map((a) => <AlertRow key={a.id} alert={a} unread={false} />)
+      )}
+    </div>
+  );
 }