Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[CTI] updates Alert Summary UI #107081

Merged
merged 13 commits into from
Aug 3, 2021
Merged

[CTI] updates Alert Summary UI #107081

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
25c2809
updates Alert Summary UI
ecezalp Jul 28, 2021
386f212
Merge branch 'master' into 1474-2
kibanamachine Jul 28, 2021
c71a35b
incorporates Angela's changes
ecezalp Jul 29, 2021
1126fee
adds timeline support
ecezalp Jul 29, 2021
b8d8573
fixes test
ecezalp Jul 29, 2021
d1fe3a9
Merge branch 'master' into 1474-2
ecezalp Jul 29, 2021
1675427
remove unused prop
ecezalp Jul 29, 2021
43ef43d
fix type
ecezalp Jul 29, 2021
deb5694
Merge branch 'master' into 1474-2
kibanamachine Jul 29, 2021
3da36e9
Merge branch 'master' into 1474-2
kibanamachine Jul 29, 2021
885df9d
Merge branch 'master' into 1474-2
kibanamachine Aug 3, 2021
9976670
addresses comments
ecezalp Aug 3, 2021
aea2218
bring back lodash/fp to fix typeerror
ecezalp Aug 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion ...urity_solution/public/common/components/event_details/cti_details/threat_details_view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,6 @@ const ThreatDetailsViewComponent: React.FC<{
<h5>{i18n.INVESTIGATION_TOOLTIP_TITLE}</h5>
</EuiTitle>
<EuiSpacer size="xs" />
{/* TODO: Date form */}
rylnd marked this conversation as resolved.
Show resolved Hide resolved
<EuiText size="xs">
<FormattedMessage
id="xpack.securitySolution.alertDetails.threatDetails.investigationSubtitle"
Expand Down
22 changes: 19 additions & 3 deletions ...urity_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ import { FormattedFieldValue } from '../../../../timelines/components/timeline/b
import { CtiEnrichment } from '../../../../../common/search_strategy/security_solution/cti';
import { getEnrichmentIdentifiers } from './helpers';
import { EnrichmentIcon } from './enrichment_icon';
import { ActionCell } from '../table/action_cell';
import { TimelineEventsDetailsItem } from '../../../../../../timelines/common';
import { EventFieldsData } from '../types';

export interface ThreatSummaryItem {
title: {
Expand All @@ -28,6 +31,7 @@ export interface ThreatSummaryItem {
index: number;
value: string | undefined;
provider: string | undefined;
data: TimelineEventsDetailsItem | undefined;
};
}

Expand All @@ -54,6 +58,7 @@ const EnrichmentDescription: React.FC<ThreatSummaryItem['description']> = ({
index,
value,
provider,
data,
}) => {
const key = `alert-details-value-formatted-field-value-${timelineId}-${eventId}-${fieldName}-${value}-${index}-${provider}`;
return (
Expand Down Expand Up @@ -81,11 +86,20 @@ const EnrichmentDescription: React.FC<ThreatSummaryItem['description']> = ({
</RightMargin>
</>
)}
<ActionCell
data={(data ?? { field: fieldName }) as EventFieldsData}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we simply build an appropriate EventFieldsData from the existing parameters and what we know about these fields? I suspect that we don't need to pass data through all these layers like this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am seeking @angorayc's guidance on how to approach this piece as I haven't been able to find an implementation that utilizes EventFieldsData type (with no casting)

Copy link
Contributor

@rylnd rylnd Jul 28, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It might be simplest to "flatten" ActionCell's props to just what it needs; it looks like only a few properties from EventFieldsData are used in there (field, type, value, isObjectArray, and format), and some of those may be optional .

contextId={timelineId}
eventId={eventId}
isThreatMatch={true}
timelineId={timelineId}
values={value ? [value] : []}
/>
</>
);
};

const buildThreatSummaryItems = (
data: TimelineEventsDetailsItem[],
enrichments: CtiEnrichment[],
timelineId: string,
eventId: string
Expand All @@ -105,6 +119,7 @@ const buildThreatSummaryItems = (
provider,
timelineId,
value,
data: data.find((item) => item.field === field),
},
};
});
Expand All @@ -115,7 +130,7 @@ const columns: Array<EuiBasicTableColumn<ThreatSummaryItem>> = [
field: 'title',
truncateText: false,
render: EnrichmentTitle,
width: '160px',
width: '220px',
name: '',
},
{
Expand All @@ -130,13 +145,14 @@ const ThreatSummaryViewComponent: React.FC<{
enrichments: CtiEnrichment[];
timelineId: string;
eventId: string;
}> = ({ enrichments, timelineId, eventId }) => (
data: TimelineEventsDetailsItem[];
}> = ({ enrichments, timelineId, eventId, data }) => (
<Indent>
<StyledEuiInMemoryTable
columns={columns}
compressed
data-test-subj="threat-summary-view"
items={buildThreatSummaryItems(enrichments, timelineId, eventId)}
items={buildThreatSummaryItems(data, enrichments, timelineId, eventId)}
/>
</Indent>
);
Expand Down
1 change: 1 addition & 0 deletions x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@ const EventDetailsComponent: React.FC<Props> = ({
/>
{enrichmentCount > 0 && (
<ThreatSummaryView
data={data}
rylnd marked this conversation as resolved.
Show resolved Hide resolved
eventId={id}
timelineId={timelineId}
enrichments={allEnrichments}
Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/security_solution/public/common/components/event_details/helpers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,7 @@ export const getSummaryColumns = (
field: 'title',
truncateText: false,
render: getTitle,
width: '33%',
width: '220px',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there significance to this value? Was this specified by design, or is this intended to be more dynamic than fixed?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there is no particular significance, it is to ensure that the indentation is fixed. Previously this value was 160px for both AlertSummary and ThreatSummary items. Recently it was changed to 33% for AlertSummary only. To ensure the consistency between AlertSummary and ThreatSummary values, a change needed to be made. Viewing the designs, I thought that a fixed 220px was good to go. We can get confirmation from @yiyangliu9286 for this one.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the design changes in 7.15, we made the "value" field indent 8px from each section header since we have added the section header in 7.15, so which setting that allows the "value" field to be indented at the right position will work here.

name: '',
},
{
Expand Down
4 changes: 4 additions & 0 deletions ...ck/plugins/security_solution/public/common/components/event_details/table/action_cell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ interface Props {
eventId: string;
fieldFromBrowserField?: Readonly<Record<string, Partial<BrowserField>>>;
getLinkValue?: (field: string) => string | null;
isThreatMatch?: boolean;
linkValue?: string | null | undefined;
onFilterAdded?: () => void;
timelineId?: string;
Expand All @@ -35,6 +36,7 @@ export const ActionCell: React.FC<Props> = React.memo(
eventId,
fieldFromBrowserField,
getLinkValue,
isThreatMatch,
linkValue,
onFilterAdded,
timelineId,
Expand All @@ -49,6 +51,7 @@ export const ActionCell: React.FC<Props> = React.memo(
fieldFromBrowserField,
fieldType: data.type,
isObjectArray: data.isObjectArray,
isThreatMatch,
linkValue: (getLinkValue && getLinkValue(data.field)) ?? linkValue,
values,
});
Expand All @@ -67,6 +70,7 @@ export const ActionCell: React.FC<Props> = React.memo(
}, []);

const draggableIds = actionCellConfig?.idList.map((id) => getDraggableId(id));

return (
<HoverActions
dataType={data.type}
Expand Down
6 changes: 6 additions & 0 deletions ...ty_solution/public/common/components/event_details/table/use_action_cell_data_provider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export interface UseActionCellDataProvider {
fieldFromBrowserField?: Readonly<Record<string, Partial<BrowserField>>>;
fieldType?: string;
isObjectArray?: boolean;
isThreatMatch?: boolean;
linkValue?: string | null;
values: string[] | null | undefined;
}
Expand All @@ -48,6 +49,7 @@ export const useActionCellDataProvider = ({
fieldFromBrowserField,
fieldType,
isObjectArray,
isThreatMatch,
linkValue,
values,
}: UseActionCellDataProvider): { idList: string[]; stringValues: string[] } | null => {
Expand All @@ -61,6 +63,10 @@ export const useActionCellDataProvider = ({
let valueAsString: string = isString(value) ? value : `${values}`;
if (fieldFromBrowserField == null) {
stringifiedValues.push(valueAsString);
if (isThreatMatch) {
id = `threat-match-${contextId}-${field}-${value}-${eventId}`;
rylnd marked this conversation as resolved.
Show resolved Hide resolved
memo.push(id);
}
return memo;
}
const appendedUniqueId = `${contextId}-${eventId}-${field}-${index}-${value}-${eventId}-${field}-${value}`;
Expand Down