diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/components/rule_details_snooze_settings/index.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/components/rule_details_snooze_settings/index.tsx
index 6d49274daf91af..2b773451f26657 100644
--- a/x-pack/plugins/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/components/rule_details_snooze_settings/index.tsx
+++ b/x-pack/plugins/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/components/rule_details_snooze_settings/index.tsx
@@ -18,13 +18,17 @@ interface RuleDetailsSnoozeBadge {
}
export function RuleDetailsSnoozeSettings({ id }: RuleDetailsSnoozeBadge): JSX.Element {
- const { data: [snoozeSettings] = [undefined], isError: isSnoozeSettingsFetchError } =
- useFetchRulesSnoozeSettings([id]);
+ const { data: rulesSnoozeSettings, isFetching, isError } = useFetchRulesSnoozeSettings([id]);
+ const snoozeSettings = rulesSnoozeSettings?.[0];
return (
);
diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/rules_table/rules_table_context.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/rules_table/rules_table_context.tsx
index fa2c64f01d2d46..cb7891a9bed67e 100644
--- a/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/rules_table/rules_table_context.tsx
+++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/rules_table/rules_table_context.tsx
@@ -40,8 +40,18 @@ import { RuleSource } from './rules_table_saved_state';
import { useRulesTableSavedState } from './use_rules_table_saved_state';
interface RulesSnoozeSettings {
- data: Record; // The key is a rule SO's id (not ruleId)
+ /**
+ * Rule SO's id (not ruleId) to snooze settings map,
+ */
+ data: Record;
+ /**
+ * Sets to true during the first data loading
+ */
isLoading: boolean;
+ /**
+ * Sets to true during data loading
+ */
+ isFetching: boolean;
isError: boolean;
}
@@ -290,6 +300,7 @@ export const RulesTableContextProvider = ({ children }: RulesTableContextProvide
const {
data: rulesSnoozeSettings,
isLoading: isSnoozeSettingsLoading,
+ isFetching: isSnoozeSettingsFetching,
isError: isSnoozeSettingsFetchError,
refetch: refetchSnoozeSettings,
} = useFetchRulesSnoozeSettings(
@@ -349,6 +360,7 @@ export const RulesTableContextProvider = ({ children }: RulesTableContextProvide
rulesSnoozeSettings: {
data: rulesSnoozeSettingsMap,
isLoading: isSnoozeSettingsLoading,
+ isFetching: isSnoozeSettingsFetching,
isError: isSnoozeSettingsFetchError,
},
pagination: {
@@ -382,6 +394,7 @@ export const RulesTableContextProvider = ({ children }: RulesTableContextProvide
rules,
rulesSnoozeSettings,
isSnoozeSettingsLoading,
+ isSnoozeSettingsFetching,
isSnoozeSettingsFetchError,
page,
perPage,
diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/use_columns.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/use_columns.tsx
index 542f56ba171e4b..a6864ef5a8834e 100644
--- a/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/use_columns.tsx
+++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/use_columns.tsx
@@ -117,16 +117,21 @@ const useRuleSnoozeColumn = (): TableColumn => {
() => ({
field: 'snooze',
name: i18n.COLUMN_SNOOZE,
- render: (_, rule: Rule) => (
-
- ),
+ render: (_, rule: Rule) => {
+ const snoozeSettings = rulesSnoozeSettings.data[rule.id];
+ const { isFetching, isError } = rulesSnoozeSettings;
+
+ return (
+
+ );
+ },
width: '100px',
sortable: false,
}),