Add Suggest parameters button + move operational settings to Configure Model

This PR centralizes operational settings in the model step as we can call suggest API. Suggest API works better when we know features and categorical fields. This PR also adds an assisted setup via suggestions, and corrects documentation links.

Specifically

  - UI
      - Add SuggestParametersDialog to recommend detection interval, frequency, history, and window delay; apply
  suggestions to the form.
      - Introduce Settings panel in Configure Model with Interval, Frequency, Window delay, and History fields.
      - Validate frequency as a multiple of interval; add validateMultipleOf util.
      - Move interval/window delay out of Define Detector (remove DefineDetector/Settings and tests).
      - Show read-only OperationalSettings in Review & Create; remove interval/window delay display from
  DetectorDefinitionFields.
      - Replace BASE_DOCS_LINK usages with AD_DOCS_LINK; add ALERTING_DOCS_LINK.
      - Replace BASE_DOCS_LINK usages with AD_DOCS_LINK; add ALERTING_DOCS_LINK.
      - Add error in detector status if any. Otherwise, if a detector is stopped, users won't know why unless they know how to run get detector API with required parameter.

  -
  Server/Redux
      - Add POST /detectors/_suggest/{suggestType}[/{dataSourceId}] route.
      - Add cluster client method ad.suggestDetector.
      - Add suggestDetector Redux action.
  -
  Models/Helpers
      - Extend Detector with optional frequency and history.
      - Map interval/windowDelay/frequency/history in formikToDetector and model helpers (conditionally persisted).
      - Pass operational settings through preview/sample anomalies flow.
  -
  Misc
      - Update snapshots and tests due to UI changes.
      - Minor lint/typing cleanups (commas, docs links).

Testing done:
1. fixed broken IT and UT. Will publish IT fix in functional test repo.
2. manual test.

Signed-off-by: kaituo <[email protected]>

Author: kaituo

public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AssociateExisting/containers/AssociateExisting.tsx

@@ -44,7 +44,7 @@ import {
 } from '../../../../../../../../src/plugins/vis_augmenter/public';
 import { stateToColorMap } from '../../../../../pages/utils/constants';
 import {
-  BASE_DOCS_LINK,
+  AD_DOCS_LINK,
   PLUGIN_NAME,
 } from '../../../../../../public/utils/constants';
 import { renderTime } from '../../../../../../public/pages/DetectorsList/utils/tableUtils';
