From d4514a50d3f7eb9549fa6c073397292a33926dca Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Wed, 25 Aug 2021 10:54:56 -0400
Subject: [PATCH] [ML] Fix form layout of the Anomaly jobs health rule type 
 (#110017) (#110040)

* [ML] adjust paddings the flyout form

* [ML] add beta badge

Co-authored-by: Dima Arnautov <dmitrii.arnautov@elastic.co>
---
 .../plugins/ml/public/alerting/beta_badge.tsx |  25 +++
 ...aly_detection_jobs_health_rule_trigger.tsx |  10 +
 .../tests_selection_control.tsx               | 196 +++++++++---------
 .../alerting/ml_anomaly_alert_trigger.tsx     |  23 +-
 4 files changed, 142 insertions(+), 112 deletions(-)
 create mode 100644 x-pack/plugins/ml/public/alerting/beta_badge.tsx

diff --git a/x-pack/plugins/ml/public/alerting/beta_badge.tsx b/x-pack/plugins/ml/public/alerting/beta_badge.tsx
new file mode 100644
index 000000000000..1f03fa5c6c8b
--- /dev/null
+++ b/x-pack/plugins/ml/public/alerting/beta_badge.tsx
@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { FC } from 'react';
+import { EuiBetaBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+export const BetaBadge: FC<{ message: string }> = ({ message }) => {
+  return (
+    <EuiFlexGroup gutterSize={'none'} justifyContent={'flexEnd'}>
+      <EuiFlexItem grow={false}>
+        <EuiBetaBadge
+          label={i18n.translate('xpack.ml.anomalyDetectionAlert.betaBadgeLabel', {
+            defaultMessage: 'Beta',
+          })}
+          tooltipContent={message}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
diff --git a/x-pack/plugins/ml/public/alerting/jobs_health_rule/anomaly_detection_jobs_health_rule_trigger.tsx b/x-pack/plugins/ml/public/alerting/jobs_health_rule/anomaly_detection_jobs_health_rule_trigger.tsx
index 7c75817e4029..3cb2a2d426a5 100644
--- a/x-pack/plugins/ml/public/alerting/jobs_health_rule/anomaly_detection_jobs_health_rule_trigger.tsx
+++ b/x-pack/plugins/ml/public/alerting/jobs_health_rule/anomaly_detection_jobs_health_rule_trigger.tsx
@@ -19,6 +19,7 @@ import { useMlKibana } from '../../application/contexts/kibana';
 import { TestsSelectionControl } from './tests_selection_control';
 import { isPopulatedObject } from '../../../common';
 import { ALL_JOBS_SELECTION } from '../../../common/constants/alerts';
+import { BetaBadge } from '../beta_badge';
 
 export type MlAnomalyAlertTriggerProps = AlertTypeParamsExpressionProps<MlAnomalyDetectionJobsHealthRuleParams>;
 
@@ -92,6 +93,15 @@ const AnomalyDetectionJobsHealthRuleTrigger: FC<MlAnomalyAlertTriggerProps> = ({
       error={formErrors}
       isInvalid={isFormInvalid}
     >
+      <BetaBadge
+        message={i18n.translate(
+          'xpack.ml.alertTypes.jobsHealthAlertingRule.betaBadgeTooltipContent',
+          {
+            defaultMessage: `Anomaly detection job health alerts are a beta feature. We'd love to hear your feedback.`,
+          }
+        )}
+      />
+
       <JobSelectorControl
         jobsAndGroupIds={includeJobsAndGroupIds}
         adJobsApiService={adJobsApiService}
diff --git a/x-pack/plugins/ml/public/alerting/jobs_health_rule/tests_selection_control.tsx b/x-pack/plugins/ml/public/alerting/jobs_health_rule/tests_selection_control.tsx
index b78c963670da..c28699d9df7e 100644
--- a/x-pack/plugins/ml/public/alerting/jobs_health_rule/tests_selection_control.tsx
+++ b/x-pack/plugins/ml/public/alerting/jobs_health_rule/tests_selection_control.tsx
@@ -43,112 +43,116 @@ export const TestsSelectionControl: FC<TestsSelectionControlProps> = React.memo(
     );
 
     return (
-      <EuiForm component="div" isInvalid={!!errors?.length} error={errors}>
-        {(Object.entries(uiConfig) as Array<
-          [JobsHealthTests, typeof uiConfig[JobsHealthTests]]
-        >).map(([name, conf], i) => {
-          return (
-            <EuiDescribedFormGroup
-              key={name}
-              title={<h4>{HEALTH_CHECK_NAMES[name]?.name}</h4>}
-              description={HEALTH_CHECK_NAMES[name]?.description}
-            >
-              <EuiFormRow>
-                <EuiSwitch
-                  label={
-                    <FormattedMessage
-                      id="xpack.ml.alertTypes.jobsHealthAlertingRule.testsSelection.enableTestLabel"
-                      defaultMessage="Enable"
-                    />
-                  }
-                  onChange={updateCallback.bind(null, {
-                    [name]: {
-                      ...uiConfig[name],
-                      enabled: !uiConfig[name].enabled,
-                    },
-                  })}
-                  checked={uiConfig[name].enabled}
-                />
-              </EuiFormRow>
-              <EuiSpacer size="s" />
-
-              {name === 'delayedData' ? (
-                <>
-                  <EuiFormRow
+      <>
+        <EuiForm component="div" isInvalid={!!errors?.length} error={errors}>
+          {(Object.entries(uiConfig) as Array<
+            [JobsHealthTests, typeof uiConfig[JobsHealthTests]]
+          >).map(([name, conf], i) => {
+            return (
+              <EuiDescribedFormGroup
+                key={name}
+                title={<h4>{HEALTH_CHECK_NAMES[name]?.name}</h4>}
+                description={HEALTH_CHECK_NAMES[name]?.description}
+                fullWidth
+                gutterSize={'s'}
+              >
+                <EuiFormRow>
+                  <EuiSwitch
                     label={
-                      <>
-                        <FormattedMessage
-                          id="xpack.ml.alertTypes.jobsHealthAlertingRule.testsSelection.delayedData.docsCountLabel"
-                          defaultMessage="Number of documents"
-                        />
-                        <EuiToolTip
-                          position="bottom"
-                          content={
-                            <FormattedMessage
-                              id="xpack.ml.alertTypes.jobsHealthAlertingRule.testsSelection.delayedData.docsCountHint"
-                              defaultMessage="The threshold for the amount of missing documents to alert upon."
-                            />
-                          }
-                        >
-                          <EuiIcon type="questionInCircle" />
-                        </EuiToolTip>
-                      </>
+                      <FormattedMessage
+                        id="xpack.ml.alertTypes.jobsHealthAlertingRule.testsSelection.enableTestLabel"
+                        defaultMessage="Enable"
+                      />
                     }
-                  >
-                    <EuiFieldNumber
-                      value={uiConfig.delayedData.docsCount}
+                    onChange={updateCallback.bind(null, {
+                      [name]: {
+                        ...uiConfig[name],
+                        enabled: !uiConfig[name].enabled,
+                      },
+                    })}
+                    checked={uiConfig[name].enabled}
+                  />
+                </EuiFormRow>
+
+                {name === 'delayedData' ? (
+                  <>
+                    <EuiSpacer size="m" />
+
+                    <EuiFormRow
+                      label={
+                        <>
+                          <FormattedMessage
+                            id="xpack.ml.alertTypes.jobsHealthAlertingRule.testsSelection.delayedData.docsCountLabel"
+                            defaultMessage="Number of documents"
+                          />
+                          <EuiToolTip
+                            position="bottom"
+                            content={
+                              <FormattedMessage
+                                id="xpack.ml.alertTypes.jobsHealthAlertingRule.testsSelection.delayedData.docsCountHint"
+                                defaultMessage="The threshold for the amount of missing documents to alert upon."
+                              />
+                            }
+                          >
+                            <EuiIcon type="questionInCircle" />
+                          </EuiToolTip>
+                        </>
+                      }
+                    >
+                      <EuiFieldNumber
+                        value={uiConfig.delayedData.docsCount}
+                        onChange={(e) => {
+                          updateCallback({
+                            [name]: {
+                              ...uiConfig[name],
+                              docsCount: Number(e.target.value),
+                            },
+                          });
+                        }}
+                        min={1}
+                      />
+                    </EuiFormRow>
+
+                    <EuiSpacer size="m" />
+
+                    <TimeIntervalControl
+                      label={
+                        <>
+                          <FormattedMessage
+                            id="xpack.ml.alertTypes.jobsHealthAlertingRule.testsSelection.delayedData.timeIntervalLabel"
+                            defaultMessage="Time interval"
+                          />
+                          <EuiToolTip
+                            position="bottom"
+                            content={
+                              <FormattedMessage
+                                id="xpack.ml.alertTypes.jobsHealthAlertingRule.testsSelection.delayedData.timeIntervalHint"
+                                defaultMessage="The lookback interval to check during rule execution for delayed data. By default derived from the longest bucket span and query delay."
+                              />
+                            }
+                          >
+                            <EuiIcon type="questionInCircle" />
+                          </EuiToolTip>
+                        </>
+                      }
+                      value={uiConfig.delayedData.timeInterval}
                       onChange={(e) => {
                         updateCallback({
                           [name]: {
                             ...uiConfig[name],
-                            docsCount: Number(e.target.value),
+                            timeInterval: e,
                           },
                         });
                       }}
-                      min={1}
                     />
-                  </EuiFormRow>
-
-                  <EuiSpacer size="s" />
-
-                  <TimeIntervalControl
-                    label={
-                      <>
-                        <FormattedMessage
-                          id="xpack.ml.alertTypes.jobsHealthAlertingRule.testsSelection.delayedData.timeIntervalLabel"
-                          defaultMessage="Time interval"
-                        />
-                        <EuiToolTip
-                          position="bottom"
-                          content={
-                            <FormattedMessage
-                              id="xpack.ml.alertTypes.jobsHealthAlertingRule.testsSelection.delayedData.timeIntervalHint"
-                              defaultMessage="The lookback interval to check during rule execution for delayed data. By default derived from the longest bucket span and query delay."
-                            />
-                          }
-                        >
-                          <EuiIcon type="questionInCircle" />
-                        </EuiToolTip>
-                      </>
-                    }
-                    value={uiConfig.delayedData.timeInterval}
-                    onChange={(e) => {
-                      updateCallback({
-                        [name]: {
-                          ...uiConfig[name],
-                          timeInterval: e,
-                        },
-                      });
-                    }}
-                  />
-
-                  <EuiSpacer size="s" />
-                </>
-              ) : null}
-            </EuiDescribedFormGroup>
-          );
-        })}
-      </EuiForm>
+                  </>
+                ) : null}
+              </EuiDescribedFormGroup>
+            );
+          })}
+        </EuiForm>
+        <EuiSpacer size="l" />
+      </>
     );
   }
 );
diff --git a/x-pack/plugins/ml/public/alerting/ml_anomaly_alert_trigger.tsx b/x-pack/plugins/ml/public/alerting/ml_anomaly_alert_trigger.tsx
index 719b5c4aa4ad..44a39ae5d450 100644
--- a/x-pack/plugins/ml/public/alerting/ml_anomaly_alert_trigger.tsx
+++ b/x-pack/plugins/ml/public/alerting/ml_anomaly_alert_trigger.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { EuiSpacer, EuiForm, EuiBetaBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiSpacer, EuiForm } from '@elastic/eui';
 import useMount from 'react-use/lib/useMount';
 import { i18n } from '@kbn/i18n';
 import { JobSelectorControl } from './job_selector';
@@ -31,6 +31,7 @@ import { getLookbackInterval, getTopNBuckets } from '../../common/util/alerts';
 import { isDefined } from '../../common/types/guards';
 import { AlertTypeParamsExpressionProps } from '../../../triggers_actions_ui/public';
 import { parseInterval } from '../../common/util/parse_interval';
+import { BetaBadge } from './beta_badge';
 
 export type MlAnomalyAlertTriggerProps = AlertTypeParamsExpressionProps<MlAnomalyDetectionAlertParams>;
 
@@ -154,21 +155,11 @@ const MlAnomalyAlertTrigger: FC<MlAnomalyAlertTriggerProps> = ({
 
   return (
     <EuiForm data-test-subj={'mlAnomalyAlertForm'}>
-      <EuiFlexGroup gutterSize={'none'} justifyContent={'flexEnd'}>
-        <EuiFlexItem grow={false}>
-          <EuiBetaBadge
-            label={i18n.translate('xpack.ml.anomalyDetectionAlert.betaBadgeLabel', {
-              defaultMessage: 'Beta',
-            })}
-            tooltipContent={i18n.translate(
-              'xpack.ml.anomalyDetectionAlert.betaBadgeTooltipContent',
-              {
-                defaultMessage: `Anomaly detection alerts are a beta feature. We'd love to hear your feedback.`,
-              }
-            )}
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
+      <BetaBadge
+        message={i18n.translate('xpack.ml.anomalyDetectionAlert.betaBadgeTooltipContent', {
+          defaultMessage: `Anomaly detection alerts are a beta feature. We'd love to hear your feedback.`,
+        })}
+      />
 
       <JobSelectorControl
         jobsAndGroupIds={jobsAndGroupIds}