From d3f498af9aef9bda7f0ee51aa08b7faa728f317e Mon Sep 17 00:00:00 2001
From: Zacqary Adam Xeper <Zacqary@users.noreply.github.com>
Date: Thu, 30 Jul 2020 22:37:54 -0500
Subject: [PATCH] [Metrics UI] Fix alert previews of ungrouped alerts (#73735)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../alerting/metric_threshold/components/expression.tsx    | 7 ++++++-
 .../metric_threshold/components/expression_chart.tsx       | 2 +-
 .../hooks/use_metrics_explorer_chart_data.ts               | 2 +-
 .../infra/public/alerting/metric_threshold/types.ts        | 2 +-
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression.tsx b/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression.tsx
index cd1e93a2a0c9..f990578a471b 100644
--- a/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression.tsx
+++ b/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression.tsx
@@ -256,6 +256,11 @@ export const Expressions: React.FC<Props> = (props) => {
     [onFilterChange]
   );
 
+  const groupByPreviewDisplayName = useMemo(() => {
+    if (Array.isArray(alertParams.groupBy)) return alertParams.groupBy.join(', ');
+    return alertParams.groupBy;
+  }, [alertParams.groupBy]);
+
   return (
     <>
       <EuiSpacer size={'m'} />
@@ -400,7 +405,7 @@ export const Expressions: React.FC<Props> = (props) => {
         showNoDataResults={alertParams.alertOnNoData}
         validate={validateMetricThreshold}
         fetch={alertsContext.http.fetch}
-        groupByDisplayName={alertParams.groupBy}
+        groupByDisplayName={groupByPreviewDisplayName}
       />
       <EuiSpacer size={'m'} />
     </>
diff --git a/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.tsx b/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.tsx
index cdb6b341c729..c90c534193fd 100644
--- a/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.tsx
+++ b/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.tsx
@@ -45,7 +45,7 @@ interface Props {
   derivedIndexPattern: IIndexPattern;
   source: InfraSource | null;
   filterQuery?: string;
-  groupBy?: string;
+  groupBy?: string | string[];
 }
 
 const tooltipProps = {
diff --git a/x-pack/plugins/infra/public/alerting/metric_threshold/hooks/use_metrics_explorer_chart_data.ts b/x-pack/plugins/infra/public/alerting/metric_threshold/hooks/use_metrics_explorer_chart_data.ts
index 185895062cfe..a3d09742e9a5 100644
--- a/x-pack/plugins/infra/public/alerting/metric_threshold/hooks/use_metrics_explorer_chart_data.ts
+++ b/x-pack/plugins/infra/public/alerting/metric_threshold/hooks/use_metrics_explorer_chart_data.ts
@@ -19,7 +19,7 @@ export const useMetricsExplorerChartData = (
   derivedIndexPattern: IIndexPattern,
   source: InfraSource | null,
   filterQuery?: string,
-  groupBy?: string
+  groupBy?: string | string[]
 ) => {
   const { timeSize, timeUnit } = expression || { timeSize: 1, timeUnit: 'm' };
   const options: MetricsExplorerOptions = useMemo(
diff --git a/x-pack/plugins/infra/public/alerting/metric_threshold/types.ts b/x-pack/plugins/infra/public/alerting/metric_threshold/types.ts
index 58586c1dd8b9..b2317c558be4 100644
--- a/x-pack/plugins/infra/public/alerting/metric_threshold/types.ts
+++ b/x-pack/plugins/infra/public/alerting/metric_threshold/types.ts
@@ -53,7 +53,7 @@ export interface ExpressionChartData {
 
 export interface AlertParams {
   criteria: MetricExpression[];
-  groupBy?: string;
+  groupBy?: string[];
   filterQuery?: string;
   sourceId?: string;
   filterQueryText?: string;