[SLO] Fix bug with 'View events' feature to filter on group-by fields (…

…#178260)

## Summary

This PR fixes #178231 by adding filters for the group by values. This
also fixes a bug where the Discover time picker was missing due to the
incompatible data view ID.

### Testing

1. Create an SLO (Custom KQL) with a group by (or multiple)
2. Visit the SLO detail page
3. Click on the "View events" 

You should see filters for each of the group bys along with disabled
filters for "Good events" and "Bad events"

x-pack/plugins/observability_solution/observability/public/utils/slo/get_discover_link.ts

@@ -5,9 +5,11 @@
  * 2.0.
  */
 import { DiscoverStart } from '@kbn/discover-plugin/public';
-import { kqlWithFiltersSchema, SLOWithSummaryResponse } from '@kbn/slo-schema';
+import { ALL_VALUE, kqlWithFiltersSchema, SLOWithSummaryResponse } from '@kbn/slo-schema';
 import { Filter, FilterStateStore, TimeRange } from '@kbn/es-query';
 import { i18n } from '@kbn/i18n';
+import { v4 } from 'uuid';
+import { isEmpty } from 'lodash';
 import { buildEsQuery } from '../build_es_query';
 
 function createDiscoverLocator(
@@ -16,6 +18,7 @@ function createDiscoverLocator(
   showGood = false,
   timeRange?: TimeRange
 ) {
+  const indexId = v4();
   const filters: Filter[] = [];
 
   if (kqlWithFiltersSchema.is(slo.indicator.params.filter)) {
@@ -33,8 +36,15 @@ function createDiscoverLocator(
     const goodFilters = kqlWithFiltersSchema.is(slo.indicator.params.good)
       ? slo.indicator.params.good.filters
       : [];
+    const totalKuery = kqlWithFiltersSchema.is(slo.indicator.params.total)
+      ? slo.indicator.params.total.kqlQuery
+      : slo.indicator.params.total;
+    const totalFilters = kqlWithFiltersSchema.is(slo.indicator.params.total)
+      ? slo.indicator.params.total.filters
+      : [];
     const customGoodFilter = buildEsQuery({ kuery: goodKuery, filters: goodFilters });
-    const customBadFilter = { bool: { must_not: customGoodFilter } };
+    const customTotalFilter = buildEsQuery({ kuery: totalKuery, filters: totalFilters });
+    const customBadFilter = { bool: { filter: customTotalFilter, must_not: customGoodFilter } };
 
     filters.push({
       $state: { store: FilterStateStore.APP_STATE },
@@ -44,8 +54,8 @@ function createDiscoverLocator(
           defaultMessage: 'Good events',
         }),
         disabled: !showGood,
-        index: `${slo.indicator.params.index}-id`,
         value: JSON.stringify(customGoodFilter),
+        index: indexId,
       },
       query: customGoodFilter as Record<string, any>,
     });
@@ -58,11 +68,56 @@ function createDiscoverLocator(
           defaultMessage: 'Bad events',
         }),
         disabled: !showBad,
-        index: `${slo.indicator.params.index}-id`,
         value: JSON.stringify(customBadFilter),
+        index: indexId,
       },
       query: customBadFilter as Record<string, any>,
     });
+
+    filters.push({
+      $state: { store: FilterStateStore.APP_STATE },
+      meta: {
+        type: 'custom',
+        alias: i18n.translate('xpack.observability.slo.sloDetails.totalFilterLabel', {
+          defaultMessage: 'Total events',
+        }),
+        value: JSON.stringify(customBadFilter),
+        index: indexId,
+      },
+      query: customTotalFilter as Record<string, any>,
+    });
+  }
+
+  const groupBy = [slo.groupBy].flat();
+
+  if (
+    !isEmpty(slo.groupings) &&
+    groupBy.length > 0 &&
+    groupBy.every((field) => field === ALL_VALUE) === false
+  ) {
+    groupBy.forEach((field) => {
+      filters.push({
+        meta: {
+          disabled: false,
+          negate: false,
+          alias: null,
+          key: field,
+          params: {
+            query: slo.groupings[field],
+          },
+          type: 'phrase',
+          index: indexId,
+        },
+        $state: {
+          store: FilterStateStore.APP_STATE,
+        },
+        query: {
+          match_phrase: {
+            [field]: slo.groupings[field],
+          },
+        },
+      });
+    });
   }
 
   const timeFieldName =
@@ -80,7 +135,7 @@ function createDiscoverLocator(
     },
     filters,
     dataViewSpec: {
-      id: `${slo.indicator.params.index}-id`,
+      id: indexId,
       title: slo.indicator.params.index,
       timeFieldName,
     },