Skip to content

Commit

Permalink
preview links in flyout
Browse files Browse the repository at this point in the history
  • Loading branch information
@christineweng
christineweng committed Aug 28, 2024
1 parent 6bb38c8 commit 3b709f7
Show file tree
Hide file tree
Showing 31 changed files with 611 additions and 476 deletions.
16 changes: 14 additions & 2 deletions ...ns/security_solution/public/flyout/document_details/left/components/host_details.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
HOST_DETAILS_RELATED_USERS_TABLE_TEST_ID,
HOST_DETAILS_LINK_TEST_ID,
HOST_DETAILS_RELATED_USERS_LINK_TEST_ID,
HOST_DETAILS_RELATED_USERS_IP_LINK_TEST_ID,
} from './test_ids';
import { EXPANDABLE_PANEL_CONTENT_TEST_ID } from '@kbn/security-solution-common';
import { useRiskScore } from '../../../../entity_analytics/api/hooks/use_risk_score';
Expand All @@ -33,6 +34,7 @@ import { HostPreviewPanelKey } from '../../../entity_details/host_right';
import { HOST_PREVIEW_BANNER } from '../../right/components/host_entity_overview';
import { UserPreviewPanelKey } from '../../../entity_details/user_right';
import { USER_PREVIEW_BANNER } from '../../right/components/user_entity_overview';
import { NetworkPanelKey, NETWORK_PREVIEW_BANNER } from '../../../network_details';

jest.mock('@kbn/expandable-flyout');

Expand Down Expand Up @@ -164,7 +166,7 @@ describe('<HostDetails />', () => {
expect(queryByTestId(HOST_DETAILS_LINK_TEST_ID)).not.toBeInTheDocument();
});

it('should render host name as clicable link when feature flag is true', () => {
it('should render host name as clicable link when preview is not disabled', () => {
mockUseIsExperimentalFeatureEnabled.mockReturnValue(false);
const { getByTestId } = renderHostDetails(mockContextValue);
expect(getByTestId(HOST_DETAILS_LINK_TEST_ID)).toBeInTheDocument();
Expand Down Expand Up @@ -268,7 +270,7 @@ describe('<HostDetails />', () => {
);
});

it('should render user name as clicable link when feature flag is true', () => {
it('should render user name as clicable link when preview is not disabled', () => {
mockUseIsExperimentalFeatureEnabled.mockReturnValue(false);
const { getAllByTestId } = renderHostDetails(mockContextValue);
expect(getAllByTestId(HOST_DETAILS_RELATED_USERS_LINK_TEST_ID).length).toBe(1);
Expand All @@ -282,6 +284,16 @@ describe('<HostDetails />', () => {
banner: USER_PREVIEW_BANNER,
},
});

getAllByTestId(HOST_DETAILS_RELATED_USERS_IP_LINK_TEST_ID)[0].click();
expect(mockFlyoutApi.openPreviewPanel).toHaveBeenCalledWith({
id: NetworkPanelKey,
params: {
ip: '100.XXX.XXX',
flowTarget: 'source',
banner: NETWORK_PREVIEW_BANNER,
},
});
});
});
});
58 changes: 27 additions & 31 deletions ...plugins/security_solution/public/flyout/document_details/left/components/host_details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import {
EuiToolTip,
EuiIcon,
EuiPanel,
EuiLink,
} from '@elastic/eui';
import type { EuiBasicTableColumn } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
Expand All @@ -36,7 +35,7 @@ import { RiskScoreEntity } from '../../../../../common/search_strategy';
import { RiskScoreLevel } from '../../../../entity_analytics/components/severity/common';
import { DefaultFieldRenderer } from '../../../../timelines/components/field_renderers/default_renderer';
import { InputsModelId } from '../../../../common/store/inputs/constants';
import { CellActions } from './cell_actions';
import { CellActions } from '../../shared/components/cell_actions';
import { useGlobalTime } from '../../../../common/containers/use_global_time';
import { useSourcererDataView } from '../../../../sourcerer/containers';
import { manageQuery } from '../../../../common/components/page/manage_query';
Expand All @@ -51,14 +50,18 @@ import {
HOST_DETAILS_TEST_ID,
HOST_DETAILS_RELATED_USERS_TABLE_TEST_ID,
HOST_DETAILS_RELATED_USERS_LINK_TEST_ID,
HOST_DETAILS_RELATED_USERS_IP_LINK_TEST_ID,
} from './test_ids';
import {
USER_NAME_FIELD_NAME,
HOST_IP_FIELD_NAME,
} from '../../../../timelines/components/timeline/body/renderers/constants';
import { useKibana } from '../../../../common/lib/kibana';
import { ENTITY_RISK_LEVEL } from '../../../../entity_analytics/components/risk_score/translations';
import { useHasSecurityCapability } from '../../../../helper_hooks';
import { PreviewLink } from '../../shared/components/preview_link';
import { HostPreviewPanelKey } from '../../../entity_details/host_right';
import { HOST_PREVIEW_BANNER } from '../../right/components/host_entity_overview';
import { UserPreviewPanelKey } from '../../../entity_details/user_right';
import { USER_PREVIEW_BANNER } from '../../right/components/user_entity_overview';

