[Obs Alerting] Save/use active group state from url !!

packages/kbn-alerts-grouping/src/components/alerts_grouping.tsx

@@ -74,9 +74,11 @@ const AlertsGroupingInternal = <T extends BaseAlertsGroupAggregations>(
     renderGroupPanel,
     getGroupStats,
     children,
+    initialGroupings,
+    onGroupingsChange,
   } = props;
   const { dataViews, notifications, http } = services;
-  const { grouping, updateGrouping } = useAlertsGroupingState(groupingId);
+  const { grouping, updateGrouping } = useAlertsGroupingState(groupingId, initialGroupings);
 
   const { dataView } = useAlertsDataView({
     featureIds,
@@ -118,6 +120,18 @@ const AlertsGroupingInternal = <T extends BaseAlertsGroupAggregations>(
     onOptionsChange,
   });
 
+  useEffect(() => {
+    if (initialGroupings) {
+      updateGrouping(initialGroupings);
+    }
+  }, [initialGroupings, updateGrouping]);
+
+  useEffect(() => {
+    onGroupingsChange?.({
+      activeGroups: selectedGroups,
+    });
+  }, [selectedGroups, onGroupingsChange]);
+
   useEffect(() => {
     // The `none` grouping is managed from the internal selector state
     if (isNoneGroup(selectedGroups)) {

packages/kbn-alerts-grouping/src/contexts/alerts_grouping_context.tsx

@@ -40,7 +40,7 @@ export const AlertsGroupingContextProvider = ({ children }: PropsWithChildren<{}
   );
 };
 
-export const useAlertsGroupingState = (groupingId: string) => {
+export const useAlertsGroupingState = (groupingId: string, initialGroupings?: GroupModel) => {
   const { groupingState, setGroupingState } = useContext(AlertsGroupingContext);
   const updateGrouping = useCallback(
     (groupModel: Partial<GroupModel> | null) => {
@@ -70,7 +70,7 @@ export const useAlertsGroupingState = (groupingId: string) => {
     [groupingState, groupingId]
   );
   return {
-    grouping,
+    grouping: initialGroupings ? { ...grouping, ...initialGroupings } : grouping,
     updateGrouping,
   };
 };

packages/kbn-alerts-grouping/src/types.ts

@@ -98,6 +98,14 @@ export interface AlertsGroupingProps<
     dataViews: DataViewsServicePublic;
     http: HttpSetup;
   };
+  /**
+   * Initial groupings configuration
+   */
+  initialGroupings?: GroupModel;
+  /**
+   * Callback for when the groupings change
+   */
+  onGroupingsChange?: (groupings: GroupModel) => void;
 }
 
 export interface AlertsGroupAggregationBucket {

x-pack/plugins/observability_solution/observability/public/components/alert_search_bar/containers/state_container.tsx

@@ -33,6 +33,9 @@ interface AlertSearchBarStateTransitions {
   setSavedQueryId: (
     state: AlertSearchBarContainerState
   ) => (savedQueryId?: string) => AlertSearchBarContainerState;
+  setGroupings: (
+    state: AlertSearchBarContainerState
+  ) => (groupings: string[]) => AlertSearchBarContainerState;
 }
 
 const DEFAULT_STATE: AlertSearchBarContainerState = {
@@ -41,6 +44,7 @@ const DEFAULT_STATE: AlertSearchBarContainerState = {
   kuery: '',
   status: ALL_ALERTS.status,
   filters: [],
+  groupings: [],
 };
 
 const transitions: AlertSearchBarStateTransitions = {
@@ -50,6 +54,7 @@ const transitions: AlertSearchBarStateTransitions = {
   setStatus: (state) => (status) => ({ ...state, status }),
   setFilters: (state) => (filters) => ({ ...state, filters }),
   setSavedQueryId: (state) => (savedQueryId) => ({ ...state, savedQueryId }),
+  setGroupings: (state) => (groupings) => ({ ...state, groupings }),
 };
 
 const alertSearchBarStateContainer = createStateContainer(DEFAULT_STATE, transitions);

x-pack/plugins/observability_solution/observability/public/components/alert_search_bar/containers/use_alert_search_bar_state_container.tsx

@@ -38,6 +38,7 @@ export const alertSearchBarState = t.partial({
     t.literal(ALERT_STATUS_RECOVERED),
     t.literal(ALERT_STATUS_ALL),
   ]),
+  groupings: t.array(t.string),
 });
 
 export function useAlertSearchBarStateContainer(
@@ -52,10 +53,8 @@ export function useAlertSearchBarStateContainer(
 
   const { setRangeFrom, setRangeTo, setKuery, setStatus, setFilters, setSavedQueryId } =
     stateContainer.transitions;
-  const { rangeFrom, rangeTo, kuery, status, filters, savedQueryId } = useContainerSelector(
-    stateContainer,
-    (state) => state
-  );
+  const { rangeFrom, rangeTo, kuery, status, filters, savedQueryId, groupings } =
+    useContainerSelector(stateContainer, (state) => state);
 
   useEffect(() => {
     if (!savedQuery) {
@@ -94,12 +93,14 @@ export function useAlertSearchBarStateContainer(
     onRangeToChange: setRangeTo,
     onStatusChange: setStatus,
     onFiltersChange: setFilters,
+    onGroupingsChange: stateContainer.transitions.setGroupings,
     filters,
     rangeFrom,
     rangeTo,
     status,
     savedQuery,
     setSavedQuery,
+    groupings,
   };
 }
 

x-pack/plugins/observability_solution/observability/public/components/alert_search_bar/types.ts

@@ -57,6 +57,7 @@ export interface AlertSearchBarContainerState {
   status: AlertStatus;
   filters?: Filter[];
   savedQueryId?: string;
+  groupings?: string[];
 }
 
 interface AlertSearchBarStateTransitions {

x-pack/plugins/observability_solution/observability/public/pages/alerts/alerts.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { BrushEndListener, XYBrushEvent } from '@elastic/charts';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { BoolQuery, Filter } from '@kbn/es-query';
@@ -132,6 +132,12 @@ function InternalAlertsPage() {
     error: 0,
     snoozed: 0,
   });
+  const onGroupingsChange = useCallback(
+    ({ activeGroups }: { activeGroups: string[] }) => {
+      alertSearchBarStateProps.onGroupingsChange(activeGroups);
+    },
+    [alertSearchBarStateProps]
+  );
   const [esQuery, setEsQuery] = useState<{ bool: BoolQuery }>();
   const timeBuckets = useTimeBuckets();
   const bucketSize = useMemo(
@@ -265,6 +271,14 @@ function InternalAlertsPage() {
                 globalQuery={{ query: alertSearchBarStateProps.kuery, language: 'kuery' }}
                 groupingId={ALERTS_PAGE_ALERTS_TABLE_CONFIG_ID}
                 defaultGroupingOptions={DEFAULT_GROUPING_OPTIONS}
+                initialGroupings={
+                  alertSearchBarStateProps?.groupings?.length
+                    ? {
+                        activeGroups: alertSearchBarStateProps.groupings,
+                      }
+                    : undefined
+                }
+                onGroupingsChange={onGroupingsChange}
                 getAggregationsByGroupingField={getAggregationsByGroupingField}
                 renderGroupPanel={renderGroupPanel}
                 getGroupStats={getGroupStats}