From aeb2a06a4757698ed0bf66cfc9b350ccb2de2512 Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad.muhammad@elastic.co>
Date: Tue, 5 May 2020 20:26:12 +0200
Subject: [PATCH] [7.x] [Uptime] Set ML anomaly look-back to 2w (from 24h) /
 Add spinner (#65055) (#65256)

---
 .../__snapshots__/ml_integerations.test.tsx.snap      |  6 ++----
 .../__snapshots__/ml_manage_job.test.tsx.snap         |  6 ++----
 .../public/components/monitor/ml/manage_ml_job.tsx    | 11 ++++++++++-
 .../components/monitor/ml/ml_flyout_container.tsx     |  7 +++++--
 .../public/components/monitor/ml/ml_integeration.tsx  |  3 +++
 x-pack/plugins/uptime/public/state/api/ml_anomaly.ts  |  2 +-
 6 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_integerations.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_integerations.test.tsx.snap
index fa9b59e13c34ec..9ad61f50b05217 100644
--- a/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_integerations.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_integerations.test.tsx.snap
@@ -15,10 +15,8 @@ exports[`ML Integrations renders without errors 1`] = `
       <span
         class="euiButtonEmpty__content"
       >
-        <div
-          aria-hidden="true"
-          class="euiButtonEmpty__icon"
-          data-euiicon-type="machineLearningApp"
+        <span
+          class="euiLoadingSpinner euiLoadingSpinner--medium euiButton__spinner"
         />
         <span
           class="euiButtonEmpty__text"
diff --git a/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_manage_job.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_manage_job.test.tsx.snap
index 91bd9fa3d86b55..e9623c7aa78a2c 100644
--- a/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_manage_job.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_manage_job.test.tsx.snap
@@ -15,10 +15,8 @@ exports[`Manage ML Job renders without errors 1`] = `
       <span
         class="euiButtonEmpty__content"
       >
-        <div
-          aria-hidden="true"
-          class="euiButtonEmpty__icon"
-          data-euiicon-type="arrowDown"
+        <span
+          class="euiLoadingSpinner euiLoadingSpinner--medium euiButton__spinner"
         />
         <span
           class="euiButtonEmpty__text"
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
index 46ac24e9455e53..248ea179ccd2b3 100644
--- 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
@@ -8,7 +8,11 @@ import React, { useContext, useState } from 'react';
 
 import { EuiButtonEmpty, EuiContextMenu, EuiIcon, EuiPopover } from '@elastic/eui';
 import { useSelector } from 'react-redux';
-import { canDeleteMLJobSelector } from '../../../state/selectors';
+import {
+  canDeleteMLJobSelector,
+  hasMLJobSelector,
+  isMLJobCreatingSelector,
+} from '../../../state/selectors';
 import { UptimeSettingsContext } from '../../../contexts';
 import * as labels from './translations';
 import { getMLJobLinkHref } from './ml_job_link';
@@ -28,6 +32,10 @@ export const ManageMLJobComponent = ({ hasMLJob, onEnableJob, onJobDelete }: Pro
 
   const canDeleteMLJob = useSelector(canDeleteMLJobSelector);
 
+  const isMLJobCreating = useSelector(isMLJobCreatingSelector);
+
+  const { loading: isMLJobLoading } = useSelector(hasMLJobSelector);
+
   const { dateRangeStart, dateRangeEnd } = useGetUrlParams();
 
   const monitorId = useMonitorId();
@@ -39,6 +47,7 @@ export const ManageMLJobComponent = ({ hasMLJob, onEnableJob, onJobDelete }: Pro
       iconSide={hasMLJob ? 'right' : 'left'}
       onClick={hasMLJob ? () => setIsPopOverOpen(true) : onEnableJob}
       disabled={hasMLJob && !canDeleteMLJob}
+      isLoading={isMLJobCreating || isMLJobLoading}
     >
       {hasMLJob ? labels.ANOMALY_DETECTION : labels.ENABLE_ANOMALY_DETECTION}
     </EuiButtonEmpty>
diff --git a/x-pack/plugins/uptime/public/components/monitor/ml/ml_flyout_container.tsx b/x-pack/plugins/uptime/public/components/monitor/ml/ml_flyout_container.tsx
index 6eec30d405f769..e4bb3d0ac9e174 100644
--- a/x-pack/plugins/uptime/public/components/monitor/ml/ml_flyout_container.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/ml/ml_flyout_container.tsx
@@ -139,11 +139,14 @@ export const MachineLearningFlyout: React.FC<Props> = ({ onClose }) => {
   ]);
 
   useEffect(() => {
-    if (hasExistingMLJob) {
+    if (hasExistingMLJob && !isMLJobCreating && !hasMLJob && heartbeatIndices) {
       setIsCreatingJob(true);
       dispatch(createMLJobAction.get({ monitorId: monitorId as string, heartbeatIndices }));
     }
-  }, [dispatch, hasExistingMLJob, heartbeatIndices, monitorId]);
+
+    // Don't add isMLJobCreating, because it will result int end less loop
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dispatch, hasExistingMLJob, heartbeatIndices, monitorId, hasMLJob]);
 
   if (hasExistingMLJob) {
     return null;
diff --git a/x-pack/plugins/uptime/public/components/monitor/ml/ml_integeration.tsx b/x-pack/plugins/uptime/public/components/monitor/ml/ml_integeration.tsx
index 7f19885c15406e..5330ac6e12e987 100644
--- a/x-pack/plugins/uptime/public/components/monitor/ml/ml_integeration.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/ml/ml_integeration.tsx
@@ -65,6 +65,9 @@ export const MLIntegrationComponent = () => {
 
       refreshApp();
     }
+    return () => {
+      dispatch(resetMLState());
+    };
   }, [
     isMLJobDeleting,
     isConfirmDeleteJobOpen,
diff --git a/x-pack/plugins/uptime/public/state/api/ml_anomaly.ts b/x-pack/plugins/uptime/public/state/api/ml_anomaly.ts
index c4ecb769abefce..ff2ad8ba0745ff 100644
--- a/x-pack/plugins/uptime/public/state/api/ml_anomaly.ts
+++ b/x-pack/plugins/uptime/public/state/api/ml_anomaly.ts
@@ -57,7 +57,7 @@ export const createMLJob = async ({
     useDedicatedIndex: false,
     startDatafeed: true,
     start: moment()
-      .subtract(24, 'h')
+      .subtract(2, 'w')
       .valueOf(),
     indexPatternName: heartbeatIndices,
     query: {