const HOST_DETAILS_ID = 'entities-hosts-details';
const RELATED_USERS_ID = 'entities-hosts-related-users';
Expand Down Expand Up @@ -128,24 +131,6 @@ export const HostDetails: React.FC<HostDetailsProps> = ({ hostName, timestamp, s
});
}, [openPreviewPanel, hostName, scopeId, telemetry]);

const openUserPreview = useCallback(
(userName: string) => {
openPreviewPanel({
id: UserPreviewPanelKey,
params: {
userName,
scopeId,
banner: USER_PREVIEW_BANNER,
},
});
telemetry.reportDetailsFlyoutOpened({
location: scopeId,
panel: 'preview',
});
},
[openPreviewPanel, scopeId, telemetry]
);

const [isHostLoading, { inspect, hostDetails, refetch }] = useHostDetails({
id: hostDetailsQueryId,
startDate: from,
Expand Down Expand Up @@ -180,14 +165,13 @@ export const HostDetails: React.FC<HostDetailsProps> = ({ hostName, timestamp, s
),
render: (user: string) => (
<EuiText grow={false} size="xs">
<CellActions field={'user.name'} value={user}>
<CellActions field={USER_NAME_FIELD_NAME} value={user}>
{isPreviewEnabled ? (
<EuiLink
<PreviewLink
field={USER_NAME_FIELD_NAME}
value={user}
data-test-subj={HOST_DETAILS_RELATED_USERS_LINK_TEST_ID}
onClick={() => openUserPreview(user)}
>
{user}
</EuiLink>
/>
) : (
<>{user}</>
)}
Expand All @@ -207,10 +191,22 @@ export const HostDetails: React.FC<HostDetailsProps> = ({ hostName, timestamp, s
return (
<DefaultFieldRenderer
rowItems={ips}
attrName={'host.ip'}
attrName={HOST_IP_FIELD_NAME}
idPrefix={''}
isDraggable={false}
render={(ip) => (ip != null ? <NetworkDetailsLink ip={ip} /> : getEmptyTagValue())}
render={(ip) =>
ip == null ? (
getEmptyTagValue()
) : isPreviewEnabled ? (
<PreviewLink
field={HOST_IP_FIELD_NAME}
value={ip}
data-test-subj={HOST_DETAILS_RELATED_USERS_IP_LINK_TEST_ID}
/>
) : (
<NetworkDetailsLink ip={ip} />
)
}
scopeId={scopeId}
/>
);
Expand All @@ -234,7 +230,7 @@ export const HostDetails: React.FC<HostDetailsProps> = ({ hostName, timestamp, s
]
: []),
],
[isEntityAnalyticsAuthorized, scopeId, isPreviewEnabled, openUserPreview]
[isEntityAnalyticsAuthorized, scopeId, isPreviewEnabled]
);

const relatedUsersCount = useMemo(
Expand Down
19 changes: 9 additions & 10 deletions ...urity_solution/public/flyout/document_details/left/components/prevalence_details.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@ import {
PREVALENCE_DETAILS_UPSELL_TEST_ID,
PREVALENCE_DETAILS_TABLE_USER_PREVALENCE_CELL_TEST_ID,
PREVALENCE_DETAILS_TABLE_VALUE_CELL_TEST_ID,
PREVALENCE_DETAILS_TABLE_HOST_LINK_CELL_TEST_ID,
PREVALENCE_DETAILS_TABLE_USER_LINK_CELL_TEST_ID,
PREVALENCE_DETAILS_TABLE_PREVIEW_LINK_CELL_TEST_ID,
PREVALENCE_DETAILS_TABLE_UPSELL_CELL_TEST_ID,
} from './test_ids';
import { usePrevalence } from '../../shared/hooks/use_prevalence';
Expand Down Expand Up @@ -151,19 +150,19 @@ describe('PrevalenceDetails', () => {
).toBeGreaterThan(1);
expect(queryByTestId(PREVALENCE_DETAILS_UPSELL_TEST_ID)).not.toBeInTheDocument();
expect(queryByText(NO_DATA_MESSAGE)).not.toBeInTheDocument();
expect(queryByTestId(PREVALENCE_DETAILS_TABLE_HOST_LINK_CELL_TEST_ID)).not.toBeInTheDocument();
expect(queryByTestId(PREVALENCE_DETAILS_TABLE_USER_LINK_CELL_TEST_ID)).not.toBeInTheDocument();
expect(
queryByTestId(PREVALENCE_DETAILS_TABLE_PREVIEW_LINK_CELL_TEST_ID)
).not.toBeInTheDocument();
});

it('should render host and user name as clickable link if feature flag is true', () => {
it('should render host and user name as clickable link if preview is enabled', () => {
mockUseIsExperimentalFeatureEnabled.mockReturnValue(false);
(usePrevalence as jest.Mock).mockReturnValue(mockPrevelanceReturnValue);

const { getByTestId } = renderPrevalenceDetails();
expect(getByTestId(PREVALENCE_DETAILS_TABLE_HOST_LINK_CELL_TEST_ID)).toBeInTheDocument();
expect(getByTestId(PREVALENCE_DETAILS_TABLE_USER_LINK_CELL_TEST_ID)).toBeInTheDocument();
const { getAllByTestId } = renderPrevalenceDetails();
expect(getAllByTestId(PREVALENCE_DETAILS_TABLE_PREVIEW_LINK_CELL_TEST_ID)).toHaveLength(2);

getByTestId(PREVALENCE_DETAILS_TABLE_HOST_LINK_CELL_TEST_ID).click();
getAllByTestId(PREVALENCE_DETAILS_TABLE_PREVIEW_LINK_CELL_TEST_ID)[0].click();
expect(mockFlyoutApi.openPreviewPanel).toHaveBeenCalledWith({
id: HostPreviewPanelKey,
params: {
Expand All @@ -173,7 +172,7 @@ describe('PrevalenceDetails', () => {
},
});

getByTestId(PREVALENCE_DETAILS_TABLE_USER_LINK_CELL_TEST_ID).click();
getAllByTestId(PREVALENCE_DETAILS_TABLE_PREVIEW_LINK_CELL_TEST_ID)[1].click();
expect(mockFlyoutApi.openPreviewPanel).toHaveBeenCalledWith({
id: UserPreviewPanelKey,
params: {
Expand Down
111 changes: 19 additions & 92 deletions ...s/security_solution/public/flyout/document_details/left/components/prevalence_details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*/

import dateMath from '@elastic/datemath';
import React, { useMemo, useState, useCallback } from 'react';
import React, { useMemo, useState } from 'react';
import type { EuiBasicTableColumn, OnTimeChangeProps } from '@elastic/eui';
import {
EuiCallOut,
Expand All @@ -22,7 +22,6 @@ import {
useEuiTheme,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
import { FormattedCount } from '../../../../common/components/formatted_number';
import { useLicense } from '../../../../common/hooks/use_license';
Expand All @@ -34,9 +33,8 @@ import {
PREVALENCE_DETAILS_TABLE_DOC_COUNT_CELL_TEST_ID,
PREVALENCE_DETAILS_TABLE_HOST_PREVALENCE_CELL_TEST_ID,
PREVALENCE_DETAILS_TABLE_VALUE_CELL_TEST_ID,
PREVALENCE_DETAILS_TABLE_HOST_LINK_CELL_TEST_ID,
PREVALENCE_DETAILS_TABLE_USER_LINK_CELL_TEST_ID,
PREVALENCE_DETAILS_TABLE_FIELD_CELL_TEST_ID,
PREVALENCE_DETAILS_TABLE_PREVIEW_LINK_CELL_TEST_ID,
PREVALENCE_DETAILS_TABLE_USER_PREVALENCE_CELL_TEST_ID,
PREVALENCE_DETAILS_DATE_PICKER_TEST_ID,
PREVALENCE_DETAILS_TABLE_TEST_ID,
Expand All @@ -50,15 +48,8 @@ import {
} from '../../../../common/components/event_details/use_action_cell_data_provider';
import { getEmptyTagValue } from '../../../../common/components/empty_value';
import { IS_OPERATOR } from '../../../../../common/types';
import { useKibana } from '../../../../common/lib/kibana';
import {
HOST_NAME_FIELD_NAME,
USER_NAME_FIELD_NAME,
} from '../../../../timelines/components/timeline/body/renderers/constants';
import { HostPreviewPanelKey } from '../../../entity_details/host_right';
import { HOST_PREVIEW_BANNER } from '../../right/components/host_entity_overview';
import { UserPreviewPanelKey } from '../../../entity_details/user_right';
import { USER_PREVIEW_BANNER } from '../../right/components/user_entity_overview';
import { hasPreview, PreviewLink } from '../../shared/components/preview_link';
import { CellActions } from '../../shared/components/cell_actions';

export const PREVALENCE_TAB_ID = 'prevalence';
const DEFAULT_FROM = 'now-30d';
Expand Down Expand Up @@ -94,14 +85,6 @@ interface PrevalenceDetailsRow extends PrevalenceData {
* If enabled, clicking host or user should open an entity preview
*/
isPreviewEnabled: boolean;
/**
* Callback to open host preview
*/
openHostPreview: (hostName: string) => void;
/**
* Callback to open user preview
*/
openUserPreview: (userName: string) => void;
}

const columns: Array<EuiBasicTableColumn<PrevalenceDetailsRow>> = [
Expand All @@ -128,33 +111,26 @@ const columns: Array<EuiBasicTableColumn<PrevalenceDetailsRow>> = [
render: (data: PrevalenceDetailsRow) => (
<EuiFlexGroup direction="column" gutterSize="none">
{data.values.map((value) => {
if (data.isPreviewEnabled && data.field === HOST_NAME_FIELD_NAME) {
return (
<EuiFlexItem key={value}>
<EuiLink
data-test-subj={PREVALENCE_DETAILS_TABLE_HOST_LINK_CELL_TEST_ID}
onClick={() => data.openHostPreview(value)}
>
<EuiText size="xs">{value}</EuiText>
</EuiLink>
</EuiFlexItem>
);
}
if (data.isPreviewEnabled && data.field === USER_NAME_FIELD_NAME) {
if (data.isPreviewEnabled && hasPreview(data.field)) {
return (
<EuiFlexItem key={value}>
<EuiLink
data-test-subj={PREVALENCE_DETAILS_TABLE_USER_LINK_CELL_TEST_ID}
onClick={() => data.openUserPreview(value)}
>
<EuiText size="xs">{value}</EuiText>
</EuiLink>
<CellActions field={data.field} value={value}>
<PreviewLink
field={data.field}
value={value}
data-test-subj={PREVALENCE_DETAILS_TABLE_PREVIEW_LINK_CELL_TEST_ID}
>
<EuiText size="xs">{value}</EuiText>
</PreviewLink>
</CellActions>
</EuiFlexItem>
);
}
return (
<EuiFlexItem key={value}>
<EuiText size="xs">{value}</EuiText>
<CellActions field={data.field} value={value}>
<EuiText size="xs">{value}</EuiText>
</CellActions>
</EuiFlexItem>
);
})}
Expand Down Expand Up @@ -346,10 +322,7 @@ const columns: Array<EuiBasicTableColumn<PrevalenceDetailsRow>> = [
* Prevalence table displayed in the document details expandable flyout left section under the Insights tab
*/
export const PrevalenceDetails: React.FC = () => {
const { dataFormattedForFieldBrowser, investigationFields, scopeId } =
useDocumentDetailsContext();
const { openPreviewPanel } = useExpandableFlyoutApi();
const { telemetry } = useKibana().services;
const { dataFormattedForFieldBrowser, investigationFields } = useDocumentDetailsContext();

const isPlatinumPlus = useLicense().isPlatinumPlus();
const isPreviewEnabled = !useIsExperimentalFeatureEnabled('entityAlertPreviewDisabled');
Expand Down Expand Up @@ -395,42 +368,6 @@ export const PrevalenceDetails: React.FC = () => {
},
});

const openHostPreview = useCallback(
(hostName: string) => {
openPreviewPanel({
id: HostPreviewPanelKey,
params: {
hostName,
scopeId,
banner: HOST_PREVIEW_BANNER,
},
});
telemetry.reportDetailsFlyoutOpened({
location: scopeId,
panel: 'preview',
});
},
[openPreviewPanel, scopeId, telemetry]
);

const openUserPreview = useCallback(
(userName: string) => {
openPreviewPanel({
id: UserPreviewPanelKey,
params: {
userName,
scopeId,
banner: USER_PREVIEW_BANNER,
},
});
telemetry.reportDetailsFlyoutOpened({
location: scopeId,
panel: 'preview',
});
},
[openPreviewPanel, scopeId, telemetry]
);

// add timeRange to pass it down to timeline and license to drive the rendering of the last 2 prevalence columns
const items = useMemo(
() =>
Expand All @@ -440,18 +377,8 @@ export const PrevalenceDetails: React.FC = () => {
to: absoluteEnd,
isPlatinumPlus,
isPreviewEnabled,
openHostPreview,
openUserPreview,
})),
[
data,
absoluteStart,
absoluteEnd,
isPlatinumPlus,
isPreviewEnabled,
openHostPreview,
openUserPreview,
]
[data, absoluteStart, absoluteEnd, isPlatinumPlus, isPreviewEnabled]
);

const upsell = (
Expand Down
Loading

0 comments on commit 3b709f7

Please sign in to comment.