From ff355799c44a096d986fbcf6188b3ca4d6c444d0 Mon Sep 17 00:00:00 2001 From: christineweng <18648970+christineweng@users.noreply.github.com> Date: Mon, 18 Nov 2024 13:42:34 -0600 Subject: [PATCH] [Security Solution] Update alert kpi to exclude closed alerts in document details flyout (#200268) ## Summary This PR made some changes to the alert count API in document details flyout. Closed alerts are now removed when showing total count and distributions. Data fetching logic is updated to match the one used in host flyout (https://github.com/elastic/kibana/pull/197102). Notable changes: - Closed alerts are now excluded - Number of alerts in alerts flyout should match the ones in host flyout - Clicking the number will open timeline with the specific entity and `NOT kibana.alert.workflow_status: closed` filters - If a host/user does not have active alerts (all closed), no distribution bar is shown https://github.com/user-attachments/assets/3a1d6e36-527e-4b62-816b-e1f4de7314ca ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --- .../left/components/host_details.test.tsx | 19 +++- .../left/components/user_details.test.tsx | 19 +++- .../components/host_entity_overview.test.tsx | 19 +++- .../components/user_entity_overview.test.tsx | 19 +++- .../components/alert_count_insight.test.tsx | 98 ++++++++++++++--- .../shared/components/alert_count_insight.tsx | 104 ++++++++++++------ 6 files changed, 211 insertions(+), 67 deletions(-) diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/left/components/host_details.test.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/left/components/host_details.test.tsx index 4eeabe67979a5..a5b2307dd9ca3 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/left/components/host_details.test.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/left/components/host_details.test.tsx @@ -40,7 +40,7 @@ import { HOST_PREVIEW_BANNER } from '../../right/components/host_entity_overview import { UserPreviewPanelKey } from '../../../entity_details/user_right'; import { USER_PREVIEW_BANNER } from '../../right/components/user_entity_overview'; import { NetworkPanelKey, NETWORK_PREVIEW_BANNER } from '../../../network_details'; -import { useSummaryChartData } from '../../../../detections/components/alerts_kpis/alerts_summary_charts_panel/use_summary_chart_data'; +import { useAlertsByStatus } from '../../../../overview/components/detection_response/alerts_by_status/use_alerts_by_status'; jest.mock('@kbn/expandable-flyout'); jest.mock('@kbn/cloud-security-posture/src/hooks/use_misconfiguration_preview'); @@ -115,8 +115,17 @@ jest.mock('../../../../entity_analytics/api/hooks/use_risk_score'); const mockUseRiskScore = useRiskScore as jest.Mock; jest.mock( - '../../../../detections/components/alerts_kpis/alerts_summary_charts_panel/use_summary_chart_data' + '../../../../overview/components/detection_response/alerts_by_status/use_alerts_by_status' ); +const mockAlertData = { + open: { + total: 2, + severities: [ + { key: 'high', value: 1, label: 'High' }, + { key: 'low', value: 1, label: 'Low' }, + ], + }, +}; const timestamp = '2022-07-25T08:20:18.966Z'; @@ -174,7 +183,7 @@ describe('', () => { mockUseIsExperimentalFeatureEnabled.mockReturnValue(true); (useMisconfigurationPreview as jest.Mock).mockReturnValue({}); (useVulnerabilitiesPreview as jest.Mock).mockReturnValue({}); - (useSummaryChartData as jest.Mock).mockReturnValue({ isLoading: false, items: [] }); + (useAlertsByStatus as jest.Mock).mockReturnValue({ isLoading: false, items: {} }); }); it('should render host details correctly', () => { @@ -323,9 +332,9 @@ describe('', () => { }); it('should render alert count when data is available', () => { - (useSummaryChartData as jest.Mock).mockReturnValue({ + (useAlertsByStatus as jest.Mock).mockReturnValue({ isLoading: false, - items: [{ key: 'high', value: 78, label: 'High' }], + items: mockAlertData, }); const { getByTestId } = renderHostDetails(mockContextValue); diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/left/components/user_details.test.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/left/components/user_details.test.tsx index 966253b3d27ed..28389919dec87 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/left/components/user_details.test.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/left/components/user_details.test.tsx @@ -38,7 +38,7 @@ import { HOST_PREVIEW_BANNER } from '../../right/components/host_entity_overview import { UserPreviewPanelKey } from '../../../entity_details/user_right'; import { USER_PREVIEW_BANNER } from '../../right/components/user_entity_overview'; import { NetworkPanelKey, NETWORK_PREVIEW_BANNER } from '../../../network_details'; -import { useSummaryChartData } from '../../../../detections/components/alerts_kpis/alerts_summary_charts_panel/use_summary_chart_data'; +import { useAlertsByStatus } from '../../../../overview/components/detection_response/alerts_by_status/use_alerts_by_status'; jest.mock('@kbn/expandable-flyout'); jest.mock('@kbn/cloud-security-posture/src/hooks/use_misconfiguration_preview'); @@ -109,8 +109,17 @@ jest.mock('../../../../entity_analytics/api/hooks/use_risk_score'); const mockUseRiskScore = useRiskScore as jest.Mock; jest.mock( - '../../../../detections/components/alerts_kpis/alerts_summary_charts_panel/use_summary_chart_data' + '../../../../overview/components/detection_response/alerts_by_status/use_alerts_by_status' ); +const mockAlertData = { + open: { + total: 2, + severities: [ + { key: 'high', value: 1, label: 'High' }, + { key: 'low', value: 1, label: 'Low' }, + ], + }, +}; const timestamp = '2022-07-25T08:20:18.966Z'; @@ -167,7 +176,7 @@ describe('', () => { mockUseUsersRelatedHosts.mockReturnValue(mockRelatedHostsResponse); mockUseIsExperimentalFeatureEnabled.mockReturnValue(true); (useMisconfigurationPreview as jest.Mock).mockReturnValue({}); - (useSummaryChartData as jest.Mock).mockReturnValue({ isLoading: false, items: [] }); + (useAlertsByStatus as jest.Mock).mockReturnValue({ isLoading: false, items: {} }); }); it('should render user details correctly', () => { @@ -300,9 +309,9 @@ describe('', () => { }); it('should render alert count when data is available', () => { - (useSummaryChartData as jest.Mock).mockReturnValue({ + (useAlertsByStatus as jest.Mock).mockReturnValue({ isLoading: false, - items: [{ key: 'high', value: 78, label: 'High' }], + items: mockAlertData, }); const { getByTestId } = renderUserDetails(mockContextValue); diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/host_entity_overview.test.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/host_entity_overview.test.tsx index 6ad90adb28997..4c29a84d431ae 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/host_entity_overview.test.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/host_entity_overview.test.tsx @@ -34,7 +34,7 @@ import { ENTITIES_TAB_ID } from '../../left/components/entities_details'; import { useRiskScore } from '../../../../entity_analytics/api/hooks/use_risk_score'; import { mockFlyoutApi } from '../../shared/mocks/mock_flyout_context'; import { createTelemetryServiceMock } from '../../../../common/lib/telemetry/telemetry_service.mock'; -import { useSummaryChartData } from '../../../../detections/components/alerts_kpis/alerts_summary_charts_panel/use_summary_chart_data'; +import { useAlertsByStatus } from '../../../../overview/components/detection_response/alerts_by_status/use_alerts_by_status'; const hostName = 'host'; const osFamily = 'Windows'; @@ -61,8 +61,17 @@ jest.mock('react-router-dom', () => { }); jest.mock( - '../../../../detections/components/alerts_kpis/alerts_summary_charts_panel/use_summary_chart_data' + '../../../../overview/components/detection_response/alerts_by_status/use_alerts_by_status' ); +const mockAlertData = { + open: { + total: 2, + severities: [ + { key: 'high', value: 1, label: 'High' }, + { key: 'low', value: 1, label: 'Low' }, + ], + }, +}; const mockedTelemetry = createTelemetryServiceMock(); jest.mock('../../../../common/lib/kibana', () => { @@ -118,7 +127,7 @@ describe('', () => { mockUseIsExperimentalFeatureEnabled.mockReturnValue(true); (useMisconfigurationPreview as jest.Mock).mockReturnValue({}); (useVulnerabilitiesPreview as jest.Mock).mockReturnValue({}); - (useSummaryChartData as jest.Mock).mockReturnValue({ isLoading: false, items: [] }); + (useAlertsByStatus as jest.Mock).mockReturnValue({ isLoading: false, items: {} }); }); describe('license is valid', () => { @@ -248,9 +257,9 @@ describe('', () => { }); it('should render alert count when data is available', () => { - (useSummaryChartData as jest.Mock).mockReturnValue({ + (useAlertsByStatus as jest.Mock).mockReturnValue({ isLoading: false, - items: [{ key: 'high', value: 78, label: 'High' }], + items: mockAlertData, }); const { getByTestId } = renderHostEntityContent(); diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/user_entity_overview.test.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/user_entity_overview.test.tsx index 95c399ca4362e..5df159c2e5a29 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/user_entity_overview.test.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/user_entity_overview.test.tsx @@ -31,7 +31,7 @@ import { useExpandableFlyoutApi } from '@kbn/expandable-flyout'; import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features'; import { mockFlyoutApi } from '../../shared/mocks/mock_flyout_context'; import { UserPreviewPanelKey } from '../../../entity_details/user_right'; -import { useSummaryChartData } from '../../../../detections/components/alerts_kpis/alerts_summary_charts_panel/use_summary_chart_data'; +import { useAlertsByStatus } from '../../../../overview/components/detection_response/alerts_by_status/use_alerts_by_status'; const userName = 'user'; const domain = 'n54bg2lfc7'; @@ -59,8 +59,17 @@ jest.mock('react-router-dom', () => { }); jest.mock( - '../../../../detections/components/alerts_kpis/alerts_summary_charts_panel/use_summary_chart_data' + '../../../../overview/components/detection_response/alerts_by_status/use_alerts_by_status' ); +const mockAlertData = { + open: { + total: 2, + severities: [ + { key: 'high', value: 1, label: 'High' }, + { key: 'low', value: 1, label: 'Low' }, + ], + }, +}; jest.mock('../../../../common/hooks/use_experimental_features'); const mockUseIsExperimentalFeatureEnabled = useIsExperimentalFeatureEnabled as jest.Mock; @@ -102,7 +111,7 @@ describe('', () => { jest.mocked(useExpandableFlyoutApi).mockReturnValue(mockFlyoutApi); mockUseIsExperimentalFeatureEnabled.mockReturnValue(true); (useMisconfigurationPreview as jest.Mock).mockReturnValue({}); - (useSummaryChartData as jest.Mock).mockReturnValue({ isLoading: false, items: [] }); + (useAlertsByStatus as jest.Mock).mockReturnValue({ isLoading: false, items: {} }); }); describe('license is valid', () => { @@ -245,9 +254,9 @@ describe('', () => { }); it('should render alert count when data is available', () => { - (useSummaryChartData as jest.Mock).mockReturnValue({ + (useAlertsByStatus as jest.Mock).mockReturnValue({ isLoading: false, - items: [{ key: 'high', value: 78, label: 'High' }], + items: mockAlertData, }); const { getByTestId } = renderUserEntityOverview(); diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.test.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.test.tsx index 5e4650179291d..d9ae4673b1749 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.test.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.test.tsx @@ -8,8 +8,10 @@ import React from 'react'; import { render } from '@testing-library/react'; import { TestProviders } from '../../../../common/mock'; -import { AlertCountInsight } from './alert_count_insight'; -import { useSummaryChartData } from '../../../../detections/components/alerts_kpis/alerts_summary_charts_panel/use_summary_chart_data'; +import { AlertCountInsight, getFormattedAlertStats } from './alert_count_insight'; +import { useAlertsByStatus } from '../../../../overview/components/detection_response/alerts_by_status/use_alerts_by_status'; +import type { ParsedAlertsData } from '../../../../overview/components/detection_response/alerts_by_status/types'; +import { SEVERITY_COLOR } from '../../../../overview/components/detection_response/utils'; jest.mock('../../../../common/lib/kibana'); @@ -19,12 +21,41 @@ jest.mock('react-router-dom', () => { }); jest.mock('@kbn/cloud-security-posture/src/hooks/use_misconfiguration_preview'); jest.mock( - '../../../../detections/components/alerts_kpis/alerts_summary_charts_panel/use_summary_chart_data' + '../../../../overview/components/detection_response/alerts_by_status/use_alerts_by_status' ); const fieldName = 'host.name'; const name = 'test host'; const testId = 'test'; +const mockAlertData: ParsedAlertsData = { + open: { + total: 4, + severities: [ + { key: 'high', value: 1, label: 'High' }, + { key: 'low', value: 1, label: 'Low' }, + { key: 'medium', value: 1, label: 'Medium' }, + { key: 'critical', value: 1, label: 'Critical' }, + ], + }, + acknowledged: { + total: 4, + severities: [ + { key: 'high', value: 1, label: 'High' }, + { key: 'low', value: 1, label: 'Low' }, + { key: 'medium', value: 1, label: 'Medium' }, + { key: 'critical', value: 1, label: 'Critical' }, + ], + }, + closed: { + total: 6, + severities: [ + { key: 'high', value: 1, label: 'High' }, + { key: 'low', value: 1, label: 'Low' }, + { key: 'medium', value: 2, label: 'Medium' }, + { key: 'critical', value: 2, label: 'Critical' }, + ], + }, +}; const renderAlertCountInsight = () => { return render( @@ -36,30 +67,69 @@ const renderAlertCountInsight = () => { describe('AlertCountInsight', () => { it('renders', () => { - (useSummaryChartData as jest.Mock).mockReturnValue({ + (useAlertsByStatus as jest.Mock).mockReturnValue({ isLoading: false, - items: [ - { key: 'high', value: 78, label: 'High' }, - { key: 'low', value: 46, label: 'Low' }, - { key: 'medium', value: 32, label: 'Medium' }, - { key: 'critical', value: 21, label: 'Critical' }, - ], + items: mockAlertData, }); const { getByTestId } = renderAlertCountInsight(); expect(getByTestId(testId)).toBeInTheDocument(); expect(getByTestId(`${testId}-distribution-bar`)).toBeInTheDocument(); - expect(getByTestId(`${testId}-count`)).toHaveTextContent('177'); + expect(getByTestId(`${testId}-count`)).toHaveTextContent('8'); }); it('renders loading spinner if data is being fetched', () => { - (useSummaryChartData as jest.Mock).mockReturnValue({ isLoading: true, items: [] }); + (useAlertsByStatus as jest.Mock).mockReturnValue({ isLoading: true, items: {} }); const { getByTestId } = renderAlertCountInsight(); expect(getByTestId(`${testId}-loading-spinner`)).toBeInTheDocument(); }); - it('renders null if no misconfiguration data found', () => { - (useSummaryChartData as jest.Mock).mockReturnValue({ isLoading: false, items: [] }); + it('renders null if no alert data found', () => { + (useAlertsByStatus as jest.Mock).mockReturnValue({ isLoading: false, items: {} }); + const { container } = renderAlertCountInsight(); + expect(container).toBeEmptyDOMElement(); + }); + + it('renders null if no non-closed alert data found', () => { + (useAlertsByStatus as jest.Mock).mockReturnValue({ + isLoading: false, + items: { + closed: { + total: 6, + severities: [ + { key: 'high', value: 1, label: 'High' }, + { key: 'low', value: 1, label: 'Low' }, + { key: 'medium', value: 2, label: 'Medium' }, + { key: 'critical', value: 2, label: 'Critical' }, + ], + }, + }, + }); const { container } = renderAlertCountInsight(); expect(container).toBeEmptyDOMElement(); }); }); + +describe('getFormattedAlertStats', () => { + it('should return alert stats', () => { + const alertStats = getFormattedAlertStats(mockAlertData); + expect(alertStats).toEqual([ + { key: 'High', count: 2, color: SEVERITY_COLOR.high }, + { key: 'Low', count: 2, color: SEVERITY_COLOR.low }, + { key: 'Medium', count: 2, color: SEVERITY_COLOR.medium }, + { key: 'Critical', count: 2, color: SEVERITY_COLOR.critical }, + ]); + }); + + it('should return empty array if no active alerts are available', () => { + const alertStats = getFormattedAlertStats({ + closed: { + total: 2, + severities: [ + { key: 'high', value: 1, label: 'High' }, + { key: 'low', value: 1, label: 'Low' }, + ], + }, + }); + expect(alertStats).toEqual([]); + }); +}); diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.tsx index 08325584bd8cb..9b5b056311354 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.tsx @@ -6,22 +6,26 @@ */ import React, { useMemo } from 'react'; -import { v4 as uuid } from 'uuid'; +import { capitalize } from 'lodash'; import { EuiLoadingSpinner, EuiFlexItem, type EuiFlexGroupProps } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { InsightDistributionBar } from './insight_distribution_bar'; -import { severityAggregations } from '../../../../detections/components/alerts_kpis/alerts_summary_charts_panel/aggregations'; -import { useSummaryChartData } from '../../../../detections/components/alerts_kpis/alerts_summary_charts_panel/use_summary_chart_data'; -import { - getIsAlertsBySeverityData, - getSeverityColor, -} from '../../../../detections/components/alerts_kpis/severity_level_panel/helpers'; +import { getSeverityColor } from '../../../../detections/components/alerts_kpis/severity_level_panel/helpers'; import { FormattedCount } from '../../../../common/components/formatted_number'; import { InvestigateInTimelineButton } from '../../../../common/components/event_details/investigate_in_timeline_button'; -import { getDataProvider } from '../../../../common/components/event_details/use_action_cell_data_provider'; - -const ENTITY_ALERT_COUNT_ID = 'entity-alert-count'; -const SEVERITIES = ['unknown', 'low', 'medium', 'high', 'critical']; +import { + getDataProvider, + getDataProviderAnd, +} from '../../../../common/components/event_details/use_action_cell_data_provider'; +import { FILTER_CLOSED, IS_OPERATOR } from '../../../../../common/types'; +import { useGlobalTime } from '../../../../common/containers/use_global_time'; +import { useAlertsByStatus } from '../../../../overview/components/detection_response/alerts_by_status/use_alerts_by_status'; +import { useSignalIndex } from '../../../../detections/containers/detection_engine/alerts/use_signal_index'; +import { DETECTION_RESPONSE_ALERTS_BY_STATUS_ID } from '../../../../overview/components/detection_response/alerts_by_status/types'; +import type { + AlertsByStatus, + ParsedAlertsData, +} from '../../../../overview/components/detection_response/alerts_by_status/types'; interface AlertCountInsightProps { /** @@ -42,6 +46,33 @@ interface AlertCountInsightProps { ['data-test-subj']?: string; } +/** + * Filters closed alerts and format the alert stats for the distribution bar + */ +export const getFormattedAlertStats = (alertsData: ParsedAlertsData) => { + const severityMap = new Map(); + + const filteredAlertsData: ParsedAlertsData = alertsData + ? Object.fromEntries(Object.entries(alertsData).filter(([key]) => key !== FILTER_CLOSED)) + : {}; + + (Object.keys(filteredAlertsData || {}) as AlertsByStatus[]).forEach((status) => { + if (filteredAlertsData?.[status]?.severities) { + filteredAlertsData?.[status]?.severities.forEach((severity) => { + const currentSeverity = severityMap.get(severity.key) || 0; + severityMap.set(severity.key, currentSeverity + severity.value); + }); + } + }); + + const alertStats = Array.from(severityMap, ([key, count]) => ({ + key: capitalize(key), + count, + color: getSeverityColor(key), + })); + return alertStats; +}; + /* * Displays a distribution bar with the total alert count for a given entity */ @@ -51,37 +82,44 @@ export const AlertCountInsight: React.FC = ({ direction, 'data-test-subj': dataTestSubj, }) => { - const uniqueQueryId = useMemo(() => `${ENTITY_ALERT_COUNT_ID}-${uuid()}`, []); const entityFilter = useMemo(() => ({ field: fieldName, value: name }), [fieldName, name]); + const { to, from } = useGlobalTime(); + const { signalIndexName } = useSignalIndex(); - const { items, isLoading } = useSummaryChartData({ - aggregations: severityAggregations, + const { items, isLoading } = useAlertsByStatus({ entityFilter, - uniqueQueryId, - signalIndexName: null, + signalIndexName, + queryId: DETECTION_RESPONSE_ALERTS_BY_STATUS_ID, + to, + from, }); - const dataProviders = useMemo( - () => [getDataProvider(fieldName, `timeline-indicator-${fieldName}-${name}`, name)], - [fieldName, name] - ); - const data = useMemo(() => (getIsAlertsBySeverityData(items) ? items : []), [items]); + const alertStats = useMemo(() => getFormattedAlertStats(items), [items]); - const alertStats = useMemo( - () => - data - .map((item) => ({ - key: item.key, - count: item.value, - color: getSeverityColor(item.key), - })) - .sort((a, b) => SEVERITIES.indexOf(a.key) - SEVERITIES.indexOf(b.key)), - [data] + const totalAlertCount = useMemo( + () => alertStats.reduce((acc, item) => acc + item.count, 0), + [alertStats] ); - const totalAlertCount = useMemo(() => data.reduce((acc, item) => acc + item.value, 0), [data]); + const dataProviders = useMemo( + () => [ + { + ...getDataProvider(fieldName, `timeline-indicator-${fieldName}-${name}`, name), + and: [ + getDataProviderAnd( + 'kibana.alert.workflow_status', + `timeline-indicator-kibana.alert.workflow_status-not-closed}`, + FILTER_CLOSED, + IS_OPERATOR, + true + ), + ], + }, + ], + [fieldName, name] + ); - if (!isLoading && items.length === 0) return null; + if (!isLoading && totalAlertCount === 0) return null; return (