[Metrics UI] Fix alert previews of ungrouped alerts (#73735)

Co-authored-by: Elastic Machine <[email protected]>
elastic · Jul 31, 2020 · d3f498a · d3f498a
1 parent 0a54278
commit d3f498a
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 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
@@ -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
@@ -45,7 +45,7 @@ interface Props {
   derivedIndexPattern: IIndexPattern;
   source: InfraSource | null;
   filterQuery?: string;
-  groupBy?: string;
+  groupBy?: string | string[];
 }
 
 const tooltipProps = {

diff --git a/...k/plugins/infra/public/alerting/metric_threshold/hooks/use_metrics_explorer_chart_data.ts b/...k/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
@@ -53,7 +53,7 @@ export interface ExpressionChartData {
 
 export interface AlertParams {
   criteria: MetricExpression[];
-  groupBy?: string;
+  groupBy?: string[];
   filterQuery?: string;
   sourceId?: string;
   filterQueryText?: string;