From bfb9c697716d8d4b56fb0ffd53585702768060c9 Mon Sep 17 00:00:00 2001
From: Amit Galitzky <amgalitz@amazon.com>
Date: Mon, 22 May 2023 16:52:17 -0700
Subject: [PATCH] removed usememo, addressed other comments

Signed-off-by: Amit Galitzky <amgalitz@amazon.com>
---
 .../AnywhereParentFlyout.tsx                  |  9 ++--
 .../AddAnomalyDetector.tsx                    | 53 +++++++++++++++++++
 .../containers/AssociateExisting.tsx          | 28 ++++------
 3 files changed, 65 insertions(+), 25 deletions(-)

diff --git a/public/components/FeatureAnywhereContextMenu/AnywhereParentFlyout/AnywhereParentFlyout.tsx b/public/components/FeatureAnywhereContextMenu/AnywhereParentFlyout/AnywhereParentFlyout.tsx
index 967814ef..8e77299d 100644
--- a/public/components/FeatureAnywhereContextMenu/AnywhereParentFlyout/AnywhereParentFlyout.tsx
+++ b/public/components/FeatureAnywhereContextMenu/AnywhereParentFlyout/AnywhereParentFlyout.tsx
@@ -6,8 +6,7 @@ import React, { useState } from 'react';
 import { get } from 'lodash';
 import AssociatedDetectors from '../AssociatedDetectors/containers/AssociatedDetectors';
 import { getEmbeddable } from '../../../../public/services';
