From 3e815724773f104cc79ace92550c464a080a8229 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Tue, 21 Apr 2026 10:14:19 +0200
Subject: [PATCH] refactor(alerts/ui): rewrite Silences with DataTable +
 FormField + ConfirmDialog

Replaces raw <table> with DataTable, inline-styled form with proper
FormField hints, and native confirm() end-early with ConfirmDialog
(warning variant). Adds DS EmptyState for no-silences case.

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

diff --git a/ui/src/pages/Alerts/SilencesPage.tsx b/ui/src/pages/Alerts/SilencesPage.tsx
index 2703b34b..77596eed 100644
--- a/ui/src/pages/Alerts/SilencesPage.tsx
+++ b/ui/src/pages/Alerts/SilencesPage.tsx
@@ -1,5 +1,10 @@
 import { useState } from 'react';
-import { Button, FormField, Input, SectionHeader, useToast } from '@cameleer/design-system';
+import { BellOff } from 'lucide-react';
+import {
+  Button, FormField, Input, SectionHeader, useToast, DataTable,
+  EmptyState, ConfirmDialog, MonoText,
+} from '@cameleer/design-system';
+import type { Column } from '@cameleer/design-system';
 import { PageLoader } from '../../components/PageLoader';
 import {
   useAlertSilences,
@@ -8,6 +13,8 @@ import {
   type AlertSilenceResponse,
 } from '../../api/queries/alertSilences';
 import sectionStyles from '../../styles/section-card.module.css';
+import tableStyles from '../../styles/table-section.module.css';
+import css from './alerts-page.module.css';
 
 export default function SilencesPage() {
   const { data, isLoading, error } = useAlertSilences();
@@ -19,9 +26,12 @@ export default function SilencesPage() {
   const [matcherRuleId, setMatcherRuleId] = useState('');
   const [matcherAppSlug, setMatcherAppSlug] = useState('');
   const [hours, setHours] = useState(1);
+  const [pendingEnd, setPendingEnd] = useState<AlertSilenceResponse | null>(null);
 
   if (isLoading) return <PageLoader />;
-  if (error) return <div>Failed to load silences: {String(error)}</div>;
+  if (error) return <div className={css.page}>Failed to load silences: {String(error)}</div>;
+
+  const rows = data ?? [];
 
   const onCreate = async () => {
     const now = new Date();
@@ -50,30 +60,58 @@ export default function SilencesPage() {
     }
   };
 
-  const onRemove = async (s: AlertSilenceResponse) => {
-    if (!confirm(`End silence early?`)) return;
+  const confirmEnd = async () => {
+    if (!pendingEnd) return;
     try {
-      await remove.mutateAsync(s.id!);
+      await remove.mutateAsync(pendingEnd.id!);
       toast({ title: 'Silence removed', variant: 'success' });
     } catch (e) {
       toast({ title: 'Remove failed', description: String(e), variant: 'error' });
+    } finally {
+      setPendingEnd(null);
     }
   };
 
-  const rows = data ?? [];
+  const columns: Column<AlertSilenceResponse & { id: string }>[] = [
+    {
+      key: 'matcher', header: 'Matcher',
+      render: (_, s) => <MonoText size="xs">{JSON.stringify(s.matcher)}</MonoText>,
+    },
+    { key: 'reason', header: 'Reason', render: (_, s) => s.reason ?? '—' },
+    { key: 'startsAt', header: 'Starts', width: '200px' },
+    { key: 'endsAt', header: 'Ends', width: '200px' },
+    {
+      key: 'actions', header: '', width: '90px',
+      render: (_, s) => (
+        <Button variant="ghost" size="sm" onClick={() => setPendingEnd(s)}>
+          End
+        </Button>
+      ),
+    },
+  ];
 
   return (
-    <div style={{ padding: 16 }}>
-      <SectionHeader>Alert silences</SectionHeader>
-      <div className={sectionStyles.section} style={{ marginTop: 12 }}>
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr) auto', gap: 8, alignItems: 'end' }}>
-          <FormField label="Rule ID (optional)">
+    <div className={css.page}>
+      <div className={css.toolbar}>
+        <SectionHeader>Alert silences</SectionHeader>
+      </div>
+
+      <section className={sectionStyles.section}>
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(4, minmax(0, 1fr)) auto',
+            gap: 'var(--space-sm)',
+            alignItems: 'end',
+          }}
+        >
+          <FormField label="Rule ID" hint="Exact rule id (optional)">
             <Input value={matcherRuleId} onChange={(e) => setMatcherRuleId(e.target.value)} />
           </FormField>
-          <FormField label="App slug (optional)">
+          <FormField label="App slug" hint="App slug (optional)">
             <Input value={matcherAppSlug} onChange={(e) => setMatcherAppSlug(e.target.value)} />
           </FormField>
-          <FormField label="Duration (hours)">
+          <FormField label="Duration" hint="Hours">
             <Input
               type="number"
               min={1}
@@ -81,7 +119,7 @@ export default function SilencesPage() {
               onChange={(e) => setHours(Number(e.target.value))}
             />
           </FormField>
-          <FormField label="Reason">
+          <FormField label="Reason" hint="Context for operators">
             <Input
               value={reason}
               onChange={(e) => setReason(e.target.value)}
@@ -92,39 +130,34 @@ export default function SilencesPage() {
             Create silence
           </Button>
         </div>
-      </div>
-      <div className={sectionStyles.section} style={{ marginTop: 16 }}>
-        {rows.length === 0 ? (
-          <p>No active or scheduled silences.</p>
-        ) : (
-          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
-            <thead>
-              <tr>
-                <th style={{ textAlign: 'left' }}>Matcher</th>
-                <th style={{ textAlign: 'left' }}>Reason</th>
-                <th style={{ textAlign: 'left' }}>Starts</th>
-                <th style={{ textAlign: 'left' }}>Ends</th>
-                <th></th>
-              </tr>
-            </thead>
-            <tbody>
-              {rows.map((s) => (
-                <tr key={s.id}>
-                  <td><code>{JSON.stringify(s.matcher)}</code></td>
-                  <td>{s.reason ?? '—'}</td>
-                  <td>{s.startsAt}</td>
-                  <td>{s.endsAt}</td>
-                  <td>
-                    <Button variant="secondary" size="sm" onClick={() => onRemove(s)}>
-                      End
-                    </Button>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        )}
-      </div>
+      </section>
+
+      {rows.length === 0 ? (
+        <EmptyState
+          icon={<BellOff size={32} />}
+          title="No silences"
+          description="Nothing is currently silenced in this environment."
+        />
+      ) : (
+        <div className={tableStyles.tableSection}>
+          <DataTable<AlertSilenceResponse & { id: string }>
+            columns={columns}
+            data={rows.map((s) => ({ ...s, id: s.id ?? '' }))}
+            flush
+          />
+        </div>
+      )}
+
+      <ConfirmDialog
+        open={!!pendingEnd}
+        onClose={() => setPendingEnd(null)}
+        onConfirm={confirmEnd}
+        title="End silence?"
+        message="End this silence early? Affected rules will resume firing."
+        confirmText="End silence"
+        variant="warning"
+        loading={remove.isPending}
+      />
     </div>
   );
 }