Skip to content

Commit

Permalink
[Security Solution][Alert details] - refactor UI on insights
Browse files Browse the repository at this point in the history
  • Loading branch information
@PhilippeOberti
PhilippeOberti committed Oct 28, 2024
1 parent be6708b commit f4a7c95
Show file tree
Hide file tree
Showing 25 changed files with 1,128 additions and 496 deletions.
58 changes: 43 additions & 15 deletions ...y_solution/public/flyout/document_details/right/components/correlations_overview.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
CORRELATIONS_RELATED_CASES_TEST_ID,
CORRELATIONS_SUPPRESSED_ALERTS_TEST_ID,
CORRELATIONS_TEST_ID,
SUMMARY_ROW_TEXT_TEST_ID,
SUMMARY_ROW_VALUE_TEST_ID,
} from './test_ids';
import { useShowRelatedAlertsByAncestry } from '../../shared/hooks/use_show_related_alerts_by_ancestry';
Expand Down Expand Up @@ -58,17 +59,32 @@ const TITLE_LINK_TEST_ID = EXPANDABLE_PANEL_HEADER_TITLE_LINK_TEST_ID(CORRELATIO
const TITLE_ICON_TEST_ID = EXPANDABLE_PANEL_HEADER_TITLE_ICON_TEST_ID(CORRELATIONS_TEST_ID);
const TITLE_TEXT_TEST_ID = EXPANDABLE_PANEL_HEADER_TITLE_TEXT_TEST_ID(CORRELATIONS_TEST_ID);

const SUPPRESSED_ALERTS_TEST_ID = SUMMARY_ROW_VALUE_TEST_ID(CORRELATIONS_SUPPRESSED_ALERTS_TEST_ID);
const RELATED_ALERTS_BY_ANCESTRY_TEST_ID = SUMMARY_ROW_VALUE_TEST_ID(
const SUPPRESSED_ALERTS_TEXT_TEST_ID = SUMMARY_ROW_VALUE_TEST_ID(
CORRELATIONS_SUPPRESSED_ALERTS_TEST_ID
);
const SUPPRESSED_ALERTS_VALUE_TEST_ID = SUMMARY_ROW_TEXT_TEST_ID(
CORRELATIONS_SUPPRESSED_ALERTS_TEST_ID
);
const RELATED_ALERTS_BY_ANCESTRY_TEXT_TEST_ID = SUMMARY_ROW_TEXT_TEST_ID(
CORRELATIONS_RELATED_ALERTS_BY_ANCESTRY_TEST_ID
);
const RELATED_ALERTS_BY_ANCESTRY_VALUE_TEST_ID = SUMMARY_ROW_VALUE_TEST_ID(
CORRELATIONS_RELATED_ALERTS_BY_ANCESTRY_TEST_ID
);
const RELATED_ALERTS_BY_SAME_SOURCE_EVENT_TEST_ID = SUMMARY_ROW_VALUE_TEST_ID(
const RELATED_ALERTS_BY_SAME_SOURCE_EVENT_TEXT_TEST_ID = SUMMARY_ROW_TEXT_TEST_ID(
CORRELATIONS_RELATED_ALERTS_BY_SAME_SOURCE_EVENT_TEST_ID
);
const RELATED_ALERTS_BY_SESSION_TEST_ID = SUMMARY_ROW_VALUE_TEST_ID(
const RELATED_ALERTS_BY_SAME_SOURCE_EVENT_VALUE_TEST_ID = SUMMARY_ROW_VALUE_TEST_ID(
CORRELATIONS_RELATED_ALERTS_BY_SAME_SOURCE_EVENT_TEST_ID
);
const RELATED_ALERTS_BY_SESSION_TEXT_TEST_ID = SUMMARY_ROW_TEXT_TEST_ID(
CORRELATIONS_RELATED_ALERTS_BY_SESSION_TEST_ID
);
const RELATED_ALERTS_BY_SESSION_VALUE_TEST_ID = SUMMARY_ROW_VALUE_TEST_ID(
CORRELATIONS_RELATED_ALERTS_BY_SESSION_TEST_ID
);
const RELATED_CASES_TEST_ID = SUMMARY_ROW_VALUE_TEST_ID(CORRELATIONS_RELATED_CASES_TEST_ID);
const RELATED_CASES_TEXT_TEST_ID = SUMMARY_ROW_TEXT_TEST_ID(CORRELATIONS_RELATED_CASES_TEST_ID);
const RELATED_CASES_VALUE_TEST_ID = SUMMARY_ROW_VALUE_TEST_ID(CORRELATIONS_RELATED_CASES_TEST_ID);

const panelContextValue = {
eventId: 'event id',
Expand Down Expand Up @@ -193,11 +209,16 @@ describe('<CorrelationsOverview />', () => {
});

const { getByTestId, queryByText } = render(renderCorrelationsOverview(panelContextValue));
expect(getByTestId(RELATED_ALERTS_BY_ANCESTRY_TEST_ID)).toBeInTheDocument();
expect(getByTestId(RELATED_ALERTS_BY_SAME_SOURCE_EVENT_TEST_ID)).toBeInTheDocument();
expect(getByTestId(RELATED_ALERTS_BY_SESSION_TEST_ID)).toBeInTheDocument();
expect(getByTestId(RELATED_CASES_TEST_ID)).toBeInTheDocument();
expect(getByTestId(SUPPRESSED_ALERTS_TEST_ID)).toBeInTheDocument();
expect(getByTestId(RELATED_ALERTS_BY_ANCESTRY_TEXT_TEST_ID)).toBeInTheDocument();
expect(getByTestId(RELATED_ALERTS_BY_ANCESTRY_VALUE_TEST_ID)).toBeInTheDocument();
expect(getByTestId(RELATED_ALERTS_BY_SAME_SOURCE_EVENT_TEXT_TEST_ID)).toBeInTheDocument();
expect(getByTestId(RELATED_ALERTS_BY_SAME_SOURCE_EVENT_VALUE_TEST_ID)).toBeInTheDocument();
expect(getByTestId(RELATED_ALERTS_BY_SESSION_TEXT_TEST_ID)).toBeInTheDocument();
expect(getByTestId(RELATED_ALERTS_BY_SESSION_VALUE_TEST_ID)).toBeInTheDocument();
expect(getByTestId(RELATED_CASES_TEXT_TEST_ID)).toBeInTheDocument();
expect(getByTestId(RELATED_CASES_VALUE_TEST_ID)).toBeInTheDocument();
expect(getByTestId(SUPPRESSED_ALERTS_TEXT_TEST_ID)).toBeInTheDocument();
expect(getByTestId(SUPPRESSED_ALERTS_VALUE_TEST_ID)).toBeInTheDocument();
expect(queryByText(NO_DATA_MESSAGE)).not.toBeInTheDocument();
});

Expand All @@ -215,11 +236,18 @@ describe('<CorrelationsOverview />', () => {
jest.mocked(useShowSuppressedAlerts).mockReturnValue({ show: false, alertSuppressionCount: 0 });

const { getByText, queryByTestId } = render(renderCorrelationsOverview(panelContextValue));
expect(queryByTestId(RELATED_ALERTS_BY_ANCESTRY_TEST_ID)).not.toBeInTheDocument();
expect(queryByTestId(RELATED_ALERTS_BY_SAME_SOURCE_EVENT_TEST_ID)).not.toBeInTheDocument();
expect(queryByTestId(RELATED_ALERTS_BY_SESSION_TEST_ID)).not.toBeInTheDocument();
expect(queryByTestId(RELATED_CASES_TEST_ID)).not.toBeInTheDocument();
expect(queryByTestId(SUPPRESSED_ALERTS_TEST_ID)).not.toBeInTheDocument();
expect(queryByTestId(RELATED_ALERTS_BY_ANCESTRY_TEXT_TEST_ID)).not.toBeInTheDocument();
expect(queryByTestId(RELATED_ALERTS_BY_ANCESTRY_VALUE_TEST_ID)).not.toBeInTheDocument();
expect(queryByTestId(RELATED_ALERTS_BY_SAME_SOURCE_EVENT_TEXT_TEST_ID)).not.toBeInTheDocument();
expect(
queryByTestId(RELATED_ALERTS_BY_SAME_SOURCE_EVENT_VALUE_TEST_ID)
).not.toBeInTheDocument();
expect(queryByTestId(RELATED_ALERTS_BY_SESSION_TEXT_TEST_ID)).not.toBeInTheDocument();
expect(queryByTestId(RELATED_ALERTS_BY_SESSION_VALUE_TEST_ID)).not.toBeInTheDocument();
expect(queryByTestId(RELATED_CASES_TEXT_TEST_ID)).not.toBeInTheDocument();
expect(queryByTestId(RELATED_CASES_VALUE_TEST_ID)).not.toBeInTheDocument();
expect(queryByTestId(SUPPRESSED_ALERTS_TEXT_TEST_ID)).not.toBeInTheDocument();
expect(queryByTestId(SUPPRESSED_ALERTS_VALUE_TEST_ID)).not.toBeInTheDocument();
expect(getByText(NO_DATA_MESSAGE)).toBeInTheDocument();
});

Expand Down
2 changes: 1 addition & 1 deletion ...curity_solution/public/flyout/document_details/right/components/correlations_overview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ export const CorrelationsOverview: React.FC = () => {
data-test-subj={CORRELATIONS_TEST_ID}
>
{canShowAtLeastOneInsight ? (
<EuiFlexGroup direction="column" gutterSize="none">
<EuiFlexGroup direction="column" gutterSize="s">
{showSuppressedAlerts && (
<SuppressedAlerts alertSuppressionCount={alertSuppressionCount} ruleType={ruleType} />
)}
Expand Down
77 changes: 0 additions & 77 deletions ...solution/public/flyout/document_details/right/components/insights_summary_row.stories.tsx
View file

This file was deleted.

53 changes: 13 additions & 40 deletions ...ty_solution/public/flyout/document_details/right/components/insights_summary_row.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,72 +11,45 @@ import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
import { InsightsSummaryRow } from './insights_summary_row';

const testId = 'test';
const iconTestId = `${testId}Icon`;
const textTestId = `${testId}Text`;
const valueTestId = `${testId}Value`;
const colorTestId = `${testId}Color`;
const loadingTestId = `${testId}Loading`;

describe('<InsightsSummaryRow />', () => {
it('should render by default', () => {
const { getByTestId } = render(
<IntlProvider locale="en">
<InsightsSummaryRow
icon={'image'}
value={1}
text={'this is a test for red'}
value={<div>{'value for this'}</div>}
color={'rgb(189,39,30)'}
data-test-subj={testId}
/>
</IntlProvider>
);

expect(getByTestId(iconTestId)).toBeInTheDocument();
expect(getByTestId(valueTestId)).toHaveTextContent('1 this is a test for red');
expect(getByTestId(colorTestId)).toBeInTheDocument();
expect(getByTestId(textTestId)).toHaveTextContent('this is a test for red');
expect(getByTestId(valueTestId)).toHaveTextContent('value for this');
});

it('should render loading skeletton if loading is true', () => {
const { getByTestId } = render(
<InsightsSummaryRow loading={true} icon={'image'} text={'text'} data-test-subj={testId} />
<InsightsSummaryRow
loading={true}
text={'text'}
value={<div>{'value for this'}</div>}
data-test-subj={testId}
/>
);

expect(getByTestId(loadingTestId)).toBeInTheDocument();
});

it('should only render null when error is true', () => {
const { container } = render(<InsightsSummaryRow error={true} icon={'image'} text={'text'} />);

expect(container).toBeEmptyDOMElement();
});

it('should handle big number in a compact notation', () => {
const { getByTestId } = render(
<IntlProvider locale="en">
<InsightsSummaryRow
icon={'image'}
value={160000}
text={'this is a test for red'}
color={'rgb(189,39,30)'}
data-test-subj={testId}
/>
</IntlProvider>
const { container } = render(
<InsightsSummaryRow error={true} text={'text'} value={<div>{'value for this'}</div>} />
);

expect(getByTestId(valueTestId)).toHaveTextContent('160k this is a test for red');
});

it(`should not show the colored dot if color isn't provided`, () => {
const { queryByTestId } = render(
<IntlProvider locale="en">
<InsightsSummaryRow
icon={'image'}
value={160000}
text={'this is a test for no color'}
data-test-subj={testId}
/>
</IntlProvider>
);

expect(queryByTestId(colorTestId)).not.toBeInTheDocument();
expect(container).toBeEmptyDOMElement();
});
});
Loading

0 comments on commit f4a7c95

Please sign in to comment.