From 0faab4aa48509fac2e5a4de3469b594df67f947f Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Wed, 12 Feb 2020 14:58:15 -0800
Subject: [PATCH] [Alerting] Create alert design cleanup (#56929)

---
 .../threshold/expression.tsx                  | 27 +++++++++++++++++--
 .../threshold/visualization.tsx               |  3 +--
 .../action_connector_form/_index.scss         |  4 +++
 .../sections/alert_add/alert_form.tsx         | 25 ++++++++++-------
 4 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx
index 1708b2f0ae016d..f7d2b8f60157ff 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx
@@ -10,6 +10,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiFlexItem,
   EuiFlexGroup,
+  EuiFormLabel,
   EuiExpression,
   EuiPopover,
   EuiPopoverTitle,
@@ -327,7 +328,15 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
           <EuiSpacer />
         </Fragment>
       ) : null}
-      <EuiFlexGroup gutterSize="s" wrap>
+      <EuiSpacer size="l" />
+      <EuiFormLabel>
+        <FormattedMessage
+          defaultMessage="Select Index to query:"
+          id="xpack.triggersActionsUI.sections.alertAdd.selectIndex"
+        />
+      </EuiFormLabel>
+      <EuiSpacer size="m" />
+      <EuiFlexGroup wrap>
         <EuiFlexItem grow={false}>
           <EuiPopover
             id="indexPopover"
@@ -340,7 +349,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
                     defaultMessage: 'index',
                   }
                 )}
-                value={index || firstFieldOption.text}
+                value={index ? index.join(' ') : firstFieldOption.text}
                 isActive={indexPopoverOpen}
                 onClick={() => {
                   setIndexPopoverOpen(true);
@@ -370,6 +379,8 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
             </div>
           </EuiPopover>
         </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiFlexGroup>
         <EuiFlexItem grow={false}>
           <WhenExpression
             aggType={aggType ?? DEFAULT_VALUES.AGGREGATION_TYPE}
@@ -391,6 +402,8 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
             />
           </EuiFlexItem>
         ) : null}
+      </EuiFlexGroup>
+      <EuiFlexGroup>
         <EuiFlexItem grow={false}>
           <GroupByExpression
             groupBy={groupBy || DEFAULT_VALUES.GROUP_BY}
@@ -407,6 +420,16 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
             }
           />
         </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer size="xl" />
+      <EuiFormLabel>
+        <FormattedMessage
+          defaultMessage="Define the alert condition:"
+          id="xpack.triggersActionsUI.sections.alertAdd.conditionPrompt"
+        />
+      </EuiFormLabel>
+      <EuiSpacer size="m" />
+      <EuiFlexGroup>
         <EuiFlexItem grow={false}>
           <ThresholdExpression
             thresholdComparator={thresholdComparator ?? DEFAULT_VALUES.THRESHOLD_COMPARATOR}
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx
index ce7ef0dd39bac8..4d97a59e36320e 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx
@@ -214,7 +214,6 @@ export const ThresholdVisualization: React.FunctionComponent<Props> = ({
         >
           {error}
         </EuiCallOut>
-        <EuiSpacer size="l" />
       </Fragment>
     );
   }
@@ -248,7 +247,7 @@ export const ThresholdVisualization: React.FunctionComponent<Props> = ({
       <div data-test-subj="alertVisualizationChart">
         <EuiSpacer size="l" />
         {alertVisualizationDataKeys.length ? (
-          <Chart size={['100%', 300]} renderer="canvas">
+          <Chart size={['100%', 200]} renderer="canvas">
             <Settings
               theme={[customTheme(), chartsTheme]}
               xDomain={domain}
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/_index.scss b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/_index.scss
index f8fa882cd617da..b5755bc35b1c1f 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/_index.scss
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/_index.scss
@@ -1,3 +1,7 @@
 .actConnectorModal {
   z-index: 9000;
 }
+
+.euiComboBoxOptionsList {
+  z-index: 10000;
+}
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_form.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_form.tsx
index 1c64f599721d54..95c049f32436aa 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_form.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_form.tsx
@@ -19,7 +19,6 @@ import {
   EuiFormRow,
   EuiComboBox,
   EuiKeyPadMenuItem,
-  EuiLink,
   EuiFieldNumber,
   EuiSelect,
   EuiIconTip,
@@ -27,6 +26,7 @@ import {
   EuiButtonIcon,
   EuiEmptyPrompt,
   EuiButtonEmpty,
+  EuiHorizontalRule,
 } from '@elastic/eui';
 import { loadAlertTypes } from '../../lib/alert_api';
 import { loadActionTypes, loadAllActions } from '../../lib/action_connector_api';
@@ -595,12 +595,13 @@ export const AlertForm = ({
 
   const alertTypeDetails = (
     <Fragment>
+      <EuiHorizontalRule />
       <EuiFlexGroup alignItems="center" gutterSize="s">
         <EuiFlexItem>
           <EuiTitle size="s" data-test-subj="selectedAlertTypeTitle">
             <h5 id="selectedAlertTypeTitle">
               <FormattedMessage
-                defaultMessage="Trigger: {alertType}"
+                defaultMessage="{alertType}"
                 id="xpack.triggersActionsUI.sections.alertForm.selectedAlertTypeTitle"
                 values={{ alertType: alertTypeModel ? alertTypeModel.name : '' }}
               />
@@ -609,17 +610,20 @@ export const AlertForm = ({
         </EuiFlexItem>
         {canChangeTrigger ? (
           <EuiFlexItem grow={false}>
-            <EuiLink
+            <EuiButtonIcon
+              iconType="cross"
+              color="danger"
+              aria-label={i18n.translate(
+                'xpack.triggersActionsUI.sections.alertForm.changeAlertTypeAriaLabel',
+                {
+                  defaultMessage: 'Delete',
+                }
+              )}
               onClick={() => {
                 setAlertProperty('alertTypeId', null);
                 setAlertTypeModel(null);
               }}
-            >
-              <FormattedMessage
-                defaultMessage="Change"
-                id="xpack.triggersActionsUI.sections.alertForm.changeAlertTypeLink"
-              />
-            </EuiLink>
+            />
           </EuiFlexItem>
         ) : null}
       </EuiFlexGroup>
@@ -636,7 +640,7 @@ export const AlertForm = ({
       {selectedGroupActions}
       {isAddActionPanelOpen ? (
         <Fragment>
-          <EuiTitle size="s">
+          <EuiTitle size="xs">
             <h5 id="alertActionTypeTitle">
               <FormattedMessage
                 defaultMessage="Actions: Select an action type"
@@ -839,6 +843,7 @@ export const AlertForm = ({
         <Fragment>{alertTypeDetails}</Fragment>
       ) : (
         <Fragment>
+          <EuiHorizontalRule />
           <EuiTitle size="s">
             <h5 id="alertTypeTitle">
               <FormattedMessage