[8.18] [Security Solution][threat hunting explore] EUI refresh: Remov…

…e custom color hex (#204631) (#210566) # Backport This will backport the following commits from `main` to `8.18`: - [[Security Solution][threat hunting explore] EUI refresh: Remove custom color hex (#204631)](#204631)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)
elastic · Feb 13, 2025 · 224f945 · 224f945
1 parent 47fc438
commit 224f945
Show file tree

Hide file tree

Showing 70 changed files with 1,824 additions and 1,657 deletions.
diff --git a/packages/kbn-babel-preset/styled_components_files.js b/packages/kbn-babel-preset/styled_components_files.js
diff --git a/...ions/security/plugins/security_solution/public/common/components/charts/barchart.test.tsx b/...ions/security/plugins/security_solution/public/common/components/charts/barchart.test.tsx
@@ -353,8 +353,6 @@ describe.each(chartDataSets)('BarChart with stackByField', () => {
     },
   ];
 
-  const expectedColors = ['#1EA593', '#2B70F7', '#CE0060'];
-
   const stackByField = 'process.name';
 
   beforeAll(() => {
@@ -369,12 +367,6 @@ describe.each(chartDataSets)('BarChart with stackByField', () => {
     expect(wrapper.find('[data-test-subj="draggable-legend"]').exists()).toBe(true);
   });
 
-  expectedColors.forEach((color, i) => {
-    test(`it renders the expected legend color ${color} for legend item ${i}`, () => {
-      expect(wrapper.find(`div [color="${color}"]`).exists()).toBe(true);
-    });
-  });
-
   data.forEach((datum) => {
     test(`it renders the expected draggable legend text for datum ${datum.key}`, () => {
       const dataProviderId = `draggableId.content.draggable-legend-item-uuid_v4()-${escapeDataProviderId(

diff --git a/...solutions/security/plugins/security_solution/public/common/components/charts/barchart.tsx b/...solutions/security/plugins/security_solution/public/common/components/charts/barchart.tsx
@@ -18,7 +18,6 @@ import deepEqual from 'fast-deep-equal';
 
 import { escapeDataProviderId } from '../drag_and_drop/helpers';
 import { useTimeZone } from '../../lib/kibana';
-import { defaultLegendColors } from '../matrix_histogram/utils';
 import { useThrottledResizeObserver } from '../utils';
 import { hasValueToDisplay } from '../../utils/validators';
 import { EMPTY_VALUE_LABEL } from './translation';
@@ -192,8 +191,8 @@ export const BarChartComponent: React.FC<BarChartComponentProps> = ({
   const legendItems: LegendItem[] = useMemo(
     () =>
       barChart != null && stackByField != null
-        ? barChart.map((d, i) => ({
-            color: d.color ?? (i < defaultLegendColors.length ? defaultLegendColors[i] : undefined),
+        ? barChart.map((d) => ({
+            color: d.color,
             dataProviderId: escapeDataProviderId(
               `draggable-legend-item-${uuidv4()}-${stackByField}-${d.key}`
             ),

diff --git a/...s/security/plugins/security_solution/public/common/components/charts/donutchart_empty.tsx b/...s/security/plugins/security_solution/public/common/components/charts/donutchart_empty.tsx
@@ -4,42 +4,54 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+import type { EuiThemeComputed } from '@elastic/eui';
+import { useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 import React from 'react';
-import styled from 'styled-components';
-import { useEuiBackgroundColor } from '@elastic/eui';
 
 interface DonutChartEmptyProps {
   size?: number;
   donutWidth?: number;
 }
 
+/*
+ ** @deprecated use getEmptyDonutColor instead
+ */
 export const emptyDonutColor = '#FAFBFD';
 
-const BigRing = styled.div<DonutChartEmptyProps>`
-  border-radius: 50%;
-  ${({ size }) =>
-    `height: ${size}px;
-    width: ${size}px;
-    background-color: ${emptyDonutColor};
-    text-align: center;
-    line-height: ${size}px;`}
-`;
-
-const SmallRing = styled.div<DonutChartEmptyProps>`
-  border-radius: 50%;
-  ${({ size }) => `
-    height: ${size}px;
-    width: ${size}px;
-    background-color: ${useEuiBackgroundColor('plain')};
-    display: inline-block;
-    vertical-align: middle;`}
-`;
+export const getEmptyDonutColor = (euiTheme: EuiThemeComputed) => euiTheme.colors.textSubdued;
 
-const EmptyDonutChartComponent: React.FC<DonutChartEmptyProps> = ({ size = 90, donutWidth = 20 }) =>
-  size - donutWidth > 0 ? (
-    <BigRing size={size} data-test-subj="empty-donut">
-      <SmallRing size={size - donutWidth} data-test-subj="empty-donut-small" />
-    </BigRing>
+const EmptyDonutChartComponent: React.FC<DonutChartEmptyProps> = ({
+  size = 90,
+  donutWidth = 20,
+}) => {
+  const { euiTheme } = useEuiTheme();
+  const middleSize = size - donutWidth;
+  return size - donutWidth > 0 ? (
+    <div
+      data-test-subj="empty-donut"
+      css={css`
+        border-radius: 50%;
+        height: ${size}px;
+        width: ${size}px;
+        background-color: ${euiTheme.colors.backgroundBaseSubdued};
+        text-align: center;
+        line-height: ${size}px;
+      `}
+    >
+      <div
+        data-test-subj="empty-donut-small"
+        css={css`
+          border-radius: 50%;
+          height: ${middleSize}px;
+          width: ${middleSize}px;
+          background-color: ${euiTheme.colors.backgroundBasePlain};
+          display: inline-block;
+          vertical-align: middle;
+        `}
+      />
+    </div>
   ) : null;
+};
 
 export const DonutChartEmpty = React.memo(EmptyDonutChartComponent);
diff --git a/...ons/security/plugins/security_solution/public/common/components/matrix_histogram/utils.ts b/...ons/security/plugins/security_solution/public/common/components/matrix_histogram/utils.ts
diff --git a/...ts/visualization_actions/lens_attributes/common/__snapshots__/authentication.test.ts.snap b/...ts/visualization_actions/lens_attributes/common/__snapshots__/authentication.test.ts.snap
diff --git a/...sualization_actions/lens_attributes/common/alerts/__snapshots__/rule_preview.test.ts.snap b/...sualization_actions/lens_attributes/common/alerts/__snapshots__/rule_preview.test.ts.snap
diff --git a/...onents/visualization_actions/lens_attributes/common/alerts/alerts_by_status_donut.test.ts b/...onents/visualization_actions/lens_attributes/common/alerts/alerts_by_status_donut.test.ts
@@ -13,7 +13,11 @@ import { useLensAttributes } from '../../../use_lens_attributes';
 import { getAlertsByStatusAttributes } from './alerts_by_status_donut';
 
 jest.mock('uuid', () => ({
-  v4: jest.fn().mockReturnValue('b9b43606-7ff7-46ae-a47c-85bed80fab9a'),
+  v4: jest
+    .fn()
+    .mockReturnValueOnce('b9b43606-7ff7-46ae-a47c-85bed80fab9a')
+    .mockReturnValueOnce('a9b43606-7ff7-46ae-a47c-85bed80fab9a')
+    .mockReturnValueOnce('21cc4a49-3780-4b1a-be28-f02fa5303d24'),
 }));
 
 jest.mock('../../../../../../sourcerer/containers', () => ({

diff --git a/.../components/visualization_actions/lens_attributes/common/alerts/alerts_by_status_donut.ts b/.../components/visualization_actions/lens_attributes/common/alerts/alerts_by_status_donut.ts
@@ -7,11 +7,13 @@
 import { v4 as uuidv4 } from 'uuid';
 import type { GetLensAttributes } from '../../../types';
 const layerId = uuidv4();
+const columnSeverity = uuidv4();
+const columnRecord = uuidv4();
 
-export const getAlertsByStatusAttributes: GetLensAttributes = (
+export const getAlertsByStatusAttributes: GetLensAttributes = ({
   stackByField = 'kibana.alert.workflow_status',
-  extraOptions
-) => {
+  extraOptions,
+}) => {
   return {
     title: 'Alerts',
     description: '',
@@ -22,8 +24,8 @@ export const getAlertsByStatusAttributes: GetLensAttributes = (
         layers: [
           {
             layerId,
-            primaryGroups: ['a9b43606-7ff7-46ae-a47c-85bed80fab9a'],
-            metrics: ['21cc4a49-3780-4b1a-be28-f02fa5303d24'],
+            primaryGroups: [columnSeverity],
+            metrics: [columnRecord],
             numberDisplay: 'value',
             categoryDisplay: 'hide',
             legendDisplay: 'hide',
@@ -69,7 +71,7 @@ export const getAlertsByStatusAttributes: GetLensAttributes = (
           layers: {
             [layerId]: {
               columns: {
-                'a9b43606-7ff7-46ae-a47c-85bed80fab9a': {
+                [columnSeverity]: {
                   label: 'Filters',
                   dataType: 'string',
                   operationType: 'filters',
@@ -108,7 +110,7 @@ export const getAlertsByStatusAttributes: GetLensAttributes = (
                     ],
                   },
                 },
-                '21cc4a49-3780-4b1a-be28-f02fa5303d24': {
+                [columnRecord]: {
                   label: 'Count of records',
                   dataType: 'number',
                   operationType: 'count',
@@ -124,10 +126,7 @@ export const getAlertsByStatusAttributes: GetLensAttributes = (
                   },
                 },
               },
-              columnOrder: [
-                'a9b43606-7ff7-46ae-a47c-85bed80fab9a',
-                '21cc4a49-3780-4b1a-be28-f02fa5303d24',
-              ],
+              columnOrder: [columnSeverity, columnRecord],
               sampling: 1,
               incompleteColumns: {},
             },

diff --git a/...n/components/visualization_actions/lens_attributes/common/alerts/alerts_histogram.test.ts b/...n/components/visualization_actions/lens_attributes/common/alerts/alerts_histogram.test.ts
@@ -13,7 +13,12 @@ import { useLensAttributes } from '../../../use_lens_attributes';
 import { getAlertsHistogramLensAttributes } from './alerts_histogram';
 
 jest.mock('uuid', () => ({
-  v4: jest.fn().mockReturnValue('0039eb0c-9a1a-4687-ae54-0f4e239bec75'),
+  v4: jest
+    .fn()
+    .mockReturnValueOnce('0039eb0c-9a1a-4687-ae54-0f4e239bec75')
+    .mockReturnValueOnce('e09e0380-0740-4105-becc-0a4ca12e3944')
+    .mockReturnValueOnce('34919782-4546-43a5-b668-06ac934d3acd')
+    .mockReturnValueOnce('aac9d7d0-13a3-480a-892b-08207a787926'),
 }));
 
 jest.mock('../../../../../../sourcerer/containers', () => ({