improve graph visualization in create alert flyout

elastic · Mar 5, 2020 · 42e5be4 · 42e5be4
1 parent 6b77c88
commit 42e5be4
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 14 deletions.
diff --git 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/...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
@@ -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/..._actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx b/..._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
@@ -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
@@ -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
@@ -636,7 +636,6 @@ export const AlertForm = ({
           alertsContext={alertsContext}
         />
       ) : null}
-      <EuiSpacer size="xl" />
       {selectedGroupActions}
       {isAddActionPanelOpen ? (
         <Fragment>