[Cloud Security] Disable/Enable rule takes too long

x-pack/plugins/cloud_security_posture/public/common/api/use_stats_api.ts

@@ -15,8 +15,8 @@ import {
 } from '../../../common/constants';
 
 // TODO: consolidate both hooks into one hook with a dynamic key
-export const getCspmStatsKey = ['csp_cspm_dashboard_stats'];
-export const getKspmStatsKey = ['csp_kspm_dashboard_stats'];
+export const CSPM_STATS_QUERY_KEY = ['csp_cspm_dashboard_stats'];
+export const KSPM_STATS_QUERY_KEY = ['csp_kspm_dashboard_stats'];
 
 export const getStatsRoute = (policyTemplate: PosturePolicyTemplate) => {
   return STATS_ROUTE_PATH.replace('{policy_template}', policyTemplate);
@@ -27,7 +27,7 @@ export const useCspmStatsApi = (
 ) => {
   const { http } = useKibana().services;
   return useQuery(
-    getCspmStatsKey,
+    CSPM_STATS_QUERY_KEY,
     () =>
       http.get<ComplianceDashboardDataV2>(getStatsRoute(CSPM_POLICY_TEMPLATE), { version: '2' }),
     options
@@ -39,7 +39,7 @@ export const useKspmStatsApi = (
 ) => {
   const { http } = useKibana().services;
   return useQuery(
-    getKspmStatsKey,
+    KSPM_STATS_QUERY_KEY,
     () =>
       http.get<ComplianceDashboardDataV2>(getStatsRoute(KSPM_POLICY_TEMPLATE), { version: '2' }),
     options

x-pack/plugins/cloud_security_posture/public/pages/rules/rules_container.tsx

@@ -245,7 +245,6 @@ export const RulesContainer = () => {
         pageSize={rulesPageData.rules_page.length}
         isSearching={status === 'loading'}
         selectedRules={selectedRules}
-        refetchRulesStates={rulesStates.refetch}
         setEnabledDisabledItemsFilter={setEnabledDisabledItemsFilter}
         enabledDisabledItemsFilterState={enabledDisabledItemsFilter}
         setSelectAllRules={setSelectAllRules}
@@ -268,16 +267,11 @@ export const RulesContainer = () => {
         }}
         selectedRuleId={params.ruleId}
         onRuleClick={navToRuleFlyout}
-        refetchRulesStates={rulesStates.refetch}
         selectedRules={selectedRules}
         setSelectedRules={setSelectedRules}
       />
       {params.ruleId && rulesFlyoutData.metadata && (
-        <RuleFlyout
-          rule={rulesFlyoutData}
-          onClose={navToRulePage}
-          refetchRulesStates={rulesStates.refetch}
-        />
+        <RuleFlyout rule={rulesFlyoutData} onClose={navToRulePage} />
       )}
     </div>
   );

x-pack/plugins/cloud_security_posture/public/pages/rules/rules_flyout.tsx

@@ -29,7 +29,7 @@ import { CspBenchmarkRuleMetadata } from '../../../common/types/latest';
 import { getRuleList } from '../configurations/findings_flyout/rule_tab';
 import { getRemediationList } from '../configurations/findings_flyout/overview_tab';
 import * as TEST_SUBJECTS from './test_subjects';
-import { useChangeCspRuleState } from './change_csp_rule_state';
+import { useChangeCspRuleState } from './use_change_csp_rule_state';
 import { CspBenchmarkRulesWithStates } from './rules_container';
 import {
   showChangeBenchmarkRuleStatesSuccessToast,
@@ -43,7 +43,6 @@ export const RULES_FLYOUT_SWITCH_BUTTON = 'rule-flyout-switch-button';
 interface RuleFlyoutProps {
   onClose(): void;
   rule: CspBenchmarkRulesWithStates;
-  refetchRulesStates: () => void;
 }
 
 const tabs = [
@@ -65,9 +64,9 @@ const tabs = [
 
 type RuleTab = typeof tabs[number]['id'];
 
-export const RuleFlyout = ({ onClose, rule, refetchRulesStates }: RuleFlyoutProps) => {
+export const RuleFlyout = ({ onClose, rule }: RuleFlyoutProps) => {
   const [tab, setTab] = useState<RuleTab>('overview');
-  const postRequestChangeRulesStates = useChangeCspRuleState();
+  const { mutate: mutateRuleState } = useChangeCspRuleState();
   const { data: rulesData } = useFetchDetectionRulesByTags(
     getFindingsDetectionRuleSearchTags(rule.metadata)
   );
@@ -84,8 +83,10 @@ export const RuleFlyout = ({ onClose, rule, refetchRulesStates }: RuleFlyoutProp
         rule_id: rule.metadata.id,
       };
       const nextRuleStates = isRuleMuted ? 'unmute' : 'mute';
-      await postRequestChangeRulesStates(nextRuleStates, [rulesObjectRequest]);
-      refetchRulesStates();
+      await mutateRuleState({
+        newState: nextRuleStates,
+        ruleIds: [rulesObjectRequest],
+      });
       showChangeBenchmarkRuleStatesSuccessToast(startServices, isRuleMuted, {
         numberOfRules: 1,
         numberOfDetectionRules: rulesData?.total || 0,

x-pack/plugins/cloud_security_posture/public/pages/rules/rules_table.tsx

@@ -4,7 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   Criteria,
   EuiButtonEmpty,
@@ -27,7 +27,7 @@ import { getFindingsDetectionRuleSearchTags } from '../../../common/utils/detect
 import { ColumnNameWithTooltip } from '../../components/column_name_with_tooltip';
 import type { CspBenchmarkRulesWithStates, RulesState } from './rules_container';
 import * as TEST_SUBJECTS from './test_subjects';
-import { RuleStateAttributesWithoutStates, useChangeCspRuleState } from './change_csp_rule_state';
+import { RuleStateUpdateRequest, useChangeCspRuleState } from './use_change_csp_rule_state';
 import { showChangeBenchmarkRuleStatesSuccessToast } from '../../components/take_action';
 import { fetchDetectionRulesByTags } from '../../common/api/use_fetch_detection_rules_by_tags';
 
@@ -41,20 +41,16 @@ type RulesTableProps = Pick<
   setPagination(pagination: Pick<RulesState, 'perPage' | 'page'>): void;
   onRuleClick: (ruleID: string) => void;
   selectedRuleId?: string;
-  refetchRulesStates: () => void;
   selectedRules: CspBenchmarkRulesWithStates[];
   setSelectedRules: (rules: CspBenchmarkRulesWithStates[]) => void;
   onSortChange: (value: 'asc' | 'desc') => void;
 };
 
 type GetColumnProps = Pick<
   RulesTableProps,
-  'onRuleClick' | 'refetchRulesStates' | 'selectedRules' | 'setSelectedRules'
+  'onRuleClick' | 'selectedRules' | 'setSelectedRules'
 > & {
-  postRequestChangeRulesStates: (
-    actionOnRule: 'mute' | 'unmute',
-    ruleIds: RuleStateAttributesWithoutStates[]
-  ) => void;
+  mutateRulesStates: (ruleStateUpdateRequest: RuleStateUpdateRequest) => void;
   items: CspBenchmarkRulesWithStates[];
   setIsAllRulesSelectedThisPage: (isAllRulesSelected: boolean) => void;
   isAllRulesSelectedThisPage: boolean;
@@ -75,7 +71,6 @@ export const RulesTable = ({
   loading,
   error,
   selectedRuleId,
-  refetchRulesStates,
   selectedRules,
   setSelectedRules,
   onRuleClick,
@@ -116,7 +111,7 @@ export const RulesTable = ({
 
   const [isAllRulesSelectedThisPage, setIsAllRulesSelectedThisPage] = useState<boolean>(false);
 
-  const postRequestChangeRulesStates = useChangeCspRuleState();
+  const { mutate: mutateRulesStates } = useChangeCspRuleState();
 
   const isCurrentPageRulesASubset = (
     currentPageRulesArray: CspBenchmarkRulesWithStates[],
@@ -140,35 +135,19 @@ export const RulesTable = ({
     else setIsAllRulesSelectedThisPage(false);
   }, [items.length, selectedRules.length]);
 
-  const columns = useMemo(() => {
-    const startServices = { notifications, analytics, i18n: i18nStart, theme };
-    return getColumns({
-      refetchRulesStates,
-      postRequestChangeRulesStates,
-      selectedRules,
-      setSelectedRules,
-      items,
-      setIsAllRulesSelectedThisPage,
-      isAllRulesSelectedThisPage,
-      isCurrentPageRulesASubset,
-      onRuleClick,
-      http,
-      startServices,
-    });
-  }, [
-    refetchRulesStates,
-    postRequestChangeRulesStates,
+  const startServices = { notifications, analytics, i18n: i18nStart, theme };
+  const columns = getColumns({
+    mutateRulesStates,
     selectedRules,
     setSelectedRules,
     items,
+    setIsAllRulesSelectedThisPage,
     isAllRulesSelectedThisPage,
+    isCurrentPageRulesASubset,
     onRuleClick,
-    notifications,
     http,
-    analytics,
-    i18nStart,
-    theme,
-  ]);
+    startServices,
+  });
 
   return (
     <>
@@ -189,8 +168,7 @@ export const RulesTable = ({
 };
 
 const getColumns = ({
-  refetchRulesStates,
-  postRequestChangeRulesStates,
+  mutateRulesStates,
   selectedRules,
   setSelectedRules,
   items,
@@ -316,18 +294,22 @@ const getColumns = ({
       const changeCspRuleStateFn = async () => {
         if (rule?.metadata.benchmark.rule_number) {
           // Calling this function this way to make sure it didn't get called on every single row render, its only being called when user click on the switch button
-          const detectionRuleCount = (
+          const detectionRulesForSelectedRule = (
             await fetchDetectionRulesByTags(
               getFindingsDetectionRuleSearchTags(rule.metadata),
               { match: 'all' },
               http
             )
           ).total;
-          postRequestChangeRulesStates(nextRuleState, [rulesObjectRequest]);
-          refetchRulesStates();
+
+          mutateRulesStates({
+            newState: nextRuleState,
+            ruleIds: [rulesObjectRequest],
+          });
+
           showChangeBenchmarkRuleStatesSuccessToast(startServices, isRuleMuted, {
             numberOfRules: 1,
-            numberOfDetectionRules: detectionRuleCount || 0,
+            numberOfDetectionRules: detectionRulesForSelectedRule || 0,
           });
         }
       };

x-pack/plugins/cloud_security_posture/public/pages/rules/rules_table_header.tsx

@@ -26,7 +26,10 @@ import { css } from '@emotion/react';
 import { euiThemeVars } from '@kbn/ui-theme';
 import { useKibana } from '../../common/hooks/use_kibana';
 import { getFindingsDetectionRuleSearchTagsFromArrayOfRules } from '../../../common/utils/detection_rules';
-import { RuleStateAttributesWithoutStates, useChangeCspRuleState } from './change_csp_rule_state';
+import {
+  RuleStateAttributesWithoutStates,
+  useChangeCspRuleState,
+} from './use_change_csp_rule_state';
 import { CspBenchmarkRulesWithStates } from './rules_container';
 import { MultiSelectFilter } from '../../common/component/multi_select_filter';
 import { showChangeBenchmarkRuleStatesSuccessToast } from '../../components/take_action';
@@ -53,7 +56,6 @@ interface RulesTableToolbarProps {
   isSearching: boolean;
   pageSize: number;
   selectedRules: CspBenchmarkRulesWithStates[];
-  refetchRulesStates: () => void;
   setEnabledDisabledItemsFilter: (filterState: string) => void;
   enabledDisabledItemsFilterState: string;
   setSelectAllRules: () => void;
@@ -64,7 +66,6 @@ interface RuleTableCount {
   pageSize: number;
   total: number;
   selectedRules: CspBenchmarkRulesWithStates[];
-  refetchRulesStates: () => void;
   setSelectAllRules: () => void;
   setSelectedRules: (rules: CspBenchmarkRulesWithStates[]) => void;
 }
@@ -80,7 +81,6 @@ export const RulesTableHeader = ({
   sectionSelectOptions,
   ruleNumberSelectOptions,
   selectedRules,
-  refetchRulesStates,
   setEnabledDisabledItemsFilter,
   enabledDisabledItemsFilterState,
   setSelectAllRules,
@@ -198,7 +198,6 @@ export const RulesTableHeader = ({
           pageSize={pageSize}
           total={totalRulesCount}
           selectedRules={selectedRules}
-          refetchRulesStates={refetchRulesStates}
           setSelectAllRules={setSelectAllRules}
           setSelectedRules={setSelectedRules}
         />
@@ -240,7 +239,6 @@ const CurrentPageOfTotal = ({
   pageSize,
   total,
   selectedRules,
-  refetchRulesStates,
   setSelectAllRules,
   setSelectedRules,
 }: RuleTableCount) => {
@@ -249,15 +247,15 @@ const CurrentPageOfTotal = ({
     setIsPopoverOpen((e) => !e);
   };
 
-  const { data: rulesData } = useFetchDetectionRulesByTags(
+  const { mutate: mutateRulesStates } = useChangeCspRuleState();
+  const { data: detectionRulesForSelectedRules } = useFetchDetectionRulesByTags(
     getFindingsDetectionRuleSearchTagsFromArrayOfRules(selectedRules.map((rule) => rule.metadata)),
     { match: 'any' }
   );
 
   const { notifications, analytics, i18n: i18nStart, theme } = useKibana().services;
   const startServices = { notifications, analytics, i18n: i18nStart, theme };
 
-  const postRequestChangeRulesState = useChangeCspRuleState();
   const changeRulesState = async (state: 'mute' | 'unmute') => {
     const bulkSelectedRules: RuleStateAttributesWithoutStates[] = selectedRules.map(
       (e: CspBenchmarkRulesWithStates) => ({
@@ -269,12 +267,14 @@ const CurrentPageOfTotal = ({
     );
     // Only do the API Call IF there are no undefined value for rule number in the selected rules
     if (!bulkSelectedRules.some((rule) => rule.rule_number === undefined)) {
-      await postRequestChangeRulesState(state, bulkSelectedRules);
-      refetchRulesStates();
+      mutateRulesStates({
+        newState: state,
+        ruleIds: bulkSelectedRules,
+      });
       setIsPopoverOpen(false);
       showChangeBenchmarkRuleStatesSuccessToast(startServices, state !== 'mute', {
         numberOfRules: bulkSelectedRules.length,
-        numberOfDetectionRules: rulesData?.total || 0,
+        numberOfDetectionRules: detectionRulesForSelectedRules?.total || 0,
       });
     }
   };