Skip to content

Commit

Permalink
[Security Solution] Alert flyout overview (#105602)
Browse files Browse the repository at this point in the history 
* init flyout overview

* styling

* remove reason block

* rm unused i18n key

* show data by event category

* rename styled component

* update snapshot

* update overview tab on alert flyout

* styling

* fix up

* update snapshot and remove unused i18n
  • Loading branch information
@angorayc
angorayc authored Jul 20, 2021
1 parent dd159f1 commit 85f726c
Show file tree
Hide file tree
Showing 13 changed files with 156 additions and 141 deletions.
72 changes: 51 additions & 21 deletions ...k/plugins/security_solution/public/common/components/event_details/alert_summary_view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,7 @@
* 2.0.
*/

import {
EuiBasicTableColumn,
EuiDescriptionList,
EuiDescriptionListDescription,
EuiDescriptionListTitle,
EuiSpacer,
} from '@elastic/eui';
import { EuiBasicTableColumn, EuiSpacer, EuiHorizontalRule, EuiTitle, EuiText } from '@elastic/eui';
import { get, getOr, find } from 'lodash/fp';
import React, { useMemo } from 'react';
import styled from 'styled-components';
Expand All @@ -27,6 +21,8 @@ import {
ALERTS_HEADERS_THRESHOLD_CARDINALITY,
ALERTS_HEADERS_THRESHOLD_COUNT,
ALERTS_HEADERS_THRESHOLD_TERMS,
SIGNAL_STATUS,
TIMESTAMP,
} from '../../../detections/components/alerts_table/translations';
import {
IP_FIELD_TYPE,
Expand All @@ -40,14 +36,14 @@ import { MarkdownRenderer } from '../markdown_editor';
import { LineClamp } from '../line_clamp';
import { endpointAlertCheck } from '../../utils/endpoint_alert_check';

const StyledEuiDescriptionList = styled(EuiDescriptionList)`
padding: 24px 4px 4px;
export const Indent = styled.div`
padding: 0 8px;
word-break: break-word;
`;

const fields = [
{ id: 'signal.status' },
{ id: '@timestamp' },
{ id: 'signal.status', label: SIGNAL_STATUS },
{ id: '@timestamp', label: TIMESTAMP },
{
id: SIGNAL_RULE_NAME_FIELD_NAME,
linkField: 'signal.rule.id',
Expand All @@ -65,6 +61,20 @@ const fields = [
{ id: 'signal.threshold_result.cardinality', label: ALERTS_HEADERS_THRESHOLD_CARDINALITY },
];

const processFields = [
...fields,
{ id: 'process.name' },
{ id: 'process.parent.name' },
{ id: 'process.args' },
];

const networkFields = [
...fields,
{ id: 'destination.address' },
{ id: 'destination.port' },
{ id: 'process.name' },
];

const getDescription = ({
contextId,
eventId,
Expand Down Expand Up @@ -94,8 +104,22 @@ const getSummaryRows = ({
timelineId: string;
eventId: string;
}) => {
const categoryField = find({ category: 'event', field: 'event.category' }, data) as
| TimelineEventsDetailsItem
| undefined;
const eventCategory = Array.isArray(categoryField?.originalValue)
? categoryField?.originalValue[0]
: categoryField?.originalValue;

const tableFields =
eventCategory === 'network'
? networkFields
: eventCategory === 'process'
? processFields
: fields;

return data != null
? fields.reduce<SummaryRow[]>((acc, item) => {
? tableFields.reduce<SummaryRow[]>((acc, item) => {
const field = data.find((d) => d.field === item.id);
if (!field) {
return acc;
Expand Down Expand Up @@ -213,21 +237,27 @@ const AlertSummaryViewComponent: React.FC<{

return (
<>
<EuiSpacer size="m" />
<EuiSpacer size="l" />
<SummaryView
summaryColumns={summaryColumns}
summaryRows={isEndpointAlert ? summaryRowsWithAgentStatus : summaryRows}
title={title}
/>
{maybeRule?.note && (
<StyledEuiDescriptionList data-test-subj={`summary-view-guide`} compressed>
<EuiDescriptionListTitle>{i18n.INVESTIGATION_GUIDE}</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
<LineClamp>
<MarkdownRenderer>{maybeRule.note}</MarkdownRenderer>
</LineClamp>
</EuiDescriptionListDescription>
</StyledEuiDescriptionList>
<>
<EuiHorizontalRule />
<EuiTitle size="xxxs" data-test-subj="summary-view-guide">
<h5>{i18n.INVESTIGATION_GUIDE}</h5>
</EuiTitle>
<EuiSpacer size="s" />
<Indent>
<EuiText size="xs">
<LineClamp lineClampHeight={4.5}>
<MarkdownRenderer>{maybeRule.note}</MarkdownRenderer>
</LineClamp>
</EuiText>
</Indent>
</>
)}
</>
);
Expand Down
2 changes: 1 addition & 1 deletion ...urity_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const RightMargin = styled.span`
const EnrichmentTitle: React.FC<ThreatSummaryItem['title']> = ({ title, type }) => (
<>
<RightMargin>
<EuiTitle size="xxs">
<EuiTitle size="xxxs">
<h5>{title}</h5>
</EuiTitle>
</RightMargin>
Expand Down
6 changes: 3 additions & 3 deletions ...k/plugins/security_solution/public/common/components/event_details/event_details.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ describe('EventDetails', () => {
});

describe('alerts tabs', () => {
['Summary', 'Threat Intel', 'Table', 'JSON View'].forEach((tab) => {
['Overview', 'Threat Intel', 'Table', 'JSON View'].forEach((tab) => {
test(`it renders the ${tab} tab`, () => {
const expectedCopy = tab === 'Threat Intel' ? `${tab} (1)` : tab;
expect(
Expand All @@ -94,14 +94,14 @@ describe('EventDetails', () => {
});
});

test('the Summary tab is selected by default', () => {
test('the Overview tab is selected by default', () => {
expect(
alertsWrapper
.find('[data-test-subj="eventDetails"]')
.find('.euiTab-isSelected')
.first()
.text()
).toEqual('Summary');
).toEqual('Overview');
});
});

Expand Down
3 changes: 2 additions & 1 deletion x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ const EventDetailsComponent: React.FC<Props> = ({
isAlert
? {
id: EventsViewType.summaryView,
name: i18n.SUMMARY,
name: i18n.OVERVIEW,
content: (
<>
<AlertSummaryView
Expand All @@ -137,6 +137,7 @@ const EventDetailsComponent: React.FC<Props> = ({
eventId: id,
browserFields,
timelineId,
title: i18n.DUCOMENT_SUMMARY,
}}
/>
{enrichmentCount > 0 && (
Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/security_solution/public/common/components/event_details/helpers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,7 @@ export const onEventDetailsTabKeyPressed = ({
};

const getTitle = (title: string) => (
<EuiTitle size="xxs">
<EuiTitle size="xxxs">
<h5>{title}</h5>
</EuiTitle>
);
Expand Down
47 changes: 16 additions & 31 deletions x-pack/plugins/security_solution/public/common/components/event_details/summary_view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,16 @@
* 2.0.
*/

import { EuiInMemoryTable, EuiBasicTableColumn, EuiTitle, EuiHorizontalRule } from '@elastic/eui';
import { EuiInMemoryTable, EuiBasicTableColumn, EuiTitle } from '@elastic/eui';
import React from 'react';
import styled from 'styled-components';

import { SummaryRow } from './helpers';

export const Indent = styled.div`
padding: 0 4px;
`;

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const StyledEuiInMemoryTable = styled(EuiInMemoryTable as any)`
.euiTableHeaderCell,
Expand All @@ -22,24 +26,6 @@ export const StyledEuiInMemoryTable = styled(EuiInMemoryTable as any)`
}
`;

const StyledEuiTitle = styled(EuiTitle)`
color: ${({ theme }) => theme.eui.euiColorDarkShade};
text-transform: lowercase;
padding-top: ${({ theme }) => theme.eui.paddingSizes.s};
h2 {
min-width: 120px;
}
hr {
max-width: 75%;
}
`;

const FlexDiv = styled.div`
display: flex;
align-items: center;
justify-content: flex-start;
`;

export const SummaryViewComponent: React.FC<{
title?: string;
summaryColumns: Array<EuiBasicTableColumn<SummaryRow>>;
Expand All @@ -49,19 +35,18 @@ export const SummaryViewComponent: React.FC<{
return (
<>
{title && (
<StyledEuiTitle size="xxs">
<FlexDiv>
<h2>{title}</h2>
<EuiHorizontalRule margin="none" />
</FlexDiv>
</StyledEuiTitle>
<EuiTitle size="xxxs">
<h5>{title}</h5>
</EuiTitle>
)}
<StyledEuiInMemoryTable
data-test-subj={dataTestSubj}
items={summaryRows}
columns={summaryColumns}
compressed
/>
<Indent>
<StyledEuiInMemoryTable
data-test-subj={dataTestSubj}
items={summaryRows}
columns={summaryColumns}
compressed
/>
</Indent>
</>
);
};
Expand Down
17 changes: 12 additions & 5 deletions x-pack/plugins/security_solution/public/common/components/event_details/translations.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,28 @@

import { i18n } from '@kbn/i18n';

export const SUMMARY = i18n.translate('xpack.securitySolution.alertDetails.summary', {
defaultMessage: 'Summary',
});

export const THREAT_INTEL = i18n.translate('xpack.securitySolution.alertDetails.threatIntel', {
defaultMessage: 'Threat Intel',
});

export const INVESTIGATION_GUIDE = i18n.translate(
'xpack.securitySolution.alertDetails.summary.investigationGuide',
'xpack.securitySolution.alertDetails.overview.investigationGuide',
{
defaultMessage: 'Investigation guide',
}
);

export const OVERVIEW = i18n.translate('xpack.securitySolution.alertDetails.overview', {
defaultMessage: 'Overview',
});

export const DUCOMENT_SUMMARY = i18n.translate(
'xpack.securitySolution.alertDetails.overview.documentSummary',
{
defaultMessage: 'Document Summary',
}
);

export const TABLE = i18n.translate('xpack.securitySolution.eventDetails.table', {
defaultMessage: 'Table',
});
Expand Down
14 changes: 14 additions & 0 deletions x-pack/plugins/security_solution/public/detections/components/alerts_table/translations.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,9 +245,23 @@ export const STATUS = i18n.translate(
}
);

export const SIGNAL_STATUS = i18n.translate(
'xpack.securitySolution.eventsViewer.alerts.overviewTable.signalStatusTitle',
{
defaultMessage: 'Status',
}
);

export const TRIGGERED = i18n.translate(
'xpack.securitySolution.eventsViewer.alerts.defaultHeaders.triggeredTitle',
{
defaultMessage: 'Triggered',
}
);

export const TIMESTAMP = i18n.translate(
'xpack.securitySolution.eventsViewer.alerts.overviewTable.timestampTitle',
{
defaultMessage: 'Timestamp',
}
);
21 changes: 6 additions & 15 deletions ...ecurity_solution/public/timelines/components/side_panel/__snapshots__/index.test.tsx.snap
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 85f726c

Please sign in to comment.