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, }),