diff --git a/x-pack/platform/packages/shared/kbn-cloud-security-posture/common/constants.ts b/x-pack/platform/packages/shared/kbn-cloud-security-posture/common/constants.ts index 9112dba4b9a4f..67b4b5408f742 100644 --- a/x-pack/platform/packages/shared/kbn-cloud-security-posture/common/constants.ts +++ b/x-pack/platform/packages/shared/kbn-cloud-security-posture/common/constants.ts @@ -5,6 +5,7 @@ * 2.0. */ import { VulnSeverity } from './types/vulnerabilities'; +import { MisconfigurationEvaluationStatus } from './types/misconfigurations'; export const KSPM_POLICY_TEMPLATE = 'kspm'; export const CSPM_POLICY_TEMPLATE = 'cspm'; @@ -48,7 +49,8 @@ export const VULNERABILITIES_SEVERITY: Record = { UNKNOWN: 'UNKNOWN', }; -export const MISCONFIGURATION_STATUS: Record = { +export const MISCONFIGURATION_STATUS: Record = { PASSED: 'passed', FAILED: 'failed', + UNKNOWN: 'unknown', }; diff --git a/x-pack/platform/packages/shared/kbn-cloud-security-posture/common/index.ts b/x-pack/platform/packages/shared/kbn-cloud-security-posture/common/index.ts index 4065f7ca331a9..95aad03958940 100644 --- a/x-pack/platform/packages/shared/kbn-cloud-security-posture/common/index.ts +++ b/x-pack/platform/packages/shared/kbn-cloud-security-posture/common/index.ts @@ -24,6 +24,7 @@ export type { } from './schema/vulnerabilities/csp_vulnerability_finding'; export type { BenchmarksCisId } from './types/benchmark'; export type { VulnSeverity } from './types/vulnerabilities'; +export type { MisconfigurationEvaluationStatus } from './types/misconfigurations'; export * from './constants'; export { extractErrorMessage, diff --git a/x-pack/platform/packages/shared/kbn-cloud-security-posture/common/types/misconfigurations.ts b/x-pack/platform/packages/shared/kbn-cloud-security-posture/common/types/misconfigurations.ts new file mode 100644 index 0000000000000..bd69554eae7dc --- /dev/null +++ b/x-pack/platform/packages/shared/kbn-cloud-security-posture/common/types/misconfigurations.ts @@ -0,0 +1,8 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +export type MisconfigurationEvaluationStatus = 'passed' | 'failed' | 'unknown'; diff --git a/x-pack/solutions/security/packages/distribution_bar/src/distribution_bar.stories.tsx b/x-pack/solutions/security/packages/distribution_bar/src/distribution_bar.stories.tsx index c1b292c3f08cc..e3115f3e8758f 100644 --- a/x-pack/solutions/security/packages/distribution_bar/src/distribution_bar.stories.tsx +++ b/x-pack/solutions/security/packages/distribution_bar/src/distribution_bar.stories.tsx @@ -5,7 +5,6 @@ * 2.0. */ import React from 'react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { EuiTitle, EuiSpacer } from '@elastic/eui'; import { DistributionBar as DistributionBarComponent } from '..'; @@ -13,13 +12,13 @@ const mockStatsFindings = [ { key: 'passed', count: 90, - color: euiThemeVars.euiColorVis0, + color: 'green', label: 'Passed', }, { key: 'failed', count: 10, - color: euiThemeVars.euiColorVis9, + color: 'red', label: <>{'Failed'}, }, ]; @@ -28,22 +27,22 @@ const mockStatsAlerts = [ { key: 'low', count: 1000, - color: euiThemeVars.euiColorVis0, + color: 'green', }, { key: 'medium', count: 800, - color: euiThemeVars.euiColorVis5, + color: 'gold', }, { key: 'high', count: 300, - color: euiThemeVars.euiColorVis7, + color: 'orange', }, { key: 'critical', count: 50, - color: euiThemeVars.euiColorVis9, + color: 'red', }, ]; diff --git a/x-pack/solutions/security/packages/distribution_bar/tsconfig.json b/x-pack/solutions/security/packages/distribution_bar/tsconfig.json index 277fe500caa48..c52c97337264f 100644 --- a/x-pack/solutions/security/packages/distribution_bar/tsconfig.json +++ b/x-pack/solutions/security/packages/distribution_bar/tsconfig.json @@ -13,7 +13,6 @@ }, "include": ["**/*.ts", "**/*.tsx"], "kbn_references": [ - "@kbn/ui-theme", ], "exclude": ["target/**/*"] } diff --git a/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/index.ts b/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/index.ts index bf4bccda2816e..59d1ca5fb1f43 100644 --- a/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/index.ts +++ b/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/index.ts @@ -6,13 +6,16 @@ */ export * from './src/types'; -export * from './src/constants/component_constants'; export * from './src/constants/navigation'; export type { NavFilter } from './src/utils/query_utils'; export { showErrorToast } from './src/utils/show_error_toast'; export { encodeQuery, decodeQuery } from './src/utils/query_utils'; export { CspEvaluationBadge } from './src/components/csp_evaluation_badge'; -export { getSeverityStatusColor, getCvsScoreColor } from './src/utils/get_vulnerability_colors'; +export { + getSeverityStatusColor, + getCvsScoreColor, + getMisconfigurationStatusColor, +} from './src/utils/get_finding_colors'; export { getSeverityText } from './src/utils/get_vulnerability_text'; export { getVulnerabilityStats, hasVulnerabilitiesData } from './src/utils/vulnerability_helpers'; export { CVSScoreBadge, SeverityStatusBadge } from './src/components/vulnerability_badges'; diff --git a/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/components/csp_evaluation_badge.tsx b/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/components/csp_evaluation_badge.tsx index 28a5b7655723a..f185091dbf5de 100644 --- a/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/components/csp_evaluation_badge.tsx +++ b/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/components/csp_evaluation_badge.tsx @@ -6,28 +6,24 @@ */ import React from 'react'; -import { EuiBadge, type EuiBadgeProps } from '@elastic/eui'; +import { EuiBadge } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { css } from '@emotion/react'; -import { statusColors } from '../constants/component_constants'; +import { MISCONFIGURATION_STATUS } from '@kbn/cloud-security-posture-common'; +import type { MisconfigurationEvaluationStatus } from '@kbn/cloud-security-posture-common'; +import { getMisconfigurationStatusColor } from '../utils/get_finding_colors'; interface Props { - type?: 'passed' | 'failed'; + type?: MisconfigurationEvaluationStatus; } // 'fail' / 'pass' are same chars length, but not same width size. // 46px is used to make sure the badge is always the same width. const BADGE_WIDTH = '46px'; -const getColor = (type: Props['type']): EuiBadgeProps['color'] => { - if (type === 'passed') return statusColors.passed; - if (type === 'failed') return statusColors.failed; - return 'default'; -}; - export const CspEvaluationBadge = ({ type }: Props) => ( ( `} data-test-subj={`${type}_finding`} > - {type === 'failed' ? ( + {type === MISCONFIGURATION_STATUS.FAILED ? ( - ) : type === 'passed' ? ( + ) : type === MISCONFIGURATION_STATUS.PASSED ? ( { + const { euiTheme } = useEuiTheme(); + const { getCvsScoreColor } = useGetCvsScoreColor(); + if (!score) return null; const color = getCvsScoreColor(score); @@ -48,7 +52,7 @@ export const CVSScoreBadge = ({ score, version }: CVSScoreBadgeProps) => { css={css` width: 1px; border: 0 none; - background-color: rgba(255, 255, 255, 0.2); + background-color: ${euiTheme.border.color}; margin: 0px 6px; `} /> @@ -60,6 +64,8 @@ export const CVSScoreBadge = ({ score, version }: CVSScoreBadgeProps) => { }; export const SeverityStatusBadge = ({ severity }: SeverityStatusBadgeProps) => { + const { getSeverityStatusColor } = useGetSeverityStatusColor(); + if (!severity) return null; const color = getSeverityStatusColor(severity); diff --git a/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/constants/component_constants.ts b/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/constants/component_constants.ts deleted file mode 100644 index 3e22fdea80666..0000000000000 --- a/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/constants/component_constants.ts +++ /dev/null @@ -1,16 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ -import { euiThemeVars } from '@kbn/ui-theme'; - -export const statusColors = { - passed: euiThemeVars.euiColorSuccess, - failed: euiThemeVars.euiColorVis9, - unknown: euiThemeVars.euiColorLightShade, -}; - -export const HOST_NAME = 'host.name'; -export const USER_NAME = 'user.name'; diff --git a/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/hooks/use_get_cvs_score_color.ts b/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/hooks/use_get_cvs_score_color.ts new file mode 100644 index 0000000000000..f013706d0b324 --- /dev/null +++ b/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/hooks/use_get_cvs_score_color.ts @@ -0,0 +1,20 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { useEuiTheme } from '@elastic/eui'; + +import { getCvsScoreColor as getCvsScoreColorUtil } from '../..'; + +export const useGetCvsScoreColor = () => { + const { euiTheme } = useEuiTheme(); + + const getCvsScoreColor = (score: number) => { + return getCvsScoreColorUtil(score, euiTheme); + }; + + return { getCvsScoreColor }; +}; diff --git a/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/hooks/use_get_severity_status_color.ts b/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/hooks/use_get_severity_status_color.ts new file mode 100644 index 0000000000000..5a8435d6e924d --- /dev/null +++ b/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/hooks/use_get_severity_status_color.ts @@ -0,0 +1,19 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { useEuiTheme } from '@elastic/eui'; +import { VulnSeverity } from '@kbn/cloud-security-posture-common'; + +import { getSeverityStatusColor as getSeverityStatusColorUtil } from '../..'; + +export const useGetSeverityStatusColor = () => { + const { euiTheme } = useEuiTheme(); + const getSeverityStatusColor = (status: VulnSeverity) => { + return getSeverityStatusColorUtil(status, euiTheme); + }; + return { getSeverityStatusColor }; +}; diff --git a/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_finding_colors.test.ts b/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_finding_colors.test.ts new file mode 100644 index 0000000000000..2fa5e84c245d0 --- /dev/null +++ b/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_finding_colors.test.ts @@ -0,0 +1,77 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { getCvsScoreColor, getSeverityStatusColor, SEVERITY_COLOR } from './get_finding_colors'; +import { EuiThemeComputed } from '@elastic/eui'; + +const mockEuiThemeBorealis = { + themeName: 'borialis', +}; + +describe('getSeverityStatusColor', () => { + it('should return the correct color for LOW severity', () => { + expect(getSeverityStatusColor('LOW', mockEuiThemeBorealis as EuiThemeComputed)).toBe( + SEVERITY_COLOR.low + ); + }); + + it('should return the correct color for MEDIUM severity', () => { + expect(getSeverityStatusColor('MEDIUM', mockEuiThemeBorealis as EuiThemeComputed)).toBe( + SEVERITY_COLOR.medium + ); + }); + + it('should return the correct color for HIGH severity', () => { + expect(getSeverityStatusColor('HIGH', mockEuiThemeBorealis as EuiThemeComputed)).toBe( + SEVERITY_COLOR.high + ); + }); + + it('should return the correct color for CRITICAL severity', () => { + expect(getSeverityStatusColor('CRITICAL', mockEuiThemeBorealis as EuiThemeComputed)).toBe( + SEVERITY_COLOR.critical + ); + }); + + it('should return the correct color for an unknown severity', () => { + expect(getSeverityStatusColor('UNKNOWN', mockEuiThemeBorealis as EuiThemeComputed)).toBe( + SEVERITY_COLOR.unknown + ); + }); +}); + +describe('getCvsScoreColor', () => { + it('returns correct color for low severity score', () => { + expect(getCvsScoreColor(1.5, mockEuiThemeBorealis as EuiThemeComputed)).toBe( + SEVERITY_COLOR.low + ); + }); + + it('returns correct color for medium severity score', () => { + expect(getCvsScoreColor(5.5, mockEuiThemeBorealis as EuiThemeComputed)).toBe( + SEVERITY_COLOR.medium + ); + }); + + it('returns correct color for high severity score', () => { + expect(getCvsScoreColor(7.9, mockEuiThemeBorealis as EuiThemeComputed)).toBe( + SEVERITY_COLOR.high + ); + }); + + it('returns correct color for critical severity score', () => { + expect(getCvsScoreColor(10.0, mockEuiThemeBorealis as EuiThemeComputed)).toBe( + SEVERITY_COLOR.critical + ); + }); + + it('returns correct color for low severity score for undefined value', () => { + expect(getCvsScoreColor(-0.2, mockEuiThemeBorealis as EuiThemeComputed)).toBe( + SEVERITY_COLOR.unknown + ); + }); +}); diff --git a/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_finding_colors.ts b/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_finding_colors.ts new file mode 100644 index 0000000000000..5209e5d766c64 --- /dev/null +++ b/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_finding_colors.ts @@ -0,0 +1,108 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { EuiThemeComputed } from '@elastic/eui'; +import { euiThemeVars } from '@kbn/ui-theme'; // TODO: replace with euiTheme +import type { + VulnSeverity, + MisconfigurationEvaluationStatus, +} from '@kbn/cloud-security-posture-common'; +import { + VULNERABILITIES_SEVERITY, + MISCONFIGURATION_STATUS, +} from '@kbn/cloud-security-posture-common'; + +const isAmsterdam = (euiThemeName: string) => { + return euiThemeName?.toLowerCase().includes('amsterdam'); +}; + +// Designers blocked the migration to tokens from EUI during the Borealys theme migration. +// 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 https://github.com/elastic/security-team/issues/11606 +export const SEVERITY_COLOR = { + critical: '#E7664C', + high: '#DA8B45', + medium: '#D6BF57', + low: '#54B399', + unknown: '#aaa', +} as const; + +// TODO: Borealis migration - migrate to security severity palette when it's ready https://github.com/elastic/security-team/issues/11606 +export const getSeverityStatusColor = ( + severity: VulnSeverity, + euiTheme: EuiThemeComputed +): string => { + // TODO: Borealis migration - remove old mapping in main after Serverless switched to Borealis + if (euiTheme && isAmsterdam(euiTheme.themeName)) { + switch (severity) { + case VULNERABILITIES_SEVERITY.LOW: + return euiThemeVars.euiColorVis0; + case VULNERABILITIES_SEVERITY.MEDIUM: + return euiThemeVars.euiColorVis5_behindText; + case VULNERABILITIES_SEVERITY.HIGH: + return euiThemeVars.euiColorVis9_behindText; + case VULNERABILITIES_SEVERITY.CRITICAL: + return euiThemeVars.euiColorDanger; + default: + return '#aaa'; + } + } + + switch (severity) { + case VULNERABILITIES_SEVERITY.LOW: + return SEVERITY_COLOR.low; + case VULNERABILITIES_SEVERITY.MEDIUM: + return SEVERITY_COLOR.medium; + case VULNERABILITIES_SEVERITY.HIGH: + return SEVERITY_COLOR.high; + case VULNERABILITIES_SEVERITY.CRITICAL: + return SEVERITY_COLOR.critical; + default: + return SEVERITY_COLOR.unknown; + } +}; + +export const getCvsScoreColor = (score: number, euiTheme: EuiThemeComputed): string | undefined => { + // TODO: Borealis migration - remove old mapping in main when Serverless switched to Borealis + if (euiTheme && isAmsterdam(euiTheme.themeName)) { + if (score <= 4) { + return euiThemeVars.euiColorVis0; // low severity + } else if (score >= 4 && score <= 7) { + return euiThemeVars.euiColorVis7; // medium severity + } else if (score >= 7 && score <= 9) { + return euiThemeVars.euiColorVis9; // high severity + } else if (score >= 9) { + return euiThemeVars.euiColorDanger; // critical severity + } + } + + if (score >= 0 && score <= 4) { + return getSeverityStatusColor(VULNERABILITIES_SEVERITY.LOW, euiTheme); + } else if (score >= 4 && score <= 7) { + return getSeverityStatusColor(VULNERABILITIES_SEVERITY.MEDIUM, euiTheme); + } else if (score >= 7 && score <= 9) { + return getSeverityStatusColor(VULNERABILITIES_SEVERITY.HIGH, euiTheme); + } else if (score >= 9) { + return getSeverityStatusColor(VULNERABILITIES_SEVERITY.CRITICAL, euiTheme); + } else { + return getSeverityStatusColor(VULNERABILITIES_SEVERITY.UNKNOWN, euiTheme); + } +}; + +// TODO: Borealis migration - migrate to EUI color tokens when they are ready https://github.com/elastic/security-team/issues/11606 +export const getMisconfigurationStatusColor = ( + status?: MisconfigurationEvaluationStatus +): string => { + switch (status) { + case MISCONFIGURATION_STATUS.PASSED: + return SEVERITY_COLOR.low; + case MISCONFIGURATION_STATUS.FAILED: + return SEVERITY_COLOR.critical; + default: + return SEVERITY_COLOR.unknown; + } +}; diff --git a/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_vulnerabilitiy_colors.test.ts b/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_vulnerabilitiy_colors.test.ts deleted file mode 100644 index dcc506fd6b27d..0000000000000 --- a/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_vulnerabilitiy_colors.test.ts +++ /dev/null @@ -1,52 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { euiThemeVars } from '@kbn/ui-theme'; -import { getCvsScoreColor, getSeverityStatusColor } from './get_vulnerability_colors'; -describe('getSeverityStatusColor', () => { - it('should return the correct color for LOW severity', () => { - expect(getSeverityStatusColor('LOW')).toBe(euiThemeVars.euiColorVis0); - }); - - it('should return the correct color for MEDIUM severity', () => { - expect(getSeverityStatusColor('MEDIUM')).toBe(euiThemeVars.euiColorVis5_behindText); - }); - - it('should return the correct color for HIGH severity', () => { - expect(getSeverityStatusColor('HIGH')).toBe(euiThemeVars.euiColorVis9_behindText); - }); - - it('should return the correct color for CRITICAL severity', () => { - expect(getSeverityStatusColor('CRITICAL')).toBe(euiThemeVars.euiColorDanger); - }); - - it('should return #aaa for an unknown severity', () => { - expect(getSeverityStatusColor('UNKNOWN')).toBe('#aaa'); - }); -}); - -describe('getCvsScoreColor', () => { - it('returns correct color for low severity score', () => { - expect(getCvsScoreColor(1.5)).toBe(euiThemeVars.euiColorVis0); - }); - - it('returns correct color for medium severity score', () => { - expect(getCvsScoreColor(5.5)).toBe(euiThemeVars.euiColorVis7); - }); - - it('returns correct color for high severity score', () => { - expect(getCvsScoreColor(7.9)).toBe(euiThemeVars.euiColorVis9); - }); - - it('returns correct color for critical severity score', () => { - expect(getCvsScoreColor(10.0)).toBe(euiThemeVars.euiColorDanger); - }); - - it('returns correct color for low severity score for undefined value', () => { - expect(getCvsScoreColor(-0.2)).toBe(euiThemeVars.euiColorVis0); - }); -}); diff --git a/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_vulnerability_colors.ts b/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_vulnerability_colors.ts deleted file mode 100644 index 54bcb357137b7..0000000000000 --- a/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_vulnerability_colors.ts +++ /dev/null @@ -1,37 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { euiThemeVars } from '@kbn/ui-theme'; -import type { VulnSeverity } from '@kbn/cloud-security-posture-common'; -import { VULNERABILITIES_SEVERITY } from '@kbn/cloud-security-posture-common'; - -export const getCvsScoreColor = (score: number): string | undefined => { - if (score <= 4) { - return euiThemeVars.euiColorVis0; // low severity - } else if (score >= 4 && score <= 7) { - return euiThemeVars.euiColorVis7; // medium severity - } else if (score >= 7 && score <= 9) { - return euiThemeVars.euiColorVis9; // high severity - } else if (score >= 9) { - return euiThemeVars.euiColorDanger; // critical severity - } -}; - -export const getSeverityStatusColor = (severity: VulnSeverity): string => { - switch (severity) { - case VULNERABILITIES_SEVERITY.LOW: - return euiThemeVars.euiColorVis0; - case VULNERABILITIES_SEVERITY.MEDIUM: - return euiThemeVars.euiColorVis5_behindText; - case VULNERABILITIES_SEVERITY.HIGH: - return euiThemeVars.euiColorVis9_behindText; - case VULNERABILITIES_SEVERITY.CRITICAL: - return euiThemeVars.euiColorDanger; - default: - return '#aaa'; - } -}; diff --git a/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/vulnerability_helpers.test.ts b/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/vulnerability_helpers.test.ts index e2503b7a38a2c..afcdc331364e9 100644 --- a/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/vulnerability_helpers.test.ts +++ b/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/vulnerability_helpers.test.ts @@ -5,19 +5,39 @@ * 2.0. */ -import { euiThemeVars } from '@kbn/ui-theme'; -import { getVulnerabilityStats } from './vulnerability_helpers'; import { i18n } from '@kbn/i18n'; +import type { EuiThemeComputed } from '@elastic/eui'; +import type { VulnSeverity } from '@kbn/cloud-security-posture-common'; +import { getVulnerabilityStats } from './vulnerability_helpers'; +import { + getSeverityStatusColor as getSeverityStatusColorUtil, + SEVERITY_COLOR, +} from './get_finding_colors'; + +const getSeverityStatusColor = (status: VulnSeverity) => { + const euiTheme = { + themeName: 'borealis', + }; + + return getSeverityStatusColorUtil(status, euiTheme as EuiThemeComputed); +}; describe('getVulnerabilitiesAggregationCount', () => { const mockFilterFunction = jest.fn(); it('should return empty array when all severity count is 0', () => { - const result = getVulnerabilityStats({ critical: 0, high: 0, medium: 0, low: 0, none: 0 }); + const result = getVulnerabilityStats( + { critical: 0, high: 0, medium: 0, low: 0, none: 0 }, + getSeverityStatusColor + ); expect(result).toEqual([]); }); it('should return stats for low, medium, high, and critical vulnerabilities', () => { - const result = getVulnerabilityStats({ critical: 1, high: 2, medium: 3, low: 4, none: 5 }); + const result = getVulnerabilityStats( + { critical: 1, high: 2, medium: 3, low: 4, none: 5 }, + getSeverityStatusColor + ); + const resultWithoutFunctions = result.map((item) => { const { filter, reset, ...rest } = item; return rest; @@ -32,7 +52,7 @@ describe('getVulnerabilitiesAggregationCount', () => { } ), count: 5, - color: '#aaa', + color: SEVERITY_COLOR.unknown, isCurrentFilter: false, }, { @@ -43,7 +63,7 @@ describe('getVulnerabilitiesAggregationCount', () => { } ), count: 4, - color: euiThemeVars.euiColorVis0, + color: SEVERITY_COLOR.low, isCurrentFilter: false, }, { @@ -54,7 +74,7 @@ describe('getVulnerabilitiesAggregationCount', () => { } ), count: 3, - color: euiThemeVars.euiColorVis5_behindText, + color: SEVERITY_COLOR.medium, isCurrentFilter: false, }, { @@ -65,7 +85,7 @@ describe('getVulnerabilitiesAggregationCount', () => { } ), count: 2, - color: euiThemeVars.euiColorVis9_behindText, + color: SEVERITY_COLOR.high, isCurrentFilter: false, }, { @@ -76,7 +96,7 @@ describe('getVulnerabilitiesAggregationCount', () => { } ), count: 1, - color: euiThemeVars.euiColorDanger, + color: SEVERITY_COLOR.critical, isCurrentFilter: false, }, ]); @@ -85,6 +105,7 @@ describe('getVulnerabilitiesAggregationCount', () => { it('should return correct stats with correct onClick functions', () => { const result = getVulnerabilityStats( { critical: 1, high: 2, medium: 3, low: 4, none: 5 }, + getSeverityStatusColor, mockFilterFunction ); const event = { stopPropagation: jest.fn() } as unknown as React.MouseEvent< @@ -101,6 +122,7 @@ describe('getVulnerabilitiesAggregationCount', () => { const currentFilter = 'LOW'; const result = getVulnerabilityStats( { critical: 1, high: 2, medium: 3, low: 4, none: 5 }, + getSeverityStatusColor, mockFilterFunction, currentFilter ); diff --git a/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/vulnerability_helpers.ts b/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/vulnerability_helpers.ts index 321a135557e59..fb662c6e8e5d2 100644 --- a/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/vulnerability_helpers.ts +++ b/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/vulnerability_helpers.ts @@ -5,9 +5,8 @@ * 2.0. */ -import { VULNERABILITIES_SEVERITY } from '@kbn/cloud-security-posture-common'; +import { VULNERABILITIES_SEVERITY, VulnSeverity } from '@kbn/cloud-security-posture-common'; import { i18n } from '@kbn/i18n'; -import { getSeverityStatusColor } from './get_vulnerability_colors'; import { getSeverityText } from './get_vulnerability_text'; interface VulnerabilitiesDistributionBarProps { @@ -35,6 +34,7 @@ export const hasVulnerabilitiesData = (counts: VulnerabilityCounts): boolean => export const getVulnerabilityStats = ( counts: VulnerabilityCounts, + getSeverityStatusColor: (status: VulnSeverity) => string, filterFunction?: (filter: string) => void, currentFilter?: string ): VulnerabilitiesDistributionBarProps[] => { diff --git a/x-pack/solutions/security/plugins/cloud_defend/public/components/control_general_view_response/index.tsx b/x-pack/solutions/security/plugins/cloud_defend/public/components/control_general_view_response/index.tsx index 9511d11aa4f70..2012924544276 100644 --- a/x-pack/solutions/security/plugins/cloud_defend/public/components/control_general_view_response/index.tsx +++ b/x-pack/solutions/security/plugins/cloud_defend/public/components/control_general_view_response/index.tsx @@ -25,7 +25,6 @@ import { EuiCheckbox, EuiComboBoxOptionOption, EuiSpacer, - euiPaletteColorBlindBehindText, useEuiTheme, } from '@elastic/eui'; import { useStyles } from './styles'; @@ -61,7 +60,6 @@ export const ControlGeneralViewResponse = ({ const [isPopoverOpen, setPopoverOpen] = useState(false); const styles = useStyles(); const selectorStyles = useSelectorStyles(); - const visColorsBehindText = euiPaletteColorBlindBehindText(); const [accordionState, setAccordionState] = useState<'open' | 'closed'>( responses.length - 1 === index ? 'open' : 'closed' ); @@ -178,9 +176,9 @@ export const ControlGeneralViewResponse = ({ response.match.map((selector) => ({ label: selector as unknown as string, value: selector as unknown as string, - color: visColorsBehindText[0], + color: colors.backgroundLightSuccess, })), - [response.match, visColorsBehindText] + [response.match, colors] ); const selectedExcludes = useMemo( @@ -189,9 +187,9 @@ export const ControlGeneralViewResponse = ({ response.exclude.map((selector) => ({ label: selector as unknown as string, value: selector as unknown as string, - color: visColorsBehindText[5], + color: colors.backgroundLightWarning, })), - [response.exclude, visColorsBehindText] + [response.exclude, colors] ); const onShowExclude = useCallback(() => { diff --git a/x-pack/solutions/security/plugins/cloud_security_posture/common/types_old.ts b/x-pack/solutions/security/plugins/cloud_security_posture/common/types_old.ts index be5366b89bc24..12859e5512045 100644 --- a/x-pack/solutions/security/plugins/cloud_security_posture/common/types_old.ts +++ b/x-pack/solutions/security/plugins/cloud_security_posture/common/types_old.ts @@ -6,7 +6,10 @@ */ import { type TypeOf } from '@kbn/config-schema'; import type { CspBenchmarkRuleMetadata } from '@kbn/cloud-security-posture-common/schema/rules/latest'; -import type { CspFinding } from '@kbn/cloud-security-posture-common'; +import type { + CspFinding, + MisconfigurationEvaluationStatus, +} from '@kbn/cloud-security-posture-common'; import { SUPPORTED_CLOUDBEAT_INPUTS, SUPPORTED_POLICY_TEMPLATES } from './constants'; import { getComplianceDashboardSchema } from './schemas/stats'; @@ -36,7 +39,7 @@ export type AzureCredentialsType = | 'service_principal_with_client_username_and_password' | 'managed_identity'; -export type Evaluation = 'passed' | 'failed' | 'NA'; +export type Evaluation = MisconfigurationEvaluationStatus; export type PostureTypes = 'cspm' | 'kspm' | 'vuln_mgmt' | 'all'; /** number between 1-100 */ diff --git a/x-pack/solutions/security/plugins/cloud_security_posture/public/assets/icons/nvd_logo_svg.tsx b/x-pack/solutions/security/plugins/cloud_security_posture/public/assets/icons/nvd_logo_svg.tsx index b8dc583356cec..936d87ad0f236 100644 --- a/x-pack/solutions/security/plugins/cloud_security_posture/public/assets/icons/nvd_logo_svg.tsx +++ b/x-pack/solutions/security/plugins/cloud_security_posture/public/assets/icons/nvd_logo_svg.tsx @@ -5,24 +5,29 @@ * 2.0. */ -import { euiThemeVars } from '@kbn/ui-theme'; +import { useEuiTheme } from '@elastic/eui'; import React from 'react'; -export const NvdLogo = () => ( - - - - -); +// TODO: Borealis migration - replace fullShade with a proper color token, see https://github.com/elastic/kibana/issues/199715#issuecomment-2535949093 +export const NvdLogo = () => { + const { euiTheme } = useEuiTheme(); + + return ( + + + + + ); +}; diff --git a/x-pack/solutions/security/plugins/cloud_security_posture/public/components/compliance_score_bar.tsx b/x-pack/solutions/security/plugins/cloud_security_posture/public/components/compliance_score_bar.tsx index 3829542829909..3015f2bfd100b 100644 --- a/x-pack/solutions/security/plugins/cloud_security_posture/public/components/compliance_score_bar.tsx +++ b/x-pack/solutions/security/plugins/cloud_security_posture/public/components/compliance_score_bar.tsx @@ -9,7 +9,8 @@ import { EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip, useEuiTheme } from '@el import { css, SerializedStyles } from '@emotion/react'; import { i18n } from '@kbn/i18n'; import React from 'react'; -import { statusColors } from '@kbn/cloud-security-posture'; +import { MISCONFIGURATION_STATUS } from '@kbn/cloud-security-posture-common'; +import { getMisconfigurationStatusColor } from '@kbn/cloud-security-posture'; import { calculatePostureScore } from '../../common/utils/helpers'; import { CSP_FINDINGS_COMPLIANCE_SCORE, @@ -68,7 +69,7 @@ export const ComplianceScoreBar = ({ @@ -77,7 +78,7 @@ export const ComplianceScoreBar = ({ @@ -86,7 +87,7 @@ export const ComplianceScoreBar = ({ diff --git a/x-pack/solutions/security/plugins/cloud_security_posture/public/components/vulnerability_severity_map.tsx b/x-pack/solutions/security/plugins/cloud_security_posture/public/components/vulnerability_severity_map.tsx index 4773f5378fb3e..ad6051c2edada 100644 --- a/x-pack/solutions/security/plugins/cloud_security_posture/public/components/vulnerability_severity_map.tsx +++ b/x-pack/solutions/security/plugins/cloud_security_posture/public/components/vulnerability_severity_map.tsx @@ -15,10 +15,10 @@ import { EuiText, } from '@elastic/eui'; import { PaletteColorStop } from '@elastic/eui/src/components/color_picker/color_palette_picker'; -import type { VulnSeverity } from '@kbn/cloud-security-posture-common'; import { i18n } from '@kbn/i18n'; -import { getSeverityStatusColor } from '@kbn/cloud-security-posture'; +import type { VulnSeverity } from '@kbn/cloud-security-posture-common'; import { SeverityStatusBadge } from '@kbn/cloud-security-posture'; +import { useGetSeverityStatusColor } from '@kbn/cloud-security-posture/src/hooks/use_get_severity_status_color'; interface Props { total: number; @@ -52,6 +52,7 @@ const formatPercentage = (percentage: number) => { export const VulnerabilitySeverityMap = ({ severityMap, total }: Props) => { const { euiTheme } = useEuiTheme(); + const { getSeverityStatusColor } = useGetSeverityStatusColor(); const severityMapPallet: PaletteColorStop[] = []; const severityMapTooltip: SeverityMapTooltip[] = []; diff --git a/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/compliance_score_chart.tsx b/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/compliance_score_chart.tsx index 40d7b52ab3fed..866a612e82f95 100644 --- a/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/compliance_score_chart.tsx +++ b/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/compliance_score_chart.tsx @@ -32,7 +32,8 @@ import { FormattedDate, FormattedTime } from '@kbn/i18n-react'; import moment from 'moment'; import { i18n } from '@kbn/i18n'; import { css } from '@emotion/react'; -import { statusColors } from '@kbn/cloud-security-posture'; +import { MISCONFIGURATION_STATUS } from '@kbn/cloud-security-posture-common'; +import { getMisconfigurationStatusColor } from '@kbn/cloud-security-posture'; import { DASHBOARD_COMPLIANCE_SCORE_CHART } from '../test_subjects'; import { RULE_FAILED, RULE_PASSED } from '../../../../common/constants'; import { CompactFormattedNumber } from '../../../components/compact_formatted_number'; @@ -109,31 +110,33 @@ const CompactPercentageLabels = ({ }: { onEvalCounterClick: (evaluation: Evaluation) => void; stats: { totalPassed: number; totalFailed: number }; -}) => ( - <> - onEvalCounterClick(RULE_PASSED)} - tooltipContent={i18n.translate( - 'xpack.csp.complianceScoreChart.counterLink.passedFindingsTooltip', - { defaultMessage: 'Passed findings' } - )} - /> -  -  - onEvalCounterClick(RULE_FAILED)} - tooltipContent={i18n.translate( - 'xpack.csp.complianceScoreChart.counterButtonLink.failedFindingsTooltip', - { defaultMessage: 'Failed findings' } - )} - /> - -); +}) => { + return ( + <> + onEvalCounterClick(RULE_PASSED)} + tooltipContent={i18n.translate( + 'xpack.csp.complianceScoreChart.counterLink.passedFindingsTooltip', + { defaultMessage: 'Passed findings' } + )} + /> +  -  + onEvalCounterClick(RULE_FAILED)} + tooltipContent={i18n.translate( + 'xpack.csp.complianceScoreChart.counterButtonLink.failedFindingsTooltip', + { defaultMessage: 'Failed findings' } + )} + /> + + ); +}; const PercentageLabels = ({ onEvalCounterClick, @@ -144,13 +147,14 @@ const PercentageLabels = ({ }) => { const { euiTheme } = useEuiTheme(); const borderLeftStyles = { borderLeft: euiTheme.border.thin, paddingLeft: euiTheme.size.m }; + return ( onEvalCounterClick(RULE_PASSED)} /> @@ -159,7 +163,7 @@ const PercentageLabels = ({ onEvalCounterClick(RULE_FAILED)} /> diff --git a/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/configurations/findings_flyout/findings_flyout.tsx b/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/configurations/findings_flyout/findings_flyout.tsx index 462652b4869de..8ab9e9465dada 100644 --- a/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/configurations/findings_flyout/findings_flyout.tsx +++ b/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/configurations/findings_flyout/findings_flyout.tsx @@ -34,7 +34,6 @@ import { i18n } from '@kbn/i18n'; import type { HttpSetup } from '@kbn/core/public'; import { generatePath } from 'react-router-dom'; import { css } from '@emotion/react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { CspEvaluationBadge } from '@kbn/cloud-security-posture'; import type { CspFinding } from '@kbn/cloud-security-posture-common'; import { CspVulnerabilityFinding } from '@kbn/cloud-security-posture-common/schema/vulnerabilities/csp_vulnerability_finding'; @@ -240,6 +239,7 @@ export const FindingsRuleFlyout = ({ findingsCount, onPaginate, }: FindingFlyoutProps) => { + const { euiTheme } = useEuiTheme(); const [tab, setTab] = useState(tabs[0]); const createMisconfigurationRuleFn = async (http: HttpSetup) => @@ -263,7 +263,7 @@ export const FindingsRuleFlyout = ({
{!isNativeCspFinding(finding) && ['overview', 'rule'].includes(tab.id) && ( -
+
)} diff --git a/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/configurations/layout/findings_distribution_bar.tsx b/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/configurations/layout/findings_distribution_bar.tsx index 3fe31785f81df..055e4b054f508 100644 --- a/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/configurations/layout/findings_distribution_bar.tsx +++ b/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/configurations/layout/findings_distribution_bar.tsx @@ -8,8 +8,8 @@ import React from 'react'; import { css } from '@emotion/react'; import { EuiHealth, EuiBadge, EuiSpacer, EuiFlexGroup, useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { statusColors } from '@kbn/cloud-security-posture'; -import { getAbbreviatedNumber } from '@kbn/cloud-security-posture-common'; +import { getMisconfigurationStatusColor } from '@kbn/cloud-security-posture'; +import { getAbbreviatedNumber, MISCONFIGURATION_STATUS } from '@kbn/cloud-security-posture-common'; import { RULE_FAILED, RULE_PASSED } from '../../../../common/constants'; import type { Evaluation } from '../../../../common/types_old'; @@ -44,9 +44,13 @@ const Counters = ({ passed, failed }: Pick) => { gap: ${euiTheme.size.m}; `} > - {I18N_PASSED_FINDINGS} + + {I18N_PASSED_FINDINGS} + {getAbbreviatedNumber(passed)} - {I18N_FAILED_FINDINGS} + + {I18N_FAILED_FINDINGS} + {getAbbreviatedNumber(failed)} ); @@ -69,7 +73,7 @@ const DistributionBar: React.FC> = ({ > { distributionOnClick(RULE_PASSED); }} @@ -78,7 +82,7 @@ const DistributionBar: React.FC> = ({ /> { distributionOnClick(RULE_FAILED); }} diff --git a/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/rules/rules_counters.tsx b/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/rules/rules_counters.tsx index 15dca8e9b76ff..e2d5e78de0954 100644 --- a/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/rules/rules_counters.tsx +++ b/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/rules/rules_counters.tsx @@ -18,7 +18,8 @@ import { i18n } from '@kbn/i18n'; import { useParams } from 'react-router-dom'; import { Chart, Partition, PartitionLayout, Settings } from '@elastic/charts'; import { FormattedMessage } from '@kbn/i18n-react'; -import { statusColors } from '@kbn/cloud-security-posture'; +import { MISCONFIGURATION_STATUS } from '@kbn/cloud-security-posture-common'; +import { getMisconfigurationStatusColor } from '@kbn/cloud-security-posture'; import { useNavigateFindings } from '@kbn/cloud-security-posture/src/hooks/use_navigate_findings'; import { useBenchmarkDynamicValues } from '../../common/hooks/use_benchmark_dynamic_values'; import { getPostureScorePercentage } from '../compliance_dashboard/compliance_charts/compliance_score_chart'; @@ -74,8 +75,8 @@ const EvaluationPieChart = ({ failed, passed }: { failed: number; passed: number shape: { fillColor: (label) => label.toLowerCase() === RULE_PASSED.toLowerCase() - ? statusColors.passed - : statusColors.failed, + ? getMisconfigurationStatusColor(MISCONFIGURATION_STATUS.PASSED) + : getMisconfigurationStatusColor(MISCONFIGURATION_STATUS.FAILED), }, }, ]} @@ -232,7 +233,10 @@ export const RulesCounters = ({ defaultMessage: 'Failed Findings', }), title: benchmarkRulesStats.score.totalFailed, - titleColor: benchmarkRulesStats.score.totalFailed > 0 ? statusColors.failed : undefined, + titleColor: + benchmarkRulesStats.score.totalFailed > 0 + ? getMisconfigurationStatusColor(MISCONFIGURATION_STATUS.FAILED) + : undefined, button: ( { + const { euiTheme } = useEuiTheme(); const [selectedTabId, setSelectedTabId] = useState(overviewTabId); const vulnerability = vulnerabilityRecord?.vulnerability; @@ -176,7 +177,7 @@ export const VulnerabilityFindingFlyout = ({ @@ -186,14 +187,14 @@ export const VulnerabilityFindingFlyout = ({ @@ -210,7 +211,7 @@ export const VulnerabilityFindingFlyout = ({
{!isNativeCspFinding(vulnerabilityRecord) && selectedTabId === overviewTabId && ( -
+
)} diff --git a/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_overview_tab.tsx b/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_overview_tab.tsx index 9592ceec167b9..ffe647b4b7640 100644 --- a/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_overview_tab.tsx +++ b/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_overview_tab.tsx @@ -12,12 +12,12 @@ import { EuiIcon, EuiLink, EuiText, + useEuiTheme, } from '@elastic/eui'; import { css } from '@emotion/react'; import { FormattedMessage } from '@kbn/i18n-react'; import moment from 'moment'; import React from 'react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { i18n } from '@kbn/i18n'; import { VectorScoreBase, @@ -61,6 +61,7 @@ interface VulnerabilityTabProps { const EMPTY_VALUE = '-'; const CVSScore = ({ vectorBaseScore, vendor }: CVSScoreProps) => { + const { euiTheme } = useEuiTheme(); const vendorName = cvssVendors[vendor]; const vectorScores = getVectorScoreList(vectorBaseScore); @@ -69,9 +70,9 @@ const CVSScore = ({ vectorBaseScore, vendor }: CVSScoreProps) => { { + const { euiTheme } = useEuiTheme(); const { score, vector, version } = vectorScore; return ( <> {vector}{' '} @@ -145,10 +147,11 @@ const VectorScore = ({ }; const VulnerabilityOverviewTiles = ({ vulnerabilityRecord }: VulnerabilityTabProps) => { + const { euiTheme } = useEuiTheme(); const { vulnerability } = vulnerabilityRecord; const tileStyle = css` - padding: ${euiThemeVars.euiFontSizeM}; - background: ${euiThemeVars.euiColorLightestShade}; + padding: ${euiTheme.size.m}; + background: ${euiTheme.colors.backgroundLightText}; border-radius: 6px; height: 74px; `; @@ -222,6 +225,7 @@ const VulnerabilityOverviewTiles = ({ vulnerabilityRecord }: VulnerabilityTabPro }; export const VulnerabilityOverviewTab = ({ vulnerabilityRecord }: VulnerabilityTabProps) => { + const { euiTheme } = useEuiTheme(); const { vulnerability } = vulnerabilityRecord; uiMetricService.trackUiMetric(METRIC_TYPE.COUNT, VULNERABILITIES_FLYOUT_VISITS); @@ -255,9 +259,9 @@ export const VulnerabilityOverviewTab = ({ vulnerabilityRecord }: VulnerabilityT `; const flyoutSubheadingStyle = css` - font-size: ${euiThemeVars.euiFontSizeM}; + font-size: ${euiTheme.size.m}; line-height: 24px; - margin-bottom: ${euiThemeVars.euiSizeS}; + margin-bottom: ${euiTheme.size.s}; font-weight: 600; `; @@ -329,7 +333,7 @@ export const VulnerabilityOverviewTab = ({ vulnerabilityRecord }: VulnerabilityT direction="column" gutterSize="l" css={css` - margin-top: ${euiThemeVars.euiSizeS}; + margin-top: ${euiTheme.size.s}; `} > {!!cvssScores?.length ? cvssScores : EMPTY_VALUE} diff --git a/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/vulnerability_dashboard/vulnerability_statistics.tsx b/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/vulnerability_dashboard/vulnerability_statistics.tsx index de1f7ec3ba37a..f1df3c3d5f95f 100644 --- a/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/vulnerability_dashboard/vulnerability_statistics.tsx +++ b/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/vulnerability_dashboard/vulnerability_statistics.tsx @@ -8,13 +8,14 @@ import React, { useMemo } from 'react'; import { EuiFlexGroup, EuiFlexItem, EuiHealth } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { useNavigateNativeVulnerabilities } from '@kbn/cloud-security-posture/src/hooks/use_navigate_findings'; +import { useGetSeverityStatusColor } from '@kbn/cloud-security-posture/src/hooks/use_get_severity_status_color'; import { VULNERABILITIES_SEVERITY } from '@kbn/cloud-security-posture-common'; -import { getSeverityStatusColor } from '@kbn/cloud-security-posture'; import { VulnCounterCard, type VulnCounterCardProps } from '../../components/vuln_counter_card'; import { useVulnerabilityDashboardApi } from '../../common/api/use_vulnerability_dashboard_api'; import { CompactFormattedNumber } from '../../components/compact_formatted_number'; export const VulnerabilityStatistics = () => { + const { getSeverityStatusColor } = useGetSeverityStatusColor(); const navToVulnerabilities = useNavigateNativeVulnerabilities(); const getVulnerabilityDashboard = useVulnerabilityDashboardApi(); @@ -103,7 +104,7 @@ export const VulnerabilityStatistics = () => { }), }, ], - [getVulnerabilityDashboard.data, navToVulnerabilities] + [getVulnerabilityDashboard.data, navToVulnerabilities, getSeverityStatusColor] ); return ( diff --git a/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/vulnerability_dashboard/vulnerability_trend_graph.tsx b/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/vulnerability_dashboard/vulnerability_trend_graph.tsx index 599928eea88b8..47097d261c0cb 100644 --- a/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/vulnerability_dashboard/vulnerability_trend_graph.tsx +++ b/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/vulnerability_dashboard/vulnerability_trend_graph.tsx @@ -20,9 +20,9 @@ import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; import { useNavigateNativeVulnerabilities } from '@kbn/cloud-security-posture/src/hooks/use_navigate_findings'; +import { useGetSeverityStatusColor } from '@kbn/cloud-security-posture/src/hooks/use_get_severity_status_color'; import type { VulnSeverity } from '@kbn/cloud-security-posture-common'; import { VULNERABILITIES_SEVERITY } from '@kbn/cloud-security-posture-common'; -import { getSeverityStatusColor } from '@kbn/cloud-security-posture'; import { truthy } from '../../../common/utils/helpers'; import { VulnStatsTrend } from '../../../common/types_old'; import { useVulnerabilityDashboardApi } from '../../common/api/use_vulnerability_dashboard_api'; @@ -156,6 +156,7 @@ export const VulnerabilityTrendGraph = () => { const { services: { charts }, } = useKibana(); + const { getSeverityStatusColor } = useGetSeverityStatusColor(); const getVulnerabilityDashboard = useVulnerabilityDashboardApi(); const vulnTrends = getVulnerabilityDashboard.data?.vulnTrends || []; const [selectedAccount, setSelectedAccount] = useState(DEFAULT_ACCOUNT); @@ -189,7 +190,7 @@ export const VulnerabilityTrendGraph = () => { color: getSeverityStatusColor(VULNERABILITIES_SEVERITY.CRITICAL), }, ], - [] + [getSeverityStatusColor] ); return ( diff --git a/x-pack/solutions/security/plugins/cloud_security_posture/tsconfig.json b/x-pack/solutions/security/plugins/cloud_security_posture/tsconfig.json index e723ae3bc5d9f..c9fe35a099908 100755 --- a/x-pack/solutions/security/plugins/cloud_security_posture/tsconfig.json +++ b/x-pack/solutions/security/plugins/cloud_security_posture/tsconfig.json @@ -30,7 +30,6 @@ "@kbn/charts-plugin", "@kbn/discover-plugin", "@kbn/i18n", - "@kbn/ui-theme", "@kbn/i18n-react", "@kbn/es-query", "@kbn/data-views-plugin", diff --git a/x-pack/solutions/security/plugins/security_solution/public/cloud_security_posture/components/csp_details/misconfiguration_findings_details_table.tsx b/x-pack/solutions/security/plugins/security_solution/public/cloud_security_posture/components/csp_details/misconfiguration_findings_details_table.tsx index e82e50095507a..68dbe72449ba3 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/cloud_security_posture/components/csp_details/misconfiguration_findings_details_table.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/cloud_security_posture/components/csp_details/misconfiguration_findings_details_table.tsx @@ -19,10 +19,10 @@ import { MISCONFIGURATION_STATUS, buildMisconfigurationEntityFlyoutPreviewQuery, } from '@kbn/cloud-security-posture-common'; -import { euiThemeVars } from '@kbn/ui-theme'; import { DistributionBar } from '@kbn/security-solution-distribution-bar'; import type { CspBenchmarkRuleMetadata } from '@kbn/cloud-security-posture-common/schema/rules/latest'; -import { CspEvaluationBadge } from '@kbn/cloud-security-posture'; +import { CspEvaluationBadge, getMisconfigurationStatusColor } from '@kbn/cloud-security-posture'; + import { ENTITY_FLYOUT_EXPAND_MISCONFIGURATION_VIEW_VISITS, NAV_TO_FINDINGS_BY_HOST_NAME_FRPOM_ENTITY_FLYOUT, @@ -58,7 +58,7 @@ const getFindingsStats = ( } ), count: passedFindingsStats, - color: euiThemeVars.euiColorSuccess, + color: getMisconfigurationStatusColor(MISCONFIGURATION_STATUS.PASSED), filter: () => { filterFunction(MISCONFIGURATION_STATUS.PASSED); }, @@ -76,7 +76,7 @@ const getFindingsStats = ( } ), count: failedFindingsStats, - color: euiThemeVars.euiColorVis9, + color: getMisconfigurationStatusColor(MISCONFIGURATION_STATUS.FAILED), filter: () => { filterFunction(MISCONFIGURATION_STATUS.FAILED); }, @@ -186,7 +186,7 @@ export const MisconfigurationFindingsDetailsTable = memo( const linkWidth = 40; const resultWidth = 74; - const misconfgurationStats = getFindingsStats( + const misconfigurationStats = getFindingsStats( passedFindings, failedFindings, setCurrentFilter, @@ -272,7 +272,7 @@ export const MisconfigurationFindingsDetailsTable = memo( - + { + const { getSeverityStatusColor } = useGetSeverityStatusColor(); + useEffect(() => { uiMetricService.trackUiMetric( METRIC_TYPE.COUNT, @@ -154,6 +157,7 @@ export const VulnerabilitiesFindingsDetailsTable = memo(({ value }: { value: str low, none, }, + getSeverityStatusColor, setCurrentFilter, currentFilter ); diff --git a/x-pack/solutions/security/plugins/security_solution/public/cloud_security_posture/components/misconfiguration/misconfiguration_preview.tsx b/x-pack/solutions/security/plugins/security_solution/public/cloud_security_posture/components/misconfiguration/misconfiguration_preview.tsx index 40555aa400304..303443c5ef73c 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/cloud_security_posture/components/misconfiguration/misconfiguration_preview.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/cloud_security_posture/components/misconfiguration/misconfiguration_preview.tsx @@ -7,13 +7,13 @@ import React, { useCallback, useEffect, useMemo } from 'react'; import { css } from '@emotion/react'; -import type { EuiThemeComputed } from '@elastic/eui'; import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, useEuiTheme, EuiTitle } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { DistributionBar } from '@kbn/security-solution-distribution-bar'; import { useHasMisconfigurations } from '@kbn/cloud-security-posture/src/hooks/use_has_misconfigurations'; import { i18n } from '@kbn/i18n'; -import { statusColors } from '@kbn/cloud-security-posture'; +import { getMisconfigurationStatusColor } from '@kbn/cloud-security-posture'; +import { MISCONFIGURATION_STATUS } from '@kbn/cloud-security-posture-common'; import { METRIC_TYPE } from '@kbn/analytics'; import { ENTITY_FLYOUT_WITH_MISCONFIGURATION_VISIT, @@ -38,7 +38,7 @@ export const getFindingsStats = (passedFindingsStats: number, failedFindingsStat } ), count: passedFindingsStats, - color: statusColors.passed, + color: getMisconfigurationStatusColor(MISCONFIGURATION_STATUS.PASSED), }, { key: i18n.translate( @@ -48,7 +48,7 @@ export const getFindingsStats = (passedFindingsStats: number, failedFindingsStat } ), count: failedFindingsStats, - color: statusColors.failed, + color: getMisconfigurationStatusColor(MISCONFIGURATION_STATUS.FAILED), }, ]; }; @@ -56,12 +56,12 @@ export const getFindingsStats = (passedFindingsStats: number, failedFindingsStat const MisconfigurationPreviewScore = ({ passedFindings, failedFindings, - euiTheme, }: { passedFindings: number; failedFindings: number; - euiTheme: EuiThemeComputed<{}>; }) => { + const { euiTheme } = useEuiTheme(); + return ( @@ -158,7 +158,6 @@ export const MisconfigurationsPreview = ({ diff --git a/x-pack/solutions/security/plugins/security_solution/public/cloud_security_posture/components/vulnerabilities/vulnerabilities_preview.tsx b/x-pack/solutions/security/plugins/security_solution/public/cloud_security_posture/components/vulnerabilities/vulnerabilities_preview.tsx index 2bf4379b878e5..e1b54ba31da79 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/cloud_security_posture/components/vulnerabilities/vulnerabilities_preview.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/cloud_security_posture/components/vulnerabilities/vulnerabilities_preview.tsx @@ -7,11 +7,11 @@ import React, { useCallback, useEffect, useMemo } from 'react'; import { css } from '@emotion/react'; -import type { EuiThemeComputed } from '@elastic/eui'; import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, useEuiTheme, EuiTitle } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { DistributionBar } from '@kbn/security-solution-distribution-bar'; import { useVulnerabilitiesPreview } from '@kbn/cloud-security-posture/src/hooks/use_vulnerabilities_preview'; +import { useGetSeverityStatusColor } from '@kbn/cloud-security-posture/src/hooks/use_get_severity_status_color'; import { buildGenericEntityFlyoutPreviewQuery, getAbbreviatedNumber, @@ -32,11 +32,11 @@ import type { CloudPostureEntityIdentifier } from '../entity_insight'; const VulnerabilitiesCount = ({ vulnerabilitiesTotal, - euiTheme, }: { vulnerabilitiesTotal: string | number; - euiTheme: EuiThemeComputed<{}>; }) => { + const { euiTheme } = useEuiTheme(); + return ( @@ -100,6 +100,7 @@ export const VulnerabilitiesPreview = ({ }); const { euiTheme } = useEuiTheme(); + const { getSeverityStatusColor } = useGetSeverityStatusColor(); const goToEntityInsightTab = useCallback(() => { openDetailsPanel({ @@ -123,6 +124,18 @@ export const VulnerabilitiesPreview = ({ : undefined, [isLinkEnabled, goToEntityInsightTab] ); + + const vulnerabilityStats = getVulnerabilityStats( + { + critical: CRITICAL, + high: HIGH, + medium: MEDIUM, + low: LOW, + none: NONE, + }, + getSeverityStatusColor + ); + return ( - + - + diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/vulnerabilities_insight.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/vulnerabilities_insight.tsx index 125e7e9985edb..748deea7105ef 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/vulnerabilities_insight.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/vulnerabilities_insight.tsx @@ -10,6 +10,7 @@ import { EuiFlexItem, type EuiFlexGroupProps, useEuiTheme } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { css } from '@emotion/react'; import { useVulnerabilitiesPreview } from '@kbn/cloud-security-posture/src/hooks/use_vulnerabilities_preview'; +import { useGetSeverityStatusColor } from '@kbn/cloud-security-posture/src/hooks/use_get_severity_status_color'; import { buildGenericEntityFlyoutPreviewQuery } from '@kbn/cloud-security-posture-common'; import { getVulnerabilityStats, hasVulnerabilitiesData } from '@kbn/cloud-security-posture'; import { @@ -52,6 +53,7 @@ export const VulnerabilitiesInsight: React.FC = ({ }) => { const { scopeId, isPreview } = useDocumentDetailsContext(); const { euiTheme } = useEuiTheme(); + const { getSeverityStatusColor } = useGetSeverityStatusColor(); const { data } = useVulnerabilitiesPreview({ query: buildGenericEntityFlyoutPreviewQuery('host.name', hostName), sort: [], @@ -87,14 +89,17 @@ export const VulnerabilitiesInsight: React.FC = ({ const vulnerabilitiesStats = useMemo( () => - getVulnerabilityStats({ - critical: CRITICAL, - high: HIGH, - medium: MEDIUM, - low: LOW, - none: NONE, - }), - [CRITICAL, HIGH, MEDIUM, LOW, NONE] + getVulnerabilityStats( + { + critical: CRITICAL, + high: HIGH, + medium: MEDIUM, + low: LOW, + none: NONE, + }, + getSeverityStatusColor + ), + [CRITICAL, HIGH, MEDIUM, LOW, NONE, getSeverityStatusColor] ); const count = useMemo( diff --git a/x-pack/solutions/security/plugins/session_view/public/components/detail_panel_alert_actions/styles.ts b/x-pack/solutions/security/plugins/session_view/public/components/detail_panel_alert_actions/styles.ts deleted file mode 100644 index 14d0be374b5d1..0000000000000 --- a/x-pack/solutions/security/plugins/session_view/public/components/detail_panel_alert_actions/styles.ts +++ /dev/null @@ -1,107 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { useMemo } from 'react'; -import { useEuiTheme, transparentize } from '@elastic/eui'; -import { CSSObject, css } from '@emotion/react'; - -interface StylesDeps { - minimal?: boolean; - isInvestigated?: boolean; -} - -export const useStyles = ({ minimal = false, isInvestigated = false }: StylesDeps) => { - const { euiTheme } = useEuiTheme(); - - const cached = useMemo(() => { - const { colors, font, size, border } = euiTheme; - - const dangerBorder = transparentize(colors.danger, 0.2); - const dangerBackground = transparentize(colors.danger, 0.08); - const borderThickness = border.width.thin; - const mediumPadding = size.m; - - let alertTitleColor = colors.text; - let borderColor = colors.lightShade; - - if (isInvestigated) { - alertTitleColor = colors.primaryText; - borderColor = dangerBorder; - } - - const alertItem = css` - border: ${borderThickness} solid ${borderColor}; - padding: ${mediumPadding}; - border-radius: ${border.radius.medium}; - - margin: 0 ${mediumPadding} ${mediumPadding} ${mediumPadding}; - background-color: ${colors.emptyShade}; - - & .euiAccordion__buttonContent { - width: 100%; - } - - & .euiAccordion__button { - min-width: 0; - width: calc(100% - ${size.l}); - } - - & .euiAccordion__childWrapper { - overflow: visible; - } - `; - - const alertTitle: CSSObject = { - display: minimal ? 'none' : 'initial', - color: alertTitleColor, - fontWeight: font.weight.semiBold, - textOverflow: 'ellipsis', - overflow: 'hidden', - whiteSpace: 'nowrap', - }; - - const alertIcon: CSSObject = { - marginRight: size.s, - }; - - const alertAccordionButton: CSSObject = { - width: `calc(100% - ${size.l})`, - minWidth: 0, - }; - - const processPanel: CSSObject = { - border: `${borderThickness} solid ${colors.lightShade}`, - fontFamily: font.familyCode, - marginTop: mediumPadding, - padding: `${size.xs} ${size.s}`, - }; - - const investigatedLabel: CSSObject = { - position: 'relative', - zIndex: 1, - bottom: `-${mediumPadding}`, - left: `-${mediumPadding}`, - width: `calc(100% + ${mediumPadding} * 2)`, - borderTop: `${borderThickness} solid ${dangerBorder}`, - borderBottomLeftRadius: border.radius.medium, - borderBottomRightRadius: border.radius.medium, - backgroundColor: dangerBackground, - textAlign: 'center', - }; - - return { - alertItem, - alertTitle, - alertIcon, - alertAccordionButton, - processPanel, - investigatedLabel, - }; - }, [euiTheme, isInvestigated, minimal]); - - return cached; -}; diff --git a/x-pack/solutions/security/plugins/session_view/public/components/detail_panel_alert_list_item/styles.ts b/x-pack/solutions/security/plugins/session_view/public/components/detail_panel_alert_list_item/styles.ts index 4cd77e48c2c4d..85cb461bc9c16 100644 --- a/x-pack/solutions/security/plugins/session_view/public/components/detail_panel_alert_list_item/styles.ts +++ b/x-pack/solutions/security/plugins/session_view/public/components/detail_panel_alert_list_item/styles.ts @@ -15,8 +15,8 @@ export const useStyles = (minimal = false, isInvestigated = false) => { const cached = useMemo(() => { const { colors, font, size, border } = euiTheme; - const dangerBorder = transparentize(colors.danger, 0.2); - const dangerBackground = transparentize(colors.danger, 0.08); + const dangerBorder = transparentize(colors.danger, 0.2); // TODO: Borealis migration - replace transparentize with color token + const dangerBackground = transparentize(colors.danger, 0.08); // TODO: Borealis migration - replace transparentize with color token const borderThickness = border.width.thin; const mediumPadding = size.m; diff --git a/x-pack/solutions/security/plugins/session_view/public/components/detail_panel_list_item/styles.ts b/x-pack/solutions/security/plugins/session_view/public/components/detail_panel_list_item/styles.ts index 48a8dba781ee4..6823ba6bd0abd 100644 --- a/x-pack/solutions/security/plugins/session_view/public/components/detail_panel_list_item/styles.ts +++ b/x-pack/solutions/security/plugins/session_view/public/components/detail_panel_list_item/styles.ts @@ -41,7 +41,7 @@ export const useStyles = ({ display }: StylesDeps) => { position: 'relative', borderRadius: euiTheme.border.radius.medium, '&:hover': { - background: transparentize(euiTheme.colors.primary, 0.1), + background: transparentize(euiTheme.colors.primary, 0.1), // TODO: Borealis migration - replace transparentize with color token }, height: 'fit-content', }; diff --git a/x-pack/solutions/security/plugins/session_view/public/components/process_tree/styles.ts b/x-pack/solutions/security/plugins/session_view/public/components/process_tree/styles.ts index d01a906e1d38d..a2dac9bbb60ca 100644 --- a/x-pack/solutions/security/plugins/session_view/public/components/process_tree/styles.ts +++ b/x-pack/solutions/security/plugins/session_view/public/components/process_tree/styles.ts @@ -6,7 +6,6 @@ */ import { useMemo } from 'react'; -import { transparentize } from '@elastic/eui'; import { CSSObject } from '@emotion/react'; import { useEuiTheme } from '../../hooks'; @@ -14,8 +13,7 @@ export const useStyles = () => { const { euiTheme, euiVars } = useEuiTheme(); const cached = useMemo(() => { - const { colors, font, size } = euiTheme; - const defaultSelectionColor = colors.primary; + const { font } = euiTheme; const sessionViewProcessTree: CSSObject = { position: 'relative', @@ -25,26 +23,8 @@ export const useStyles = () => { backgroundColor: euiVars.euiColorLightestShade, }; - const selectionArea: CSSObject = { - position: 'absolute', - display: 'none', - marginLeft: '-50%', - width: '150%', - height: '100%', - backgroundColor: defaultSelectionColor, - pointerEvents: 'none', - opacity: 0.1, - transform: `translateY(-${size.xs})`, - }; - - const defaultSelected = transparentize(colors.primary, 0.008); - const alertSelected = transparentize(colors.danger, 0.008); - return { sessionViewProcessTree, - selectionArea, - defaultSelected, - alertSelected, }; }, [euiTheme, euiVars]); diff --git a/x-pack/solutions/security/plugins/session_view/public/components/process_tree_alert/styles.ts b/x-pack/solutions/security/plugins/session_view/public/components/process_tree_alert/styles.ts index de3dc797e3351..02d49e502bc35 100644 --- a/x-pack/solutions/security/plugins/session_view/public/components/process_tree_alert/styles.ts +++ b/x-pack/solutions/security/plugins/session_view/public/components/process_tree_alert/styles.ts @@ -23,17 +23,17 @@ export const useStyles = ({ isInvestigated, isSelected }: StylesDeps) => { const getHighlightColors = () => { let bgColor = 'none'; - let hoverBgColor = `${transparentize(colors.primary, 0.04)}`; + let hoverBgColor = `${transparentize(colors.primary, 0.04)}`; // TODO: Borealis migration - replace transparentize with color token if (isInvestigated && isSelected) { - bgColor = `${transparentize(colors.danger, 0.08)}`; - hoverBgColor = `${transparentize(colors.danger, 0.12)}`; + bgColor = `${transparentize(colors.danger, 0.08)}`; // TODO: Borealis migration - replace transparentize with color token + hoverBgColor = `${transparentize(colors.danger, 0.12)}`; // TODO: Borealis migration - replace transparentize with color token } else if (isInvestigated) { - bgColor = `${transparentize(colors.danger, 0.04)}`; - hoverBgColor = `${transparentize(colors.danger, 0.12)}`; + bgColor = `${transparentize(colors.danger, 0.04)}`; // TODO: Borealis migration - replace transparentize with color token + hoverBgColor = `${transparentize(colors.danger, 0.12)}`; // TODO: Borealis migration - replace transparentize with color token } else if (isSelected) { - bgColor = `${transparentize(colors.primary, 0.08)}`; - hoverBgColor = `${transparentize(colors.primary, 0.12)}`; + bgColor = `${transparentize(colors.primary, 0.08)}`; // TODO: Borealis migration - replace transparentize with color token + hoverBgColor = `${transparentize(colors.primary, 0.12)}`; // TODO: Borealis migration - replace transparentize with color token } return { bgColor, hoverBgColor }; @@ -56,7 +56,7 @@ export const useStyles = ({ isInvestigated, isSelected }: StylesDeps) => { flexShrink: 0, marginRight: size.xs, '&:hover, &:focus, &:focus-within': { - backgroundColor: transparentize(euiVars.buttonsBackgroundNormalDefaultPrimary, 0.2), + backgroundColor: transparentize(euiVars.buttonsBackgroundNormalDefaultPrimary, 0.2), // TODO: Borealis migration - replace transparentize with color token }, }, '&& .euiFlexItem': { diff --git a/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/index.tsx b/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/index.tsx index b493591b94370..43f0c8e5a2763 100644 --- a/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/index.tsx +++ b/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/index.tsx @@ -5,12 +5,6 @@ * 2.0. */ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - *2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ import React, { useState, useEffect, diff --git a/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/styles.ts b/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/styles.ts index 32048cfd97585..56df551b2ffe5 100644 --- a/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/styles.ts +++ b/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/styles.ts @@ -58,9 +58,9 @@ export const useStyles = ({ */ const getHighlightColors = () => { let bgColor = 'none'; - let hoverColor = transparentize(colors.primary, 0.04); + let hoverColor = transparentize(colors.primary, 0.04); // TODO: Borealis migration - replace transparentize with color token let borderColor = 'transparent'; - let searchResColor = transparentize(colors.warning, 0.32); + let searchResColor = transparentize(colors.warning, 0.32); // TODO: Borealis migration - replace transparentize with color token if (hasAlerts) { borderColor = colors.danger; @@ -68,15 +68,15 @@ export const useStyles = ({ if (isSelected) { searchResColor = colors.warning; - bgColor = transparentize(colors.primary, 0.08); - hoverColor = transparentize(colors.primary, 0.12); + bgColor = transparentize(colors.primary, 0.08); // TODO: Borealis migration - replace transparentize with color token + hoverColor = transparentize(colors.primary, 0.12); // TODO: Borealis migration - replace transparentize with color token } if (hasInvestigatedAlert) { - bgColor = transparentize(colors.danger, 0.04); - hoverColor = transparentize(colors.danger, 0.12); + bgColor = transparentize(colors.danger, 0.04); // TODO: Borealis migration - replace transparentize with color token + hoverColor = transparentize(colors.danger, 0.12); // TODO: Borealis migration - replace transparentize with color token if (isSelected) { - bgColor = transparentize(colors.danger, 0.08); + bgColor = transparentize(colors.danger, 0.08); // TODO: Borealis migration - replace transparentize with color token } } @@ -166,7 +166,7 @@ export const useStyles = ({ }; const workingDir: CSSObject = { - color: colors.successText, + color: colors.textSuccess, fontFamily: font.familyCode, fontWeight: font.weight.regular, }; diff --git a/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/use_button_styles.ts b/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/use_button_styles.ts index c6e89f9be0d13..c5f574eb1befc 100644 --- a/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/use_button_styles.ts +++ b/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/use_button_styles.ts @@ -6,12 +6,11 @@ */ import { useMemo } from 'react'; -import { transparentize } from '@elastic/eui'; import { CSSObject } from '@emotion/react'; import { useEuiTheme } from '../../hooks'; export const useButtonStyles = () => { - const { euiTheme, euiVars } = useEuiTheme(); + const { euiTheme } = useEuiTheme(); const cached = useMemo(() => { const { border, colors, size, font } = euiTheme; @@ -27,9 +26,9 @@ export const useButtonStyles = () => { marginRight: size.xs, minWidth: 0, padding: `${size.s} ${size.xxs}`, - color: euiVars.euiColorVis6_asText, - background: transparentize(euiVars.euiColorVis6, 0.04), - border: `${border.width.thin} solid ${transparentize(euiVars.euiColorVis6, 0.48)}`, + color: colors.textPrimary, + background: colors.backgroundBasePrimary, + border: `${border.width.thin} solid ${colors.borderBasePrimary}`, '&& > span': { padding: `0px ${size.xxs}`, svg: { @@ -37,7 +36,7 @@ export const useButtonStyles = () => { }, }, '&&:hover, &&:focus': { - background: transparentize(euiVars.euiColorVis6, 0.12), + background: colors.backgroundLightPrimary, textDecoration: 'none', }, '&.isExpanded > span svg:not(.alertIcon)': { @@ -45,9 +44,9 @@ export const useButtonStyles = () => { }, '&.isExpanded': { color: colors.ghost, - background: euiVars.euiColorVis6, + background: colors.backgroundFilledPrimary, '&:hover, &:focus': { - background: euiVars.euiColorVis6, + background: colors.backgroundFilledPrimary, }, }, }; @@ -57,18 +56,18 @@ export const useButtonStyles = () => { }; const alertButton: CSSObject = { ...button, - color: euiVars.euiColorDanger, - background: transparentize(euiVars.euiColorDanger, 0.04), - border: `${border.width.thin} solid ${transparentize(euiVars.euiColorDanger, 0.48)}`, + color: colors.textDanger, + background: colors.backgroundBaseDanger, + border: `${border.width.thin} solid ${colors.borderBaseDanger}`, '&&:hover, &&:focus': { - background: transparentize(euiVars.euiColorDanger, 0.12), + background: colors.backgroundLightDanger, textDecoration: 'none', }, '&.isExpanded': { color: colors.ghost, - background: euiVars.euiColorDanger, + background: colors.backgroundFilledDanger, '&:hover, &:focus': { - background: `${euiVars.euiColorDanger}`, + background: `${colors.backgroundFilledDanger}`, }, }, @@ -83,18 +82,18 @@ export const useButtonStyles = () => { const outputButton: CSSObject = { ...button, - color: euiVars.euiColorVis1, - background: transparentize(euiVars.euiColorVis1, 0.04), - border: `${border.width.thin} solid ${transparentize(euiVars.euiColorVis1, 0.48)}`, + color: colors.textAccent, + background: colors.backgroundBaseAccent, + border: `${border.width.thin} solid ${colors.borderBaseAccent}`, '&&:hover, &&:focus': { - background: transparentize(euiVars.euiColorVis1, 0.12), + background: colors.backgroundLightAccent, textDecoration: 'none', }, '&.isExpanded': { color: colors.ghost, - background: euiVars.euiColorVis1, + background: colors.backgroundFilledAccent, '&:hover, &:focus': { - background: `${euiVars.euiColorVis1}`, + background: `${colors.backgroundFilledAccent}`, }, }, }; @@ -102,12 +101,12 @@ export const useButtonStyles = () => { const userChangedButton: CSSObject = { ...button, cursor: 'default', - color: euiVars.euiColorGhost, - background: euiVars.euiColorVis3, - border: `${border.width.thin} solid ${transparentize(euiVars.euiColorVis3, 0.48)}`, + color: colors.textAccentSecondary, + background: colors.backgroundBaseAccentSecondary, + border: `${border.width.thin} solid ${colors.borderBaseAccentSecondary}`, '&&:hover, &&:focus': { - color: euiVars.euiColorGhost, - background: euiVars.euiColorVis3, + color: colors.textAccentSecondary, + background: colors.backgroundBaseAccentSecondary, textDecoration: 'none', transform: 'none', animation: 'none', @@ -126,7 +125,7 @@ export const useButtonStyles = () => { userChangedButton, buttonSize, }; - }, [euiTheme, euiVars]); + }, [euiTheme]); return cached; }; diff --git a/x-pack/solutions/security/plugins/session_view/public/components/tty_player/styles.ts b/x-pack/solutions/security/plugins/session_view/public/components/tty_player/styles.ts index cbc182c7efb53..f7b9ff88a4445 100644 --- a/x-pack/solutions/security/plugins/session_view/public/components/tty_player/styles.ts +++ b/x-pack/solutions/security/plugins/session_view/public/components/tty_player/styles.ts @@ -37,7 +37,7 @@ export const useStyles = (tty?: Teletype, show?: boolean) => { padding: `${size.m} ${size.base}`, }; - const windowBoundsColor = transparentize(colors.ghost, 0.6); + const windowBoundsColor = transparentize(colors.ghost, 0.6); // TODO: Borealis migration - replace transparentize with color token, get rid of ghost color const terminal: CSSObject = { minHeight: '100%', diff --git a/x-pack/solutions/security/plugins/session_view/public/components/tty_player_controls/tty_player_controls_markers/styles.ts b/x-pack/solutions/security/plugins/session_view/public/components/tty_player_controls/tty_player_controls_markers/styles.ts index 48c7c67128c64..dad8c34b52ffb 100644 --- a/x-pack/solutions/security/plugins/session_view/public/components/tty_player_controls/tty_player_controls_markers/styles.ts +++ b/x-pack/solutions/security/plugins/session_view/public/components/tty_player_controls/tty_player_controls_markers/styles.ts @@ -11,8 +11,13 @@ import { useEuiTheme } from '../../../hooks'; import { TTYPlayerLineMarkerType } from '.'; +const isAmsterdam = (euiThemeName: string) => { + return euiThemeName?.toLowerCase().includes('amsterdam'); +}; + export const useStyles = (progress: number) => { const { euiTheme, euiVars } = useEuiTheme(); + const themeName = euiTheme.themeName; const cached = useMemo(() => { const { border } = euiTheme; @@ -36,7 +41,7 @@ export const useStyles = (progress: number) => { if (selected) { return euiVars.terminalOutputMarkerAccent; } - return euiVars.euiColorVis1; + return isAmsterdam(themeName) ? euiVars.euiColorVis1 : euiVars.euiColorVis2; }; const marker = (type: TTYPlayerLineMarkerType, selected: boolean): CSSObject => ({ @@ -84,16 +89,24 @@ export const useStyles = (progress: number) => { "input[type='range']::-webkit-slider-thumb": customThumb, "input[type='range']::-moz-range-thumb": customThumb, '.euiRangeHighlight__progress': { - backgroundColor: euiVars.euiColorVis0_behindText, + backgroundColor: isAmsterdam(themeName) + ? euiVars.euiColorVis0_behindText + : euiVars.euiColorVis0, width: progress + '%!important', borderBottomRightRadius: 0, borderTopRightRadius: 0, }, '.euiRangeSlider:focus ~ .euiRangeHighlight .euiRangeHighlight__progress': { - backgroundColor: euiVars.euiColorVis0_behindText, + backgroundColor: isAmsterdam(themeName) + ? euiVars.euiColorVis0_behindText + : euiVars.euiColorVis0, }, '.euiRangeSlider:focus:not(:focus-visible) ~ .euiRangeHighlight .euiRangeHighlight__progress': - { backgroundColor: euiVars.euiColorVis0_behindText }, + { + backgroundColor: isAmsterdam(themeName) + ? euiVars.euiColorVis0_behindText + : euiVars.euiColorVis0, + }, '.euiRangeTrack::after': { background: euiVars.terminalOutputSliderBackground, }, @@ -120,12 +133,15 @@ export const useStyles = (progress: number) => { }, [ euiTheme, euiVars.euiColorVis0_behindText, + euiVars.euiColorVis0, euiVars.euiColorVis1, + euiVars.euiColorVis2, euiVars.terminalOutputBackground, euiVars.terminalOutputMarkerAccent, euiVars.terminalOutputMarkerWarning, euiVars.terminalOutputSliderBackground, progress, + themeName, ]); return cached; diff --git a/x-pack/solutions/security/plugins/session_view/public/hooks/use_eui_theme.ts b/x-pack/solutions/security/plugins/session_view/public/hooks/use_eui_theme.ts index a62cab176657b..6c43c4ad1e6b1 100644 --- a/x-pack/solutions/security/plugins/session_view/public/hooks/use_eui_theme.ts +++ b/x-pack/solutions/security/plugins/session_view/public/hooks/use_eui_theme.ts @@ -5,14 +5,12 @@ * 2.0. */ -import { shade, useEuiTheme as useEuiThemeHook } from '@elastic/eui'; -import { euiLightVars, euiDarkVars } from '@kbn/ui-theme'; +import { useEuiTheme as useEuiThemeHook } from '@elastic/eui'; +import { euiLightVars, euiDarkVars } from '@kbn/ui-theme'; // TODO: Borealis migration - replace to use vars from useEuiTheme? import { useMemo } from 'react'; type EuiThemeProps = Parameters; type ExtraEuiVars = { - // eslint-disable-next-line @typescript-eslint/naming-convention - euiColorVis6_asText: string; buttonsBackgroundNormalDefaultPrimary: string; terminalOutputBackground: string; terminalOutputMarkerAccent: string; @@ -29,14 +27,12 @@ export const useEuiTheme = (...props: EuiThemeProps): EuiThemeReturn => { const euiThemeHook = useEuiThemeHook(...props); const euiVars = useMemo(() => { - const themeVars = euiThemeHook.colorMode === 'DARK' ? euiDarkVars : euiLightVars; + const themeVars = euiThemeHook.colorMode === 'DARK' ? euiDarkVars : euiLightVars; // TODO: Borealis migration - check if euiLightVars and euiDarkVars are still available in Borialis const extraEuiVars: ExtraEuiVars = { - // eslint-disable-next-line @typescript-eslint/naming-convention - euiColorVis6_asText: shade(themeVars.euiColorVis6, 0.335), - buttonsBackgroundNormalDefaultPrimary: '#006DE4', + buttonsBackgroundNormalDefaultPrimary: '#006DE4', // TODO: Borealis migration - replace with proper color token // Terminal Output Colors don't change with the theme - terminalOutputBackground: '#1d1e23', + terminalOutputBackground: '#1d1e23', // TODO: Borealis migration - replace with proper color token terminalOutputMarkerAccent: euiLightVars.euiColorAccent, terminalOutputMarkerWarning: euiDarkVars.euiColorWarning, terminalOutputSliderBackground: euiLightVars.euiColorDarkestShade,