[Security Solution] Add rule snooze settings on the rule details page #155407
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import { EuiButtonIcon, EuiToolTip } from '@elastic/eui'; | ||
| import React, { useMemo } from 'react'; | ||
| import { useUserData } from '../../detections/components/user_info'; | ||
| import { hasUserCRUDPermission } from '../../common/utils/privileges'; | ||
| import { useKibana } from '../../common/lib/kibana'; | ||
| import type { RuleSnoozeSettings } from '../rule_management/logic'; | ||
| import { useInvalidateFetchRulesSnoozeSettingsQuery } from '../rule_management/api/hooks/use_fetch_rules_snooze_settings'; | ||
|
|
||
| interface RuleSnoozeBadgeProps { | ||
| /** | ||
| * Rule's snooze settings, when set to `undefined` considered as a loading state | ||
| */ | ||
| snoozeSettings: RuleSnoozeSettings | undefined; | ||
| /** | ||
| * It should represent a user readable error message happened during data snooze settings fetching | ||
| */ | ||
| error?: string; | ||
| showTooltipInline?: boolean; | ||
| } | ||
|
|
||
| export function RuleSnoozeBadge({ | ||
| snoozeSettings, | ||
| error, | ||
| showTooltipInline = false, | ||
| }: RuleSnoozeBadgeProps): JSX.Element { | ||
| const RulesListNotifyBadge = useKibana().services.triggersActionsUi.getRulesListNotifyBadge; | ||
| const [{ canUserCRUD }] = useUserData(); | ||
| const hasCRUDPermissions = hasUserCRUDPermission(canUserCRUD); | ||
| const invalidateFetchRuleSnoozeSettings = useInvalidateFetchRulesSnoozeSettingsQuery(); | ||
| const isLoading = !snoozeSettings; | ||
| const rule = useMemo(() => { | ||
| return { | ||
| id: snoozeSettings?.id ?? '', | ||
| muteAll: snoozeSettings?.mute_all ?? false, | ||
| activeSnoozes: snoozeSettings?.active_snoozes ?? [], | ||
| isSnoozedUntil: snoozeSettings?.is_snoozed_until | ||
| ? new Date(snoozeSettings.is_snoozed_until) | ||
| : undefined, | ||
| snoozeSchedule: snoozeSettings?.snooze_schedule, | ||
| isEditable: hasCRUDPermissions, | ||
| }; | ||
| }, [snoozeSettings, hasCRUDPermissions]); | ||
|
|
||
| if (error) { | ||
| return ( | ||
| <EuiToolTip content={error}> | ||
| <EuiButtonIcon size="s" iconType="bellSlash" disabled /> | ||
| </EuiToolTip> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <RulesListNotifyBadge | ||
| rule={rule} | ||
| isLoading={isLoading} | ||
| showTooltipInline={showTooltipInline} | ||
| onRuleChanged={invalidateFetchRuleSnoozeSettings} | ||
| /> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import { useFetchRulesSnoozeSettings } from '../../../../../rule_management/api/hooks/use_fetch_rules_snooze_settings'; | ||
| import { RuleSnoozeBadge } from '../../../../../components/rule_snooze_badge'; | ||
| import * as i18n from './translations'; | ||
|
|
||
| interface RuleDetailsSnoozeBadge { | ||
| /** | ||
| * Rule's SO id (not ruleId) | ||
| */ | ||
| id: string; | ||
| } | ||
|
|
||
| export function RuleDetailsSnoozeSettings({ id }: RuleDetailsSnoozeBadge): JSX.Element { | ||
| const { data: rulesSnoozeSettings, isFetching, isError } = useFetchRulesSnoozeSettings([id]); | ||
| const snoozeSettings = rulesSnoozeSettings?.[0]; | ||
|
|
||
| return ( | ||
| <RuleSnoozeBadge | ||
| snoozeSettings={snoozeSettings} | ||
| error={ | ||
| isError || (!snoozeSettings && !isFetching) | ||
| ? i18n.UNABLE_TO_FETCH_RULE_SNOOZE_SETTINGS | ||
| : undefined | ||
| } | ||
| showTooltipInline={true} | ||
| /> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -40,8 +40,18 @@ import { RuleSource } from './rules_table_saved_state'; | |
| import { useRulesTableSavedState } from './use_rules_table_saved_state'; | ||
|
|
||
| interface RulesSnoozeSettings { | ||
|
There was a problem hiding this comment. Not related to this PR directly. I was thinking about the snooze state inside the table context, and it seems a bit alien there. If I understood correctly, its purpose is to batch outgoing HTTP requests, i.e., send a single rule snooze request instead of 1 x N table rows. So I think it would be better to create an abstraction just for that. It could be a data hook that doesn't trigger a request immediately but waits some time and accumulates request params if other similar hooks are present on the page. Something similar to the GraphQL dataloader batching functionality but adapted for usage with react query. There was a problem hiding this comment. Agree, I also had some similar ideas already. My main concern is to make it simple, maintainable and reusable as creating such functionality only for one feature is time consuming. I think we can take the thoughts into account and analyze the possibilities when the snoozing epic is done. |
||
| /** | ||
| * A map object using rule SO's id (not ruleId) as keys and snooze settings as values | ||
| */ | ||
| data: Record<string, RuleSnoozeSettings>; | ||
| /** | ||
| * 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, | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Wow, it's the 14th mock added to this test file 😅.
Honestly, it might be better just to delete this messy test altogether.
Relying heavily on mocks in a single test isn't great for several reasons:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I totally agree with the comment though I'd like to abstain from any other changes in the test file in this PR. It more or less outside of scope here so I'd rather address test file refactoring in a subsequent PR if you don't mind.