kibana-cloud-security-posture owned UX udjustment for borealis

x-pack/platform/packages/shared/kbn-cloud-security-posture/common/constants.ts

@@ -48,7 +48,8 @@ export const VULNERABILITIES_SEVERITY: Record<VulnSeverity, VulnSeverity> = {
   UNKNOWN: 'UNKNOWN',
 };
 
-export const MISCONFIGURATION_STATUS: Record<string, string> = {
+export const MISCONFIGURATION_STATUS: Record<string, 'passed' | 'failed' | 'unknown'> = {
   PASSED: 'passed',
   FAILED: 'failed',
+  UNKNOWN: 'unknown',
 };

x-pack/solutions/security/packages/distribution_bar/src/distribution_bar.stories.tsx

@@ -5,25 +5,27 @@
  * 2.0.
  */
 import React from 'react';
-import { euiThemeVars } from '@kbn/ui-theme';
+import { euiThemeVars } from '@kbn/ui-theme'; // TODO: replace with euiTheme
 import { EuiTitle, EuiSpacer } from '@elastic/eui';
 import { DistributionBar as DistributionBarComponent } from '..';
 
 const mockStatsFindings = [
   {
     key: 'passed',
     count: 90,
-    color: euiThemeVars.euiColorVis0,
+    color: euiThemeVars.euiColorSuccess,
     label: 'Passed',
   },
   {
     key: 'failed',
     count: 10,
-    color: euiThemeVars.euiColorVis9,
+    color: euiThemeVars.euiColorDanger,
     label: <>{'Failed'}</>,
   },
 ];
 
+// TODO: replace with severity palette colors
+// TODO: replace with euiTheme.colors.vis.* from useEuiTheme hook
 const mockStatsAlerts = [
   {
     key: 'low',

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';

x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/components/csp_evaluation_badge.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import { EuiBadge, type EuiBadgeProps } 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';
 
 interface Props {
   type?: 'passed' | 'failed';
@@ -20,8 +20,8 @@ interface Props {
 const BADGE_WIDTH = '46px';
 
 const getColor = (type: Props['type']): EuiBadgeProps['color'] => {
-  if (type === 'passed') return statusColors.passed;
-  if (type === 'failed') return statusColors.failed;
+  if (type === MISCONFIGURATION_STATUS.PASSED) return 'success';
+  if (type === MISCONFIGURATION_STATUS.FAILED) return 'danger';
   return 'default';
 };
 
@@ -35,12 +35,12 @@ export const CspEvaluationBadge = ({ type }: Props) => (
     `}
     data-test-subj={`${type}_finding`}
   >
-    {type === 'failed' ? (
+    {type === MISCONFIGURATION_STATUS.FAILED ? (
       <FormattedMessage
         id="securitySolutionPackages.csp.cspEvaluationBadge.failLabel"
         defaultMessage="Fail"
       />
-    ) : type === 'passed' ? (
+    ) : type === MISCONFIGURATION_STATUS.PASSED ? (
       <FormattedMessage
         id="securitySolutionPackages.csp.cspEvaluationBadge.passLabel"
         defaultMessage="Pass"

x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/components/vulnerability_badges.tsx

@@ -5,12 +5,12 @@
  * 2.0.
  */
 
-import { EuiBadge, EuiIcon, EuiTextColor } from '@elastic/eui';
+import { EuiBadge, EuiIcon, EuiTextColor, useEuiTheme } from '@elastic/eui';
 import React from 'react';
 import { css } from '@emotion/react';
 import { float } from '@elastic/elasticsearch/lib/api/types';
 import type { VulnSeverity } from '@kbn/cloud-security-posture-common';
-import { getCvsScoreColor, getSeverityStatusColor } from '../utils/get_vulnerability_colors';
+import { getCvsScoreColor, getSeverityStatusColor } from '../utils/get_finding_colors';
 
 const VULNERABILITIES_CVSS_SCORE_BADGE_SUBJ = 'vulnerabilities_cvss_score_badge';
 
@@ -24,9 +24,11 @@ interface SeverityStatusBadgeProps {
 }
 
 export const CVSScoreBadge = ({ score, version }: CVSScoreBadgeProps) => {
+  const { euiTheme } = useEuiTheme();
+
   if (!score) return null;
 
-  const color = getCvsScoreColor(score);
+  const color = getCvsScoreColor(score, euiTheme);
   const versionDisplay = version ? `v${version.split('.')[0]}` : null;
 
   return (
@@ -48,7 +50,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,8 +62,10 @@ export const CVSScoreBadge = ({ score, version }: CVSScoreBadgeProps) => {
 };
 
 export const SeverityStatusBadge = ({ severity }: SeverityStatusBadgeProps) => {
+  const { euiTheme } = useEuiTheme();
+
   if (!severity) return null;
-  const color = getSeverityStatusColor(severity);
+  const color = getSeverityStatusColor(severity, euiTheme);
 
   return (
     <div

x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_finding_colors.ts

@@ -0,0 +1,103 @@
+/*
+ * 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 } from '@kbn/cloud-security-posture-common';
+import {
+  VULNERABILITIES_SEVERITY,
+  MISCONFIGURATION_STATUS,
+} from '@kbn/cloud-security-posture-common';
+
+const isBorealis = (euiThemeName: string) => {
+  return euiThemeName?.toLowerCase().includes('borealis');
+};
+
+const isAmsterdam = (euiThemeName: string) => {
+  return euiThemeName?.toLowerCase().includes('amsterdam');
+};
+
+// TODO: replace with severity color palette
+// TODO: replace with euiTheme.colors.vis.* from useEuiTheme hook
+// TODO: replace #aaa with proper color token
+export const getSeverityStatusColor = (
+  severity: VulnSeverity,
+  euiTheme: EuiThemeComputed
+): string => {
+  // TOOD: remove old mapping when severity palette is fixed (atm it is inverted)
+  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 euiTheme.colors.vis.euiColorVis0; // TODO: use color from the severity palette?
+    case VULNERABILITIES_SEVERITY.MEDIUM:
+      return euiTheme.colors.vis.euiColorSeverity7;
+    case VULNERABILITIES_SEVERITY.HIGH:
+      return euiTheme.colors.vis.euiColorSeverity11;
+    case VULNERABILITIES_SEVERITY.CRITICAL:
+      return euiTheme.colors.vis.euiColorSeverity14;
+    default:
+      return euiTheme.colors.vis.euiColorSeverity0;
+  }
+};
+
+// TODO: replace with severity color palette
+// TODO: replace with euiTheme.colors.vis.* from useEuiTheme hook
+export const getCvsScoreColor = (score: number, euiTheme: EuiThemeComputed): string | undefined => {
+  // TOOD: remove old mapping when severity palette is fixed (atm it is inverted)
+  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 <= 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);
+  }
+};
+
+export const getMisconfigurationStatusColor = (
+  status: 'passed' | 'failed' | 'unknown',
+  euiTheme: EuiThemeComputed
+): string => {
+  switch (status) {
+    case MISCONFIGURATION_STATUS.PASSED:
+      return euiTheme.colors.success;
+    case MISCONFIGURATION_STATUS.FAILED:
+      return euiTheme.colors.danger;
+    case MISCONFIGURATION_STATUS.UNKNOWN:
+    default:
+      return euiTheme.colors.vis.euiColorSeverity0;
+  }
+};

x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_vulnerabilitiy_colors.test.ts

@@ -6,7 +6,9 @@
  */
 
 import { euiThemeVars } from '@kbn/ui-theme';
-import { getCvsScoreColor, getSeverityStatusColor } from './get_vulnerability_colors';
+import { getCvsScoreColor, getSeverityStatusColor } from './get_finding_colors';
+
+// TODO: fix tests
 describe('getSeverityStatusColor', () => {
   it('should return the correct color for LOW severity', () => {
     expect(getSeverityStatusColor('LOW')).toBe(euiThemeVars.euiColorVis0);
@@ -29,6 +31,7 @@ describe('getSeverityStatusColor', () => {
   });
 });
 
+// TODO: fix tests
 describe('getCvsScoreColor', () => {
   it('returns correct color for low severity score', () => {
     expect(getCvsScoreColor(1.5)).toBe(euiThemeVars.euiColorVis0);

x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/vulnerability_helpers.ts

@@ -5,9 +5,10 @@
  * 2.0.
  */
 
+import { EuiThemeComputed } from '@elastic/eui';
 import { VULNERABILITIES_SEVERITY } from '@kbn/cloud-security-posture-common';
 import { i18n } from '@kbn/i18n';
-import { getSeverityStatusColor } from './get_vulnerability_colors';
+import { getSeverityStatusColor } from './get_finding_colors';
 import { getSeverityText } from './get_vulnerability_text';
 
 interface VulnerabilitiesDistributionBarProps {
@@ -35,6 +36,7 @@ export const hasVulnerabilitiesData = (counts: VulnerabilityCounts): boolean =>
 
 export const getVulnerabilityStats = (
   counts: VulnerabilityCounts,
+  euiTheme: EuiThemeComputed,
   filterFunction?: (filter: string) => void,
   currentFilter?: string
 ): VulnerabilitiesDistributionBarProps[] => {
@@ -55,7 +57,7 @@ export const getVulnerabilityStats = (
         }
       ),
       count: counts.none,
-      color: getSeverityStatusColor(VULNERABILITIES_SEVERITY.UNKNOWN),
+      color: getSeverityStatusColor(VULNERABILITIES_SEVERITY.UNKNOWN, euiTheme),
       filter: () => {
         filterFunction?.(VULNERABILITIES_SEVERITY.UNKNOWN);
       },
@@ -74,7 +76,7 @@ export const getVulnerabilityStats = (
         }
       ),
       count: counts.low,
-      color: getSeverityStatusColor(VULNERABILITIES_SEVERITY.LOW),
+      color: getSeverityStatusColor(VULNERABILITIES_SEVERITY.LOW, euiTheme),
       filter: () => {
         filterFunction?.(VULNERABILITIES_SEVERITY.LOW);
       },
@@ -94,7 +96,7 @@ export const getVulnerabilityStats = (
         }
       ),
       count: counts.medium,
-      color: getSeverityStatusColor(VULNERABILITIES_SEVERITY.MEDIUM),
+      color: getSeverityStatusColor(VULNERABILITIES_SEVERITY.MEDIUM, euiTheme),
       filter: () => {
         filterFunction?.(VULNERABILITIES_SEVERITY.MEDIUM);
       },
@@ -113,7 +115,7 @@ export const getVulnerabilityStats = (
         }
       ),
       count: counts.high,
-      color: getSeverityStatusColor(VULNERABILITIES_SEVERITY.HIGH),
+      color: getSeverityStatusColor(VULNERABILITIES_SEVERITY.HIGH, euiTheme),
       filter: () => {
         filterFunction?.(VULNERABILITIES_SEVERITY.HIGH);
       },
@@ -132,7 +134,7 @@ export const getVulnerabilityStats = (
         }
       ),
       count: counts.critical,
-      color: getSeverityStatusColor(VULNERABILITIES_SEVERITY.CRITICAL),
+      color: getSeverityStatusColor(VULNERABILITIES_SEVERITY.CRITICAL, euiTheme),
       filter: () => {
         filterFunction?.(VULNERABILITIES_SEVERITY.CRITICAL);
       },