Skip to content

Commit

Permalink
combining logic within insights_summary_row.tsx
Browse files Browse the repository at this point in the history
  • Loading branch information
@PhilippeOberti
PhilippeOberti committed Oct 28, 2024
1 parent f4a7c95 commit 2f02ae2
Show file tree
Hide file tree
Showing 8 changed files with 94 additions and 318 deletions.
72 changes: 64 additions & 8 deletions ...ecurity_solution/public/flyout/document_details/right/components/insights_summary_row.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
/**
Expand All @@ -33,30 +44,75 @@ 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
*/
['data-test-subj']?: string;
}

/**
* 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<InsightsSummaryRowProps> = ({
loading = false,
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' ? (
<EuiBadge color="hollow">
<EuiButtonEmpty
aria-label={BUTTON}
onClick={onClick}
flush={'both'}
size="xs"
disabled={isPreviewMode}
data-test-subj={buttonDataTestSubj}
>
<FormattedCount count={value} />
</EuiButtonEmpty>
</EuiBadge>
) : (
value
)}
</>
),
[buttonDataTestSubj, isPreviewMode, onClick, value]
);

const loadingDataTestSubj = useMemo(() => `${dataTestSubj}Loading`, [dataTestSubj]);
if (loading) {
return (
<EuiSkeletonText
Expand Down Expand Up @@ -96,7 +152,7 @@ export const InsightsSummaryRow: VFC<InsightsSummaryRowProps> = ({
{text}
</EuiFlexItem>
<EuiFlexItem grow={false} data-test-subj={valueDataTestSubj}>
<EuiBadge color={color}>{value}</EuiBadge>
{button}
</EuiFlexItem>
</EuiFlexGroup>
);
Expand Down
10 changes: 4 additions & 6 deletions ...security_solution/public/flyout/document_details/right/components/prevalence_overview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,14 +116,12 @@ export const PrevalenceOverview: FC = () => {
uncommonData.map((d) => (
<InsightsSummaryRow
text={
<FormattedMessage
id="xpack.securitySolution.flyout.right.insights.prevalence.rowDescription"
defaultMessage="{field}, {value} is uncommon"
values={{ field: d.field, value: d.values.toString() }}
/>
<>
{d.field}
{','} {d.values.toString()}
</>
}
value={<EuiBadge color="warning">{UNCOMMON}</EuiBadge>}
color={'warning'}
data-test-subj={`${PREVALENCE_TEST_ID}${d.field}`}
key={`${PREVALENCE_TEST_ID}${d.field}`}
/>
Expand Down
58 changes: 5 additions & 53 deletions ...y_solution/public/flyout/document_details/right/components/related_alerts_by_ancestry.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
/**
Expand All @@ -50,30 +35,12 @@ export const RelatedAlertsByAncestry: React.VFC<RelatedAlertsByAncestryProps> =
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(
() => (
<FormattedMessage
Expand All @@ -85,28 +52,13 @@ export const RelatedAlertsByAncestry: React.VFC<RelatedAlertsByAncestryProps> =
[dataCount]
);

const value = useMemo(
() => (
<EuiButtonEmpty
aria-label={BUTTON}
onClick={onClick}
flush={'both'}
size="xs"
disabled={isPreviewMode}
data-test-subj={CORRELATIONS_RELATED_ALERTS_BY_ANCESTRY_BUTTON_TEST_ID}
>
<FormattedCount count={dataCount} />
</EuiButtonEmpty>
),
[dataCount, isPreviewMode, onClick]
);

return (
<InsightsSummaryRow
loading={loading}
error={error}
text={text}
value={value}
value={dataCount}
expandedSubTab={CORRELATIONS_TAB_ID}
data-test-subj={CORRELATIONS_RELATED_ALERTS_BY_ANCESTRY_TEST_ID}
key={`correlation-row-${text}`}
/>
Expand Down
56 changes: 4 additions & 52 deletions ...n/public/flyout/document_details/right/components/related_alerts_by_same_source_event.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -45,29 +30,11 @@ export const RelatedAlertsBySameSourceEvent: React.VFC<RelatedAlertsBySameSource
originalEventId,
scopeId,
}) => {
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(
() => (
<FormattedMessage
Expand All @@ -79,27 +46,12 @@ export const RelatedAlertsBySameSourceEvent: React.VFC<RelatedAlertsBySameSource
[dataCount]
);

const value = useMemo(
() => (
<EuiButtonEmpty
aria-label={BUTTON}
onClick={onClick}
flush={'both'}
size="xs"
disabled={isPreviewMode}
data-test-subj={CORRELATIONS_RELATED_ALERTS_BY_SAME_SOURCE_EVENT_BUTTON_TEST_ID}
>
<FormattedCount count={dataCount} />
</EuiButtonEmpty>
),
[dataCount, isPreviewMode, onClick]
);

return (
<InsightsSummaryRow
loading={loading}
text={text}
value={value}
value={dataCount}
expandedSubTab={CORRELATIONS_TAB_ID}
data-test-subj={CORRELATIONS_RELATED_ALERTS_BY_SAME_SOURCE_EVENT_TEST_ID}
key={`correlation-row-${text}`}
/>
Expand Down
Loading

0 comments on commit 2f02ae2

Please sign in to comment.