From 42e5be43d0868f953751226f4de4d833e054f508 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Wed, 4 Mar 2020 19:27:50 -0800
Subject: [PATCH] improve graph visualization in create alert flyout

---
 .../triggers_actions_ui/public/index.scss     |  3 +-
 .../threshold/expression.tsx                  | 42 ++++++++++++++-----
 .../threshold/visualization.tsx               |  2 -
 .../sections/alert_add/_index.scss            |  1 +
 .../sections/alert_add/alert_add.scss         |  3 ++
 .../sections/alert_add/alert_form.tsx         |  1 -
 6 files changed, 38 insertions(+), 14 deletions(-)
 create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/_index.scss
 create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_add.scss

diff --git a/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss b/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss
index 3ae0ef35ee354..0657b5736096e 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss
+++ b/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss
@@ -4,5 +4,6 @@
 // Styling within the app
 @import '../../../../plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/index';
 
-@import '../../../../plugins/triggers_actions_ui/public/application/sections/action_connector_form/index';
+@import '../../../../plugins/triggers_actions_ui/public/application/sections/alert_add/index';
 
+@import '../../../../plugins/triggers_actions_ui/public/application/sections/action_connector_form/index';
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 f7d2b8f60157f..b34a82eb5dede 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
@@ -20,6 +20,8 @@ import {
   EuiComboBoxOptionProps,
   EuiFormRow,
   EuiCallOut,
+  EuiEmptyPrompt,
+  EuiText,
 } from '@elastic/eui';
 import { COMPARATORS, builtInComparators } from '../../../../common/constants';
 import {
@@ -435,6 +437,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
             thresholdComparator={thresholdComparator ?? DEFAULT_VALUES.THRESHOLD_COMPARATOR}
             threshold={threshold}
             errors={errors}
+            popupPosition={'upLeft'}
             onChangeSelectedThreshold={selectedThresholds =>
               setAlertParams('threshold', selectedThresholds)
             }
@@ -445,6 +448,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <ForLastExpression
+            popupPosition={'upLeft'}
             timeWindowSize={timeWindowSize || 1}
             timeWindowUnit={timeWindowUnit || ''}
             errors={errors}
@@ -457,16 +461,34 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
           />
         </EuiFlexItem>
       </EuiFlexGroup>
-      {canShowVizualization ? null : (
-        <Fragment>
-          <ThresholdVisualization
-            alertParams={alertParams}
-            aggregationTypes={builtInAggregationTypes}
-            comparators={builtInComparators}
-            alertsContext={alertsContext}
-          />
-        </Fragment>
-      )}
+      <EuiSpacer size="l" />
+      <div className="alertVisualizationChart">
+        {canShowVizualization ? (
+          <div>
+            <EuiSpacer size="xl" />
+            <EuiEmptyPrompt
+              iconType="visBarVertical"
+              body={
+                <EuiText color="subdued">
+                  <FormattedMessage
+                    id="xpack.triggersActionsUI.sections.alertAdd.loadingAlertVisualizationDescription"
+                    defaultMessage="Preview alert visualization here"
+                  />
+                </EuiText>
+              }
+            />
+          </div>
+        ) : (
+          <Fragment>
+            <ThresholdVisualization
+              alertParams={alertParams}
+              aggregationTypes={builtInAggregationTypes}
+              comparators={builtInComparators}
+              alertsContext={alertsContext}
+            />
+          </Fragment>
+        )}
+      </div>
     </Fragment>
   );
 };
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 4d97a59e36320..1c9b4dad96eda 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
@@ -245,7 +245,6 @@ export const ThresholdVisualization: React.FunctionComponent<Props> = ({
     const aggLabel = aggregationTypes[aggType].text;
     return (
       <div data-test-subj="alertVisualizationChart">
-        <EuiSpacer size="l" />
         {alertVisualizationDataKeys.length ? (
           <Chart size={['100%', 200]} renderer="canvas">
             <Settings
@@ -309,7 +308,6 @@ export const ThresholdVisualization: React.FunctionComponent<Props> = ({
             />
           </EuiCallOut>
         )}
-        <EuiSpacer size="l" />
       </div>
     );
   }
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/_index.scss b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/_index.scss
new file mode 100644
index 0000000000000..83346c60eb2bc
--- /dev/null
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/_index.scss
@@ -0,0 +1 @@
+@import 'alert_add';
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_add.scss b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_add.scss
new file mode 100644
index 0000000000000..33cb3cd3d1d15
--- /dev/null
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_add.scss
@@ -0,0 +1,3 @@
+.alertVisualizationChart {
+  height: $euiSize * 15;
+}
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 95c049f32436a..86f295e5c9a23 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
@@ -636,7 +636,6 @@ export const AlertForm = ({
           alertsContext={alertsContext}
         />
       ) : null}
-      <EuiSpacer size="xl" />
       {selectedGroupActions}
       {isAddActionPanelOpen ? (
         <Fragment>