From be890bc93d244deecf7e74f86cc4b2d880043cb9 Mon Sep 17 00:00:00 2001 From: christineweng Date: Mon, 28 Aug 2023 12:20:36 -0500 Subject: [PATCH 1/2] risk score ui --- .../components/host_entity_overview.test.tsx | 6 +++- .../right/components/host_entity_overview.tsx | 32 ++++++++++++++----- .../flyout/right/components/test_ids.ts | 2 ++ .../flyout/right/components/translations.ts | 5 +++ .../components/user_entity_overview.test.tsx | 6 +++- .../right/components/user_entity_overview.tsx | 31 +++++++++++++----- 6 files changed, 64 insertions(+), 18 deletions(-) diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/host_entity_overview.test.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/host_entity_overview.test.tsx index 8b61c823fb299..453957049759b 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/host_entity_overview.test.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/components/host_entity_overview.test.tsx @@ -16,6 +16,7 @@ import { ENTITIES_HOST_OVERVIEW_LAST_SEEN_TEST_ID, ENTITIES_HOST_OVERVIEW_LINK_TEST_ID, ENTITIES_HOST_OVERVIEW_RISK_LEVEL_TEST_ID, + TECHNICAL_PREVIEW_ICON_TEST_ID, } from './test_ids'; import { RightPanelContext } from '../context'; import { mockContextValue } from '../mocks/mock_right_panel_context'; @@ -82,6 +83,7 @@ describe('', () => { expect(getByTestId(ENTITIES_HOST_OVERVIEW_OS_FAMILY_TEST_ID)).toHaveTextContent(osFamily); expect(getByTestId(ENTITIES_HOST_OVERVIEW_RISK_LEVEL_TEST_ID)).toHaveTextContent('Medium'); + expect(getByTestId(TECHNICAL_PREVIEW_ICON_TEST_ID)).toBeInTheDocument(); }); it('should render correctly if returned data is null', () => { @@ -96,7 +98,8 @@ describe('', () => { ); expect(getByTestId(ENTITIES_HOST_OVERVIEW_OS_FAMILY_TEST_ID)).toHaveTextContent('—'); - expect(getByTestId(ENTITIES_HOST_OVERVIEW_RISK_LEVEL_TEST_ID)).toHaveTextContent('Unknown'); + expect(getByTestId(ENTITIES_HOST_OVERVIEW_RISK_LEVEL_TEST_ID)).toHaveTextContent('—'); + expect(getByTestId(TECHNICAL_PREVIEW_ICON_TEST_ID)).toBeInTheDocument(); }); }); @@ -117,6 +120,7 @@ describe('', () => { expect(getByTestId(ENTITIES_HOST_OVERVIEW_OS_FAMILY_TEST_ID)).toHaveTextContent(osFamily); expect(getByTestId(ENTITIES_HOST_OVERVIEW_LAST_SEEN_TEST_ID)).toHaveTextContent(lastSeenText); expect(queryByTestId(ENTITIES_HOST_OVERVIEW_RISK_LEVEL_TEST_ID)).not.toBeInTheDocument(); + expect(queryByTestId(TECHNICAL_PREVIEW_ICON_TEST_ID)).not.toBeInTheDocument(); }); it('should render correctly if returned data is null', () => { diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/host_entity_overview.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/host_entity_overview.tsx index 18cac803894a9..9afb12686b73b 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/host_entity_overview.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/components/host_entity_overview.tsx @@ -13,6 +13,7 @@ import { EuiIcon, useEuiTheme, useEuiFontSize, + EuiBetaBadge, } from '@elastic/eui'; import { css } from '@emotion/css'; import { getOr } from 'lodash/fp'; @@ -23,11 +24,8 @@ import { FirstLastSeen, FirstLastSeenType, } from '../../../common/components/first_last_seen/first_last_seen'; -import { - buildHostNamesFilter, - RiskScoreEntity, - RiskSeverity, -} from '../../../../common/search_strategy'; +import { buildHostNamesFilter, RiskScoreEntity } from '../../../../common/search_strategy'; +import { getEmptyTagValue } from '../../../common/components/empty_value'; import { DefaultFieldRenderer } from '../../../timelines/components/field_renderers/field_renderers'; import { DescriptionListStyled } from '../../../common/components/page'; import { OverviewDescriptionList } from '../../../common/components/overview_description_list'; @@ -44,7 +42,9 @@ import { ENTITIES_HOST_OVERVIEW_LAST_SEEN_TEST_ID, ENTITIES_HOST_OVERVIEW_RISK_LEVEL_TEST_ID, ENTITIES_HOST_OVERVIEW_LINK_TEST_ID, + TECHNICAL_PREVIEW_ICON_TEST_ID, } from './test_ids'; +import { TECHNICAL_PREVIEW_TITLE, TECHNICAL_PREVIEW_MESSAGE } from './translations'; import { LeftPanelInsightsTab, LeftPanelKey } from '../../left'; const HOST_ICON = 'storage'; @@ -146,19 +146,35 @@ export const HostEntityOverview: React.FC = ({ hostName const hostRiskData = hostRisk && hostRisk.length > 0 ? hostRisk[0] : undefined; return [ { - title: i18n.HOST_RISK_CLASSIFICATION, + title: ( + <> + {i18n.HOST_RISK_CLASSIFICATION} + + + ), description: ( <> {hostRiskData ? ( ) : ( - + getEmptyTagValue() )} ), }, ]; - }, [hostRisk]); + }, [hostRisk, euiTheme.size.xs]); return ( diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/test_ids.ts b/x-pack/plugins/security_solution/public/flyout/right/components/test_ids.ts index 0d7bac7493e6a..c4eb67f5ddba9 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/test_ids.ts +++ b/x-pack/plugins/security_solution/public/flyout/right/components/test_ids.ts @@ -95,6 +95,8 @@ export const ENTITIES_HOST_OVERVIEW_LINK_TEST_ID = `${ENTITIES_HOST_OVERVIEW_TES export const ENTITIES_HOST_OVERVIEW_OS_FAMILY_TEST_ID = `${ENTITIES_HOST_OVERVIEW_TEST_ID}OsFamily`; export const ENTITIES_HOST_OVERVIEW_LAST_SEEN_TEST_ID = `${ENTITIES_HOST_OVERVIEW_TEST_ID}LastSeen`; export const ENTITIES_HOST_OVERVIEW_RISK_LEVEL_TEST_ID = `${ENTITIES_HOST_OVERVIEW_TEST_ID}RiskLevel`; +export const TECHNICAL_PREVIEW_ICON_TEST_ID = + 'securitySolutionDocumentDetailsFlyoutTechnicalPreviewIcon'; /* Insights Threat Intelligence */ diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/translations.ts b/x-pack/plugins/security_solution/public/flyout/right/components/translations.ts index 24df07b006401..3a04a68ac0ebf 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/translations.ts +++ b/x-pack/plugins/security_solution/public/flyout/right/components/translations.ts @@ -300,6 +300,11 @@ export const RESPONSE_EMPTY = i18n.translate('xpack.securitySolution.flyout.resp defaultMessage: 'There are no response actions defined for this event.', }); +export const TECHNICAL_PREVIEW_TITLE = i18n.translate( + 'xpack.securitySolution.flyout.documentDetails.technicalPreviewTitle', + { defaultMessage: 'Technical preview' } +); + export const TECHNICAL_PREVIEW_MESSAGE = i18n.translate( 'xpack.securitySolution.flyout.documentDetails.technicalPreviewMessage', { diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/user_entity_overview.test.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/user_entity_overview.test.tsx index 4739130949e96..db862460aeca5 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/user_entity_overview.test.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/components/user_entity_overview.test.tsx @@ -15,6 +15,7 @@ import { ENTITIES_USER_OVERVIEW_LAST_SEEN_TEST_ID, ENTITIES_USER_OVERVIEW_LINK_TEST_ID, ENTITIES_USER_OVERVIEW_RISK_LEVEL_TEST_ID, + TECHNICAL_PREVIEW_ICON_TEST_ID, } from './test_ids'; import { useObservedUserDetails } from '../../../explore/users/containers/users/observed_details'; import { mockContextValue } from '../mocks/mock_right_panel_context'; @@ -82,6 +83,7 @@ describe('', () => { expect(getByTestId(ENTITIES_USER_OVERVIEW_DOMAIN_TEST_ID)).toHaveTextContent(domain); expect(getByTestId(ENTITIES_USER_OVERVIEW_RISK_LEVEL_TEST_ID)).toHaveTextContent('Medium'); + expect(getByTestId(TECHNICAL_PREVIEW_ICON_TEST_ID)).toBeInTheDocument(); }); it('should render correctly if returned data is null', () => { @@ -96,7 +98,8 @@ describe('', () => { ); expect(getByTestId(ENTITIES_USER_OVERVIEW_DOMAIN_TEST_ID)).toHaveTextContent('—'); - expect(getByTestId(ENTITIES_USER_OVERVIEW_RISK_LEVEL_TEST_ID)).toHaveTextContent('Unknown'); + expect(getByTestId(ENTITIES_USER_OVERVIEW_RISK_LEVEL_TEST_ID)).toHaveTextContent('—'); + expect(getByTestId(TECHNICAL_PREVIEW_ICON_TEST_ID)).toBeInTheDocument(); }); }); @@ -117,6 +120,7 @@ describe('', () => { expect(getByTestId(ENTITIES_USER_OVERVIEW_DOMAIN_TEST_ID)).toHaveTextContent(domain); expect(getByTestId(ENTITIES_USER_OVERVIEW_LAST_SEEN_TEST_ID)).toHaveTextContent(lastSeenText); expect(queryByTestId(ENTITIES_USER_OVERVIEW_RISK_LEVEL_TEST_ID)).not.toBeInTheDocument(); + expect(queryByTestId(TECHNICAL_PREVIEW_ICON_TEST_ID)).not.toBeInTheDocument(); }); it('should render correctly if returned data is null', () => { diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/user_entity_overview.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/user_entity_overview.tsx index ed3da595b7a21..beca03c3852ba 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/user_entity_overview.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/components/user_entity_overview.tsx @@ -13,6 +13,7 @@ import { EuiLink, useEuiTheme, useEuiFontSize, + EuiBetaBadge, } from '@elastic/eui'; import { css } from '@emotion/css'; import { getOr } from 'lodash/fp'; @@ -25,11 +26,8 @@ import { FirstLastSeen, FirstLastSeenType, } from '../../../common/components/first_last_seen/first_last_seen'; -import { - buildUserNamesFilter, - RiskScoreEntity, - RiskSeverity, -} from '../../../../common/search_strategy'; +import { buildUserNamesFilter, RiskScoreEntity } from '../../../../common/search_strategy'; +import { getEmptyTagValue } from '../../../common/components/empty_value'; import { DefaultFieldRenderer } from '../../../timelines/components/field_renderers/field_renderers'; import { DescriptionListStyled } from '../../../common/components/page'; import { OverviewDescriptionList } from '../../../common/components/overview_description_list'; @@ -44,7 +42,9 @@ import { ENTITIES_USER_OVERVIEW_LAST_SEEN_TEST_ID, ENTITIES_USER_OVERVIEW_RISK_LEVEL_TEST_ID, ENTITIES_USER_OVERVIEW_LINK_TEST_ID, + TECHNICAL_PREVIEW_ICON_TEST_ID, } from './test_ids'; +import { TECHNICAL_PREVIEW_TITLE, TECHNICAL_PREVIEW_MESSAGE } from './translations'; import { useObservedUserDetails } from '../../../explore/users/containers/users/observed_details'; const USER_ICON = 'user'; @@ -145,19 +145,34 @@ export const UserEntityOverview: React.FC = ({ userName return [ { - title: i18n.USER_RISK_CLASSIFICATION, + title: ( + <> + {i18n.USER_RISK_CLASSIFICATION} + + + ), description: ( <> {userRiskData ? ( ) : ( - + getEmptyTagValue() )} ), }, ]; - }, [userRisk]); + }, [userRisk, euiTheme.size.xs]); return ( From 125adaa1e4d1181004378b453f09e187ec9a185a Mon Sep 17 00:00:00 2001 From: christineweng Date: Mon, 28 Aug 2023 13:57:55 -0500 Subject: [PATCH 2/2] change tech preview icon --- .../components/host_entity_overview.test.tsx | 4 ---- .../right/components/host_entity_overview.tsx | 23 +++++++++---------- .../components/user_entity_overview.test.tsx | 4 ---- .../right/components/user_entity_overview.tsx | 22 +++++++++--------- 4 files changed, 22 insertions(+), 31 deletions(-) diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/host_entity_overview.test.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/host_entity_overview.test.tsx index 453957049759b..f737cfc006419 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/host_entity_overview.test.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/components/host_entity_overview.test.tsx @@ -16,7 +16,6 @@ import { ENTITIES_HOST_OVERVIEW_LAST_SEEN_TEST_ID, ENTITIES_HOST_OVERVIEW_LINK_TEST_ID, ENTITIES_HOST_OVERVIEW_RISK_LEVEL_TEST_ID, - TECHNICAL_PREVIEW_ICON_TEST_ID, } from './test_ids'; import { RightPanelContext } from '../context'; import { mockContextValue } from '../mocks/mock_right_panel_context'; @@ -83,7 +82,6 @@ describe('', () => { expect(getByTestId(ENTITIES_HOST_OVERVIEW_OS_FAMILY_TEST_ID)).toHaveTextContent(osFamily); expect(getByTestId(ENTITIES_HOST_OVERVIEW_RISK_LEVEL_TEST_ID)).toHaveTextContent('Medium'); - expect(getByTestId(TECHNICAL_PREVIEW_ICON_TEST_ID)).toBeInTheDocument(); }); it('should render correctly if returned data is null', () => { @@ -99,7 +97,6 @@ describe('', () => { ); expect(getByTestId(ENTITIES_HOST_OVERVIEW_OS_FAMILY_TEST_ID)).toHaveTextContent('—'); expect(getByTestId(ENTITIES_HOST_OVERVIEW_RISK_LEVEL_TEST_ID)).toHaveTextContent('—'); - expect(getByTestId(TECHNICAL_PREVIEW_ICON_TEST_ID)).toBeInTheDocument(); }); }); @@ -120,7 +117,6 @@ describe('', () => { expect(getByTestId(ENTITIES_HOST_OVERVIEW_OS_FAMILY_TEST_ID)).toHaveTextContent(osFamily); expect(getByTestId(ENTITIES_HOST_OVERVIEW_LAST_SEEN_TEST_ID)).toHaveTextContent(lastSeenText); expect(queryByTestId(ENTITIES_HOST_OVERVIEW_RISK_LEVEL_TEST_ID)).not.toBeInTheDocument(); - expect(queryByTestId(TECHNICAL_PREVIEW_ICON_TEST_ID)).not.toBeInTheDocument(); }); it('should render correctly if returned data is null', () => { diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/host_entity_overview.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/host_entity_overview.tsx index 9afb12686b73b..88804ffb97d12 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/host_entity_overview.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/components/host_entity_overview.tsx @@ -13,7 +13,7 @@ import { EuiIcon, useEuiTheme, useEuiFontSize, - EuiBetaBadge, + EuiIconTip, } from '@elastic/eui'; import { css } from '@emotion/css'; import { getOr } from 'lodash/fp'; @@ -149,16 +149,15 @@ export const HostEntityOverview: React.FC = ({ hostName title: ( <> {i18n.HOST_RISK_CLASSIFICATION} - @@ -174,7 +173,7 @@ export const HostEntityOverview: React.FC = ({ hostName ), }, ]; - }, [hostRisk, euiTheme.size.xs]); + }, [hostRisk]); return ( diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/user_entity_overview.test.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/user_entity_overview.test.tsx index db862460aeca5..821b0ee5d19f6 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/user_entity_overview.test.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/components/user_entity_overview.test.tsx @@ -15,7 +15,6 @@ import { ENTITIES_USER_OVERVIEW_LAST_SEEN_TEST_ID, ENTITIES_USER_OVERVIEW_LINK_TEST_ID, ENTITIES_USER_OVERVIEW_RISK_LEVEL_TEST_ID, - TECHNICAL_PREVIEW_ICON_TEST_ID, } from './test_ids'; import { useObservedUserDetails } from '../../../explore/users/containers/users/observed_details'; import { mockContextValue } from '../mocks/mock_right_panel_context'; @@ -83,7 +82,6 @@ describe('', () => { expect(getByTestId(ENTITIES_USER_OVERVIEW_DOMAIN_TEST_ID)).toHaveTextContent(domain); expect(getByTestId(ENTITIES_USER_OVERVIEW_RISK_LEVEL_TEST_ID)).toHaveTextContent('Medium'); - expect(getByTestId(TECHNICAL_PREVIEW_ICON_TEST_ID)).toBeInTheDocument(); }); it('should render correctly if returned data is null', () => { @@ -99,7 +97,6 @@ describe('', () => { ); expect(getByTestId(ENTITIES_USER_OVERVIEW_DOMAIN_TEST_ID)).toHaveTextContent('—'); expect(getByTestId(ENTITIES_USER_OVERVIEW_RISK_LEVEL_TEST_ID)).toHaveTextContent('—'); - expect(getByTestId(TECHNICAL_PREVIEW_ICON_TEST_ID)).toBeInTheDocument(); }); }); @@ -120,7 +117,6 @@ describe('', () => { expect(getByTestId(ENTITIES_USER_OVERVIEW_DOMAIN_TEST_ID)).toHaveTextContent(domain); expect(getByTestId(ENTITIES_USER_OVERVIEW_LAST_SEEN_TEST_ID)).toHaveTextContent(lastSeenText); expect(queryByTestId(ENTITIES_USER_OVERVIEW_RISK_LEVEL_TEST_ID)).not.toBeInTheDocument(); - expect(queryByTestId(TECHNICAL_PREVIEW_ICON_TEST_ID)).not.toBeInTheDocument(); }); it('should render correctly if returned data is null', () => { diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/user_entity_overview.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/user_entity_overview.tsx index beca03c3852ba..998f6f71b02a7 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/user_entity_overview.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/components/user_entity_overview.tsx @@ -13,7 +13,7 @@ import { EuiLink, useEuiTheme, useEuiFontSize, - EuiBetaBadge, + EuiIconTip, } from '@elastic/eui'; import { css } from '@emotion/css'; import { getOr } from 'lodash/fp'; @@ -148,15 +148,15 @@ export const UserEntityOverview: React.FC = ({ userName title: ( <> {i18n.USER_RISK_CLASSIFICATION} - @@ -172,7 +172,7 @@ export const UserEntityOverview: React.FC = ({ userName ), }, ]; - }, [userRisk, euiTheme.size.xs]); + }, [userRisk]); return (