Skip to content

Commit 94b947e

Browse files
PhilippeObertiPhilippeOberti
authored
[Security Solution] expandable flyout - fix topN opening with Raw Events instead of Detection Alerts + add missing interaction in cell actions (elastic#164923)
1 parent 3935548 commit 94b947e

File tree

13 files changed

+81
-32
lines changed

13 files changed

+81
-32
lines changed

‎x-pack/plugins/security_solution/public/flyout/left/components/entities_details.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const ENTITIES_TAB_ID = 'entities-details';
1919
* Entities displayed in the document details expandable flyout left section under the Insights tab
2020
*/
2121
export const EntitiesDetails: React.FC = () => {
22-
const { getFieldsData } = useLeftPanelContext();
22+
const { getFieldsData, scopeId } = useLeftPanelContext();
2323
const hostName = getField(getFieldsData('host.name'));
2424
const userName = getField(getFieldsData('user.name'));
2525
const timestamp = getField(getFieldsData('@timestamp'));
@@ -28,12 +28,12 @@ export const EntitiesDetails: React.FC = () => {
2828
<EuiFlexGroup direction="column" gutterSize="m" data-test-subj={ENTITIES_DETAILS_TEST_ID}>
2929
{userName && timestamp && (
3030
<EuiFlexItem>
31-
<UserDetails userName={userName} timestamp={timestamp} />
31+
<UserDetails userName={userName} timestamp={timestamp} scopeId={scopeId} />
3232
</EuiFlexItem>
3333
)}
3434
{hostName && timestamp && (
3535
<EuiFlexItem>
36-
<HostDetails hostName={hostName} timestamp={timestamp} />
36+
<HostDetails hostName={hostName} timestamp={timestamp} scopeId={scopeId} />
3737
</EuiFlexItem>
3838
)}
3939
</EuiFlexGroup>

‎x-pack/plugins/security_solution/public/flyout/left/components/host_details.test.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@ const timestamp = '2022-07-25T08:20:18.966Z';
9191
const defaultProps = {
9292
hostName: 'test host',
9393
timestamp,
94+
scopeId: 'scopeId',
9495
};
9596

9697
const mockHostDetailsResponse = [

‎x-pack/plugins/security_solution/public/flyout/left/components/host_details.tsx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
EuiPanel,
2121
} from '@elastic/eui';
2222
import type { EuiBasicTableColumn } from '@elastic/eui';
23+
import { getSourcererScopeId } from '../../../helpers';
2324
import { ExpandablePanel } from '../../shared/components/expandable_panel';
2425
import type { RelatedUser } from '../../../../common/search_strategy/security_solution/related_entities/related_users';
2526
import type { RiskSeverity } from '../../../../common/search_strategy';
@@ -67,11 +68,16 @@ export interface HostDetailsProps {
6768
* timestamp of alert or event
6869
*/
6970
timestamp: string;
71+
/**
72+
* Maintain backwards compatibility // TODO remove when possible
73+
*/
74+
scopeId: string;
7075
}
76+
7177
/**
7278
* Host details and related users, displayed in the document details expandable flyout left section under the Insights tab, Entities tab
7379
*/
74-
export const HostDetails: React.FC<HostDetailsProps> = ({ hostName, timestamp }) => {
80+
export const HostDetails: React.FC<HostDetailsProps> = ({ hostName, timestamp, scopeId }) => {
7581
const { to, from, deleteQuery, setQuery, isInitializing } = useGlobalTime();
7682
const { selectedPatterns } = useSourcererDataView();
7783
const dispatch = useDispatch();
@@ -126,14 +132,16 @@ export const HostDetails: React.FC<HostDetailsProps> = ({ hostName, timestamp })
126132
render: (user: string) => (
127133
<EuiText grow={false} size="xs">
128134
<SecurityCellActions
129-
mode={CellActionsMode.HOVER_RIGHT}
130-
visibleCellActions={5}
131-
showActionTooltips
132-
triggerId={SecurityCellActionsTrigger.DEFAULT}
133135
data={{
134136
field: 'user.name',
135137
value: user,
136138
}}
139+
mode={CellActionsMode.HOVER_RIGHT}
140+
triggerId={SecurityCellActionsTrigger.DEFAULT} // TODO use SecurityCellActionsTrigger.DETAILS_FLYOUT when https://github.com/elastic/kibana/issues/155243 is fixed
141+
visibleCellActions={5} // TODO use 6 when https://github.com/elastic/kibana/issues/155243 is fixed
142+
sourcererScopeId={getSourcererScopeId(scopeId)}
143+
metadata={{ scopeId }}
144+
showActionTooltips
137145
>
138146
{user}
139147
</SecurityCellActions>
@@ -180,7 +188,7 @@ export const HostDetails: React.FC<HostDetailsProps> = ({ hostName, timestamp })
180188
]
181189
: []),
182190
],
183-
[isEntityAnalyticsAuthorized]
191+
[isEntityAnalyticsAuthorized, scopeId]
184192
);
185193

186194
const relatedUsersCount = useMemo(

‎x-pack/plugins/security_solution/public/flyout/left/components/user_details.test.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ const timestamp = '2022-07-25T08:20:18.966Z';
8888
const defaultProps = {
8989
userName: 'test user',
9090
timestamp,
91+
scopeId: 'scopeId',
9192
};
9293

9394
const mockUserDetailsResponse = [

‎x-pack/plugins/security_solution/public/flyout/left/components/user_details.tsx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
EuiPanel,
2121
} from '@elastic/eui';
2222
import type { EuiBasicTableColumn } from '@elastic/eui';
23+
import { getSourcererScopeId } from '../../../helpers';
2324
import { ExpandablePanel } from '../../shared/components/expandable_panel';
2425
import type { RelatedHost } from '../../../../common/search_strategy/security_solution/related_entities/related_hosts';
2526
import type { RiskSeverity } from '../../../../common/search_strategy';
@@ -67,11 +68,16 @@ export interface UserDetailsProps {
6768
* timestamp of alert or event
6869
*/
6970
timestamp: string;
71+
/**
72+
* Maintain backwards compatibility // TODO remove when possible
73+
*/
74+
scopeId: string;
7075
}
76+
7177
/**
7278
* User details and related users, displayed in the document details expandable flyout left section under the Insights tab, Entities tab
7379
*/
74-
export const UserDetails: React.FC<UserDetailsProps> = ({ userName, timestamp }) => {
80+
export const UserDetails: React.FC<UserDetailsProps> = ({ userName, timestamp, scopeId }) => {
7581
const { to, from, deleteQuery, setQuery, isInitializing } = useGlobalTime();
7682
const { selectedPatterns } = useSourcererDataView();
7783
const dispatch = useDispatch();
@@ -127,14 +133,16 @@ export const UserDetails: React.FC<UserDetailsProps> = ({ userName, timestamp })
127133
render: (host: string) => (
128134
<EuiText grow={false} size="xs">
129135
<SecurityCellActions
130-
mode={CellActionsMode.HOVER_RIGHT}
131-
visibleCellActions={5}
132-
showActionTooltips
133-
triggerId={SecurityCellActionsTrigger.DEFAULT}
134136
data={{
135137
value: host,
136138
field: 'host.name',
137139
}}
140+
mode={CellActionsMode.HOVER_RIGHT}
141+
triggerId={SecurityCellActionsTrigger.DEFAULT} // TODO use SecurityCellActionsTrigger.DETAILS_FLYOUT when https://github.com/elastic/kibana/issues/155243 is fixed
142+
visibleCellActions={5} // TODO use 6 when https://github.com/elastic/kibana/issues/155243 is fixed
143+
sourcererScopeId={getSourcererScopeId(scopeId)}
144+
metadata={{ scopeId }}
145+
showActionTooltips
138146
>
139147
{host}
140148
</SecurityCellActions>
@@ -181,7 +189,7 @@ export const UserDetails: React.FC<UserDetailsProps> = ({ userName, timestamp })
181189
]
182190
: []),
183191
],
184-
[isEntityAnalyticsAuthorized]
192+
[isEntityAnalyticsAuthorized, scopeId]
185193
);
186194

187195
const relatedHostsCount = useMemo(

‎x-pack/plugins/security_solution/public/flyout/preview/components/alert_reason_preview.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const ReasonPreviewContainer = styled.div``;
2626
* Alert reason renderer on a preview panel on top of the right section of expandable flyout
2727
*/
2828
export const AlertReasonPreview: React.FC = () => {
29-
const { dataAsNestedObject } = usePreviewPanelContext();
29+
const { dataAsNestedObject, scopeId } = usePreviewPanelContext();
3030

3131
const renderer = useMemo(
3232
() =>
@@ -43,10 +43,10 @@ export const AlertReasonPreview: React.FC = () => {
4343
contextId: 'event-details',
4444
data: dataAsNestedObject,
4545
isDraggable: false,
46-
scopeId: 'global',
46+
scopeId,
4747
})
4848
: null,
49-
[renderer, dataAsNestedObject]
49+
[renderer, dataAsNestedObject, scopeId]
5050
);
5151

5252
if (!dataAsNestedObject || !renderer) {

‎x-pack/plugins/security_solution/public/flyout/right/components/highlighted_fields.test.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ describe('<HighlightedFields />', () => {
2626
it('should render the component', () => {
2727
const panelContextValue = {
2828
dataFormattedForFieldBrowser: mockDataFormattedForFieldBrowser,
29+
scopeId: 'scopeId',
2930
} as unknown as RightPanelContext;
3031
(useHighlightedFields as jest.Mock).mockReturnValue({
3132
field: {
@@ -48,6 +49,7 @@ describe('<HighlightedFields />', () => {
4849
it(`should render empty component if there aren't any highlighted fields`, () => {
4950
const panelContextValue = {
5051
dataFormattedForFieldBrowser: mockDataFormattedForFieldBrowser,
52+
scopeId: 'scopeId',
5153
} as unknown as RightPanelContext;
5254
(useHighlightedFields as jest.Mock).mockReturnValue({});
5355

@@ -63,6 +65,7 @@ describe('<HighlightedFields />', () => {
6365
it('should render empty component if dataFormattedForFieldBrowser is null', () => {
6466
const panelContextValue = {
6567
dataFormattedForFieldBrowser: null,
68+
scopeId: 'scopeId',
6669
} as unknown as RightPanelContext;
6770
(useHighlightedFields as jest.Mock).mockReturnValue({
6871
field: {

‎x-pack/plugins/security_solution/public/flyout/right/components/highlighted_fields.tsx‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import type { FC } from 'react';
99
import React, { useMemo } from 'react';
1010
import type { EuiBasicTableColumn } from '@elastic/eui';
1111
import { EuiFlexGroup, EuiFlexItem, EuiInMemoryTable, EuiPanel, EuiTitle } from '@elastic/eui';
12+
import { getSourcererScopeId } from '../../../helpers';
1213
import { convertHighlightedFieldsToTableRow } from '../../shared/utils/highlighted_fields_helpers';
1314
import { useRuleWithFallback } from '../../../detection_engine/rule_management/logic/use_rule_with_fallback';
1415
import { useBasicDataFromDetailsData } from '../../../timelines/components/side_panel/event_details/helpers';
@@ -41,6 +42,10 @@ export interface HighlightedFieldsTableRow {
4142
* Highlighted field value
4243
*/
4344
values: string[] | null | undefined;
45+
/**
46+
* Maintain backwards compatibility // TODO remove when possible
47+
*/
48+
scopeId: string;
4449
};
4550
}
4651

@@ -54,15 +59,21 @@ const columns: Array<EuiBasicTableColumn<HighlightedFieldsTableRow>> = [
5459
field: 'description',
5560
name: HIGHLIGHTED_FIELDS_VALUE_COLUMN,
5661
'data-test-subj': 'valueCell',
57-
render: (description: { field: string; values: string[] | null | undefined }) => (
62+
render: (description: {
63+
field: string;
64+
values: string[] | null | undefined;
65+
scopeId: string;
66+
}) => (
5867
<SecurityCellActions
5968
data={{
6069
field: description.field,
6170
value: description.values,
6271
}}
6372
mode={CellActionsMode.HOVER_RIGHT}
64-
triggerId={SecurityCellActionsTrigger.DEFAULT}
65-
visibleCellActions={6}
73+
triggerId={SecurityCellActionsTrigger.DEFAULT} // TODO use SecurityCellActionsTrigger.DETAILS_FLYOUT when https://github.com/elastic/kibana/issues/155243 is fixed
74+
visibleCellActions={5} // TODO use 6 when https://github.com/elastic/kibana/issues/155243 is fixed
75+
sourcererScopeId={getSourcererScopeId(description.scopeId)}
76+
metadata={{ scopeId: description.scopeId }}
6677
>
6778
<HighlightedFieldsCell values={description.values} field={description.field} />
6879
</SecurityCellActions>
@@ -74,7 +85,7 @@ const columns: Array<EuiBasicTableColumn<HighlightedFieldsTableRow>> = [
7485
* Component that displays the highlighted fields in the right panel under the Investigation section.
7586
*/
7687
export const HighlightedFields: FC = () => {
77-
const { dataFormattedForFieldBrowser } = useRightPanelContext();
88+
const { dataFormattedForFieldBrowser, scopeId } = useRightPanelContext();
7889
const { ruleId } = useBasicDataFromDetailsData(dataFormattedForFieldBrowser);
7990
const { rule: maybeRule } = useRuleWithFallback(ruleId);
8091

@@ -83,8 +94,8 @@ export const HighlightedFields: FC = () => {
8394
investigationFields: maybeRule?.investigation_fields ?? [],
8495
});
8596
const items = useMemo(
86-
() => convertHighlightedFieldsToTableRow(highlightedFields),
87-
[highlightedFields]
97+
() => convertHighlightedFieldsToTableRow(highlightedFields, scopeId),
98+
[highlightedFields, scopeId]
8899
);
89100

90101
if (!dataFormattedForFieldBrowser || items.length === 0) {

‎x-pack/plugins/security_solution/public/flyout/right/components/severity.test.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ describe('<DocumentSeverity />', () => {
2020
it('should render severity information', () => {
2121
const contextValue = {
2222
getFieldsData: jest.fn().mockImplementation(mockGetFieldsData),
23+
scopeId: 'scopeId',
2324
} as unknown as RightPanelContext;
2425

2526
const { getByTestId } = render(
@@ -39,6 +40,7 @@ describe('<DocumentSeverity />', () => {
3940
it('should render empty component if missing getFieldsData value', () => {
4041
const contextValue = {
4142
getFieldsData: jest.fn(),
43+
scopeId: 'scopeId',
4244
} as unknown as RightPanelContext;
4345

4446
const { container } = render(
@@ -53,6 +55,7 @@ describe('<DocumentSeverity />', () => {
5355
it('should render empty component if getFieldsData is invalid array', () => {
5456
const contextValue = {
5557
getFieldsData: jest.fn().mockImplementation(() => ['abc']),
58+
scopeId: 'scopeId',
5659
} as unknown as RightPanelContext;
5760

5861
const { container } = render(
@@ -67,6 +70,7 @@ describe('<DocumentSeverity />', () => {
6770
it('should render empty component if getFieldsData is invalid string', () => {
6871
const contextValue = {
6972
getFieldsData: jest.fn().mockImplementation(() => 'abc'),
73+
scopeId: 'scopeId',
7074
} as unknown as RightPanelContext;
7175

7276
const { container } = render(

‎x-pack/plugins/security_solution/public/flyout/right/components/severity.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
1111
import { ALERT_SEVERITY } from '@kbn/rule-data-utils';
1212
import type { Severity } from '@kbn/securitysolution-io-ts-alerting-types';
1313
import { CellActionsMode } from '@kbn/cell-actions';
14+
import { getSourcererScopeId } from '../../../helpers';
1415
import { SecurityCellActions } from '../../../common/components/cell_actions';
1516
import { SecurityCellActionsTrigger } from '../../../actions/constants';
1617
import { SEVERITY_TITLE } from './translations';
@@ -25,7 +26,7 @@ const isSeverity = (x: unknown): x is Severity =>
2526
* Document details severity displayed in flyout right section header
2627
*/
2728
export const DocumentSeverity: FC = memo(() => {
28-
const { getFieldsData } = useRightPanelContext();
29+
const { getFieldsData, scopeId } = useRightPanelContext();
2930
const fieldsData = getFieldsData(ALERT_SEVERITY);
3031

3132
if (!fieldsData) {
@@ -55,8 +56,10 @@ export const DocumentSeverity: FC = memo(() => {
5556
value: alertSeverity,
5657
}}
5758
mode={CellActionsMode.HOVER_RIGHT}
58-
triggerId={SecurityCellActionsTrigger.DEFAULT}
59-
visibleCellActions={6}
59+
triggerId={SecurityCellActionsTrigger.DEFAULT} // TODO use SecurityCellActionsTrigger.DETAILS_FLYOUT when https://github.com/elastic/kibana/issues/155243 is fixed
60+
visibleCellActions={5} // TODO use 6 when https://github.com/elastic/kibana/issues/155243 is fixed
61+
sourcererScopeId={getSourcererScopeId(scopeId)}
62+
metadata={{ scopeId }}
6063
>
6164
<SeverityBadge value={alertSeverity} />
6265
</SecurityCellActions>

0 commit comments

Comments
 (0)