@@ -211,7 +211,7 @@ export function AssociateExisting(
           View existing anomaly detectors across your system and add the
           detector(s) to a dashboard and visualization.{' '}
           <a
-            href={`${BASE_DOCS_LINK}/ad`}
+            href={`${AD_DOCS_LINK}`}
             target="_blank"
             style={{ display: 'inline-block' }}
           >

public/models/interfaces.ts

@@ -197,7 +197,9 @@ export type Detector = {
   flattenCustomResultIndex?: boolean;
   filterQuery: { [key: string]: any };
   featureAttributes: FeatureAttributes[];
-  windowDelay: { period: Schedule };
+  windowDelay?: { period: Schedule };
+  frequency?: { period: Schedule };
+  history?: number;
   detectionInterval: { period: Schedule };
   shingleSize: number;
   uiMetadata: UiMetaData;

public/pages/AnomalyCharts/components/AlertsFlyout/AlertsFlyout.tsx

@@ -25,7 +25,7 @@ import React from 'react';
 import { EuiIcon } from '@elastic/eui';
 import { Monitor } from '../../../../models/interfaces';
 import { AlertsButton } from '../AlertsButton/AlertsButton';
-import { BASE_DOCS_LINK } from '../../../..//utils/constants';
+import { ALERTING_DOCS_LINK } from '../../../..//utils/constants';
 
 type AlertsFlyoutProps = {
   detectorId: string;
@@ -84,7 +84,7 @@ export const AlertsFlyout = (props: AlertsFlyoutProps) => {
             <EuiText>
               <p className="alerts_flyout_p">
                 Anomaly detector alerts are powered by the
-                <EuiLink href={`${BASE_DOCS_LINK}/alerting`}>
+                <EuiLink href={`${ALERTING_DOCS_LINK}`}>
                   {' '}
                   Alerting plugin
                 </EuiLink>
@@ -103,7 +103,7 @@ export const AlertsFlyout = (props: AlertsFlyoutProps) => {
         <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
           <EuiFlexItem grow={true}>
             <EuiSmallButton
-              href={`${BASE_DOCS_LINK}/alerting`}
+              href={`${ALERTING_DOCS_LINK}`}
               target="_blank"
               data-test-subj="setUpAlerts"
             >

public/pages/ConfigureForecastModel/components/CustomResultIndex/CustomResultIndex.tsx

@@ -27,7 +27,7 @@ import { Field, FieldProps, FormikProps, useFormikContext } from 'formik';
 import React, { useEffect, useState } from 'react';
 import ContentPanel from '../../../../components/ContentPanel/ContentPanel';
 import { CUSTOM_FORECASTER_RESULT_INDEX_PREFIX } from '../../../../../server/utils/constants';
-import { BASE_DOCS_LINK, FORECASTER_DOCS_LINK } from '../../../../utils/constants';
+import { FORECASTER_DOCS_LINK } from '../../../../utils/constants';
 import {
   isInvalid,
   getError,

public/pages/ConfigureModel/components/AdvancedSettings/AdvancedSettings.tsx

@@ -26,7 +26,7 @@ import {
 import { Field, FieldProps, FieldArray } from 'formik';
 import React, { useEffect, useState } from 'react';
 import ContentPanel from '../../../../components/ContentPanel/ContentPanel';
-import { BASE_DOCS_LINK } from '../../../../utils/constants';
+import { AD_DOCS_LINK } from '../../../../utils/constants';
 import {
   isInvalid,
   getError,
@@ -87,7 +87,7 @@ export function AdvancedSettings(props: AdvancedSettingsProps) {
                 increase recall but also false positives. Larger values
                 might be useful for ignoring noise in a signal.`,
                 ]}
-                hintLink={`${BASE_DOCS_LINK}/ad`}
+                hintLink={`${AD_DOCS_LINK}`}
                 isInvalid={isInvalid(field.name, form)}
                 error={getError(field.name, form)}
               >
@@ -133,7 +133,7 @@ export function AdvancedSettings(props: AdvancedSettingsProps) {
                   <FormattedFormRow
                     title="Sparse data handling"
                     hint={[`Choose how to handle missing data points.`]}
-                    hintLink={`${BASE_DOCS_LINK}/ad`}
+                    hintLink={`${AD_DOCS_LINK}`}
                     isInvalid={isInvalid(field.name, form)}
                     error={getError(field.name, form)}
                   >

public/pages/ConfigureModel/components/CategoryField/CategoryField.tsx

@@ -24,7 +24,7 @@ import {
 } from '@elastic/eui';
 import { Field, FieldProps, FormikProps } from 'formik';
 import { get, isEmpty } from 'lodash';
-import { BASE_DOCS_LINK } from '../../../../utils/constants';
+import { AD_DOCS_LINK } from '../../../../utils/constants';
 import React, { useState, useEffect } from 'react';
 import ContentPanel from '../../../../components/ContentPanel/ContentPanel';
 import {
@@ -75,7 +75,7 @@ export function CategoryField(props: CategoryFieldProps) {
         >
           Split a single time series into multiple time series based on
           categorical fields. You can select up to 2.{' '}
-          <EuiLink href={`${BASE_DOCS_LINK}/ad`} target="_blank">
+          <EuiLink href={`${AD_DOCS_LINK}`} target="_blank">
             Learn more
           </EuiLink>
         </EuiText>

public/pages/ConfigureModel/components/CategoryField/__tests__/__snapshots__/CategoryField.test.tsx.snap

@@ -46,7 +46,7 @@ exports[`<CategoryField /> spec renders the component when disabled 1`] = `
                  
                 <a
                   class="euiLink euiLink--primary"
-                  href="https://opensearch.org/docs/monitoring-plugins/ad"
+                  href="https://opensearch.org/docs/latest/observing-your-data/ad/index/"
                   rel="noopener noreferrer"
                   target="_blank"
                 >
@@ -174,7 +174,7 @@ exports[`<CategoryField /> spec renders the component when enabled 1`] = `
                  
                 <a
                   class="euiLink euiLink--primary"
-                  href="https://opensearch.org/docs/monitoring-plugins/ad"
+                  href="https://opensearch.org/docs/latest/observing-your-data/ad/index/"
                   rel="noopener noreferrer"
                   target="_blank"
                 >

public/pages/ConfigureModel/components/Features/Features.tsx

@@ -26,7 +26,7 @@ import React, { Fragment, useEffect } from 'react';
 import ContentPanel from '../../../../components/ContentPanel/ContentPanel';
 import { Detector } from '../../../../models/interfaces';
 import { initialFeatureValue } from '../../utils/helpers';
-import { MAX_FEATURE_NUM, BASE_DOCS_LINK } from '../../../../utils/constants';
+import { MAX_FEATURE_NUM, AD_DOCS_LINK } from '../../../../utils/constants';
 import { FeatureAccordion } from '../FeatureAccordion';
 
 interface FeaturesProps {
@@ -54,7 +54,7 @@ export function Features(props: FeaturesProps) {
         >
           A feature is the field in your index that you use to check for
           anomalies. You can add up to 5 features.{' '}
-          <EuiLink href={`${BASE_DOCS_LINK}/ad`} target="_blank">
+          <EuiLink href={`${AD_DOCS_LINK}`} target="_blank">
             Learn more
           </EuiLink>
         </EuiText>

public/pages/ConfigureModel/components/Settings/Settings.tsx

@@ -0,0 +1,188 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import {
+  EuiCompressedFieldNumber,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiText,
+} from '@elastic/eui';
+import { Field, FieldProps, useFormikContext } from 'formik';
+import React, { Fragment } from 'react';
+import {
+  isInvalid,
+  getError,
+  validatePositiveInteger,
+  validateMultipleOf,
+  validateEmptyOrPositiveInteger,
+  validateEmptyOrNonNegativeInteger
+} from '../../../../utils/utils';
+import { AD_DOCS_LINK } from '../../../../utils/constants';
+import { FormattedFormRow } from '../../../../components/FormattedFormRow/FormattedFormRow';
+
+export const Settings = () => {
+  const formik = useFormikContext();
+  const numberFieldWidth = 140;
+  
+  // Custom validation function that has access to form values
+  const validateFrequency = (value: any) => {
+    return validateMultipleOf(value, formik.values.interval);
+  };
+
+  return (
+    <Fragment>
+      <Field name="interval" validate={validatePositiveInteger}>
+        {({ field, form }: FieldProps) => (
+          <EuiFlexGroup>
+            <EuiFlexItem style={{ maxWidth: '70%' }}>
+              <FormattedFormRow
+                fullWidth
+                title="Interval"
+                hint={[
+                  `Interval sets the time window for summarizing and modeling data (e.g., 5 min to 1 hr), where too small creates noise, higher cost, and overreaction to fluctuations, while too large smooths out anomalies and delays detection.`,
+                ]}
+                hintLink={`${AD_DOCS_LINK}`}
+                isInvalid={isInvalid(field.name, form)}
+                error={getError(field.name, form)}
+              >
+                <EuiFlexGroup gutterSize="s" alignItems="center">
+                  <EuiFlexItem grow={false}>
+                    <EuiCompressedFieldNumber
+                      name="detectionInterval"
+                      id="detectionInterval"
+                      placeholder="Interval"
+                      data-test-subj="detectionInterval"
+                      min={1}
+                      style={{ width: numberFieldWidth }}
+                      {...field}
+                    />
+                  </EuiFlexItem>
+                  <EuiFlexItem>
+                    <EuiText>
+                      <p className="minutes">minutes</p>
+                    </EuiText>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </FormattedFormRow>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        )}
+      </Field>
+
+      <Field 
+        name="frequency" 
+        validate={validateFrequency}
+      >
+        {({ field, form }: FieldProps) => (
+          <EuiFlexGroup style={{ marginTop: '16px' }}>
+            <EuiFlexItem style={{ maxWidth: '70%' }}>
+              <FormattedFormRow
+                fullWidth
+                title="Frequency"
+                hint={[
+                  `Frequency defines how often the detector queries data and generates results, which also determines how often alerts may be produced; shorter values provide more real-time updates at higher cost, longer ones reduce load but slow updates. Frequency must be a multiple of interval and defaults to the same value.`,
+                ]}
+                hintLink={`${AD_DOCS_LINK}`}
+                isInvalid={isInvalid(field.name, form)}
+                error={getError(field.name, form)}
+              >
+                <EuiFlexGroup gutterSize="s" alignItems="center">
+                  <EuiFlexItem grow={false}>
+                    <EuiCompressedFieldNumber
+                      name="frequency"
+                      id="frequency"
+                      placeholder="Frequency"
+                      data-test-subj="frequency"
+                      min={1}
+                      style={{ width: numberFieldWidth }}
+                      {...field}
+                    />
+                  </EuiFlexItem>
+                  <EuiFlexItem>
+                    <EuiText>
+                      <p className="minutes">minutes</p>
+                    </EuiText>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </FormattedFormRow>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        )}
+      </Field>
+
+      <Field name="windowDelay" validate={validateEmptyOrNonNegativeInteger}>
+        {({ field, form }: FieldProps) => (
+          <FormattedFormRow
+            fullWidth
+            title="Window delay"
+            hint="Specify a window of delay for a detector to fetch data, if you need to account for extra processing time."
+            hintLink={`${AD_DOCS_LINK}`}
+            isInvalid={isInvalid(field.name, form)}
+            error={getError(field.name, form)}
+            style={{ marginTop: '16px' }}
+          >
+            <EuiFlexGroup gutterSize="s" alignItems="center">
+              <EuiFlexItem grow={false}>
+                <EuiCompressedFieldNumber
+                  name="windowDelay"
+                  id="windowDelay"
+                  placeholder="Window delay"
+                  data-test-subj="windowDelay"
+                  style={{ width: numberFieldWidth }}
+                  {...field}
+                />
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiText>
+                  <p className="minutes">minutes</p>
+                </EuiText>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </FormattedFormRow>
+        )}
+      </Field>
+
+      <Field name="history" validate={validateEmptyOrPositiveInteger}>
+        {({ field, form }: FieldProps) => (
+          <FormattedFormRow
+            fullWidth
+            title="History"
+            hint="How far back the model looks for training data. This determines the amount of historical data used to train the anomaly detection model. Minimum history is 40 intervals, maximum is 10,000 intervals, and the default is 40."
+            hintLink={`${AD_DOCS_LINK}`}
+            isInvalid={isInvalid(field.name, form)}
+            error={getError(field.name, form)}
+            style={{ marginTop: '16px' }}
+          >
+            <EuiFlexGroup gutterSize="s" alignItems="center">
+              <EuiFlexItem grow={false}>
+                <EuiCompressedFieldNumber
+                  name="history"
+                  id="history"
+                  placeholder="History"
+                  data-test-subj="history"
+                  min={40}
+                  max={10000}
+                  style={{ width: numberFieldWidth }}
+                  {...field}
+                />
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiText>
+                  <p className="minutes">intervals</p>
+                </EuiText>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </FormattedFormRow>
+        )}
+      </Field>
+    </Fragment>
+  );
+};

public/pages/DefineDetector/components/Settings/__tests__/Settings.test.tsx renamed to public/pages/ConfigureModel/components/Settings/__tests__/Settings.test.tsx

@@ -40,8 +40,8 @@ describe('<Settings /> spec', () => {
       </Formik>
     );
     expect(queryByText('Required')).toBeNull();
-    fireEvent.focus(getByPlaceholderText('Detector interval'));
-    fireEvent.blur(getByPlaceholderText('Detector interval'));
+    fireEvent.focus(getByPlaceholderText('Interval'));
+    fireEvent.blur(getByPlaceholderText('Interval'));
     expect(findByText('Required')).not.toBeNull();
   });
   test('shows error for invalid interval when toggling focus/blur', async () => {
@@ -55,8 +55,8 @@ describe('<Settings /> spec', () => {
       </Formik>
     );
     expect(queryByText('Required')).toBeNull();
-    userEvent.type(getByPlaceholderText('Detector interval'), '-1');
-    fireEvent.blur(getByPlaceholderText('Detector interval'));
+    userEvent.type(getByPlaceholderText('Interval'), '-1');
+    fireEvent.blur(getByPlaceholderText('Interval'));
     expect(findByText('Must be a positive integer')).not.toBeNull();
   });
   test('shows error for interval of 0 when toggling focus/blur', async () => {
@@ -70,8 +70,8 @@ describe('<Settings /> spec', () => {
       </Formik>
     );
     expect(queryByText('Required')).toBeNull();
-    userEvent.type(getByPlaceholderText('Detector interval'), '0');
-    fireEvent.blur(getByPlaceholderText('Detector interval'));
+    userEvent.type(getByPlaceholderText('Interval'), '0');
+    fireEvent.blur(getByPlaceholderText('Interval'));
     expect(findByText('Must be a positive integer')).not.toBeNull();
   });
   test('shows error for empty window delay when toggling focus/blur', async () => {