[uptime] Fix anomaly alert edit (elastic#93025) (elastic#93383)

Co-authored-by: Shahzad <shahzad.muhammad@elastic.co>
peteharverson · Mar 3, 2021 · 108c52f · 108c52f
1 parent 0637453
commit 108c52f
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 21 deletions.
diff --git a/x-pack/plugins/uptime/public/components/common/alerts/uptime_edit_alert_flyout.tsx b/x-pack/plugins/uptime/public/components/common/alerts/uptime_edit_alert_flyout.tsx
@@ -10,7 +10,7 @@ import { useKibana } from '../../../../../../../src/plugins/kibana_react/public'
 import {
   Alert,
   TriggersAndActionsUIPublicPluginStart,
-} from '../../../../../../plugins/triggers_actions_ui/public';
+} from '../../../../../triggers_actions_ui/public';
 
 interface Props {
   alertFlyoutVisible: boolean;
@@ -27,19 +27,17 @@ export const UptimeEditAlertFlyoutComponent = ({
   initialAlert,
   setAlertFlyoutVisibility,
 }: Props) => {
-  const onClose = () => {
-    setAlertFlyoutVisibility(false);
-  };
   const { triggersActionsUi } = useKibana<KibanaDeps>().services;
 
   const EditAlertFlyout = useMemo(
     () =>
       triggersActionsUi.getEditAlertFlyout({
         initialAlert,
-        onClose,
+        onClose: () => {
+          setAlertFlyoutVisibility(false);
+        },
       }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
+    [initialAlert, setAlertFlyoutVisibility, triggersActionsUi]
   );
   return <>{alertFlyoutVisible && EditAlertFlyout}</>;
 };
diff --git a/x-pack/plugins/uptime/public/components/monitor/ml/manage_ml_job.tsx b/x-pack/plugins/uptime/public/components/monitor/ml/manage_ml_job.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useContext, useState } from 'react';
+import React, { useCallback, useContext, useState } from 'react';
 
 import { EuiButton, EuiContextMenu, EuiIcon, EuiPopover } from '@elastic/eui';
 import { useSelector, useDispatch } from 'react-redux';
@@ -14,6 +14,7 @@ import {
   canDeleteMLJobSelector,
   hasMLJobSelector,
   isMLJobCreatingSelector,
+  mlCapabilitiesSelector,
 } from '../../../state/selectors';
 import { UptimeSettingsContext } from '../../../contexts';
 import * as labels from './translations';
@@ -49,6 +50,7 @@ export const ManageMLJobComponent = ({ hasMLJob, onEnableJob, onJobDelete }: Pro
   const isAlertDeleting = useSelector(isAnomalyAlertDeleting);
 
   const { loading: isMLJobLoading } = useSelector(hasMLJobSelector);
+  const { loading: isCapbilityLoading } = useSelector(mlCapabilitiesSelector);
 
   const { dateRangeStart, dateRangeEnd } = useGetUrlParams();
 
@@ -63,7 +65,7 @@ export const ManageMLJobComponent = ({ hasMLJob, onEnableJob, onJobDelete }: Pro
   const deleteAnomalyAlert = () =>
     dispatch(deleteAnomalyAlertAction.get({ alertId: anomalyAlert?.id as string }));
 
-  const showLoading = isMLJobCreating || isMLJobLoading || isAlertDeleting;
+  const showLoading = isMLJobCreating || isMLJobLoading || isAlertDeleting || isCapbilityLoading;
 
   const btnText = hasMLJob ? labels.ANOMALY_DETECTION : labels.ENABLE_ANOMALY_DETECTION;
 
@@ -149,6 +151,11 @@ export const ManageMLJobComponent = ({ hasMLJob, onEnableJob, onJobDelete }: Pro
     },
   ];
 
+  const onCloseFlyout = useCallback(() => {
+    setIsFlyoutOpen(false);
+    dispatch(getAnomalyAlertAction.get({ monitorId }));
+  }, [dispatch, monitorId]);
+
   return (
     <>
       <EuiPopover
@@ -174,14 +181,13 @@ export const ManageMLJobComponent = ({ hasMLJob, onEnableJob, onJobDelete }: Pro
           }}
         />
       )}
-      <UptimeEditAlertFlyoutComponent
-        initialAlert={anomalyAlert!}
-        alertFlyoutVisible={isFlyoutOpen}
-        setAlertFlyoutVisibility={() => {
-          setIsFlyoutOpen(false);
-          dispatch(getAnomalyAlertAction.get({ monitorId }));
-        }}
-      />
+      {isFlyoutOpen && (
+        <UptimeEditAlertFlyoutComponent
+          initialAlert={anomalyAlert!}
+          alertFlyoutVisible={isFlyoutOpen}
+          setAlertFlyoutVisibility={onCloseFlyout}
+        />
+      )}
     </>
   );
 };
diff --git a/x-pack/plugins/uptime/public/state/selectors/index.ts b/x-pack/plugins/uptime/public/state/selectors/index.ts
@@ -37,22 +37,22 @@ export const selectPingList = ({ pingList }: AppState) => pingList;
 
 export const snapshotDataSelector = ({ snapshot }: AppState) => snapshot;
 
-const mlCapabilitiesSelector = (state: AppState) => state.ml.mlCapabilities.data;
+export const mlCapabilitiesSelector = (state: AppState) => state.ml.mlCapabilities;
 
 export const hasMLFeatureSelector = createSelector(
   mlCapabilitiesSelector,
   (mlCapabilities) =>
-    mlCapabilities?.isPlatinumOrTrialLicense && mlCapabilities?.mlFeatureEnabledInSpace
+    mlCapabilities?.data?.isPlatinumOrTrialLicense && mlCapabilities?.data?.mlFeatureEnabledInSpace
 );
 
 export const canCreateMLJobSelector = createSelector(
   mlCapabilitiesSelector,
-  (mlCapabilities) => mlCapabilities?.capabilities.canCreateJob
+  (mlCapabilities) => mlCapabilities?.data?.capabilities?.canCreateJob
 );
 
 export const canDeleteMLJobSelector = createSelector(
   mlCapabilitiesSelector,
-  (mlCapabilities) => mlCapabilities?.capabilities.canDeleteJob
+  (mlCapabilities) => mlCapabilities?.data?.capabilities?.canDeleteJob
 );
 
 export const hasMLJobSelector = ({ ml }: AppState) => ml.mlJob;