[Uptime] Update ML flyout to add cancel button (#61627)

* update button * fix type * update snaps * update layout
elastic · Mar 30, 2020 · dcf509e · dcf509e
1 parent 57d4dc4
commit dcf509e
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 4 deletions.
diff --git a/...time/public/components/monitor_details/ml/__tests__/__snapshots__/ml_flyout.test.tsx.snap b/...time/public/components/monitor_details/ml/__tests__/__snapshots__/ml_flyout.test.tsx.snap
diff --git a/x-pack/legacy/plugins/uptime/public/components/monitor_details/ml/ml_flyout.tsx b/x-pack/legacy/plugins/uptime/public/components/monitor_details/ml/ml_flyout.tsx
@@ -7,6 +7,7 @@
 import React, { useContext } from 'react';
 import {
   EuiButton,
+  EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFlyout,
@@ -64,11 +65,15 @@ export function MLFlyoutView({ isCreatingJob, onClickCreate, onClose, canCreateM
             <em>{labels.TAKE_SOME_TIME_TEXT}</em>
           </p>
         </EuiText>
-
         <EuiSpacer />
       </EuiFlyoutBody>
       <EuiFlyoutFooter>
-        <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd">
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty onClick={() => onClose()} disabled={isCreatingJob || isLoadingMLJob}>
+              {labels.CANCEL_LABEL}
+            </EuiButtonEmpty>
+          </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiButton
               onClick={() => onClickCreate()}

diff --git a/x-pack/legacy/plugins/uptime/public/components/monitor_details/ml/translations.tsx b/x-pack/legacy/plugins/uptime/public/components/monitor_details/ml/translations.tsx
@@ -124,6 +124,13 @@ export const CREATE_NEW_JOB = i18n.translate(
   }
 );
 
+export const CANCEL_LABEL = i18n.translate(
+  'xpack.uptime.ml.enableAnomalyDetectionPanel.cancelLabel',
+  {
+    defaultMessage: 'Cancel',
+  }
+);
+
 export const CREAT_ML_JOB_DESC = i18n.translate(
   'xpack.uptime.ml.enableAnomalyDetectionPanel.createMLJobDescription',
   {