Update AssetCriticalityBadge color map to EUI Borealis (#222024)

## Summary Map asset criticality status in `<AssetCriticalityBadge>` component to the new color tokens in EUI Borealis ([see new pattern](https://eui.elastic.co/docs/patterns/severity/index.html)). These new color tokens were introduced through this PR: - https://github.com/elastic/eui/pull/8601 ### Screenshots | | Before | After | |--------|--------|--------| | Light mode | <img width="203" alt="_before_light" src="https://github.com/user-attachments/assets/ca09f950-8cd3-42d6-b82c-2dc4c775cdab" /> | <img width="188" alt="_after_light" src="https://github.com/user-attachments/assets/168b78c7-5a0f-42d1-918d-448d8ce242ac" /> | | Dark mode | <img width="163" alt="_before_dark" src="https://github.com/user-attachments/assets/b2f89d25-578a-4e77-8033-9e3df5d7f9a6" /> | <img width="176" alt="_after_dark" src="https://github.com/user-attachments/assets/e915b0e8-8b81-4cd7-9edd-5de58f8b7d90" /> | ### Checklist - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [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 - [ ] 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. - [ ] [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) ### Identify risks This is a low-risk change that only presents different colors where badges are used.
2025-06-27 18:51:07 -04:00 · 2025-06-03 17:17:33 +02:00 · 2025-06-03 17:17:33 +02:00 · bb4c89c921
commit bb4c89c921
parent af0b369627
6 changed files with 46 additions and 32 deletions
--- a/oas_docs/bundle.serverless.json
+++ b/oas_docs/bundle.serverless.json
@ -46220,7 +46220,7 @@
        "tags": [
          "maintenance-window"
        ],
-        "x-state": "Generally available; added in 9.1.0"
+        "x-state": "Generally available"
      }
    },
    "/api/maintenance_window/{id}": {
@ -46266,7 +46266,7 @@
        "tags": [
          "maintenance-window"
        ],
-        "x-state": "Generally available; added in 9.1.0"
+        "x-state": "Generally available"
      },
      "get": {
        "description": "[Required authorization] Route required privileges: read-maintenance-window.",
@ -46462,7 +46462,7 @@
        "tags": [
          "maintenance-window"
        ],
-        "x-state": "Generally available; added in 9.1.0"
+        "x-state": "Generally available"
      },
      "patch": {
        "description": "[Required authorization] Route required privileges: write-maintenance-window.",
@ -46799,7 +46799,7 @@
        "tags": [
          "maintenance-window"
        ],
-        "x-state": "Generally available; added in 9.1.0"
+        "x-state": "Generally available"
      }
    },
    "/api/maintenance_window/{id}/_archive": {
@ -47007,7 +47007,7 @@
        "tags": [
          "maintenance-window"
        ],
-        "x-state": "Generally available; added in 9.1.0"
+        "x-state": "Generally available"
      }
    },
    "/api/maintenance_window/{id}/_unarchive": {
@ -47215,7 +47215,7 @@
        "tags": [
          "maintenance-window"
        ],
-        "x-state": "Generally available; added in 9.1.0"
+        "x-state": "Generally available"
      }
    },
    "/api/saved_objects/_export": {
--- a/oas_docs/output/kibana.serverless.yaml
+++ b/oas_docs/output/kibana.serverless.yaml
@ -42563,7 +42563,7 @@ paths:
      summary: Create a maintenance window.
      tags:
        - maintenance-window
-      x-state: Generally available; added in 9.1.0
+      x-state: Generally available
  /api/maintenance_window/{id}:
    delete:
      description: '[Required authorization] Route required privileges: write-maintenance-window.'
@ -42594,7 +42594,7 @@ paths:
      summary: Delete a maintenance window.
      tags:
        - maintenance-window
-      x-state: Generally available; added in 9.1.0
+      x-state: Generally available
    get:
      description: '[Required authorization] Route required privileges: read-maintenance-window.'
      operationId: get-maintenance-window-id
@ -42735,7 +42735,7 @@ paths:
      summary: Get maintenance window details.
      tags:
        - maintenance-window
-      x-state: Generally available; added in 9.1.0
+      x-state: Generally available
    patch:
      description: '[Required authorization] Route required privileges: write-maintenance-window.'
      operationId: patch-maintenance-window-id
@ -42976,7 +42976,7 @@ paths:
      summary: Update a maintenance window.
      tags:
        - maintenance-window
-      x-state: Generally available; added in 9.1.0
+      x-state: Generally available
  /api/maintenance_window/{id}/_archive:
    post:
      description: '[Required authorization] Route required privileges: write-maintenance-window.'
@ -43125,7 +43125,7 @@ paths:
      summary: Archive a maintenance window.
      tags:
        - maintenance-window
-      x-state: Generally available; added in 9.1.0
+      x-state: Generally available
  /api/maintenance_window/{id}/_unarchive:
    post:
      description: '[Required authorization] Route required privileges: write-maintenance-window.'
@ -43274,7 +43274,7 @@ paths:
      summary: Unarchive a maintenance window.
      tags:
        - maintenance-window
-      x-state: Generally available; added in 9.1.0
+      x-state: Generally available
  /api/ml/saved_objects/sync:
    get:
      description: |
--- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/asset_criticality/asset_criticality_badge.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/asset_criticality/asset_criticality_badge.tsx
@ -4,24 +4,36 @@
 * 2.0; you may not use this file except in compliance with the Elastic License
 * 2.0.
 */
+
 import React from 'react';
-import { EuiHealth } from '@elastic/eui';
-import { euiLightVars } from '@kbn/ui-theme';
+import { EuiHealth, useEuiTheme, type EuiThemeComputed } from '@elastic/eui';
+import type { CSSObject } from '@emotion/react';
 import { CRITICALITY_LEVEL_TITLE } from './translations';
 import type { CriticalityLevelWithUnassigned } from '../../../../common/entity_analytics/asset_criticality/types';

-// below will be updated with new severity color palette & shared security wide severity colors hook creation
-export const CRITICALITY_LEVEL_COLOR: Record<CriticalityLevelWithUnassigned, string> = {
-  extreme_impact: '#E7664C',
-  high_impact: '#DA8B45',
-  medium_impact: '#D6BF57',
-  low_impact: '#54B399',
-  unassigned: euiLightVars.euiColorMediumShade,
+/*
+ * Map Asset Criticality status to EUI severity color pattern as per spec:
+ * https://eui.elastic.co/docs/patterns/severity/index.html#use-cases
+ */
+export const getCriticalityLevelColor = (
+  euiTheme: EuiThemeComputed,
+  criticalityLevel: CriticalityLevelWithUnassigned
+) => {
+  const { danger, risk, warning, neutral, unknown } = euiTheme.colors.severity;
+  const map = {
+    extreme_impact: danger,
+    high_impact: risk,
+    medium_impact: warning,
+    low_impact: neutral,
+    unassigned: unknown,
+  };
+
+  return map[criticalityLevel] || map.unassigned;
 };

 export const AssetCriticalityBadge: React.FC<{
  criticalityLevel?: CriticalityLevelWithUnassigned;
-  style?: React.CSSProperties;
+  style?: CSSObject;
  className?: string;
  dataTestSubj?: string;
 }> = ({
@ -30,11 +42,12 @@ export const AssetCriticalityBadge: React.FC<{
  dataTestSubj = 'asset-criticality-badge',
  className,
 }) => {
+  const { euiTheme } = useEuiTheme();
  return (
    <EuiHealth
      data-test-subj={dataTestSubj}
-      color={CRITICALITY_LEVEL_COLOR[criticalityLevel]}
-      style={style}
+      color={getCriticalityLevelColor(euiTheme, criticalityLevel)}
+      css={style}
      className={className}
    >
      {CRITICALITY_LEVEL_TITLE[criticalityLevel]}
--- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/asset_criticality/asset_criticality_filter.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/asset_criticality/asset_criticality_filter.tsx
@ -28,7 +28,7 @@ export const AssetCriticalityFilter: React.FC<AssetCriticalityFilterProps> = ({
  onChange,
 }) => {
  const renderItem = useCallback((level: CriticalityLevels) => {
-    return <AssetCriticalityBadge criticalityLevel={level} style={{ lineHeight: 'inherit' }} />;
+    return <AssetCriticalityBadge criticalityLevel={level} css={{ lineHeight: 'inherit' }} />;
  }, []);

  return (
--- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/asset_criticality/asset_criticality_selector.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/asset_criticality/asset_criticality_selector.tsx
@ -272,13 +272,11 @@ const option = (
  dropdownDisplay: (
    <AssetCriticalityBadge
      criticalityLevel={level}
-      style={{ lineHeight: 'inherit' }}
+      css={{ lineHeight: 'inherit' }}
      dataTestSubj="asset-criticality-modal-select-option"
    />
  ),
-  inputDisplay: (
-    <AssetCriticalityBadge criticalityLevel={level} style={{ lineHeight: 'inherit' }} />
-  ),
+  inputDisplay: <AssetCriticalityBadge criticalityLevel={level} css={{ lineHeight: 'inherit' }} />,
 });

 export const assetCriticalityOptions: Array<EuiSuperSelectOption<CriticalityLevelWithUnassigned>> =
--- a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/body/renderers/asset_criticality_level.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/body/renderers/asset_criticality_level.tsx
@ -6,17 +6,20 @@
 */

 import React, { useMemo } from 'react';
-import { EuiBadge } from '@elastic/eui';
+import { EuiBadge, useEuiTheme } from '@elastic/eui';
 import { isString, startCase } from 'lodash/fp';
 import type { CriticalityLevel } from '../../../../../../common/entity_analytics/asset_criticality/types';
-import { CRITICALITY_LEVEL_COLOR } from '../../../../../entity_analytics/components/asset_criticality';
+import { getCriticalityLevelColor } from '../../../../../entity_analytics/components/asset_criticality';

 interface Props {
  value: string | number | undefined | null;
 }

 const AssetCriticalityLevelComponent: React.FC<Props> = ({ value }) => {
-  const color = isString(value) ? CRITICALITY_LEVEL_COLOR[value as CriticalityLevel] : 'normal';
+  const { euiTheme } = useEuiTheme();
+  const color = isString(value)
+    ? getCriticalityLevelColor(euiTheme, value as CriticalityLevel)
+    : 'normal';
  const stringValue = isString(value) ? value : '';

  const badge = useMemo(