+ {/* With alert details enabled, the alert name is the entry point
+ to its status page; the source tile / saved search moves to a
+ secondary link on the right. */}
{alertIcon}
@@ -242,18 +220,7 @@ function AlertDetails({ alert }: { alert: AlertsPageItem }) {
-
- {alertType}
- {notificationMethod}
- {alert.createdBy && (
- <>
- ·
-
- Created by {alert.createdBy.name || alert.createdBy.email}
-
-
- )}
-
+
{getAlertTags(alert).map(tag => (
@@ -286,6 +253,17 @@ function AlertDetails({ alert }: { alert: AlertsPageItem }) {
)}
+ {linkTitle}
+
+ )}
);
diff --git a/packages/app/src/api.ts b/packages/app/src/api.ts
index 21facd9c05..a8dea6a600 100644
--- a/packages/app/src/api.ts
+++ b/packages/app/src/api.ts
@@ -4,6 +4,7 @@ import ky from 'ky-universal';
import type {
Alert,
AlertApiResponse,
+ AlertEvaluationsApiResponse,
AlertHistoryRangeApiResponse,
AlertsApiResponse,
InstallationApiResponse,
@@ -22,7 +23,7 @@ import type {
WebhookTestApiResponse,
WebhookUpdateApiResponse,
} from '@hyperdx/common-utils/dist/types';
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { useInfiniteQuery, useMutation, useQuery } from '@tanstack/react-query';
import { IS_LOCAL_MODE } from './config';
import { getLocalDashboardTags } from './dashboard';
@@ -218,6 +219,39 @@ const api = {
enabled: enabled && alertId != null,
});
},
+ getAlertEvaluationsQueryKey: (
+ alertId: string | undefined,
+ startTime: number,
+ endTime: number,
+ ) => ['alertEvaluations', alertId, startTime, endTime] as const,
+ // Paginated evaluation history for the alert detail page: one entry per
+ // evaluation window (newest first), scoped to the given date range and
+ // including errors recorded for each window. Older pages are keyed off the
+ // server-provided `nextBefore` cursor, which advances even across gaps with
+ // no evaluations. Bounds are quantized to the minute so live ticks don't
+ // produce a new query key on every render.
+ useAlertEvaluations(alertId: string | undefined, dateRange: [Date, Date]) {
+ const BUCKET_MS = 60_000;
+ const startTime =
+ Math.floor(dateRange[0].getTime() / BUCKET_MS) * BUCKET_MS;
+ const endTime = Math.floor(dateRange[1].getTime() / BUCKET_MS) * BUCKET_MS;
+ return useInfiniteQuery({
+ queryKey: api.getAlertEvaluationsQueryKey(alertId, startTime, endTime),
+ queryFn: ({ pageParam }) =>
+ hdxServer(`alerts/${alertId}/evaluations`, {
+ method: 'GET',
+ searchParams: {
+ startTime,
+ endTime,
+ ...(pageParam != null && { before: pageParam }),
+ },
+ }).json(),
+ initialPageParam: undefined as number | undefined,
+ getNextPageParam: lastPage =>
+ lastPage.hasMore ? lastPage.nextBefore : undefined,
+ enabled: alertId != null && startTime < endTime,
+ });
+ },
useServices() {
return useQuery({
queryKey: [`services`],
diff --git a/packages/app/src/components/AlertPreviewChart.tsx b/packages/app/src/components/AlertPreviewChart.tsx
index 3165ef17af..03a96990f2 100644
--- a/packages/app/src/components/AlertPreviewChart.tsx
+++ b/packages/app/src/components/AlertPreviewChart.tsx
@@ -18,6 +18,7 @@ import {
} from '@hyperdx/common-utils/dist/types';
import { Paper } from '@mantine/core';
+import { ChartAnnotation } from '@/components/charts/chartAnnotations';
import { DBTimeChart } from '@/components/DBTimeChart';
import { useAliasMapFromChartConfig } from '@/hooks/useChartConfig';
import { intervalToDateRange, intervalToGranularity } from '@/utils/alerts';
@@ -35,6 +36,11 @@ type AlertPreviewChartProps = {
threshold: number;
thresholdMax?: number;
select?: string | null;
+ /** Override the interval-derived date range (e.g. alert detail page). */
+ dateRange?: [Date, Date];
+ /** Firing/recovery markers to draw on the chart. */
+ annotations?: ChartAnnotation[];
+ height?: number;
};
export const AlertPreviewChart = ({
@@ -48,6 +54,9 @@ export const AlertPreviewChart = ({
thresholdMax,
thresholdType,
select,
+ dateRange,
+ annotations,
+ height = 200,
}: AlertPreviewChartProps) => {
const resolvedSelect =
(select && select.trim().length > 0
@@ -86,11 +95,20 @@ export const AlertPreviewChart = ({
groupBy,
select: ALERT_COUNT_DEFAULT_SELECT,
displayType: DisplayType.Line,
- dateRange: intervalToDateRange(interval),
+ dateRange: dateRange ?? intervalToDateRange(interval),
granularity: intervalToGranularity(interval),
}) as ChartConfigWithDateRange;
return { ...chartConfig, with: aliasWith };
- }, [source, where, whereLanguage, filters, groupBy, interval, aliasWith]);
+ }, [
+ source,
+ where,
+ whereLanguage,
+ filters,
+ groupBy,
+ interval,
+ aliasWith,
+ dateRange,
+ ]);
const referenceLines = useMemo(
() =>
@@ -103,13 +121,14 @@ export const AlertPreviewChart = ({
);
return (
-
+
diff --git a/packages/app/src/components/alerts/AlertDetailChart.tsx b/packages/app/src/components/alerts/AlertDetailChart.tsx
new file mode 100644
index 0000000000..d9270ab33e
--- /dev/null
+++ b/packages/app/src/components/alerts/AlertDetailChart.tsx
@@ -0,0 +1,275 @@
+import * as React from 'react';
+import Link from 'next/link';
+import { pick } from 'lodash';
+import { isTimeSeriesDisplayType } from '@hyperdx/common-utils/dist/core/utils';
+import {
+ isPromqlSavedChartConfig,
+ isRawSqlSavedChartConfig,
+} from '@hyperdx/common-utils/dist/guards';
+import {
+ AlertSource,
+ ChartConfigWithDateRange,
+ DisplayType,
+ getSampleWeightExpression,
+ isLogSource,
+ isTraceSource,
+ SourceKind,
+} from '@hyperdx/common-utils/dist/types';
+import { Anchor, Center, Paper, Skeleton, Text } from '@mantine/core';
+
+import { AlertPreviewChart } from '@/components/AlertPreviewChart';
+import { getAlertReferenceLines } from '@/components/Alerts';
+import { DBTimeChart } from '@/components/DBTimeChart';
+import { useDashboards } from '@/dashboard';
+import { useAlertAnnotations } from '@/hooks/useAlertAnnotations';
+import { useSavedSearch } from '@/savedSearch';
+import { useSource } from '@/source';
+import type { AlertsPageItem } from '@/types';
+import { getMetricTableName } from '@/utils';
+import { intervalToGranularity } from '@/utils/alerts';
+
+const CHART_HEIGHT = 280;
+
+function ChartShell({ children }: { children: React.ReactNode }) {
+ return (
+
+ {children}
+
+ );
+}
+
+function ChartFallback({
+ alertUrl,
+ message,
+}: {
+ alertUrl?: string;
+ message: string;
+}) {
+ return (
+
+
+
+ {message}
+ {alertUrl && (
+ <>
+ {' '}
+
+ Open source
+
+
+ )}
+
+
+
+ );
+}
+
+function SavedSearchAlertChart({
+ alert,
+ dateRange,
+}: {
+ alert: AlertsPageItem;
+ dateRange: [Date, Date];
+}) {
+ const annotations = useAlertAnnotations(alert._id, dateRange, true);
+ const { data: savedSearch, isLoading: isSavedSearchLoading } = useSavedSearch(
+ { id: alert.savedSearchId ?? '' },
+ { enabled: alert.savedSearchId != null },
+ );
+ const { data: source, isLoading: isSourceLoading } = useSource({
+ id: savedSearch?.source,
+ });
+
+ if (isSavedSearchLoading || (savedSearch != null && isSourceLoading)) {
+ return (() => {
+ if (!tile || isPromqlSavedChartConfig(tile.config)) {
+ return undefined;
+ }
+
+ // Raw SQL tiles: only time-series display types can be charted over the
+ // alert window (mirrors what the alert task evaluates as a time series).
+ if (isRawSqlSavedChartConfig(tile.config)) {
+ if (!isTimeSeriesDisplayType(tile.config.displayType)) {
+ return undefined;
+ }
+ if (!tile.config.source) {
+ return { ...tile.config, dateRange, granularity };
+ }
+ if (!source) {
+ return undefined;
+ }
+ return {
+ ...tile.config,
+ ...pick(source, [
+ 'implicitColumnExpression',
+ 'useTextIndexForImplicitColumn',
+ 'from',
+ 'metricTables',
+ ]),
+ ...(isLogSource(source)
+ ? { bodyExpression: source.bodyExpression }
+ : {}),
+ sampleWeightExpression: getSampleWeightExpression(source),
+ dateRange,
+ granularity,
+ };
+ }
+
+ // Builder tiles (mirrors the dashboard Tile's config assembly). Number
+ // tiles are rendered as a line chart here — the alert task evaluates them
+ // as a time series, and the threshold-over-time view is what matters.
+ if (!source?.connection) {
+ return undefined;
+ }
+ const isMetricSource = source.kind === SourceKind.Metric;
+ const firstSelect = tile.config.select[0];
+ const metricType =
+ isMetricSource && typeof firstSelect !== 'string'
+ ? firstSelect?.metricType
+ : undefined;
+ const tableName = getMetricTableName(source, metricType);
+ return {
+ ...tile.config,
+ displayType:
+ tile.config.displayType === DisplayType.Number
+ ? DisplayType.Line
+ : tile.config.displayType,
+ connection: source.connection,
+ dateRange,
+ granularity,
+ timestampValueExpression: source.timestampValueExpression,
+ from: {
+ databaseName: source.from?.databaseName || 'default',
+ tableName: tableName || '',
+ },
+ implicitColumnExpression:
+ isLogSource(source) || isTraceSource(source)
+ ? source.implicitColumnExpression
+ : undefined,
+ useTextIndexForImplicitColumn:
+ isLogSource(source) || isTraceSource(source)
+ ? source.useTextIndexForImplicitColumn
+ : undefined,
+ bodyExpression: isLogSource(source) ? source.bodyExpression : undefined,
+ sampleWeightExpression: getSampleWeightExpression(source),
+ metricTables: isMetricSource ? source.metricTables : undefined,
+ };
+ }, [tile, source, dateRange, granularity]);
+
+ const referenceLines = React.useMemo(
+ () =>
+ getAlertReferenceLines({
+ threshold: alert.threshold,
+ thresholdMax: alert.thresholdMax,
+ thresholdType: alert.thresholdType,
+ }),
+ [alert.threshold, alert.thresholdMax, alert.thresholdType],
+ );
+
+ if (isDashboardsLoading || (tileSourceId != null && isSourceLoading)) {
+ return
+
+ );
+}
+
+/**
+ * The alert's underlying query charted over the selected time range, with
+ * threshold reference lines and firing/recovery annotations.
+ */
+export function AlertDetailChart({
+ alert,
+ dateRange,
+ alertUrl,
+}: {
+ alert: AlertsPageItem;
+ dateRange: [Date, Date];
+ alertUrl?: string;
+}) {
+ if (alert.source === AlertSource.SAVED_SEARCH) {
+ return
+
+
+
+ └
+
+
+ {group.group}
+
+
+
+
+
+
+ {group.lastValue != null ? group.lastValue.count : '–'}
+
+ {group.counts > 0 ? group.counts : '–'}
+
+ );
+}
+
+/** Duration cell: formatted milliseconds, or a dash when not measured. */
+function durationCell(ms: number | undefined) {
+ return ms != null ? formatDurationMs(ms) : '–';
+}
+
+type AlertEvaluationRowProps = {
+ history: AlertEvaluation;
+ interval: AlertInterval;
+};
+
+/**
+ * Parent row for one evaluation window, expandable into per-group child rows
+ * for group-by alerts and error details for failed evaluations.
+ */
+export function AlertEvaluationRow({
+ history,
+ interval,
+}: AlertEvaluationRowProps) {
+ const [expanded, setExpanded] = React.useState(false);
+ const errors = history.errors ?? [];
+ const groups = history.groups ?? [];
+ const hasErrors = errors.length > 0;
+ const hasGroups = groups.length > 0;
+ const value = hasGroups ? undefined : latestValue(history);
+ const errorTypes = Array.from(new Set(errors.map(e => e.type)));
+
+ // The chart plots each bucket's value at the bucket *start*, while the
+ // evaluation runs at the bucket *end* (createdAt). Show the start of the
+ // latest evaluated bucket so the table lines up with the chart.
+ // `lastValues` are ascending, so the last entry is the newest bucket;
+ // failed evaluations have no lastValues, so fall back to
+ // createdAt − interval.
+ const lastValues = history.lastValues ?? [];
+ const lastBucketStart =
+ lastValues.length > 0
+ ? lastValues[lastValues.length - 1].startTime
+ : new Date(
+ new Date(history.createdAt).getTime() -
+ ALERT_INTERVAL_TO_MINUTES[interval] * 60_000,
+ );
+ const evaluatedSpanStart = lastValues[0]?.startTime ?? lastBucketStart;
+
+ const groupsTotal = history.groupsTotal ?? groups.length;
+ const firingGroups = groups.filter(g => g.state === AlertState.ALERT).length;
+ const omittedGroups = groupsTotal - groups.length;
+ const backfilledBuckets = history.analytics?.backfilledBuckets ?? 0;
+ const expandable = hasErrors || hasGroups;
+
+ return (
+ <>
+ setExpanded(v => !v) : undefined}
+ style={expandable ? { cursor: 'pointer' } : undefined}
+ aria-expanded={expandable ? expanded : undefined}
+ >
+
+
+ {expandable ? (
+ expanded ? (
+
+ Evaluated
+
+
+
+
+
+
+
+ {firingGroups > 0
+ ? `${firingGroups}/${groupsTotal} groups firing`
+ : `${groupsTotal} groups`}
+
+ )}
+
+
+ {value != null ? value : '–'}
+ {history.counts > 0 ? history.counts : '–'}
+
+ {backfilledBuckets > 0 ? (
+
+
+ {backfilledBuckets}
+
+
+ ) : (
+ '–'
+ )}
+
+ {durationCell(history.analytics?.queryDurationMs)}
+
+ {durationCell(history.analytics?.webhookDurationMs)}
+
+
+ {hasErrors ? (
+
+ {errorTypes.map(type => ALERT_ERROR_TYPE_LABELS[type]).join(', ')}
+
+ ) : (
+ '–'
+ )}
+
+
+ {expanded && (
+ <>
+ {groups.map(group => (
+
+
+
+ Showing the top {ALERT_EVALUATION_GROUPS_LIMIT} of{' '}
+ {groupsTotal} groups (firing first) — additional groups
+ aren't fetched.
+
+
+
+ )}
+ {hasErrors && (
+
+
+
+
+
+
+ )}
+
+ )}
+
+ );
+}
diff --git a/packages/app/src/components/alerts/AlertEvaluationsTable.tsx b/packages/app/src/components/alerts/AlertEvaluationsTable.tsx
new file mode 100644
index 0000000000..934d03c2dc
--- /dev/null
+++ b/packages/app/src/components/alerts/AlertEvaluationsTable.tsx
@@ -0,0 +1,156 @@
+import * as React from 'react';
+import {
+ AlertEvaluation,
+ AlertInterval,
+} from '@hyperdx/common-utils/dist/types';
+import {
+ Button,
+ Center,
+ Group,
+ Loader,
+ Skeleton,
+ Table,
+ Text,
+} from '@mantine/core';
+import { useInViewport } from '@mantine/hooks';
+
+import { AlertEvaluationRow } from '@/components/alerts/AlertEvaluationRow';
+
+type LoadMoreSentinelProps = {
+ isFetchingNextPage: boolean;
+ onLoadMore: () => void;
+};
+
+/**
+ * Sentinel row at the bottom of the event stream: when scrolled into view
+ * (and older pages exist), it triggers the next fetch — infinite scroll in
+ * `limit`-sized chunks instead of a manual load-more button.
+ */
+function LoadMoreSentinel({
+ isFetchingNextPage,
+ onLoadMore,
+}: LoadMoreSentinelProps) {
+ const { ref, inViewport } = useInViewport();
+
+ React.useEffect(() => {
+ if (inViewport && !isFetchingNextPage) {
+ onLoadMore();
+ }
+ }, [inViewport, isFetchingNextPage, onLoadMore]);
+
+ return (
+
+
+
+ Loading older evaluations…
+
+
+
+ );
+}
+
+type AlertEvaluationsTableProps = {
+ evaluations: AlertEvaluation[];
+ interval: AlertInterval;
+ isLoading: boolean;
+ isError: boolean;
+ hasNextPage: boolean;
+ isFetchingNextPage: boolean;
+ onLoadMore: () => void;
+};
+
+/**
+ * Datadog-style evaluation event stream: one parent row per evaluation
+ * window, newest first, expandable into per-group child rows for group-by
+ * alerts, with error details for failed evaluations. Fetches older windows
+ * in pages as the user scrolls to the bottom.
+ */
+export function AlertEvaluationsTable({
+ evaluations,
+ interval,
+ isLoading,
+ isError,
+ hasNextPage,
+ isFetchingNextPage,
+ onLoadMore,
+}: AlertEvaluationsTableProps) {
+ if (isLoading) {
+ return
+
+ Failed to load evaluations.
+
+
+ );
+ }
+
+ if (evaluations.length === 0 && !hasNextPage) {
+ return (
+
+
+ No evaluations in the selected time range.
+
+
+ );
+ }
+
+ return (
+ <>
+
+
+
+ Evaluation Window
+ State
+ Latest Value
+ Breaches
+ Backfilled Buckets
+ Query Duration
+ Webhook Duration
+ Errors
+
+
+
+ {evaluations.map(history => (
+
+
+ {hasNextPage &&
+ // A failed page fetch must unmount the sentinel: its effect refires
+ // whenever isFetchingNextPage settles back to false, so leaving it
+ // mounted after an error would refetch in an unbounded loop. Show an
+ // explicit retry affordance instead.
+ (isError ? (
+
+
+
+ Failed to load older evaluations.
+
+
+ Retry
+
+
+
+ ) : (
+ = {
+ [AlertErrorType.INVALID_ALERT]: 'Invalid Configuration',
+ [AlertErrorType.QUERY_ERROR]: 'Query Error',
+ [AlertErrorType.QUERY_TIMEOUT]: 'Query Timeout',
+ [AlertErrorType.WEBHOOK_ERROR]: 'Webhook Error',
+ [AlertErrorType.UNKNOWN]: 'Unknown Error',
+};
+
function stateToBgColorClass(state: AlertState) {
switch (state) {
case AlertState.OK:
return styles.ok;
case AlertState.PENDING:
return styles.pending;
+ case AlertState.ERROR:
+ return styles.error;
default:
return styles.alarm;
}
}
+export function AlertErrorsContent({ errors }: { errors: AlertError[] }) {
+ return (
+
+ {errors.map((error, idx) => (
+
+
+ {ALERT_ERROR_TYPE_LABELS[error.type]} at{' '}
+
+
+ {error.message}
+
+
+ ))}
+
+ );
+}
+
+/** Dedupe errors by type+message, keeping the most recent occurrence. */
+function dedupeAlertErrors(errors: AlertError[]): AlertError[] {
+ const map = new Map();
+ for (const error of errors) {
+ const key = `${error.type}||${error.message}`;
+ const existing = map.get(key);
+ if (
+ !existing ||
+ new Date(error.timestamp).getTime() >
+ new Date(existing.timestamp).getTime()
+ ) {
+ map.set(key, error);
+ }
+ }
+ return Array.from(map.values());
+}
+
+function errorTypeSummary(errors: AlertError[]): string {
+ const types = Array.from(new Set(errors.map(error => error.type)));
+ return types.length === 1
+ ? ALERT_ERROR_TYPE_LABELS[types[0]]
+ : 'Multiple Errors';
+}
+
function AlertHistoryCard({
history,
alertUrl,
+ onShowErrors,
}: {
history: AlertHistory;
alertUrl?: string;
+ onShowErrors: (history: AlertHistory) => void;
}) {
const start = new Date(history.createdAt.toString());
@@ -65,25 +125,41 @@ function AlertHistoryCard({
return url.pathname + url.search;
}, [history, alertUrl]);
+ const isError = history.state === AlertState.ERROR;
+ const time = formatRelative(start, today);
+
const content = (
);
- const count = history.counts ?? 0;
- const pending = history.state === AlertState.PENDING ? 'pending' : '';
- const alert = `alert${count === 0 || count > 1 ? 's' : ''}`;
- const time = formatRelative(start, today);
- const label = `${count} ${pending} ${alert} ${time}`;
+ const label = React.useMemo(() => {
+ if (isError) {
+ const summary = errorTypeSummary(history.errors ?? []);
+ return `Evaluation failed (${summary}) ${time}. Click for details.`;
+ }
+ const count = history.counts ?? 0;
+ const pending = history.state === AlertState.PENDING ? 'pending' : '';
+ const alert = `alert${count === 0 || count > 1 ? 's' : ''}`;
+ return `${count} ${pending} ${alert} ${time}`;
+ }, [isError, history, time]);
return (
- {href ? (
+ {isError ? (
+ onShowErrors(history)}
+ aria-label="View evaluation errors"
+ >
+ {content}
+
+ ) : href ? (
{content}
@@ -94,41 +170,17 @@ function AlertHistoryCard({
);
}
-const ALERT_ERROR_TYPE_LABELS: Record = {
- [AlertErrorType.INVALID_ALERT]: 'Invalid Configuration',
- [AlertErrorType.QUERY_ERROR]: 'Query Error',
- [AlertErrorType.QUERY_TIMEOUT]: 'Query Timeout',
- [AlertErrorType.WEBHOOK_ERROR]: 'Webhook Error',
- [AlertErrorType.UNKNOWN]: 'Unknown Error',
-};
-
function AlertErrorsIndicator({ alert }: { alert: AlertsPageItem }) {
const [opened, { open, close }] = useDisclosure(false);
- const { uniqueErrors, uniqueTypes } = React.useMemo(() => {
- const map = new Map();
- for (const error of alert.executionErrors ?? []) {
- const key = `${error.type}||${error.message}`;
- const existing = map.get(key);
- if (
- !existing ||
- new Date(error.timestamp).getTime() >
- new Date(existing.timestamp).getTime()
- ) {
- map.set(key, error);
- }
- }
- const errors = Array.from(map.values());
- const types = Array.from(new Set(errors.map(error => error.type)));
- return { uniqueErrors: errors, uniqueTypes: types };
- }, [alert.executionErrors]);
+ const uniqueErrors = React.useMemo(
+ () => dedupeAlertErrors(alert.executionErrors ?? []),
+ [alert.executionErrors],
+ );
if (uniqueErrors.length === 0) return null;
- const errorType =
- uniqueTypes.length === 1
- ? ALERT_ERROR_TYPE_LABELS[uniqueTypes[0]]
- : 'Multiple Errors';
+ const errorType = errorTypeSummary(uniqueErrors);
return (
<>
@@ -160,25 +212,7 @@ function AlertErrorsIndicator({ alert }: { alert: AlertsPageItem }) {
title="Alert Execution Errors"
data-testid={`alert-error-modal-${alert._id}`}
>
-
- {uniqueErrors.map((error, idx) => (
-
-
- {ALERT_ERROR_TYPE_LABELS[error.type]} at{' '}
-
-
- {error.message}
-
-
- ))}
-
+ (
+ null,
+ );
+
const items = React.useMemo(() => {
- if (history.length < HISTORY_ITEMS) {
+ if (history.length < maxItems) {
return history;
}
- return history.slice(0, HISTORY_ITEMS);
- }, [history]);
+ return history.slice(0, maxItems);
+ }, [history, maxItems]);
const paddingItems = React.useMemo(() => {
- if (history.length > HISTORY_ITEMS) {
+ if (history.length > maxItems) {
return [];
}
- return new Array(HISTORY_ITEMS - history.length).fill(null);
- }, [history]);
+ return new Array(maxItems - history.length).fill(null);
+ }, [history, maxItems]);
+
+ const modalErrors = React.useMemo(
+ () => dedupeAlertErrors(errorHistory?.errors ?? []),
+ [errorHistory],
+ );
return (
-
{paddingItems.map((_, index) => (
@@ -224,10 +274,29 @@ export function AlertHistoryCardList({
key={index}
history={history}
alertUrl={alertUrl}
+ onShowErrors={setErrorHistory}
/>
))}
)}
+ setErrorHistory(null)}
+ size="lg"
+ title={
+ <>
+ Evaluation Errors
+ {errorHistory != null && (
+
+
+ )}
+
+ }
+ data-testid={`alert-evaluation-error-modal-${alert._id}`}
+ >
+
);
}
diff --git a/packages/app/src/components/alerts/AlertPropertiesSummary.tsx b/packages/app/src/components/alerts/AlertPropertiesSummary.tsx
new file mode 100644
index 0000000000..f8eb24e851
--- /dev/null
+++ b/packages/app/src/components/alerts/AlertPropertiesSummary.tsx
@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { isRangeThresholdType } from '@hyperdx/common-utils/dist/types';
+import { Group } from '@mantine/core';
+
+import type { AlertsPageItem } from '@/types';
+import { TILE_ALERT_THRESHOLD_TYPE_OPTIONS } from '@/utils/alerts';
+import { getWebhookChannelIcon } from '@/utils/webhookIcons';
+
+type AlertPropertiesSummaryProps = {
+ alert: AlertsPageItem;
+ /**
+ * Include the evaluation schedule (interval and, when configured,
+ * consecutive-window count). On by the detail page; the alerts-page rows
+ * keep the shorter line.
+ */
+ showSchedule?: boolean;
+};
+
+/**
+ * One-line alert metadata summary: threshold condition, optional evaluation
+ * schedule, notification channel, and creator. Shared between the alerts
+ * page rows and the alert detail page header.
+ */
+export function AlertPropertiesSummary({
+ alert,
+ showSchedule = false,
+}: AlertPropertiesSummaryProps) {
+ const thresholdLabel =
+ TILE_ALERT_THRESHOLD_TYPE_OPTIONS[alert.thresholdType] ??
+ alert.thresholdType;
+
+ return (
+
+
+ If value {thresholdLabel}{' '}
+ {alert.threshold}
+ {isRangeThresholdType(alert.thresholdType) && (
+ <>
+ {' '}
+ and {alert.thresholdMax ?? '-'}
+
+ )}
+
+ {showSchedule && (
+ <>
+ ·
+ Evaluates every {alert.interval}
+ {alert.numConsecutiveWindows != null &&
+ alert.numConsecutiveWindows > 1 && (
+ <>
+ ·
+
+ Fires after {alert.numConsecutiveWindows} consecutive windows
+
+
+ )}
+
+ )}
+ ·
+
+ Notify via {getWebhookChannelIcon(alert.channel.type)} Webhook
+
+ {alert.createdBy && (
+ <>
+ ·
+
+ Created by {alert.createdBy.name || alert.createdBy.email}
+
+
+ )}
+
+ );
+}
diff --git a/packages/app/src/components/alerts/AlertStateBadge.tsx b/packages/app/src/components/alerts/AlertStateBadge.tsx
new file mode 100644
index 0000000000..0e6d9d9c86
--- /dev/null
+++ b/packages/app/src/components/alerts/AlertStateBadge.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { AlertState } from '@hyperdx/common-utils/dist/types';
+import { Badge } from '@mantine/core';
+
+type AlertStateBadgeProps = {
+ state: AlertState;
+};
+
+export function AlertStateBadge({ state }: AlertStateBadgeProps) {
+ switch (state) {
+ case AlertState.ALERT:
+ return (
+
+ Alert
+
+ );
+ case AlertState.PENDING:
+ return (
+
+ Pending
+
+ );
+ case AlertState.ERROR:
+ return (
+
+ Error
+
+ );
+ case AlertState.OK:
+ return Ok ;
+ default:
+ return (
+
+ {state}
+
+ );
+ }
+}
diff --git a/packages/app/src/components/alerts/__tests__/AlertEvaluationsTable.test.tsx b/packages/app/src/components/alerts/__tests__/AlertEvaluationsTable.test.tsx
new file mode 100644
index 0000000000..0be06f7fe3
--- /dev/null
+++ b/packages/app/src/components/alerts/__tests__/AlertEvaluationsTable.test.tsx
@@ -0,0 +1,292 @@
+import React from 'react';
+import {
+ AlertErrorType,
+ AlertEvaluation,
+ AlertState,
+} from '@hyperdx/common-utils/dist/types';
+import { fireEvent, screen, within } from '@testing-library/react';
+
+import { AlertEvaluationsTable } from '@/components/alerts/AlertEvaluationsTable';
+
+// Controls whether the infinite-scroll sentinel reports itself as visible.
+let mockInViewport = false;
+jest.mock('@mantine/hooks', () => ({
+ ...jest.requireActual('@mantine/hooks'),
+ useInViewport: () => ({ ref: jest.fn(), inViewport: mockInViewport }),
+}));
+
+// Render raw ISO timestamps so time assertions don't depend on the test
+// runner's timezone or the user's clock-format preference.
+jest.mock('@/useFormatTime', () => ({
+ FormatTime: ({ value }: { value?: number | string | Date }) =>
+ value ? new Date(value).toISOString() : null,
+}));
+
+const okWindow: AlertEvaluation = {
+ counts: 0,
+ createdAt: '2026-04-17T12:05:00.000Z',
+ lastValues: [{ startTime: '2026-04-17T12:00:00.000Z', count: 3 }],
+ state: AlertState.OK,
+};
+
+const errorWindow: AlertEvaluation = {
+ counts: 0,
+ createdAt: '2026-04-17T12:10:00.000Z',
+ lastValues: [],
+ state: AlertState.ERROR,
+ errors: [
+ {
+ timestamp: '2026-04-17T12:11:00.000Z',
+ type: AlertErrorType.QUERY_TIMEOUT,
+ message:
+ 'Alert query did not complete within the 300s evaluation timeout.',
+ },
+ ],
+};
+
+const groupedFiringWindow: AlertEvaluation = {
+ counts: 2,
+ createdAt: '2026-04-17T12:15:00.000Z',
+ lastValues: [
+ { startTime: '2026-04-17T12:10:00.000Z', count: 1 },
+ { startTime: '2026-04-17T12:10:00.000Z', count: 14 },
+ ],
+ state: AlertState.ALERT,
+ groups: [
+ {
+ group: 'ServiceName:api',
+ state: AlertState.ALERT,
+ counts: 2,
+ lastValue: { startTime: '2026-04-17T12:10:00.000Z', count: 14 },
+ fired: true,
+ },
+ {
+ group: 'ServiceName:web',
+ state: AlertState.OK,
+ counts: 0,
+ lastValue: { startTime: '2026-04-17T12:10:00.000Z', count: 1 },
+ },
+ ],
+ groupsTotal: 2,
+ analytics: {
+ queryDurationMs: 1200,
+ webhookDurationMs: 340,
+ backfilledBuckets: 0,
+ },
+};
+
+const backfilledWindow: AlertEvaluation = {
+ counts: 0,
+ createdAt: '2026-04-17T12:20:00.000Z',
+ lastValues: [
+ { startTime: '2026-04-17T12:05:00.000Z', count: 0 },
+ { startTime: '2026-04-17T12:10:00.000Z', count: 0 },
+ { startTime: '2026-04-17T12:15:00.000Z', count: 0 },
+ ],
+ state: AlertState.OK,
+ analytics: { queryDurationMs: 800, backfilledBuckets: 2 },
+};
+
+const renderTable = (
+ props: Partial> = {},
+) =>
+ renderWithMantine(
+