[Security Solution][threat hunting explore] EUI refresh: Remove custo…

…m color hex (elastic#204631) ## Summary elastic#202498 elastic#202503 1. This PR does **Not** include the severity color change. It will be implemented in a follow up PR once color tokens have been decided. 2. This PR updates the type `GetLensAttributes` to accept `euiTheme`, so all the functions in this type are updated accordingly. https://github.com/elastic/kibana/pull/204631/files#diff-abe20658865cad59eadcff945552b40832d96da0264ed89ddd5ab25ded1420a3R30 ---- ## To test: Please verify if visualizations are displayed properly. ### Running Kibana with the Borealis theme In order to run Kibana with `Borealis`, you'll need to do the following: 1. Set the following in kibana.dev.yml: `uiSettings.experimental.themeSwitcherEnabled: true` 4. Run Kibana with the following environment variable set: ```KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn start``` 5. This will expose a toggle under Stack Management > Advanced Settings > Theme version, which you can use to toggle between Amsterdam and Borealis. ![Image](https://github.com/user-attachments/assets/78d64946-43fc-4400-bbb1-229d900b7f05) ---- ### Explore <img width="2557" alt="host_after" src="https://github.com/user-attachments/assets/f69b6e2a-58f6-4ed4-9f38-dcdbcf9919ed" /> <img width="1281" alt="users_after" src="https://github.com/user-attachments/assets/0eec8e9c-e678-4a66-83ee-4b8d11380b8e" /> <img width="2552" alt="network_dns" src="https://github.com/user-attachments/assets/19f06d2a-6e51-419b-9f89-233bfa5727ba" /> <img width="2557" alt="network_after" src="https://github.com/user-attachments/assets/3b90c5e2-23a1-4f15-a2d0-f9290a39af30" /> ---- ### Dashboards <img width="2557" alt="dashboard_overview" src="https://github.com/user-attachments/assets/c1873359-fee9-42c6-addd-fe2bc1c98aee" /> <img width="2558" alt="dashboard_detection_response_2" src="https://github.com/user-attachments/assets/f6853710-0938-402b-b326-fa00d586b5d6" /> <img width="2559" alt="dashboard_detection_response_1" src="https://github.com/user-attachments/assets/4eb75526-9a57-46e9-b090-b53353956ea1" /> ---- ### Alerts <img width="2555" alt="alerts_chart_collapsed" src="https://github.com/user-attachments/assets/6ecf5dd5-a785-4701-900b-0454f024b36d" /> <img width="2554" alt="summary" src="https://github.com/user-attachments/assets/1731a6ea-ef2b-4d7d-bf21-4041e59f0ad4" /> <img width="2559" alt="trend" src="https://github.com/user-attachments/assets/b9a741d1-a359-4273-9555-850cdcbc8932" /> <img width="2557" alt="counts" src="https://github.com/user-attachments/assets/a6193ccc-86b8-4974-ad9f-9417e200e859" /> <img width="1281" alt="treemap" src="https://github.com/user-attachments/assets/7b6e163a-a660-4bb1-a6de-88e21934b98a" /> ---- ### Rules preview <img width="2556" alt="Screenshot 2024-12-18 at 13 45 33" src="https://github.com/user-attachments/assets/47099c18-86ee-455a-a5af-ebd6a29904a5" /> ---- --------- Co-authored-by: kibanamachine <[email protected]>
Zacqary · Jan 9, 2025 · 3538387 · 3538387
1 parent b2828c1
commit 3538387
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', () => ({