diff --git a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/common/utils.ts b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/common/utils.ts index 4833f14ba55cb..8c8ee528a50e7 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/common/utils.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/common/utils.ts @@ -5,7 +5,6 @@ * 2.0. */ -import { euiLightVars } from '@kbn/ui-theme'; import { RiskSeverity } from '../../../common/search_strategy'; import { SEVERITY_COLOR } from '../../overview/components/detection_response/utils'; export { RISK_LEVEL_RANGES as RISK_SCORE_RANGES } from '../../../common/entity_analytics/risk_engine'; @@ -18,8 +17,12 @@ export const SEVERITY_UI_SORT_ORDER = [ RiskSeverity.Critical, ]; +// Migration to tokens from EUI during the Borealis theme migration is blocked until new severity palette is agreed upon. +// We keep using hardcoded colors until security severity palette is ready https://github.com/elastic/kibana/issues/203387 +// TODO: Borealis migration - move from hardcoded values to severity palette, which should instead use shared hook across security: +// https://github.com/elastic/security-team/issues/11516 hook - https://github.com/elastic/kibana/pull/206276 export const RISK_SEVERITY_COLOUR: { [k in RiskSeverity]: string } = { - [RiskSeverity.Unknown]: euiLightVars.euiColorMediumShade, + [RiskSeverity.Unknown]: '#aaa', // euiThemeVars no longer in use. Hard coded temporarily, see above. [RiskSeverity.Low]: SEVERITY_COLOR.low, [RiskSeverity.Moderate]: SEVERITY_COLOR.medium, [RiskSeverity.High]: SEVERITY_COLOR.high, diff --git a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/asset_criticality/asset_criticality_badge.tsx b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/asset_criticality/asset_criticality_badge.tsx index a4c7344ca5607..4e8c7329bdd31 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/asset_criticality/asset_criticality_badge.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/asset_criticality/asset_criticality_badge.tsx @@ -10,6 +10,7 @@ import { euiLightVars } from '@kbn/ui-theme'; import { CRITICALITY_LEVEL_TITLE } from './translations'; import type { CriticalityLevelWithUnassigned } from '../../../../common/entity_analytics/asset_criticality/types'; +// below will be updated with new severity color palette & shared security wide severity colors hook creation export const CRITICALITY_LEVEL_COLOR: Record = { extreme_impact: '#E7664C', high_impact: '#DA8B45', diff --git a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/asset_criticality_file_uploader/components/file_picker_step.tsx b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/asset_criticality_file_uploader/components/file_picker_step.tsx index 6dbd1d87b29a6..9663fc242be51 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/asset_criticality_file_uploader/components/file_picker_step.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/asset_criticality_file_uploader/components/file_picker_step.tsx @@ -13,15 +13,17 @@ import { EuiSpacer, EuiText, EuiTitle, + useEuiFontSize, useEuiTheme, } from '@elastic/eui'; + import { css } from '@emotion/css'; import React from 'react'; import { FormattedMessage, useI18n } from '@kbn/i18n-react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { useAssetCriticalityEntityTypes } from '../../../hooks/use_enabled_entity_types'; import { EntityTypeToIdentifierField } from '../../../../../common/entity_analytics/types'; + import { CRITICALITY_CSV_MAX_SIZE_BYTES, ValidCriticalityLevels, @@ -37,19 +39,20 @@ interface AssetCriticalityFilePickerStepProps { const sampleCSVContent = `user,user-001,low_impact\nuser,user-002,medium_impact\nhost,host-001,extreme_impact`; -const listStyle = css` - list-style-type: disc; - margin-bottom: ${euiThemeVars.euiSizeL}; - margin-left: ${euiThemeVars.euiSizeL}; - line-height: ${euiThemeVars.euiLineHeight}; -`; - export const AssetCriticalityFilePickerStep: React.FC = React.memo(({ onFileChange, errorMessage, isLoading }) => { const i18n = useI18n(); const formatBytes = useFormatBytes(); const { euiTheme } = useEuiTheme(); + + const listStyle = css` + list-style-type: disc; + margin-bottom: ${euiTheme.size.l}; + margin-left: ${euiTheme.size.l}; + line-height: ${useEuiFontSize('s').lineHeight}; + `; + const entityTypes = useAssetCriticalityEntityTypes(); const i18nOrList = (items: string[]) => i18n diff --git a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/asset_criticality_file_uploader/components/validation_step.tsx b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/asset_criticality_file_uploader/components/validation_step.tsx index c4dadc756c15b..f12db29f7fac3 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/asset_criticality_file_uploader/components/validation_step.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/asset_criticality_file_uploader/components/validation_step.tsx @@ -100,7 +100,7 @@ export const AssetCriticalityValidationStep: React.FC {validLines.text} diff --git a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/risk_information/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/risk_information/index.tsx index f5b407378bde4..35ab3b8c17ef7 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/risk_information/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/risk_information/index.tsx @@ -144,7 +144,7 @@ export const RiskInformationFlyout = ({ handleOnClose }: { handleOnClose: () => label={BETA} size="s" css={css` - color: ${euiTheme.colors.text}; + color: ${euiTheme.colors.textParagraph}; margin-top: ${euiTheme.size.xxs}; `} /> diff --git a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/risk_score_donut_chart/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/risk_score_donut_chart/index.tsx index 92ae592368ba5..bc4a704b48655 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/risk_score_donut_chart/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/risk_score_donut_chart/index.tsx @@ -21,12 +21,6 @@ import type { RiskSeverity } from '../../../../common/search_strategy'; const DONUT_HEIGHT = 120; -const fillColor: FillColor = (dataName) => { - return Object.hasOwn(RISK_SEVERITY_COLOUR, dataName) - ? RISK_SEVERITY_COLOUR[dataName as RiskSeverity] - : emptyDonutColor; -}; - const DonutContainer = styled(EuiFlexItem)` padding-right: ${({ theme }) => theme.eui.euiSizeXXL}; padding-left: ${({ theme }) => theme.eui.euiSizeM}; @@ -42,7 +36,13 @@ interface RiskScoreDonutChartProps { export const RiskScoreDonutChart = ({ severityCount }: RiskScoreDonutChartProps) => { const [donutChartData, legendItems, total] = useRiskDonutChartData(severityCount); - + // TODO: Borealis theme migration, when severity palette agreed, update RISK_SEVERITY_COLOUR to use shared hook from security colors: + // https://github.com/elastic/security-team/issues/11516 hook - https://github.com/elastic/kibana/pull/206276 + const fillColorValue: FillColor = (dataName) => { + return Object.hasOwn(RISK_SEVERITY_COLOUR, dataName) + ? RISK_SEVERITY_COLOUR[dataName as RiskSeverity] + : emptyDonutColor; + }; return ( @@ -51,7 +51,7 @@ export const RiskScoreDonutChart = ({ severityCount }: RiskScoreDonutChartProps) { const [donutChartData, legendItems, total] = useMemo(() => { const severities = Object.keys(RISK_SEVERITY_COLOUR) as RiskSeverity[]; - + // TODO: Borealis theme migration, when severity palette agreed, update RISK_SEVERITY_COLOUR to use shared hook from security colors: + // https://github.com/elastic/security-team/issues/11516 hook - https://github.com/elastic/kibana/pull/206276 return [ severities.map((status) => ({ key: status, diff --git a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/risk_summary_flyout/risk_summary.tsx b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/risk_summary_flyout/risk_summary.tsx index eb6dcdf049558..64ecb0dbd87e6 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/risk_summary_flyout/risk_summary.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/risk_summary_flyout/risk_summary.tsx @@ -19,7 +19,6 @@ import { } from '@elastic/eui'; import { css } from '@emotion/react'; import { FormattedMessage } from '@kbn/i18n-react'; -import { euiThemeVars } from '@kbn/ui-theme'; import dateMath from '@kbn/datemath'; import { i18n } from '@kbn/i18n'; import { capitalize } from 'lodash/fp'; @@ -71,7 +70,6 @@ const FlyoutRiskSummaryComponent = ({ const riskData = data && data.length > 0 ? data[0] : undefined; const entityData = getEntityData(entityType, riskData); const { euiTheme } = useEuiTheme(); - const lensAttributes = useMemo(() => { const entityName = entityData?.name ?? ''; const fieldName = EntityTypeToIdentifierField[entityType]; @@ -81,9 +79,10 @@ const FlyoutRiskSummaryComponent = ({ query: `${fieldName}: ${entityName}`, spaceId: 'default', riskEntity: entityType, + // TODO: add in riskColors when severity palette agreed on. + // https://github.com/elastic/security-team/issues/11516 hook - https://github.com/elastic/kibana/pull/206276 }); }, [entityData?.name, entityData?.risk?.calculated_level, entityType]); - const xsFontSize = useEuiFontSize('xxs').fontSize; const rows = useMemo(() => getItems(entityData), [entityData]); @@ -247,7 +246,7 @@ const FlyoutRiskSummaryComponent = ({ css={css` position: absolute; right: 0; - top: -${euiThemeVars.euiSize}; + top: -${euiTheme.size.base}; `} > { ); expect(container).toHaveTextContent(RiskSeverity.Critical); - expect(EuiHealth as jest.Mock).toHaveBeenLastCalledWith( expect.objectContaining({ color: SEVERITY_COLOR.critical }), - context + {} ); }); @@ -98,7 +96,8 @@ describe('RiskScore', () => { expect(container).toHaveTextContent(RiskSeverity.Unknown); expect(EuiHealth as jest.Mock).toHaveBeenLastCalledWith( - expect.objectContaining({ color: euiThemeVars.euiColorMediumShade }), + expect.objectContaining({ color: '#aaa' }), // TODO: update with new severity palette agreement. + // https://github.com/elastic/security-team/issues/11516 hook - https://github.com/elastic/kibana/pull/206276 context ); }); diff --git a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/severity/common/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/severity/common/index.tsx index e010c3bd42169..123027fd81da9 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/severity/common/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/severity/common/index.tsx @@ -7,17 +7,19 @@ import React from 'react'; -import { EuiHealth, EuiTextColor, transparentize } from '@elastic/eui'; +import { EuiHealth, EuiTextColor, useEuiTheme } from '@elastic/eui'; import styled, { css } from 'styled-components'; -import { euiLightVars } from '@kbn/ui-theme'; import { RISK_SEVERITY_COLOUR } from '../../../common/utils'; import { HoverPopover } from '../../../../common/components/hover_popover'; import type { RiskSeverity } from '../../../../../common/search_strategy'; -const RiskBadge = styled.div<{ $severity: RiskSeverity; $hideBackgroundColor: boolean }>` - ${({ theme, $severity, $hideBackgroundColor }) => css` +const RiskBadge = styled.div<{ + $severity: RiskSeverity; + $hideBackgroundColor: boolean; +}>` + ${({ theme, color, $severity, $hideBackgroundColor }) => css` width: fit-content; padding-right: ${theme.eui.euiSizeS}; padding-left: ${theme.eui.euiSizeXS}; @@ -25,13 +27,13 @@ const RiskBadge = styled.div<{ $severity: RiskSeverity; $hideBackgroundColor: bo ${($severity === 'Critical' || $severity === 'High') && !$hideBackgroundColor && css` - background-color: ${transparentize(theme.eui.euiColorDanger, 0.2)}; + background-color: ${color}; border-radius: 999px; // pill shaped `}; `} `; const TooltipContainer = styled.div` - padding: ${({ theme }) => theme.eui.euiSizeS}; + padding: ${({ theme }) => theme.euiSizeS}; `; export const RiskScoreLevel: React.FC<{ @@ -68,18 +70,23 @@ const RiskScoreBadge: React.FC<{ severity: RiskSeverity; hideBackgroundColor?: boolean; ['data-test-subj']?: string; -}> = React.memo(({ severity, hideBackgroundColor = false, 'data-test-subj': dataTestSubj }) => ( - - - - {severity} - - - -)); +}> = React.memo(({ severity, hideBackgroundColor = false, 'data-test-subj': dataTestSubj }) => { + const { euiTheme } = useEuiTheme(); + // TODO: use riskSeverity hook when palette agreed. + // https://github.com/elastic/security-team/issues/11516 hook - https://github.com/elastic/kibana/pull/206276 + return ( + + + + {severity} + + + + ); +}); RiskScoreBadge.displayName = 'RiskScoreBadge'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/severity/severity_badges.tsx b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/severity/severity_badges.tsx index 373a8dd5a5693..a1a83d8c4d40a 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/severity/severity_badges.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/severity/severity_badges.tsx @@ -14,24 +14,28 @@ import type { SeverityCount } from './types'; export const SeverityBadges: React.FC<{ severityCount: SeverityCount; -}> = React.memo(({ severityCount }) => ( - - - - - {(Object.keys(RISK_SEVERITY_COLOUR) as RiskSeverity[]).map((status) => ( - - - - ))} - - - -)); +}> = React.memo(({ severityCount }) => { + // TODO: use riskSeverity hook when palette agreed. + // https://github.com/elastic/security-team/issues/11516 hook - https://github.com/elastic/kibana/pull/206276 + return ( + + + + + {(Object.keys(RISK_SEVERITY_COLOUR) as RiskSeverity[]).map((status) => ( + + + + ))} + + + + ); +}); SeverityBadges.displayName = 'SeverityBadges'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/severity/severity_bar.tsx b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/severity/severity_bar.tsx index 149d8f2cf74b9..e643407cde5f4 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/severity/severity_bar.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/severity/severity_bar.tsx @@ -31,6 +31,8 @@ type PalletteArray = PalletteObject[]; export const SeverityBar: React.FC<{ severityCount: SeverityCount; }> = ({ severityCount }) => { + // TODO: use riskSeverity hook when palette agreed. + // https://github.com/elastic/security-team/issues/11516 hook - https://github.com/elastic/kibana/pull/206276 const palette = useMemo( () => (Object.keys(RISK_SEVERITY_COLOUR) as RiskSeverity[]).reduce( diff --git a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/lens_attributes/__snapshots__/risk_score_summary.test.ts.snap b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/lens_attributes/__snapshots__/risk_score_summary.test.ts.snap index 225ff3ef8c7a0..7f8b46a9f5bb4 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/lens_attributes/__snapshots__/risk_score_summary.test.ts.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/lens_attributes/__snapshots__/risk_score_summary.test.ts.snap @@ -113,7 +113,7 @@ Object { "params": Object { "colorStops": Array [ Object { - "color": "#98a2b3", + "color": "#aaa", "stop": 0, }, Object { @@ -144,7 +144,7 @@ Object { "steps": 3, "stops": Array [ Object { - "color": "#98a2b3", + "color": "#aaa", "stop": 20, }, Object { diff --git a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/lens_attributes/risk_score_summary.test.ts b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/lens_attributes/risk_score_summary.test.ts index 994bfc3de4c55..943a62a6e689d 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/lens_attributes/risk_score_summary.test.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/lens_attributes/risk_score_summary.test.ts @@ -74,6 +74,7 @@ describe('getRiskScoreSummaryAttributes', () => { spaceId: 'default', riskEntity: EntityType.user, }), + applyGlobalQueriesAndFilters: false, }), { wrapper } diff --git a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/lens_attributes/risk_score_summary.ts b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/lens_attributes/risk_score_summary.ts index bf6f6897f8bb9..44108c683c77a 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/lens_attributes/risk_score_summary.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/lens_attributes/risk_score_summary.ts @@ -8,7 +8,8 @@ import { v4 as uuidv4 } from 'uuid'; import type { LensAttributes } from '@kbn/lens-embeddable-utils'; import capitalize from 'lodash/capitalize'; -import { SEVERITY_UI_SORT_ORDER, RISK_SEVERITY_COLOUR, RISK_SCORE_RANGES } from '../common/utils'; + +import { SEVERITY_UI_SORT_ORDER, RISK_SCORE_RANGES, RISK_SEVERITY_COLOUR } from '../common/utils'; import type { EntityType } from '../../../common/entity_analytics/types'; import type { RiskSeverity } from '../../../common/search_strategy'; import { EntityTypeToScoreField, RiskScoreFields } from '../../../common/search_strategy'; @@ -17,17 +18,20 @@ interface GetRiskScoreSummaryAttributesProps { query?: string; spaceId?: string; severity?: RiskSeverity; + // TODO: add riskColors in when severityPalette available + // riskColors: { [k in RiskSeverity]: string }; riskEntity: EntityType; } export const getRiskScoreSummaryAttributes: ( props: GetRiskScoreSummaryAttributesProps + // TODO: may need to pass riskColors in props, here, when severity palette agreed and hook created + // https://github.com/elastic/security-team/issues/11516 hook - https://github.com/elastic/kibana/pull/206276 ) => LensAttributes = ({ spaceId, query, severity, riskEntity }) => { const layerIds = [uuidv4(), uuidv4()]; const internalReferenceId = uuidv4(); const columnIds = [uuidv4(), uuidv4(), uuidv4()]; const sourceField = EntityTypeToScoreField[riskEntity]; - return { title: 'Risk score summary', description: '', diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/user_right/utils/columns.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/user_right/utils/columns.tsx index 22387fadbaf06..ffc4c2ce8ee94 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/user_right/utils/columns.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/user_right/utils/columns.tsx @@ -7,26 +7,31 @@ import { css } from '@emotion/react'; import React from 'react'; -import { euiThemeVars } from '@kbn/ui-theme'; -import type { EuiBasicTableColumn } from '@elastic/eui'; +import { useEuiTheme, type EuiBasicTableColumn } from '@elastic/eui'; import { DefaultFieldRenderer } from '../../../../timelines/components/field_renderers/default_renderer'; import type { ManagedUsersTableColumns, ManagedUserTable } from '../types'; import * as i18n from '../translations'; import { defaultToEmptyTag } from '../../../../common/components/empty_value'; -const fieldColumn: EuiBasicTableColumn = { - name: i18n.FIELD_COLUMN_TITLE, - field: 'label', - render: (label: string, { field }) => ( +const FieldColumn: React.FC<{ label: string; field: string }> = ({ label, field }) => { + const { euiTheme } = useEuiTheme(); + + return ( {label ?? field} - ), + ); +}; + +const fieldColumn: EuiBasicTableColumn = { + name: i18n.FIELD_COLUMN_TITLE, + field: 'label', + render: (label: string, { field }) => , }; export const getManagedUserTableColumns = (