[Metrics UI] Fix alert previews of ungrouped alerts

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'} />
     </>

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 = {

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(

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;