From b16ea8b18582d4b8e43a64787a4d4c284e83b67c Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Tue, 21 Apr 2026 10:01:39 +0200
Subject: [PATCH] feat(alerts/ui): add shared renderAlertExpanded for DataTable
 rows

Extracts the per-row detail block used by Inbox/All/History DataTables
so the three pages share one rendering. Consumes AlertDto fields that
are nullable in the schema; hides missing fields instead of rendering
placeholders.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 ui/src/pages/Alerts/alert-expanded.tsx | 41 ++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 ui/src/pages/Alerts/alert-expanded.tsx

diff --git a/ui/src/pages/Alerts/alert-expanded.tsx b/ui/src/pages/Alerts/alert-expanded.tsx
new file mode 100644
index 00000000..161f9358
--- /dev/null
+++ b/ui/src/pages/Alerts/alert-expanded.tsx
@@ -0,0 +1,41 @@
+import type { AlertDto } from '../../api/queries/alerts';
+import css from './alerts-page.module.css';
+
+/**
+ * Shared DataTable expandedContent renderer for alert rows.
+ * Used by Inbox, All alerts, and History pages.
+ */
+export function renderAlertExpanded(alert: AlertDto) {
+  return (
+    <div className={css.expanded}>
+      {alert.message && (
+        <div className={css.expandedField}>
+          <span className={css.expandedLabel}>Message</span>
+          <p className={css.expandedValue}>{alert.message}</p>
+        </div>
+      )}
+      <div className={css.expandedGrid}>
+        <div className={css.expandedField}>
+          <span className={css.expandedLabel}>Fired at</span>
+          <span className={css.expandedValue}>{alert.firedAt ?? '—'}</span>
+        </div>
+        {alert.resolvedAt && (
+          <div className={css.expandedField}>
+            <span className={css.expandedLabel}>Resolved at</span>
+            <span className={css.expandedValue}>{alert.resolvedAt}</span>
+          </div>
+        )}
+        {alert.ackedAt && (
+          <div className={css.expandedField}>
+            <span className={css.expandedLabel}>Acknowledged at</span>
+            <span className={css.expandedValue}>{alert.ackedAt}</span>
+          </div>
+        )}
+        <div className={css.expandedField}>
+          <span className={css.expandedLabel}>Rule</span>
+          <span className={css.expandedValue}>{alert.ruleId ?? '—'}</span>
+        </div>
+      </div>
+    </div>
+  );
+}