From a74785f64d5b06e1d2af7444466da86fd1f9e9ae Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Tue, 21 Apr 2026 10:07:38 +0200
Subject: [PATCH] refactor(alerts/ui): rewrite All alerts as DataTable +
 SegmentedTabs filter

Replaces 4-Button filter row with DS SegmentedTabs and custom row
rendering with DataTable. Shares expandedContent renderer and
severity-driven rowAccent with Inbox.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 ui/src/pages/Alerts/AllAlertsPage.tsx | 109 +++++++++++++++++++-------
 1 file changed, 82 insertions(+), 27 deletions(-)

diff --git a/ui/src/pages/Alerts/AllAlertsPage.tsx b/ui/src/pages/Alerts/AllAlertsPage.tsx
index db462ba4..4212e7b7 100644
--- a/ui/src/pages/Alerts/AllAlertsPage.tsx
+++ b/ui/src/pages/Alerts/AllAlertsPage.tsx
@@ -1,50 +1,105 @@
 import { useState } from 'react';
-import { SectionHeader, Button } from '@cameleer/design-system';
+import { Link } from 'react-router';
+import { Bell } from 'lucide-react';
+import {
+  SectionHeader, DataTable, EmptyState, SegmentedTabs,
+} from '@cameleer/design-system';
+import type { Column } from '@cameleer/design-system';
 import { PageLoader } from '../../components/PageLoader';
-import { useAlerts, type AlertDto } from '../../api/queries/alerts';
-import { AlertRow } from './AlertRow';
+import { SeverityBadge } from '../../components/SeverityBadge';
+import { AlertStateChip } from '../../components/AlertStateChip';
+import {
+  useAlerts, useMarkAlertRead,
+  type AlertDto,
+} from '../../api/queries/alerts';
+import { severityToAccent } from './severity-utils';
+import { formatRelativeTime } from './time-utils';
+import { renderAlertExpanded } from './alert-expanded';
 import css from './alerts-page.module.css';
+import tableStyles from '../../styles/table-section.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'] },
-];
+const STATE_FILTERS: Record<string, { label: string; values: AlertState[] }> = {
+  open:   { label: 'Open',   values: ['PENDING', 'FIRING', 'ACKNOWLEDGED'] },
+  firing: { label: 'Firing', values: ['FIRING'] },
+  acked:  { label: 'Acked',  values: ['ACKNOWLEDGED'] },
+  all:    { label: 'All',    values: ['PENDING', 'FIRING', 'ACKNOWLEDGED', 'RESOLVED'] },
+};
 
 export default function AllAlertsPage() {
-  const [filterIdx, setFilterIdx] = useState(0);
-  const filter = STATE_FILTERS[filterIdx];
+  const [filterKey, setFilterKey] = useState<string>('open');
+  const filter = STATE_FILTERS[filterKey];
   const { data, isLoading, error } = useAlerts({ state: filter.values, limit: 200 });
+  const markRead = useMarkAlertRead();
+
+  const rows = data ?? [];
+
+  const columns: Column<AlertDto>[] = [
+    {
+      key: 'severity', header: 'Severity', width: '110px',
+      render: (_, row) => row.severity ? <SeverityBadge severity={row.severity} /> : null,
+    },
+    {
+      key: 'state', header: 'State', width: '140px',
+      render: (_, row) => row.state ? <AlertStateChip state={row.state} silenced={row.silenced} /> : null,
+    },
+    {
+      key: 'title', header: 'Title',
+      render: (_, row) => (
+        <div className={css.titleCell}>
+          <Link to={`/alerts/inbox/${row.id}`} onClick={() => row.id && markRead.mutate(row.id)}>
+            {row.title ?? '(untitled)'}
+          </Link>
+          {row.message && <span className={css.titlePreview}>{row.message}</span>}
+        </div>
+      ),
+    },
+    {
+      key: 'firedAt', header: 'Fired at', width: '140px', sortable: true,
+      render: (_, row) =>
+        row.firedAt ? (
+          <span title={row.firedAt} style={{ fontVariantNumeric: 'tabular-nums' }}>
+            {formatRelativeTime(row.firedAt)}
+          </span>
+        ) : '—',
+    },
+  ];
 
   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>
+
+      <div className={css.filterBar}>
+        <SegmentedTabs
+          tabs={Object.entries(STATE_FILTERS).map(([value, f]) => ({ value, label: f.label }))}
+          active={filterKey}
+          onChange={setFilterKey}
+        />
+      </div>
+
       {rows.length === 0 ? (
-        <div className={css.empty}>No alerts match this filter.</div>
+        <EmptyState
+          icon={<Bell size={32} />}
+          title="No alerts match this filter"
+          description="Try switching to a different state or widening your criteria."
+        />
       ) : (
-        rows.map((a) => <AlertRow key={a.id} alert={a} unread={false} />)
+        <div className={tableStyles.tableSection}>
+          <DataTable<AlertDto & { id: string }>
+            columns={columns as Column<AlertDto & { id: string }>[]}
+            data={rows as Array<AlertDto & { id: string }>}
+            sortable
+            flush
+            rowAccent={(row) => row.severity ? severityToAccent(row.severity) : undefined}
+            expandedContent={renderAlertExpanded}
+          />
+        </div>
       )}
     </div>
   );