diff --git a/x-pack/plugins/security_solution/public/detection_engine/components/rule_snooze_badge/index.ts b/x-pack/plugins/security_solution/public/detection_engine/components/rule_snooze_badge/index.ts new file mode 100644 index 0000000000000..8e231398688f0 --- /dev/null +++ b/x-pack/plugins/security_solution/public/detection_engine/components/rule_snooze_badge/index.ts @@ -0,0 +1,8 @@ +/* + * 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. + */ + +export * from './rule_snooze_badge'; diff --git a/x-pack/plugins/security_solution/public/detection_engine/components/rule_snooze_badge.tsx b/x-pack/plugins/security_solution/public/detection_engine/components/rule_snooze_badge/rule_snooze_badge.tsx similarity index 71% rename from x-pack/plugins/security_solution/public/detection_engine/components/rule_snooze_badge.tsx rename to x-pack/plugins/security_solution/public/detection_engine/components/rule_snooze_badge/rule_snooze_badge.tsx index 7fa16826eec60..2599bbc521d7c 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/components/rule_snooze_badge.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/components/rule_snooze_badge/rule_snooze_badge.tsx @@ -7,30 +7,26 @@ 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'; +import { useUserData } from '../../../detections/components/user_info'; +import { hasUserCRUDPermission } from '../../../common/utils/privileges'; +import { useKibana } from '../../../common/lib/kibana'; +import { useInvalidateFetchRulesSnoozeSettingsQuery } from '../../rule_management/api/hooks/use_fetch_rules_snooze_settings'; +import { useRuleSnoozeSettings } from './use_rule_snooze_settings'; interface RuleSnoozeBadgeProps { /** - * Rule's snooze settings, when set to `undefined` considered as a loading state + * Rule's SO id (not ruleId) */ - snoozeSettings: RuleSnoozeSettings | undefined; - /** - * It should represent a user readable error message happened during data snooze settings fetching - */ - error?: string; + id: string; showTooltipInline?: boolean; } export function RuleSnoozeBadge({ - snoozeSettings, - error, + id, showTooltipInline = false, }: RuleSnoozeBadgeProps): JSX.Element { const RulesListNotifyBadge = useKibana().services.triggersActionsUi.getRulesListNotifyBadge; + const { snoozeSettings, error } = useRuleSnoozeSettings(id); const [{ canUserCRUD }] = useUserData(); const hasCRUDPermissions = hasUserCRUDPermission(canUserCRUD); const invalidateFetchRuleSnoozeSettings = useInvalidateFetchRulesSnoozeSettingsQuery(); diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/components/rule_details_snooze_settings/translations.ts b/x-pack/plugins/security_solution/public/detection_engine/components/rule_snooze_badge/translations.ts similarity index 68% rename from x-pack/plugins/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/components/rule_details_snooze_settings/translations.ts rename to x-pack/plugins/security_solution/public/detection_engine/components/rule_snooze_badge/translations.ts index 37b3b6c75ba6e..2c67bdab2744f 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/components/rule_details_snooze_settings/translations.ts +++ b/x-pack/plugins/security_solution/public/detection_engine/components/rule_snooze_badge/translations.ts @@ -7,8 +7,8 @@ import { i18n } from '@kbn/i18n'; -export const UNABLE_TO_FETCH_RULE_SNOOZE_SETTINGS = i18n.translate( - 'xpack.securitySolution.detectionEngine.ruleDetails.rulesSnoozeSettings.error.unableToFetch', +export const UNABLE_TO_FETCH_RULES_SNOOZE_SETTINGS = i18n.translate( + 'xpack.securitySolution.detectionEngine.rulesSnoozeBadge.error.unableToFetch', { defaultMessage: 'Unable to fetch snooze settings', } diff --git a/x-pack/plugins/security_solution/public/detection_engine/components/rule_snooze_badge/use_rule_snooze_settings.ts b/x-pack/plugins/security_solution/public/detection_engine/components/rule_snooze_badge/use_rule_snooze_settings.ts new file mode 100644 index 0000000000000..0de53dadcd5f5 --- /dev/null +++ b/x-pack/plugins/security_solution/public/detection_engine/components/rule_snooze_badge/use_rule_snooze_settings.ts @@ -0,0 +1,38 @@ +/* + * 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 type { RuleSnoozeSettings } from '../../rule_management/logic'; +import { useFetchRulesSnoozeSettings } from '../../rule_management/api/hooks/use_fetch_rules_snooze_settings'; +import { useRulesTableContextOptional } from '../../rule_management_ui/components/rules_table/rules_table/rules_table_context'; +import * as i18n from './translations'; + +interface UseRuleSnoozeSettingsResult { + snoozeSettings?: RuleSnoozeSettings; + error?: string; +} + +export function useRuleSnoozeSettings(id: string): UseRuleSnoozeSettingsResult { + const { + state: { rulesSnoozeSettings: rulesTableSnoozeSettings }, + } = useRulesTableContextOptional() ?? { state: {} }; + const { + data: rulesSnoozeSettings, + isFetching: isSingleSnoozeSettingsFetching, + isError: isSingleSnoozeSettingsError, + } = useFetchRulesSnoozeSettings([id]); + const snoozeSettings = rulesTableSnoozeSettings?.data[id] ?? rulesSnoozeSettings?.[0]; + const isFetching = rulesTableSnoozeSettings?.isFetching || isSingleSnoozeSettingsFetching; + const isError = rulesTableSnoozeSettings?.isError || isSingleSnoozeSettingsError; + + return { + snoozeSettings, + error: + isError || (!snoozeSettings && !isFetching) + ? i18n.UNABLE_TO_FETCH_RULES_SNOOZE_SETTINGS + : undefined, + }; +} 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 deleted file mode 100644 index e610715d676ce..0000000000000 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/components/rule_details_snooze_settings/index.tsx +++ /dev/null @@ -1,35 +0,0 @@ -/* - * 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 ( - - ); -} diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/index.test.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/index.test.tsx index 07cbd4294cb22..8edd495393c09 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/index.test.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/index.test.tsx @@ -87,8 +87,8 @@ jest.mock('react-router-dom', () => { }); // RuleDetailsSnoozeSettings is an isolated component and not essential for existing tests -jest.mock('./components/rule_details_snooze_settings', () => ({ - RuleDetailsSnoozeSettings: () => <>, +jest.mock('../../../components/rule_snooze_badge', () => ({ + RuleSnoozeBadge: () => <>, })); const mockRedirectLegacyUrl = jest.fn(); diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/index.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/index.tsx index 6e1b4fddbd167..a8ca60478323a 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/index.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/index.tsx @@ -140,7 +140,7 @@ import { EditRuleSettingButtonLink } from '../../../../detections/pages/detectio import { useStartMlJobs } from '../../../rule_management/logic/use_start_ml_jobs'; import { useBulkDuplicateExceptionsConfirmation } from '../../../rule_management_ui/components/rules_table/bulk_actions/use_bulk_duplicate_confirmation'; import { BulkActionDuplicateExceptionsConfirmation } from '../../../rule_management_ui/components/rules_table/bulk_actions/bulk_duplicate_exceptions_confirmation'; -import { RuleDetailsSnoozeSettings } from './components/rule_details_snooze_settings'; +import { RuleSnoozeBadge } from '../../../components/rule_snooze_badge'; /** * Need a 100% height here to account for the graph/analyze tool, which sets no explicit height parameters, but fills the available space. @@ -559,7 +559,7 @@ const RuleDetailsPageComponent: React.FC = ({ )} - + ); diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/translations.ts b/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/translations.ts index ad3cd89604030..52b4a5d4ba622 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/translations.ts +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/translations.ts @@ -21,10 +21,3 @@ export const ML_RULE_JOBS_WARNING_BUTTON_LABEL = i18n.translate( defaultMessage: 'Visit rule details page to investigate', } ); - -export const UNABLE_TO_FETCH_RULES_SNOOZE_SETTINGS = i18n.translate( - 'xpack.securitySolution.detectionEngine.ruleManagement.rulesSnoozeSettings.error.unableToFetch', - { - defaultMessage: 'Unable to fetch snooze settings', - } -); 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 0ffb0ac7574a6..b37f2e0a6b4b4 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 @@ -46,7 +46,6 @@ import { useHasActionsPrivileges } from './use_has_actions_privileges'; import { useHasMlPermissions } from './use_has_ml_permissions'; import { useRulesTableActions } from './use_rules_table_actions'; import { MlRuleWarningPopover } from './ml_rule_warning_popover'; -import * as rulesTableI18n from './translations'; export type TableColumn = EuiBasicTableColumn | EuiTableActionsColumnType; @@ -109,33 +108,15 @@ const useEnabledColumn = ({ hasCRUDPermissions, startMlJobs }: ColumnsProps): Ta }; const useRuleSnoozeColumn = (): TableColumn => { - const { - state: { rulesSnoozeSettings }, - } = useRulesTableContext(); - return useMemo( () => ({ field: 'snooze', name: i18n.COLUMN_SNOOZE, - render: (_, rule: Rule) => { - const snoozeSettings = rulesSnoozeSettings.data[rule.id]; - const { isFetching, isError } = rulesSnoozeSettings; - - return ( - - ); - }, + render: (_, rule: Rule) => , width: '100px', sortable: false, }), - [rulesSnoozeSettings] + [] ); }; diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/step_rule_actions/rule_snooze_section.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/step_rule_actions/rule_snooze_section.tsx index 067facb994f0c..44352e85c423b 100644 --- a/x-pack/plugins/security_solution/public/detections/components/rules/step_rule_actions/rule_snooze_section.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/rules/step_rule_actions/rule_snooze_section.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { css } from '@emotion/react'; import { EuiFlexGroup, EuiFlexItem, EuiText, useEuiTheme } from '@elastic/eui'; -import { RuleDetailsSnoozeSettings } from '../../../../detection_engine/rule_details_ui/pages/rule_details/components/rule_details_snooze_settings'; +import { RuleSnoozeBadge } from '../../../../detection_engine/components/rule_snooze_badge'; import * as i18n from './translations'; interface RuleSnoozeSectionProps { @@ -28,7 +28,7 @@ export function RuleSnoozeSection({ id }: RuleSnoozeSectionProps): JSX.Element { `} > - +