-import AddAnomalyDetector from '../CreateAnomalyDetector/AddAnomalyDetector';
-import { DetectorListItem } from '../../../../public/models/interfaces';
+import AddAnomalyDetector from '../CreateAnomalyDetector';
 
 const AnywhereParentFlyout = ({ startingFlyout, ...props }) => {
   const embeddable = getEmbeddable().getEmbeddableFactory;
@@ -16,15 +15,13 @@ const AnywhereParentFlyout = ({ startingFlyout, ...props }) => {
   ];
 
   const [mode, setMode] = useState(startingFlyout);
-  const [selectedDetector, setSelectedDetector] = useState(
-    {} as DetectorListItem
-  );
+  const [selectedDetector, setSelectedDetector] = useState(undefined);
 
   const AnywhereFlyout = {
     create: AddAnomalyDetector,
     associated: AssociatedDetectors,
     existing: AddAnomalyDetector,
-    }[mode];
+  }[mode];
 
   return (
     <AnywhereFlyout
diff --git a/public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AddAnomalyDetector.tsx b/public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AddAnomalyDetector.tsx
index ead4014b..c3c0c1f8 100644
--- a/public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AddAnomalyDetector.tsx
+++ b/public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AddAnomalyDetector.tsx
@@ -271,6 +271,59 @@ function AddAnomalyDetector({ embeddable, closeFlyout, mode, setMode }) {
     historical: false,
   };
 
+  const handleAssociate = async (detector: DetectorListItem) => {
+    enum VisLayerTypes {
+      PointInTimeEvents = 'PointInTimeEvents',
+    }
+
+    const fn = {
+      type: VisLayerTypes.PointInTimeEvents,
+      name: 'overlay_anomalies',
+      args: {
+        detectorId: detector.id,
+      },
+    } as VisLayerExpressionFn;
+
+    const pluginResource = {
+      type: 'anomay-detection',
+      id: detector.id,
+    } as ISavedPluginResource;
+
+    const savedObjectToCreate = {
+      title: embeddable.vis.title,
+      originPlugin: ORIGIN_PLUGIN_VIS_LAYER,
+      pluginResource: pluginResource,
+      visId: embeddable.vis.id,
+      savedObjectType: 'visualization',
+      visLayerExpressionFn: fn,
+    } as ISavedAugmentVis;
+
+    createAugmentVisSavedObject(savedObjectToCreate)
+      .then((savedObject: any) => {
+        savedObject
+          .save({})
+          .then((response: any) => {
+            notifications.toasts.addSuccess({
+              title: `The ${detector.name} is associated with the ${title} visualization`,
+              text: "The detector's anomalies do not appear on the visualization. Refresh your dashboard to update the visualization",
+            });
+            closeFlyout();
+          })
+          .catch((error) => {
+            notifications.toasts.addDanger(
+              prettifyErrorMessage(
+                `Error associating selected detector: ${error}`
+              )
+            );
+          });
+      })
+      .catch((error) => {
+        notifications.toasts.addDanger(
+          prettifyErrorMessage(`Error associating selected detector: ${error}`)
+        );
+      });
+  };
+
   return (
     <div className="add-anomaly-detector">
       <Formik
diff --git a/public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AssociateExisting/containers/AssociateExisting.tsx b/public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AssociateExisting/containers/AssociateExisting.tsx
index d1aa5e59..a4a2542a 100644
--- a/public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AssociateExisting/containers/AssociateExisting.tsx
+++ b/public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AssociateExisting/containers/AssociateExisting.tsx
@@ -98,7 +98,7 @@ export function AssociateExisting(
           []
         );
         const curDetectorsToDisplayOnList =
-          getExistingDetectorsAvalableToAssociate(
+          getExistingDetectorsAvailableToAssociate(
             Object.values(allDetectors),
             savedAugmentObjectsArr
           );
@@ -110,7 +110,7 @@ export function AssociateExisting(
 
   // cross checks all the detectors that exist with all the savedAugment Objects to only display ones
   // that are associated to the current visualization
-  const getExistingDetectorsAvalableToAssociate = (
+  const getExistingDetectorsAvailableToAssociate = (
     detectors: DetectorListItem[],
     savedAugmentObjects: ISavedAugmentVis[]
   ) => {
@@ -124,7 +124,7 @@ export function AssociateExisting(
     // Map all detector IDs for all the found augmented vis objects
     const savedAugmentDetectorsSet = new Set(
       savedAugmentForThisVisualization.map((savedObject) =>
-        get(savedObject, 'pluginResourceId', '')
+        get(savedObject, 'pluginResource.id', '')
       )
     );
 
@@ -168,19 +168,8 @@ export function AssociateExisting(
     existingDetectorsAvailableToAssociate,
   ]);
 
-  const detector = useMemo(
-    () =>
-      existingDetectorsAvailableToAssociate &&
-      associateExistingProps.selectedDetector &&
-      existingDetectorsAvailableToAssociate.find(
-        (detector) =>
-          detector.id === get(associateExistingProps.selectedDetector, 'id', '')
-      ),
-    [
-      associateExistingProps.selectedDetector,
-      existingDetectorsAvailableToAssociate,
-    ]
-  );
+  const detector = associateExistingProps.selectedDetector;
+
   const options = useMemo(() => {
     if (!existingDetectorsAvailableToAssociate) {
       return [];
@@ -210,8 +199,7 @@ export function AssociateExisting(
       <EuiText size="xs" color="subdued" style={{ paddingBottom: '3px' }}>
         Eligible detectors don't include high-cardinality detectors.
       </EuiText>
-      {!existingDetectorsAvailableToAssociate && <EuiLoadingSpinner size="l" />}
-      {existingDetectorsAvailableToAssociate && (
+      {existingDetectorsAvailableToAssociate ? (
         <EuiComboBox
           isLoading={isLoading}
           id="associate-existing__select"
@@ -233,6 +221,8 @@ export function AssociateExisting(
           singleSelection
           placeholder="Search for an anomaly detector"
         />
+      ) : (
+        <EuiLoadingSpinner size="l" />
       )}
       <EuiSpacer size="xl" />
       {detector && (
@@ -256,7 +246,7 @@ export function AssociateExisting(
           <EuiHorizontalRule margin="m" />
           <ul className="associate-existing__detector-details">
             {[
-              ['Indexes', (detector) => detector.indices],
+              ['Indices', (detector) => detector.indices],
               [
                 'Anomalies last 24 hours',
                 (detector) => detector.totalAnomalies,