From 2f02ae2a2c033b67c7878aa9aaca51bafabdac4d Mon Sep 17 00:00:00 2001 From: PhilippeOberti Date: Mon, 28 Oct 2024 18:23:25 -0500 Subject: [PATCH] combining logic within insights_summary_row.tsx --- .../right/components/insights_summary_row.tsx | 72 ++++++++++++++++--- .../right/components/prevalence_overview.tsx | 10 ++- .../components/related_alerts_by_ancestry.tsx | 58 ++------------- .../related_alerts_by_same_source_event.tsx | 56 ++------------- .../components/related_alerts_by_session.tsx | 56 ++------------- .../right/components/related_cases.tsx | 56 ++------------- .../right/components/suppressed_alerts.tsx | 51 ++----------- .../threat_intelligence_overview.tsx | 53 ++------------ 8 files changed, 94 insertions(+), 318 deletions(-) diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/insights_summary_row.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/insights_summary_row.tsx index 3f51f682b9d18..a889ebca16e90 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/insights_summary_row.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/insights_summary_row.tsx @@ -6,16 +6,27 @@ */ import type { ReactElement, VFC } from 'react'; +import { useCallback } from 'react'; +import { useMemo } from 'react'; import React from 'react'; import { css } from '@emotion/react'; import { i18n } from '@kbn/i18n'; -import type { EuiBadgeProps } from '@elastic/eui'; +import { EuiButtonEmpty } from '@elastic/eui'; import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiSkeletonText } from '@elastic/eui'; +import { useExpandableFlyoutApi } from '@kbn/expandable-flyout'; +import { useDocumentDetailsContext } from '../../shared/context'; +import { DocumentDetailsLeftPanelKey } from '../../shared/constants/panel_keys'; +import { LeftPanelInsightsTab } from '../../left'; +import { FormattedCount } from '../../../../common/components/formatted_number'; const LOADING = i18n.translate( 'xpack.securitySolution.flyout.right.insights.insightSummaryLoadingAriaLabel', { defaultMessage: 'Loading' } ); +const BUTTON = i18n.translate( + 'xpack.securitySolution.flyout.right.insights.insightSummaryButtonAriaLabel', + { defaultMessage: 'Click to see more details' } +); export interface InsightsSummaryRowProps { /** @@ -33,11 +44,11 @@ export interface InsightsSummaryRowProps { /** * Number of results/entries found */ - value: ReactElement; + value: number | ReactElement; /** - * Decides the color of the badge + * Optional parameter used to know which subtab to navigate to when the user clicks on the button */ - color?: EuiBadgeProps['color']; + expandedSubTab?: string; /** * Prefix data-test-subj because this component will be used in multiple places */ @@ -45,7 +56,9 @@ export interface InsightsSummaryRowProps { } /** - * Panel showing summary information as an icon, a count and text as well as a severity colored dot. + * Panel showing summary information. + * The default display is a text on the left and a count on the right, displayed with a clickable EuiBadge. + * The left and right section can accept a ReactElement to allow for more complex display. * Should be used for Entities, Threat intelligence, Prevalence, Correlations and Results components under the Insights section. */ export const InsightsSummaryRow: VFC = ({ @@ -53,10 +66,53 @@ export const InsightsSummaryRow: VFC = ({ error = false, value, text, - color = 'hollow', + expandedSubTab, 'data-test-subj': dataTestSubj, }) => { - const loadingDataTestSubj = `${dataTestSubj}Loading`; + const { eventId, indexName, scopeId, isPreviewMode } = useDocumentDetailsContext(); + const { openLeftPanel } = useExpandableFlyoutApi(); + + const onClick = useCallback(() => { + openLeftPanel({ + id: DocumentDetailsLeftPanelKey, + path: { + tab: LeftPanelInsightsTab, + subTab: expandedSubTab, + }, + params: { + id: eventId, + indexName, + scopeId, + }, + }); + }, [eventId, expandedSubTab, indexName, openLeftPanel, scopeId]); + + const buttonDataTestSubj = useMemo(() => `${dataTestSubj}Button`, [dataTestSubj]); + const button = useMemo( + () => ( + <> + {typeof value === 'number' ? ( + + + + + + ) : ( + value + )} + + ), + [buttonDataTestSubj, isPreviewMode, onClick, value] + ); + + const loadingDataTestSubj = useMemo(() => `${dataTestSubj}Loading`, [dataTestSubj]); if (loading) { return ( = ({ {text} - {value} + {button} ); diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/prevalence_overview.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/prevalence_overview.tsx index d64007fc6ded6..adb660f67ce72 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/prevalence_overview.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/prevalence_overview.tsx @@ -116,14 +116,12 @@ export const PrevalenceOverview: FC = () => { uncommonData.map((d) => ( + <> + {d.field} + {','} {d.values.toString()} + } value={{UNCOMMON}} - color={'warning'} data-test-subj={`${PREVALENCE_TEST_ID}${d.field}`} key={`${PREVALENCE_TEST_ID}${d.field}`} /> diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/related_alerts_by_ancestry.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/related_alerts_by_ancestry.tsx index fff5459a566f0..4b225d5595883 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/related_alerts_by_ancestry.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/related_alerts_by_ancestry.tsx @@ -5,27 +5,12 @@ * 2.0. */ -import React, { useCallback, useMemo } from 'react'; +import React, { useMemo } from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; -import { useExpandableFlyoutApi } from '@kbn/expandable-flyout'; -import { EuiButtonEmpty } from '@elastic/eui'; -import { i18n } from '@kbn/i18n'; -import { FormattedCount } from '../../../../common/components/formatted_number'; -import { DocumentDetailsLeftPanelKey } from '../../shared/constants/panel_keys'; -import { LeftPanelInsightsTab } from '../../left'; -import { useDocumentDetailsContext } from '../../shared/context'; +import { CORRELATIONS_TAB_ID } from '../../left/components/correlations_details'; import { useFetchRelatedAlertsByAncestry } from '../../shared/hooks/use_fetch_related_alerts_by_ancestry'; import { InsightsSummaryRow } from './insights_summary_row'; -import { - CORRELATIONS_RELATED_ALERTS_BY_ANCESTRY_BUTTON_TEST_ID, - CORRELATIONS_RELATED_ALERTS_BY_ANCESTRY_TEST_ID, -} from './test_ids'; -import { CORRELATIONS_TAB_ID } from '../../left/components/correlations_details'; - -const BUTTON = i18n.translate( - 'xpack.securitySolution.flyout.right.insights.entities.relatedAlertsByAncestry.buttonLabel', - { defaultMessage: 'Related alerts by ancestry' } -); +import { CORRELATIONS_RELATED_ALERTS_BY_ANCESTRY_TEST_ID } from './test_ids'; export interface RelatedAlertsByAncestryProps { /** @@ -50,30 +35,12 @@ export const RelatedAlertsByAncestry: React.VFC = indices, scopeId, }) => { - const { eventId, indexName, isPreviewMode } = useDocumentDetailsContext(); - const { openLeftPanel } = useExpandableFlyoutApi(); - const { loading, error, dataCount } = useFetchRelatedAlertsByAncestry({ documentId, indices, scopeId, }); - const onClick = useCallback(() => { - openLeftPanel({ - id: DocumentDetailsLeftPanelKey, - path: { - tab: LeftPanelInsightsTab, - subTab: CORRELATIONS_TAB_ID, - }, - params: { - id: eventId, - indexName, - scopeId, - }, - }); - }, [eventId, indexName, openLeftPanel, scopeId]); - const text = useMemo( () => ( = [dataCount] ); - const value = useMemo( - () => ( - - - - ), - [dataCount, isPreviewMode, onClick] - ); - return ( diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/related_alerts_by_same_source_event.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/related_alerts_by_same_source_event.tsx index e91d9c450bde9..dade35ca75546 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/related_alerts_by_same_source_event.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/related_alerts_by_same_source_event.tsx @@ -5,28 +5,13 @@ * 2.0. */ -import React, { useCallback, useMemo } from 'react'; +import React, { useMemo } from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; -import { useExpandableFlyoutApi } from '@kbn/expandable-flyout'; -import { EuiButtonEmpty } from '@elastic/eui'; -import { i18n } from '@kbn/i18n'; -import { FormattedCount } from '../../../../common/components/formatted_number'; -import { useDocumentDetailsContext } from '../../shared/context'; -import { DocumentDetailsLeftPanelKey } from '../../shared/constants/panel_keys'; -import { LeftPanelInsightsTab } from '../../left'; import { CORRELATIONS_TAB_ID } from '../../left/components/correlations_details'; -import { - CORRELATIONS_RELATED_ALERTS_BY_SAME_SOURCE_EVENT_BUTTON_TEST_ID, - CORRELATIONS_RELATED_ALERTS_BY_SAME_SOURCE_EVENT_TEST_ID, -} from './test_ids'; +import { CORRELATIONS_RELATED_ALERTS_BY_SAME_SOURCE_EVENT_TEST_ID } from './test_ids'; import { InsightsSummaryRow } from './insights_summary_row'; import { useFetchRelatedAlertsBySameSourceEvent } from '../../shared/hooks/use_fetch_related_alerts_by_same_source_event'; -const BUTTON = i18n.translate( - 'xpack.securitySolution.flyout.right.insights.entities.relatedAlertsBySameSourceEvent.buttonLabel', - { defaultMessage: 'Related alerts by ancestry' } -); - export interface RelatedAlertsBySameSourceEventProps { /** * Value of the kibana.alert.original_event.id field @@ -45,29 +30,11 @@ export const RelatedAlertsBySameSourceEvent: React.VFC { - const { eventId, indexName, isPreviewMode } = useDocumentDetailsContext(); - const { openLeftPanel } = useExpandableFlyoutApi(); - const { loading, dataCount } = useFetchRelatedAlertsBySameSourceEvent({ originalEventId, scopeId, }); - const onClick = useCallback(() => { - openLeftPanel({ - id: DocumentDetailsLeftPanelKey, - path: { - tab: LeftPanelInsightsTab, - subTab: CORRELATIONS_TAB_ID, - }, - params: { - id: eventId, - indexName, - scopeId, - }, - }); - }, [eventId, indexName, openLeftPanel, scopeId]); - const text = useMemo( () => ( ( - - - - ), - [dataCount, isPreviewMode, onClick] - ); - return ( diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/related_alerts_by_session.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/related_alerts_by_session.tsx index dd6f96d1c6793..9037ebca232a0 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/related_alerts_by_session.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/related_alerts_by_session.tsx @@ -5,27 +5,12 @@ * 2.0. */ -import React, { useCallback, useMemo } from 'react'; +import React, { useMemo } from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; -import { EuiButtonEmpty } from '@elastic/eui'; -import { useExpandableFlyoutApi } from '@kbn/expandable-flyout'; -import { i18n } from '@kbn/i18n'; -import { FormattedCount } from '../../../../common/components/formatted_number'; -import { LeftPanelInsightsTab } from '../../left'; import { CORRELATIONS_TAB_ID } from '../../left/components/correlations_details'; -import { DocumentDetailsLeftPanelKey } from '../../shared/constants/panel_keys'; import { useFetchRelatedAlertsBySession } from '../../shared/hooks/use_fetch_related_alerts_by_session'; import { InsightsSummaryRow } from './insights_summary_row'; -import { - CORRELATIONS_RELATED_ALERTS_BY_SESSION_BUTTON_TEST_ID, - CORRELATIONS_RELATED_ALERTS_BY_SESSION_TEST_ID, -} from './test_ids'; -import { useDocumentDetailsContext } from '../../shared/context'; - -const BUTTON = i18n.translate( - 'xpack.securitySolution.flyout.right.insights.entities.relatedAlertsBySession.buttonLabel', - { defaultMessage: 'Related alerts by session' } -); +import { CORRELATIONS_RELATED_ALERTS_BY_SESSION_TEST_ID } from './test_ids'; export interface RelatedAlertsBySessionProps { /** @@ -45,29 +30,11 @@ export const RelatedAlertsBySession: React.VFC = ({ entityId, scopeId, }) => { - const { eventId, indexName, isPreviewMode } = useDocumentDetailsContext(); - const { openLeftPanel } = useExpandableFlyoutApi(); - const { loading, error, dataCount } = useFetchRelatedAlertsBySession({ entityId, scopeId, }); - const onClick = useCallback(() => { - openLeftPanel({ - id: DocumentDetailsLeftPanelKey, - path: { - tab: LeftPanelInsightsTab, - subTab: CORRELATIONS_TAB_ID, - }, - params: { - id: eventId, - indexName, - scopeId, - }, - }); - }, [eventId, indexName, openLeftPanel, scopeId]); - const text = useMemo( () => ( = ({ [dataCount] ); - const value = useMemo( - () => ( - - - - ), - [dataCount, isPreviewMode, onClick] - ); - return ( diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/related_cases.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/related_cases.tsx index 5cc14ff2b0b17..8a01b21799d86 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/related_cases.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/related_cases.tsx @@ -5,28 +5,13 @@ * 2.0. */ -import React, { useCallback, useMemo } from 'react'; +import React, { useMemo } from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; -import { useExpandableFlyoutApi } from '@kbn/expandable-flyout'; -import { EuiButtonEmpty } from '@elastic/eui'; -import { i18n } from '@kbn/i18n'; -import { FormattedCount } from '../../../../common/components/formatted_number'; -import { useDocumentDetailsContext } from '../../shared/context'; -import { DocumentDetailsLeftPanelKey } from '../../shared/constants/panel_keys'; -import { LeftPanelInsightsTab } from '../../left'; import { CORRELATIONS_TAB_ID } from '../../left/components/correlations_details'; -import { - CORRELATIONS_RELATED_CASES_BUTTON_TEST_ID, - CORRELATIONS_RELATED_CASES_TEST_ID, -} from './test_ids'; +import { CORRELATIONS_RELATED_CASES_TEST_ID } from './test_ids'; import { InsightsSummaryRow } from './insights_summary_row'; import { useFetchRelatedCases } from '../../shared/hooks/use_fetch_related_cases'; -const BUTTON = i18n.translate( - 'xpack.securitySolution.flyout.right.insights.entities.relatedCases.buttonLabel', - { defaultMessage: 'Related cases' } -); - export interface RelatedCasesProps { /** * Id of the document @@ -38,26 +23,8 @@ export interface RelatedCasesProps { * Show related cases in summary row */ export const RelatedCases: React.VFC = ({ eventId }) => { - const { indexName, scopeId, isPreviewMode } = useDocumentDetailsContext(); - const { openLeftPanel } = useExpandableFlyoutApi(); - const { loading, error, dataCount } = useFetchRelatedCases({ eventId }); - const onClick = useCallback(() => { - openLeftPanel({ - id: DocumentDetailsLeftPanelKey, - path: { - tab: LeftPanelInsightsTab, - subTab: CORRELATIONS_TAB_ID, - }, - params: { - id: eventId, - indexName, - scopeId, - }, - }); - }, [eventId, indexName, openLeftPanel, scopeId]); - const text = useMemo( () => ( = ({ eventId }) => { [dataCount] ); - const value = useMemo( - () => ( - - - - ), - [dataCount, isPreviewMode, onClick] - ); - return ( diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/suppressed_alerts.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/suppressed_alerts.tsx index c20945c47acbf..c7eb50aeb383a 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/suppressed_alerts.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/suppressed_alerts.tsx @@ -5,23 +5,17 @@ * 2.0. */ -import React, { useCallback, useMemo } from 'react'; -import { EuiFlexGroup, EuiFlexItem, EuiBetaBadge, EuiButtonEmpty } from '@elastic/eui'; +import React, { useMemo } from 'react'; +import { EuiFlexGroup, EuiFlexItem, EuiBetaBadge } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import type { Type } from '@kbn/securitysolution-io-ts-alerting-types'; import { i18n } from '@kbn/i18n'; -import { useExpandableFlyoutApi } from '@kbn/expandable-flyout'; -import { FormattedCount } from '../../../../common/components/formatted_number'; -import { useDocumentDetailsContext } from '../../shared/context'; -import { DocumentDetailsLeftPanelKey } from '../../shared/constants/panel_keys'; -import { LeftPanelInsightsTab } from '../../left'; import { CORRELATIONS_TAB_ID } from '../../left/components/correlations_details'; import { InsightsSummaryRow } from './insights_summary_row'; import { CORRELATIONS_SUPPRESSED_ALERTS_TEST_ID, CORRELATIONS_SUPPRESSED_ALERTS_TECHNICAL_PREVIEW_TEST_ID, - CORRELATIONS_SUPPRESSED_ALERTS_BUTTON_TEST_ID, } from './test_ids'; import { isSuppressionRuleInGA } from '../../../../../common/detection_engine/utils'; @@ -31,10 +25,6 @@ const SUPPRESSED_ALERTS_COUNT_TECHNICAL_PREVIEW = i18n.translate( defaultMessage: 'Technical Preview', } ); -const BUTTON = i18n.translate( - 'xpack.securitySolution.flyout.right.insights.entities.suppressedAlerts.buttonLabel', - { defaultMessage: 'Suppressed alerts' } -); export interface SuppressedAlertsProps { /** @@ -54,24 +44,6 @@ export const SuppressedAlerts: React.VFC = ({ alertSuppressionCount, ruleType, }) => { - const { eventId, indexName, scopeId, isPreviewMode } = useDocumentDetailsContext(); - const { openLeftPanel } = useExpandableFlyoutApi(); - - const onClick = useCallback(() => { - openLeftPanel({ - id: DocumentDetailsLeftPanelKey, - path: { - tab: LeftPanelInsightsTab, - subTab: CORRELATIONS_TAB_ID, - }, - params: { - id: eventId, - indexName, - scopeId, - }, - }); - }, [eventId, indexName, openLeftPanel, scopeId]); - const text = useMemo( () => ( = ({ [alertSuppressionCount] ); - const value = useMemo( - () => ( - - - - ), - [alertSuppressionCount, isPreviewMode, onClick] - ); - return ( diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/threat_intelligence_overview.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/threat_intelligence_overview.tsx index 1ab487a8967a3..0a737a973ea2d 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/threat_intelligence_overview.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/threat_intelligence_overview.tsx @@ -7,19 +7,16 @@ import type { FC } from 'react'; import React, { useCallback, useMemo } from 'react'; -import { EuiButtonEmpty, EuiFlexGroup } from '@elastic/eui'; +import { EuiFlexGroup } from '@elastic/eui'; import { useExpandableFlyoutApi } from '@kbn/expandable-flyout'; import { FormattedMessage } from '@kbn/i18n-react'; import { ExpandablePanel } from '@kbn/security-solution-common'; -import { i18n } from '@kbn/i18n'; import { useFetchThreatIntelligence } from '../hooks/use_fetch_threat_intelligence'; import { InsightsSummaryRow } from './insights_summary_row'; import { useDocumentDetailsContext } from '../../shared/context'; import { - INSIGHTS_THREAT_INTELLIGENCE_ENRICHED_WITH_THREAT_INTELLIGENCE_BUTTON_TEST_ID, INSIGHTS_THREAT_INTELLIGENCE_ENRICHED_WITH_THREAT_INTELLIGENCE_TEST_ID, INSIGHTS_THREAT_INTELLIGENCE_TEST_ID, - INSIGHTS_THREAT_INTELLIGENCE_THREAT_MATCHES_BUTTON_TEST_ID, INSIGHTS_THREAT_INTELLIGENCE_THREAT_MATCHES_TEST_ID, } from './test_ids'; import { DocumentDetailsLeftPanelKey } from '../../shared/constants/panel_keys'; @@ -38,14 +35,6 @@ const TOOLTIP = ( defaultMessage="Show all threat intelligence" /> ); -const THREAT_MATCHES_BUTTON = i18n.translate( - 'xpack.securitySolution.flyout.right.insights.threatIntelligence.threatMatches.buttonLabel', - { defaultMessage: 'Threat matches' } -); -const ENRICHED_WITH_THREAT_INTELLIGENCE_BUTTON = i18n.translate( - 'xpack.securitySolution.flyout.right.insights.threatIntelligence.enrichedWithThreatIntelligence.buttonLabel', - { defaultMessage: 'Enriched with threat intelligence' } -); /** * Threat intelligence section under Insights section, overview tab. @@ -98,22 +87,6 @@ export const ThreatIntelligenceOverview: FC = () => { [threatMatchesCount] ); - const threatMatchCountValue = useMemo( - () => ( - - {threatMatchesCount} - - ), - [goToThreatIntelligenceTab, isPreviewMode, threatMatchesCount] - ); - const threatEnrichmentsCountText = useMemo( () => ( { [threatEnrichmentsCount] ); - const threatEnrichmentsCountValue = useMemo( - () => ( - - {threatEnrichmentsCount} - - ), - [goToThreatIntelligenceTab, isPreviewMode, threatEnrichmentsCount] - ); - return ( { >