Sync status filtering with urlbar (#131523)

Co-authored-by: Kibana Machine <[email protected]>

x-pack/plugins/observability/public/pages/rules/index.tsx

@@ -23,11 +23,11 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import {
   deleteRules,
   RuleTableItem,
+  RuleStatus,
   enableRule,
   disableRule,
   snoozeRule,
   useLoadRuleTypes,
-  RuleStatus,
   unsnoozeRule,
 } from '@kbn/triggers-actions-ui-plugin/public';
 import { RuleExecutionStatus, ALERTS_FEATURE_ID } from '@kbn/alerting-plugin/common';
@@ -83,7 +83,6 @@ function RulesPage() {
     application: { capabilities },
     notifications: { toasts },
   } = useKibana().services;
-  const { lastResponse, setLastResponse } = useRulesPageStateContainer();
   const documentationLink = docLinks.links.observability.createAlerts;
   const ruleTypeRegistry = triggersActionsUi.ruleTypeRegistry;
   const canExecuteActions = hasExecuteActionsCapability(capabilities);
@@ -94,8 +93,9 @@ function RulesPage() {
   });
   const [inputText, setInputText] = useState<string | undefined>();
   const [searchText, setSearchText] = useState<string | undefined>();
-  const [ruleStatusesFilter, setRuleStatusesFilter] = useState<RuleStatus[]>([]);
   const [typesFilter, setTypesFilter] = useState<string[]>([]);
+  const { lastResponse, setLastResponse } = useRulesPageStateContainer();
+  const { status, setStatus } = useRulesPageStateContainer();
   const [currentRuleToEdit, setCurrentRuleToEdit] = useState<RuleTableItem | null>(null);
   const [rulesToDelete, setRulesToDelete] = useState<string[]>([]);
   const [createRuleFlyoutVisibility, setCreateRuleFlyoutVisibility] = useState(false);
@@ -111,7 +111,7 @@ function RulesPage() {
   const { rulesState, setRulesState, reload, noData, initialLoad } = useFetchRules({
     searchText,
     ruleLastResponseFilter: lastResponse,
-    ruleStatusesFilter,
+    ruleStatusesFilter: status,
     typesFilter,
     page,
     setPage,
@@ -289,6 +289,13 @@ function RulesPage() {
     []
   );
 
+  const setRuleStatusFilter = useCallback(
+    (ids: RuleStatus[]) => {
+      setStatus(ids);
+    },
+    [setStatus]
+  );
+
   const setExecutionStatusFilter = useCallback(
     (ids: string[]) => {
       setLastResponse(ids);
@@ -311,9 +318,6 @@ function RulesPage() {
       return <CenterJustifiedSpinner />;
     }
 
-    // const nextSearchParams = new URLSearchParams(history.location.search);
-    // const xx = [...nextSearchParams.getAll('executionStatus')] || [];
-    // console.log(xx, '!!');
     return (
       <>
         <EuiFlexGroup>
@@ -357,8 +361,8 @@ function RulesPage() {
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             {triggersActionsUi.getRuleStatusFilter({
-              selectedStatuses: ruleStatusesFilter,
-              onChange: setRuleStatusesFilter,
+              selectedStatuses: status,
+              onChange: setRuleStatusFilter,
             })}
           </EuiFlexItem>
           <EuiFlexItem grow={false}>

x-pack/plugins/observability/public/pages/rules/state_container/state_container.tsx

@@ -9,19 +9,23 @@ import {
   createStateContainer,
   createStateContainerReactHelpers,
 } from '@kbn/kibana-utils-plugin/public';
+import { RuleStatus } from '@kbn/triggers-actions-ui-plugin/public';
 
 interface RulesPageContainerState {
   lastResponse: string[];
+  status: RuleStatus[];
 }
 
 const defaultState: RulesPageContainerState = {
   lastResponse: [],
+  status: [],
 };
 
 interface RulesPageStateTransitions {
   setLastResponse: (
     state: RulesPageContainerState
   ) => (lastResponse: string[]) => RulesPageContainerState;
+  setStatus: (state: RulesPageContainerState) => (status: RuleStatus[]) => RulesPageContainerState;
 }
 
 const transitions: RulesPageStateTransitions = {
@@ -39,6 +43,20 @@ const transitions: RulesPageStateTransitions = {
     });
     return { ...state, lastResponse: filteredIds };
   },
+  setStatus: (state) => (status) => {
+    const filteredIds = status;
+    status.forEach((id) => {
+      const isPreviouslyChecked = state.status.includes(id);
+      if (!isPreviouslyChecked) {
+        filteredIds.concat(id);
+      } else {
+        filteredIds.filter((val) => {
+          return val !== id;
+        });
+      }
+    });
+    return { ...state, status: filteredIds };
+  },
 };
 
 const rulesPageStateContainer = createStateContainer(defaultState, transitions);

x-pack/plugins/observability/public/pages/rules/state_container/use_rules_page_state_container.tsx

@@ -27,12 +27,14 @@ export function useRulesPageStateContainer() {
 
   useUrlStateSyncEffect(stateContainer);
 
-  const { setLastResponse } = stateContainer.transitions;
-  const { lastResponse } = useContainerSelector(stateContainer, (state) => state);
+  const { setLastResponse, setStatus } = stateContainer.transitions;
+  const { lastResponse, status } = useContainerSelector(stateContainer, (state) => state);
 
   return {
     lastResponse,
+    status,
     setLastResponse,
+    setStatus,
   };
 }