Lookback window frontend (#1379)

* refactor ppl alerting apis to v1 endpoints

Signed-off-by: KashKondaka <37753523+KashKondaka@users.noreply.github.com>

* fix monitor index unit test

Signed-off-by: KashKondaka <37753523+KashKondaka@users.noreply.github.com>

* react 18

Signed-off-by: KashKondaka <37753523+KashKondaka@users.noreply.github.com>

* update to 3.5

Signed-off-by: KashKondaka <37753523+KashKondaka@users.noreply.github.com>

* update open search version to 3.5 in workflow

Signed-off-by: KashKondaka <37753523+KashKondaka@users.noreply.github.com>

* move lookback window to frontend

Signed-off-by: KashKondaka <37753523+KashKondaka@users.noreply.github.com>

---------

Signed-off-by: KashKondaka <37753523+KashKondaka@users.noreply.github.com>

Author: KashKondaka

public/app.js

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import React from 'react';
-import { createRoot } from 'react-dom/client';
+import ReactDOM from 'react-dom';
 import { HashRouter as Router, Route } from 'react-router-dom';
 import { Provider } from 'react-redux';
 
@@ -46,8 +46,7 @@ export function renderApp(coreStart, depsStart, params, defaultRoute) {
   // Initialize Redux store
   const store = getAlertingStore();
 
-  const root = createRoot(params.element);
-  root.render(
+  ReactDOM.render(
     <Provider store={store}>
       <OpenSearchDashboardsContextProvider services={{ ...coreStart, ...depsStart }}>
         <OpenSearchDashboardsContextProvider services={{ data: depsStart?.data }}>
@@ -76,7 +75,8 @@ export function renderApp(coreStart, depsStart, params, defaultRoute) {
           </DatasetProvider>
         </OpenSearchDashboardsContextProvider>
       </OpenSearchDashboardsContextProvider>
-    </Provider>
+    </Provider>,
+    params.element
   );
-  return () => root.unmount();
+  return () => ReactDOM.unmountComponentAtNode(params.element);
 }

public/pages/CreateMonitor/containers/CreateMonitor/PplAlertingCreateMonitor.js

@@ -33,14 +33,20 @@ import {
   EuiLink,
 } from '@elastic/eui';
 import CustomSteps from '../../components/CustomSteps';
-import { FORMIK_INITIAL_VALUES, RECOMMENDED_DURATION } from './utils/constants';
+import {
+  FORMIK_INITIAL_VALUES,
+  RECOMMENDED_DURATION,
+  LOOKBACK_WINDOW_MAX_MINUTES,
+} from './utils/constants';
 import {
   getInitialValues,
   getPlugins,
   runPPLPreview,
   submitPPL,
   extractIndicesFromPPL,
   findCommonDateFields,
+  addTimeFilterToQuery,
+  computeLookBackMinutes,
 } from './utils/pplAlertingHelpers';
 import { SubmitErrorHandler } from '../../../../utils/SubmitErrorHandler';
 import ConfigureTriggersPpl from '../../../CreateTrigger/containers/ConfigureTriggers/ConfigureTriggersPpl';
@@ -310,8 +316,16 @@ class PplAlertingCreateMonitor extends Component {
     });
 
     try {
+      let queryText = values.pplQuery || '';
+
+      // Inject lookback window time filter into preview query
+      const lbMinutes = computeLookBackMinutes(values);
+      if (lbMinutes > 0 && values.timestampField) {
+        queryText = addTimeFilterToQuery(queryText, lbMinutes, values.timestampField);
+      }
+
       const data = await runPPLPreview(httpClient, {
-        queryText: values.pplQuery || '',
+        queryText,
         dataSourceId: values.dataSourceId || landingDataSourceId,
       });
       if (data?.ok === false) {
@@ -606,7 +620,9 @@ class PplAlertingCreateMonitor extends Component {
 
     const lbMinutes =
       lbUnit === 'minutes' ? lbAmount : lbUnit === 'hours' ? lbAmount * 60 : lbAmount * 1440;
-    const lbError = lbAmount !== '' && lbMinutes < 1;
+    const lbTooSmall = lbAmount !== '' && lbMinutes < 1;
+    const lbTooLarge = lbAmount !== '' && lbMinutes > LOOKBACK_WINDOW_MAX_MINUTES;
+    const lbError = lbTooSmall || lbTooLarge;
 
     const intervalAmount = Number(values.period?.interval ?? 1);
     const intervalUnit = values.period?.unit || 'MINUTES';
@@ -673,7 +689,13 @@ class PplAlertingCreateMonitor extends Component {
               fullWidth
               style={{ marginLeft: '-6px', maxWidth: '720px' }}
               isInvalid={lbError}
-              error={lbError ? `Must be at least 1 minute` : undefined}
+              error={
+                lbTooSmall
+                  ? 'Must be at least 1 minute'
+                  : lbTooLarge
+                  ? 'Must be at most 7 days (10,080 minutes)'
+                  : undefined
+              }
             >
               <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
                 <EuiFlexItem>

public/pages/CreateMonitor/containers/CreateMonitor/utils/constants.js

@@ -128,6 +128,7 @@ export const DEFAULT_COMPOSITE_AGG_SIZE = 50;
 export const MONITOR_NAME_MAX_LENGTH = 256;
 export const MONITOR_DESCRIPTION_MAX_LENGTH = 500;
 export const LOOKBACK_WINDOW_MIN_MINUTES = 1;
+export const LOOKBACK_WINDOW_MAX_MINUTES = 10080; // 7 days
 
 export const METRIC_TOOLTIP_TEXT = 'Extracted statistics such as simple calculations of data.';
 export const TIME_RANGE_TOOLTIP_TEXT = 'The time frame of data the plugin should monitor.';

public/pages/CreateMonitor/containers/CreateMonitor/utils/pplAlertingHelpers.js

@@ -5,7 +5,7 @@
 
 import _ from 'lodash';
 import queryString from 'query-string';
-import { FORMIK_INITIAL_VALUES } from './constants';
+import { FORMIK_INITIAL_VALUES, LOOKBACK_WINDOW_MAX_MINUTES } from './constants';
 import pplAlertingMonitorToFormik from './pplAlertingMonitorToFormik';
 import { buildPPLMonitorFromFormik, pplToV2Schedule } from './pplFormikToMonitor';
 import { MONITOR_TYPE, DEFAULT_EMPTY_DATA } from '../../../../../utils/constants';
@@ -499,6 +499,17 @@ export const submitPPL = async ({
   const { setSubmitting, setFieldError } = formikBag;
   const api = makeAlertingV2Service(httpClient);
 
+  // Validate lookback window bounds
+  const lbMinutes = computeLookBackMinutes(values);
+  if (lbMinutes > LOOKBACK_WINDOW_MAX_MINUTES) {
+    setSubmitting(false);
+    notifications.toasts.addDanger({
+      title: `Failed to ${edit ? 'update' : 'create'} the monitor`,
+      text: `Look back window must be at most 7 days (${LOOKBACK_WINDOW_MAX_MINUTES} minutes) but was ${lbMinutes} minutes.`,
+    });
+    return;
+  }
+
   // Validate that all triggers have names
   const triggerDefinitions = _.get(values, 'triggerDefinitions', []);
   if (Array.isArray(triggerDefinitions) && triggerDefinitions.length > 0) {
@@ -601,6 +612,54 @@ export const submitPPL = async ({
   }
 };
 
+//Computes the total lookback window in minutes from formik values.
+export const computeLookBackMinutes = (values) => {
+  if (!values?.useLookBackWindow) return 0;
+  const amount = Number(values.lookBackAmount);
+  if (!Number.isFinite(amount) || amount <= 0) return 0;
+  const unit = String(values.lookBackUnit || 'hours').toLowerCase();
+  if (unit.startsWith('minute')) return Math.floor(amount);
+  if (unit.startsWith('hour')) return Math.floor(amount * 60);
+  if (unit.startsWith('day')) return Math.floor(amount * 1440);
+  return Math.floor(amount);
+};
+
+//Formats date 'yyyy-MM-dd HH:mm:ss' in UTC
+const formatPplTimestamp = (date) => {
+  const pad = (n) => String(n).padStart(2, '0');
+  return (
+    `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(date.getUTCDate())} ` +
+    `${pad(date.getUTCHours())}:${pad(date.getUTCMinutes())}:${pad(date.getUTCSeconds())}`
+  );
+};
+
+//Injects a time-range filter into a PPL query based on the lookback window.
+export const addTimeFilterToQuery = (
+  query,
+  lookBackMinutes,
+  timestampField,
+  endTime = new Date()
+) => {
+  if (!query || !timestampField || !lookBackMinutes || lookBackMinutes <= 0) return query;
+
+  const periodEnd = endTime;
+  const periodStart = new Date(periodEnd.getTime() - lookBackMinutes * 60 * 1000);
+
+  const startTs = formatPplTimestamp(periodStart);
+  const endTs = formatPplTimestamp(periodEnd);
+
+  const timeFilterClause =
+    `| where ${timestampField} > TIMESTAMP('${startTs}') ` +
+    `and ${timestampField} < TIMESTAMP('${endTs}')`;
+
+  if (query.includes('|')) {
+    // Inject time filter before the first pipe so it runs before aggregations
+    return query.replace('|', `${timeFilterClause} |`);
+  }
+  // No pipes — append at the end
+  return `${query} ${timeFilterClause}`;
+};
+
 /**
  * Formats duration in minutes to a human-readable string
  * - If >= 60 minutes, converts to hours (e.g., 60 min -> 1 hour, 65 min -> 1 hr 5 min)

public/pages/CreateMonitor/containers/CreateMonitor/utils/pplAlertingHelpers.test.js

@@ -0,0 +1,157 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  addTimeFilterToQuery,
+  computeLookBackMinutes,
+  extractIndicesFromPPL,
+  formatDuration,
+} from './pplAlertingHelpers';
+
+describe('computeLookBackMinutes', () => {
+  test('returns 0 when lookback is disabled', () => {
+    expect(computeLookBackMinutes({ useLookBackWindow: false })).toBe(0);
+    expect(computeLookBackMinutes({})).toBe(0);
+    expect(computeLookBackMinutes(null)).toBe(0);
+  });
+
+  test('converts minutes correctly', () => {
+    expect(
+      computeLookBackMinutes({
+        useLookBackWindow: true,
+        lookBackAmount: 30,
+        lookBackUnit: 'minutes',
+      })
+    ).toBe(30);
+  });
+
+  test('converts hours correctly', () => {
+    expect(
+      computeLookBackMinutes({ useLookBackWindow: true, lookBackAmount: 2, lookBackUnit: 'hours' })
+    ).toBe(120);
+  });
+
+  test('converts days correctly', () => {
+    expect(
+      computeLookBackMinutes({ useLookBackWindow: true, lookBackAmount: 1, lookBackUnit: 'days' })
+    ).toBe(1440);
+  });
+
+  test('returns 0 for invalid amounts', () => {
+    expect(
+      computeLookBackMinutes({
+        useLookBackWindow: true,
+        lookBackAmount: -5,
+        lookBackUnit: 'minutes',
+      })
+    ).toBe(0);
+    expect(
+      computeLookBackMinutes({
+        useLookBackWindow: true,
+        lookBackAmount: NaN,
+        lookBackUnit: 'hours',
+      })
+    ).toBe(0);
+  });
+});
+
+describe('addTimeFilterToQuery', () => {
+  const fixedEnd = new Date('2025-06-15T12:00:00Z');
+
+  test('returns original query when inputs are missing', () => {
+    expect(addTimeFilterToQuery('', 60, '@timestamp')).toBe('');
+    expect(addTimeFilterToQuery('source=logs', 0, '@timestamp')).toBe('source=logs');
+    expect(addTimeFilterToQuery('source=logs', 60, '')).toBe('source=logs');
+  });
+
+  test('appends time filter when query has no pipes', () => {
+    const result = addTimeFilterToQuery('source=logs', 60, '@timestamp', fixedEnd);
+    expect(result).toContain("| where @timestamp > TIMESTAMP('2025-06-15 11:00:00')");
+    expect(result).toContain("and @timestamp < TIMESTAMP('2025-06-15 12:00:00')");
+    expect(result).toMatch(/^source=logs \|/);
+  });
+
+  test('injects time filter before first pipe when query has pipes', () => {
+    const query = 'source=logs | stats count() by status';
+    const result = addTimeFilterToQuery(query, 120, '@timestamp', fixedEnd);
+    expect(result).toContain("| where @timestamp > TIMESTAMP('2025-06-15 10:00:00')");
+    expect(result).toContain('| stats count() by status');
+    // Time filter should come before the stats command
+    const timeFilterIdx = result.indexOf('| where @timestamp');
+    const statsIdx = result.indexOf('| stats');
+    expect(timeFilterIdx).toBeLessThan(statsIdx);
+  });
+
+  test('uses correct lookback window in minutes', () => {
+    const result = addTimeFilterToQuery('source=idx', 30, 'event_time', fixedEnd);
+    expect(result).toContain("event_time > TIMESTAMP('2025-06-15 11:30:00')");
+    expect(result).toContain("event_time < TIMESTAMP('2025-06-15 12:00:00')");
+  });
+
+  test('handles multi-day lookback', () => {
+    const result = addTimeFilterToQuery('source=idx', 1440, 'ts', fixedEnd);
+    expect(result).toContain("ts > TIMESTAMP('2025-06-14 12:00:00')");
+    expect(result).toContain("ts < TIMESTAMP('2025-06-15 12:00:00')");
+  });
+
+  test('preserves original query structure with complex piped query', () => {
+    const query = 'source=logs | where status=500 | stats avg(latency) as avg_lat by region';
+    const result = addTimeFilterToQuery(query, 60, '@timestamp', fixedEnd);
+    expect(result).toContain('| where status=500');
+    expect(result).toContain('| stats avg(latency) as avg_lat by region');
+    // Time filter injected before the first original pipe
+    expect(result.indexOf('| where @timestamp')).toBeLessThan(result.indexOf('| where status=500'));
+  });
+});
+
+describe('extractIndicesFromPPL', () => {
+  test('extracts single index', () => {
+    expect(extractIndicesFromPPL('source=logs | where status=500')).toEqual(['logs']);
+  });
+
+  test('extracts multiple comma-separated indices', () => {
+    expect(extractIndicesFromPPL('source=logs,metrics,events')).toEqual([
+      'logs',
+      'metrics',
+      'events',
+    ]);
+  });
+
+  test('extracts index with wildcard', () => {
+    expect(extractIndicesFromPPL('source=logs-* | stats count()')).toEqual(['logs-*']);
+  });
+
+  test('handles backtick-quoted indices', () => {
+    expect(extractIndicesFromPPL('source=`my-index` | head 10')).toEqual(['my-index']);
+  });
+
+  test('returns empty array for empty input', () => {
+    expect(extractIndicesFromPPL('')).toEqual([]);
+    expect(extractIndicesFromPPL(null)).toEqual([]);
+  });
+});
+
+describe('formatDuration', () => {
+  test('formats minutes', () => {
+    expect(formatDuration(30)).toBe('30 minutes');
+    expect(formatDuration(1)).toBe('1 minute');
+  });
+
+  test('formats hours', () => {
+    expect(formatDuration(60)).toBe('1 hour');
+    expect(formatDuration(120)).toBe('2 hours');
+    expect(formatDuration(90)).toBe('1 hr 30 min');
+  });
+
+  test('formats days', () => {
+    expect(formatDuration(1440)).toBe('1 d');
+    expect(formatDuration(2880)).toBe('2 d');
+  });
+
+  test('handles zero and null', () => {
+    expect(formatDuration(0)).toBe('0 minutes');
+    expect(formatDuration(null)).toBe('-');
+  });
+});

public/pages/CreateMonitor/containers/CreateMonitor/utils/pplAlertingMonitorToFormik.js

@@ -97,12 +97,26 @@ export default function pplAlertingMonitorToFormik(monitorIn) {
   };
 
   const pplQuery = monitor.query || '';
-  const timestampField = monitor.timestamp_field || '@timestamp';
   const description = monitor.description || '';
 
+  const lookbackMeta = uiMetadata?.lookback;
+  const lookBackMinutes =
+    monitor.look_back_window_minutes ??
+    monitor.look_back_window ??
+    (lookbackMeta?.enabled ? lookbackMeta.minutes : undefined);
+
+  const timestampField = monitor.timestamp_field || lookbackMeta?.timestamp_field || '@timestamp';
+
   let lookBackFormik = {};
-  const lookBackMinutes = monitor.look_back_window_minutes ?? monitor.look_back_window;
-  if (lookBackMinutes != null) {
+  if (lookbackMeta && typeof lookbackMeta.enabled === 'boolean') {
+    if (lookbackMeta.enabled && lookbackMeta.minutes > 0) {
+      lookBackFormik.useLookBackWindow = true;
+      lookBackFormik.lookBackAmount = lookbackMeta.amount || lookbackMeta.minutes;
+      lookBackFormik.lookBackUnit = lookbackMeta.unit || 'minutes';
+    } else {
+      lookBackFormik.useLookBackWindow = false;
+    }
+  } else if (lookBackMinutes != null && lookBackMinutes > 0) {
     const minutes = lookBackMinutes;
     lookBackFormik.useLookBackWindow = true;
 
@@ -117,8 +131,6 @@ export default function pplAlertingMonitorToFormik(monitorIn) {
       lookBackFormik.lookBackUnit = 'minutes';
     }
   } else {
-    // Explicitly set useLookBackWindow to false when look_back_window_minutes is null or undefined
-    // Don't include lookBackAmount and lookBackUnit to prevent old values from persisting
     lookBackFormik.useLookBackWindow = false;
   }
 
@@ -138,8 +150,9 @@ export default function pplAlertingMonitorToFormik(monitorIn) {
     detectorId: isAD ? _.get(inputs, INPUTS_DETECTOR_ID) : undefined,
     adResultIndex: isAD ? _.get(inputs, '0.search.indices.0') : undefined,
     ...(pplQuery ? { pplQuery } : {}),
-    ...(monitor.timestamp_field ? { timestampField } : {}),
+    timestampField,
     ...lookBackFormik,
+    ui_metadata: uiMetadata,
   };
 
   // When useLookBackWindow is false, explicitly clear lookBackAmount and lookBackUnit