[7.x] [Alerting] Create alert design cleanup (#56929) (#60070)

elastic · Mar 13, 2020 · 3f8d8bd · 3f8d8bd
1 parent 4b95995
commit 3f8d8bd
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 4 deletions.
diff --git a/...ers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx b/...ers_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,
@@ -345,7 +346,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"
@@ -358,7 +367,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
                     defaultMessage: 'index',
                   }
                 )}
-                value={index || firstFieldOption.text}
+                value={index ? index.join(' ') : firstFieldOption.text}
                 isActive={indexPopoverOpen}
                 onClick={() => {
                   setIndexPopoverOpen(true);
@@ -388,6 +397,8 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
             </div>
           </EuiPopover>
         </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiFlexGroup>
         <EuiFlexItem grow={false}>
           <WhenExpression
             aggType={aggType ?? DEFAULT_VALUES.AGGREGATION_TYPE}
@@ -409,6 +420,8 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
             />
           </EuiFlexItem>
         ) : null}
+      </EuiFlexGroup>
+      <EuiFlexGroup>
         <EuiFlexItem grow={false}>
           <GroupByExpression
             groupBy={groupBy || DEFAULT_VALUES.GROUP_BY}
@@ -425,6 +438,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/..._actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx b/..._actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx
@@ -198,7 +198,6 @@ export const ThresholdVisualization: React.FunctionComponent<Props> = ({
         >
           {error}
         </EuiCallOut>
-        <EuiSpacer size="l" />
       </Fragment>
     );
   }
@@ -228,7 +227,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/...plugins/triggers_actions_ui/public/application/sections/action_connector_form/_index.scss b/...plugins/triggers_actions_ui/public/application/sections/action_connector_form/_index.scss
@@ -1,3 +1,7 @@
 .actConnectorModal {
   z-index: 9000;
 }
+
+.euiComboBoxOptionsList {
+  z-index: 10000;
+}