diff --git a/frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowPopover.tsx b/frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowPopover.tsx
index c9269554b281..d5b9498e3dfd 100644
--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowPopover.tsx
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowPopover.tsx
@@ -3,10 +3,10 @@ import classNames from 'classnames';
import { Check } from 'lucide-react';
import {
- CUMULATIVE_WINDOW_DESCRIPTION,
+ getCumulativeWindowDescription,
+ getRollingWindowDescription,
EVALUATION_WINDOW_TIMEFRAME,
EVALUATION_WINDOW_TYPE,
- ROLLING_WINDOW_DESCRIPTION,
} from '../constants';
import {
CumulativeWindowTimeframes,
@@ -96,7 +96,9 @@ function EvaluationWindowPopover({
}
return (
- {ROLLING_WINDOW_DESCRIPTION}
+
+ {getRollingWindowDescription(evaluationWindow.timeframe)}
+
);
@@ -108,7 +110,9 @@ function EvaluationWindowPopover({
) {
return (
- {CUMULATIVE_WINDOW_DESCRIPTION}
+
+ {getCumulativeWindowDescription(evaluationWindow.timeframe)}
+
);
diff --git a/frontend/src/container/CreateAlertV2/EvaluationSettings/constants.ts b/frontend/src/container/CreateAlertV2/EvaluationSettings/constants.ts
index 4319b765565e..fb1cdc737263 100644
--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/constants.ts
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/constants.ts
@@ -62,8 +62,76 @@ export const TIMEZONE_DATA = generateTimezoneData().map((timezone) => ({
value: timezone.value,
}));
-export const CUMULATIVE_WINDOW_DESCRIPTION =
- 'A Cumulative Window has a fixed starting point and expands over time.';
+export const getCumulativeWindowDescription = (
+ timeframe?: string,
+): string => {
+ let example = '';
+ switch (timeframe) {
+ case 'currentHour':
+ example =
+ 'An hourly cumulative window for error count alerts when errors exceed 100. Starting at the top of the hour, it tracks: 20 errors by :15, 55 by :30, 105 by :45 (alert fires).';
+ break;
+ case 'currentDay':
+ example =
+ 'A daily cumulative window for sales alerts when total revenue exceeds $10,000. Starting at midnight, it tracks: $2,000 by 9 AM, $5,500 by noon, $11,000 by 3 PM (alert fires).';
+ break;
+ case 'currentMonth':
+ example =
+ 'A monthly cumulative window for expense alerts when spending exceeds $50,000. Starting on the 1st, it tracks: $15,000 by the 7th, $32,000 by the 15th, $51,000 by the 22nd (alert fires).';
+ break;
+ default:
+ example =
+ 'A daily cumulative window for sales alerts when total revenue exceeds $10,000. Starting at midnight, it tracks: $2,000 by 9 AM, $5,500 by noon, $11,000 by 3 PM (alert fires).';
+ }
+ return `Monitors data accumulated since a fixed starting point. The window grows over time, keeping all historical data from the start.\n\nExample: ${example}`;
+};
-export const ROLLING_WINDOW_DESCRIPTION =
- 'A Rolling Window has a fixed size and shifts its starting point over time based on when the rules are evaluated.';
+export const getRollingWindowDescription = (duration?: string): string => {
+ let timeWindow = '5-minute';
+ let examples = '14:01:00-14:06:00, 14:02:00-14:07:00';
+
+ if (duration) {
+ const match = duration.match(/^(\d+)([mhs])/);
+ if (match) {
+ const value = parseInt(match[1]);
+ const unit = match[2];
+
+ if (unit === 'm' && !isNaN(value)) {
+ timeWindow = `${value}-minute`;
+ const endMinutes1 = 1 + value;
+ const endMinutes2 = 2 + value;
+ examples = `14:01:00-14:${String(endMinutes1).padStart(2, '0')}:00, 14:02:00-14:${String(endMinutes2).padStart(2, '0')}:00`;
+ } else if (unit === 'h' && !isNaN(value)) {
+ timeWindow = `${value}-hour`;
+ const endHour1 = 14 + value;
+ const endHour2 = 14 + value;
+ examples = `14:00:00-${String(endHour1).padStart(2, '0')}:00:00, 14:01:00-${String(endHour2).padStart(2, '0')}:01:00`;
+ } else if (unit === 's' && !isNaN(value)) {
+ timeWindow = `${value}-second`;
+ examples = `14:01:00-14:01:${String(value).padStart(2, '0')}, 14:01:01-14:01:${String(1 + value).padStart(2, '0')}`;
+ }
+ } else if (duration === 'custom' || !duration) {
+ timeWindow = '5-minute';
+ examples = '14:01:00-14:06:00, 14:02:00-14:07:00';
+ } else {
+ if (duration.includes('h')) {
+ const hours = parseInt(duration);
+ if (!isNaN(hours)) {
+ timeWindow = `${hours}-hour`;
+ const endHour = 14 + hours;
+ examples = `14:00:00-${String(endHour).padStart(2, '0')}:00:00, 14:01:00-${String(endHour).padStart(2, '0')}:01:00`;
+ }
+ } else if (duration.includes('m')) {
+ const minutes = parseInt(duration);
+ if (!isNaN(minutes)) {
+ timeWindow = `${minutes}-minute`;
+ const endMinutes1 = 1 + minutes;
+ const endMinutes2 = 2 + minutes;
+ examples = `14:01:00-14:${String(endMinutes1).padStart(2, '0')}:00, 14:02:00-14:${String(endMinutes2).padStart(2, '0')}:00`;
+ }
+ }
+ }
+ }
+
+ return `Monitors data over a fixed time period that moves forward continuously.\n\nExample: A ${timeWindow} rolling window for error rate alerts with 1 minute evaluation cadence. Unlike fixed windows, this checks continuously: ${examples}, etc.`;
+};
\ No newline at end of file
diff --git a/frontend/src/container/CreateAlertV2/NotificationSettings/NotificationMessage.tsx b/frontend/src/container/CreateAlertV2/NotificationSettings/NotificationMessage.tsx
index ae1136fc28df..aa1a597fdafe 100644
--- a/frontend/src/container/CreateAlertV2/NotificationSettings/NotificationMessage.tsx
+++ b/frontend/src/container/CreateAlertV2/NotificationSettings/NotificationMessage.tsx
@@ -57,23 +57,23 @@ function NotificationMessage(): JSX.Element {
Notification Message
-
+ {/*
-
+ */}
Custom message content for alert notifications. Use template variables to
include dynamic information.
-
*/}