[7.x] [Uptime] Set ML anomaly look-back to 2w (from 24h) / Add spinner (

#65055) (#65256)
elastic · May 5, 2020 · aeb2a06 · aeb2a06
1 parent c44a93b
commit aeb2a06
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 12 deletions.
diff --git a/...ptime/public/components/monitor/ml/__tests__/__snapshots__/ml_integerations.test.tsx.snap b/...ptime/public/components/monitor/ml/__tests__/__snapshots__/ml_integerations.test.tsx.snap
diff --git a/...s/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_manage_job.test.tsx.snap b/...s/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_manage_job.test.tsx.snap
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
@@ -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
@@ -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
@@ -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
@@ -57,7 +57,7 @@ export const createMLJob = async ({
     useDedicatedIndex: false,
     startDatafeed: true,
     start: moment()
-      .subtract(24, 'h')
+      .subtract(2, 'w')
       .valueOf(),
     indexPatternName: heartbeatIndices,
     query: {