Fix various bugs

public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AddAnomalyDetector.tsx

@@ -70,6 +70,7 @@ import {
 import {
   focusOnFirstWrongFeature,
   initialFeatureValue,
+  validateFeatures,
 } from '../../../../public/pages/ConfigureModel/utils/helpers';
 import {
   getIndices,
@@ -95,6 +96,8 @@ import {
   ORIGIN_PLUGIN_VIS_LAYER,
   OVERLAY_ANOMALIES,
   VIS_LAYER_PLUGIN_TYPE,
+  PLUGIN_AUGMENTATION_ENABLE_SETTING,
+  PLUGIN_AUGMENTATION_MAX_OBJECTS_SETTING,
 } from '../../../../public/expressions/constants';
 import { formikToDetectorName, visFeatureListToFormik } from './helpers';
 import { AssociateExisting } from './AssociateExisting';
@@ -157,11 +160,55 @@ function AddAnomalyDetector({
 
   const notifications = getNotifications();
   const handleValidationAndSubmit = (formikProps) => {
-    if (!isEmpty(formikProps.errors)) {
-      focusOnFirstWrongFeature(formikProps.errors, formikProps.setFieldTouched);
-      notifications.toasts.addDanger('One or more input fields is invalid');
+    if (formikProps.values.featureList.length !== 0) {
+      formikProps.setFieldTouched('featureList', true);
+      formikProps.validateForm().then(async (errors) => {
+        if (!isEmpty(errors)) {
+          focusOnFirstWrongFeature(errors, formikProps.setFieldTouched);
+          notifications.toasts.addDanger(
+            'One or more input fields is invalid.'
+          );
+        } else {
+          const isAugmentationEnabled = uiSettings.get(
+            PLUGIN_AUGMENTATION_ENABLE_SETTING
+          );
+          if (!isAugmentationEnabled) {
+            notifications.toasts.addDanger(
+              'Visualization augmentation is disabled, please enable visualization:enablePluginAugmentation.'
+            );
+          } else {
+            const maxAssociatedCount = uiSettings.get(
+              PLUGIN_AUGMENTATION_MAX_OBJECTS_SETTING
+            );
+            await savedObjectLoader.findAll().then(async (resp) => {
+              if (resp !== undefined) {
+                const savedAugmentObjects = get(resp, 'hits', []);
+                // gets all the saved object for this visualization
+                const savedObjectsForThisVisualization =
+                  savedAugmentObjects.filter(
+                    (savedObj) =>
+                      get(savedObj, 'visId', '') === embeddable.vis.id
+                  );
+                if (
+                  maxAssociatedCount <= savedObjectsForThisVisualization.length
+                ) {
+                  notifications.toasts.addDanger(
+                    `Cannot create the detector and associate it to the visualization due to the limit of the max
+                    amount of associated plugin resources (${maxAssociatedCount}) with
+                    ${savedObjectsForThisVisualization.length} associated to the visualization`
+                  );
+                } else {
+                  handleSubmit(formikProps);
+                }
+              }
+            });
+          }
+        }
+      });
     } else {
-      handleSubmit(formikProps);
+      notifications.toasts.addDanger(
+        'One or more features are required to check for anomalies.'
+      );
     }
   };
 
@@ -203,7 +250,7 @@ function AddAnomalyDetector({
     formikProps.setSubmitting(true);
     try {
       const detectorToCreate = formikToDetector(formikProps.values);
-      dispatch(createDetector(detectorToCreate))
+      await dispatch(createDetector(detectorToCreate))
         .then(async (response) => {
           dispatch(startDetector(response.response.id))
             .then((startDetectorResponse) => {})
@@ -222,7 +269,7 @@ function AddAnomalyDetector({
           const augmentVisSavedObjectToCreate: ISavedAugmentVis =
             getAugmentVisSavedObject(detectorId);
 
-          createAugmentVisSavedObject(
+          await createAugmentVisSavedObject(
             augmentVisSavedObjectToCreate,
             savedObjectLoader,
             uiSettings
@@ -408,7 +455,7 @@ function AddAnomalyDetector({
     windowDelay: delayValue,
     shingleSize: 8,
     filterQuery: { match_all: {} },
-    description: '',
+    description: 'Created based on ' + embeddable.vis.title,
     resultIndex: undefined,
     filters: [],
     featureList: visFeatureListToFormik(
@@ -426,6 +473,7 @@ function AddAnomalyDetector({
         initialValues={initialDetectorValue}
         onSubmit={handleSubmit}
         validateOnChange={true}
+        validate={validateFeatures}
       >
         {(formikProps) => (
           <>
@@ -532,8 +580,8 @@ function AddAnomalyDetector({
                       subTitle={
                         <EuiText size="m">
                           <p>
-                            Detector interval: {intervalValue} minutes; Window
-                            delay: {delayValue} minutes
+                            Detector interval: {intervalValue} minute(s); Window
+                            delay: {delayValue} minute(s)
                           </p>
                         </EuiText>
                       }
@@ -584,7 +632,7 @@ function AddAnomalyDetector({
                                   </EuiFlexItem>
                                   <EuiFlexItem>
                                     <EuiText>
-                                      <p className="minutes">minutes</p>
+                                      <p className="minutes">minute(s)</p>
                                     </EuiText>
                                   </EuiFlexItem>
                                 </EuiFlexGroup>
@@ -618,7 +666,7 @@ function AddAnomalyDetector({
                               </EuiFlexItem>
                               <EuiFlexItem>
                                 <EuiText>
-                                  <p className="minutes">minutes</p>
+                                  <p className="minutes">minute(s)</p>
                                 </EuiText>
                               </EuiFlexItem>
                             </EuiFlexGroup>
@@ -788,8 +836,6 @@ function AddAnomalyDetector({
                       isOpen={accordionsOpen.modelFeatures}
                       onToggle={() => onAccordionToggle('modelFeatures')}
                     >
-                      <EuiSpacer size="s" />
-
                       <FieldArray name="featureList">
                         {({
                           push,
@@ -811,6 +857,8 @@ function AddAnomalyDetector({
                                   />
                                 )
                               )}
+
+                              <EuiSpacer size="m" />
                               <EuiPanel paddingSize="none">
                                 <EuiButton
                                   className="featureButton"
@@ -841,6 +889,7 @@ function AddAnomalyDetector({
                         }}
                       </FieldArray>
                     </EnhancedAccordion>
+                    <EuiSpacer size="m" />
                   </div>
                 )}
               </div>

public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/__snapshots__/AddAnomalyDetector.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AddAnomalyDetector renders 1`] = `ShallowWrapper {}`;

public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/helpers.tsx

@@ -1,9 +1,13 @@
-import { dispatch } from 'd3';
-import { matchDetector } from 'public/redux/reducers/ad';
-import { validateDetectorName } from 'public/utils/utils';
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
 import { FEATURE_TYPE } from '../../../../public/models/interfaces';
 import { FeaturesFormikValues } from '../../../../public/pages/ConfigureModel/models/interfaces';
-import { find, get, isEmpty, snakeCase } from 'lodash';
+import { find, get, snakeCase } from 'lodash';
+import { AGGREGATION_TYPES } from '../../../../public/pages/ConfigureModel/utils/constants';
+import { getSavedFeatureAnywhereLoader } from '../../../../public/services';
 
 export function visFeatureListToFormik(
   featureList,
@@ -17,7 +21,7 @@ export function visFeatureListToFormik(
       featureType: FEATURE_TYPE.SIMPLE,
       importance: 1,
       newFeature: false,
-      aggregationBy: 'sum',
+      aggregationBy: visAggregationTypeToFormik(feature),
       aggregationOf: visAggregationToFormik(feature),
       aggregationQuery: JSON.stringify(
         visAggregationQueryToFormik(feature, seriesParams)
@@ -33,6 +37,24 @@ export function formikToDetectorName(title) {
   return detectorName;
 }
 
+export async function isExceededMaxAssociatedCount(visId, savedObjLoader) {
+  const loader =
+    savedObjLoader !== undefined
+      ? savedObjLoader
+      : getSavedFeatureAnywhereLoader();
+
+  await loader.findAll().then(async (resp) => {
+    if (resp !== undefined) {
+      const savedAugmentObjects = get(resp, 'hits', []);
+      // gets all the saved object for this visualization
+      const savedObjectsForThisVisualization = savedAugmentObjects.filter(
+        (savedObj) => get(savedObj, 'visId', '') === visId
+      );
+      return savedObjectsForThisVisualization.length;
+    }
+  });
+}
+
 const getFeatureNameFromVisParams = (id, seriesParams) => {
   let name = find(seriesParams, function (param) {
     if (param.data.id === id) {
@@ -44,18 +66,40 @@ const getFeatureNameFromVisParams = (id, seriesParams) => {
 };
 
 function visAggregationToFormik(value) {
-  return [
-    {
-      label: value.params.field.name,
-      type: 'number',
-    },
-  ];
+  if (Object.values(value.params).length !== 0) {
+    return [
+      {
+        label: value.params?.field?.name,
+        type: value.type,
+      },
+    ];
+  }
+  // for count type of vis, there's no field name in the embeddable schema
+  return [];
 }
 
 function visAggregationQueryToFormik(value, seriesParams) {
-  return {
-    [snakeCase(getFeatureNameFromVisParams(value.id, seriesParams))]: {
-      sum: { field: value.params.field.name },
-    },
-  };
+  if (Object.values(value.params).length !== 0) {
+    return {
+      [snakeCase(getFeatureNameFromVisParams(value.id, seriesParams))]: {
+        [visAggregationTypeToFormik(value)]: {
+          field: value.params?.field?.name,
+        },
+      },
+    };
+  }
+  // for count type of vis, there's no field name in the embeddable schema
+  // return '' as the csutom expression query
+  return '';
+}
+
+function visAggregationTypeToFormik(feature) {
+  const aggType = feature.__type.name;
+  if (AGGREGATION_TYPES.some((type) => type.value === aggType)) {
+    return aggType;
+  }
+  if (aggType === 'count') {
+    return 'value_count';
+  }
+  return 'sum';
 }

public/expressions/constants.ts

@@ -13,3 +13,9 @@ export const TYPE_OF_EXPR_VIS_LAYERS = 'vis_layers';
 export const OVERLAY_ANOMALIES = 'overlay_anomalies';
 
 export const PLUGIN_EVENT_TYPE = 'Anomalies';
+
+export const PLUGIN_AUGMENTATION_ENABLE_SETTING =
+  'visualization:enablePluginAugmentation';
+
+export const PLUGIN_AUGMENTATION_MAX_OBJECTS_SETTING =
+  'visualization:enablePluginAugmentation.maxPluginObjects';

public/pages/ConfigureModel/components/FeatureAccordion/FeatureAccordion.tsx

@@ -22,6 +22,7 @@ import {
   EuiCheckbox,
   EuiButtonIcon,
 } from '@elastic/eui';
+import './styles.scss';
 import { Field, FieldProps } from 'formik';
 import {
   required,
@@ -80,6 +81,18 @@ export const FeatureAccordion = (props: FeatureAccordionProps) => {
   };
 
   const featureButtonContent = (feature: any, index: number) => {
+    if (props.displayMode === 'flyout') {
+      return (
+        <div id={`featureAccordionHeaders.${index}`}>
+          <EuiTitle size="xxs">
+            <h5 style={{ marginTop: '-5px', fontWeight: 400 }}>
+              {feature.featureName ? feature.featureName : 'Add feature'}
+            </h5>
+          </EuiTitle>
+          {showSubtitle ? showFeatureDescription(feature) : null}
+        </div>
+      );
+    }
     return (
       <div id={`featureAccordionHeaders.${index}`}>
         <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
@@ -125,7 +138,7 @@ export const FeatureAccordion = (props: FeatureAccordionProps) => {
       buttonClassName={
         props.index === 0
           ? 'euiAccordionForm__noTopPaddingButton'
-          : 'euiAccordionForm__button'
+          : 'euiFormAccordion_button'
       }
       className="euiAccordion__noTopBorder"
       paddingSize="l"

public/pages/ConfigureModel/components/FeatureAccordion/styles.scss

@@ -0,0 +1,3 @@
+.euiFormAccordion_button {
+  padding: 20px 16px 0 0;
+}

public/utils/contextMenu/getActions.tsx

@@ -21,7 +21,7 @@ import { FLYOUT_MODES } from '../../../public/components/FeatureAnywhereContextM
 const grouping: Action['grouping'] = [
   {
     id: 'ad-dashboard-context-menu',
-    getDisplayName: () => 'Anomaly Detector',
+    getDisplayName: () => 'Anomaly Detection',
     getIconType: () => APM_TRACE,
   },
 ];
@@ -54,7 +54,7 @@ export const getActions = () => {
       title: i18n.translate(
         'dashboard.actions.adMenuItem.createAnomalyDetector.displayName',
         {
-          defaultMessage: 'Create anomaly detector',
+          defaultMessage: 'Add anomaly detector',
         }
       ),
       icon: 'plusInCircle' as EuiIconType,