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>
+  );
+}