From edb11ebb3644ab5188f333c4e397f3869d9d5adf Mon Sep 17 00:00:00 2001
From: Dominique Clarke <dominique.clarke@elastic.co>
Date: Wed, 6 Mar 2024 13:19:12 -0500
Subject: [PATCH] [SLOs] only display group by cardinality when group by exists
 (#178133)

## Summary

Resolves https://github.com/elastic/kibana/issues/178129

<img width="882" alt="Screenshot 2024-03-06 at 10 54 54 AM"
src="https://github.com/elastic/kibana/assets/11356435/f9c6e979-d921-478a-9b38-ab65a0798ee0">

### Release note
SLOs: Does not display group by cardinality when group by is not
selected.

### Testing
1. Create an SLO without a group by
2. Create an SLO with a group by
3. Edit the SLO without a group by. The cardinality callout should not
appear
4. Add a group by to the same SLO. The cardinality callout should appear
5. Edit the SLO with a group by. The cardinality callout should appear
6. Remove the group by on the same SLO. The cardinality callout should
disappear
---
 .../pages/slo_edit/components/common/group_by_field.tsx       | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/observability_solution/observability/public/pages/slo_edit/components/common/group_by_field.tsx b/x-pack/plugins/observability_solution/observability/public/pages/slo_edit/components/common/group_by_field.tsx
index d71a2c62afd2b..ff50fa882cd06 100644
--- a/x-pack/plugins/observability_solution/observability/public/pages/slo_edit/components/common/group_by_field.tsx
+++ b/x-pack/plugins/observability_solution/observability/public/pages/slo_edit/components/common/group_by_field.tsx
@@ -28,6 +28,8 @@ export function GroupByField({ dataView, isLoading }: { dataView?: DataView; isL
 
   const { isLoading: isGroupByCardinalityLoading, data: groupByCardinality } =
     useFetchGroupByCardinality(index, timestampField, groupByField);
+  const groupBy = [groupByField].flat().filter((value) => !!value);
+  const hasGroupBy = !groupBy.includes(ALL_VALUE) && groupBy.length;
 
   return (
     <>
@@ -55,7 +57,7 @@ export function GroupByField({ dataView, isLoading }: { dataView?: DataView; isL
         isLoading={!!index && isLoading}
         isDisabled={!index}
       />
-      {!isGroupByCardinalityLoading && !!groupByCardinality && (
+      {!isGroupByCardinalityLoading && !!groupByCardinality && hasGroupBy && (
         <EuiCallOut
           size="s"
           iconType={groupByCardinality.isHighCardinality ? 'warning' : ''}