From 1e29e9a2b66d4c98f73868ef1da2aa2e99f02a43 Mon Sep 17 00:00:00 2001 From: Maxim Kholod Date: Tue, 21 Jan 2025 10:21:03 +0100 Subject: [PATCH] kibana-cloud-security-posture owned UX adjustment for borealis (#205136) ## Summary This PR covers some of the changes required for the new Borealis theme: - https://github.com/elastic/security-team/issues/11230 The detailed guide of migrating to Borealis can be found in this meta ticket: - https://github.com/elastic/kibana/issues/199715 As the work is still in progress, here are the details of what is included in this PR: - the full migration is done for flows related to Cloud Security Posture. One requirement from EUI is not fulfilled, as we switched to hardcoded severity colors and hardcoded failed/passed misconfig finding colors. This is because the new severity color palette built by EUI team is not yet approved by Security Designers, see https://elastic.slack.com/archives/C0851RDCWPP/p1736954935896329 for more details - I made some straightforward changes to Cloud Defend and k8s dashboard plugins and added some todos, but these plugins are decommissioned in Serverless and from 9.0, so no thorough testing is required - In the Session View I made some straightforward changes according to the EUI guide and added TODOs where feedback from designers is required. Still waiting for the designer's feedback, but I think we can safely merge the changes present in this PR and it will bring Session View to a better state before 9.0 FF Amsterdam vs Borealis comparison screenshots for CSP and Session View: https://www.figma.com/design/XPKYLgZcoI61V3RUfHoHg9/Untitled?node-id=41-42&t=zLvulagbqCiXhrAo-0 ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [x] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [x] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> --- .../common/constants.ts | 4 +- .../common/index.ts | 1 + .../common/types/misconfigurations.ts | 8 ++ .../src/distribution_bar.stories.tsx | 13 +-- .../packages/distribution_bar/tsconfig.json | 1 - .../public/index.ts | 7 +- .../src/components/csp_evaluation_badge.tsx | 20 ++-- .../src/components/vulnerability_badges.tsx | 12 +- .../src/constants/component_constants.ts | 16 --- .../src/hooks/use_get_cvs_score_color.ts | 20 ++++ .../hooks/use_get_severity_status_color.ts | 19 +++ .../src/utils/get_finding_colors.test.ts | 77 +++++++++++++ .../public/src/utils/get_finding_colors.ts | 108 ++++++++++++++++++ .../utils/get_vulnerabilitiy_colors.test.ts | 52 --------- .../src/utils/get_vulnerability_colors.ts | 37 ------ .../src/utils/vulnerability_helpers.test.ts | 40 +++++-- .../public/src/utils/vulnerability_helpers.ts | 4 +- .../control_general_view_response/index.tsx | 10 +- .../common/types_old.ts | 7 +- .../public/assets/icons/nvd_logo_svg.tsx | 43 ++++--- .../components/compliance_score_bar.tsx | 9 +- .../components/vulnerability_severity_map.tsx | 5 +- .../compliance_score_chart.tsx | 60 +++++----- .../findings_flyout/findings_flyout.tsx | 6 +- .../layout/findings_distribution_bar.tsx | 16 ++- .../public/pages/rules/rules_counters.tsx | 12 +- .../vulnerability_finding_flyout.tsx | 13 ++- .../vulnerability_overview_tab.tsx | 28 +++-- .../vulnerability_statistics.tsx | 5 +- .../vulnerability_trend_graph.tsx | 5 +- .../cloud_security_posture/tsconfig.json | 1 - ...isconfiguration_findings_details_table.tsx | 12 +- ...vulnerabilities_findings_details_table.tsx | 4 + .../misconfiguration_preview.tsx | 13 +-- .../vulnerabilities_preview.tsx | 34 +++--- .../components/vulnerabilities_insight.tsx | 21 ++-- .../detail_panel_alert_actions/styles.ts | 107 ----------------- .../detail_panel_alert_list_item/styles.ts | 4 +- .../detail_panel_list_item/styles.ts | 2 +- .../public/components/process_tree/styles.ts | 22 +--- .../components/process_tree_alert/styles.ts | 16 +-- .../components/process_tree_node/index.tsx | 6 - .../components/process_tree_node/styles.ts | 16 +-- .../process_tree_node/use_button_styles.ts | 51 ++++----- .../public/components/tty_player/styles.ts | 2 +- .../tty_player_controls_markers/styles.ts | 24 +++- .../public/hooks/use_eui_theme.ts | 14 +-- 47 files changed, 538 insertions(+), 469 deletions(-) create mode 100644 x-pack/platform/packages/shared/kbn-cloud-security-posture/common/types/misconfigurations.ts delete mode 100644 x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/constants/component_constants.ts create mode 100644 x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/hooks/use_get_cvs_score_color.ts create mode 100644 x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/hooks/use_get_severity_status_color.ts create mode 100644 x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_finding_colors.test.ts create mode 100644 x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_finding_colors.ts delete mode 100644 x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_vulnerabilitiy_colors.test.ts delete mode 100644 x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_vulnerability_colors.ts delete mode 100644 x-pack/solutions/security/plugins/session_view/public/components/detail_panel_alert_actions/styles.ts 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,