[SecuritySolution] Apply different color tokens for themes (elastic#2…

…06254) ## Summary Previous changes applied same tokens for Borealis and Amsterdam: elastic#204631 (comment) PR above causes color changes to the current theme, after discussing with UX, we decide to maintain different color tokens until Borealis is launched. This PR should revert the color changed on Amsterdam by the previous PR and only apply the new color for Borealis. | Current and Amsterdam | Borealis | |-------------------------|----------| |Source: Hard coded: `#d36186`|Source: `euiColorVis4` - `#EE72A6` | |Dest: Hard coded: `#9170b8` |Dest: `euiColorVis2` - `#61A2FF`| ### Host IPs: | Current and Amsterdam | Borealis | |-------------------------|----------| |<img width="2560" alt="host_IPs" src="https://github.com/user-attachments/assets/c0f9f317-fb02-4c96-8422-c1d2484f4636" />|<img width="2560" alt="host_bor_light" src="https://github.com/user-attachments/assets/451d6604-1d7c-4a2e-82c3-74b2499852d2" />| |<img width="2558" alt="host_IPs_dark" src="https://github.com/user-attachments/assets/ac45a3ac-ecaf-46b6-91d9-68704d8639ee" />|<img width="2553" alt="host_bor_dark" src="https://github.com/user-attachments/assets/e34e56fd-8202-4a3c-80c1-996718320fd8" />| ### Network IPs: | Current and Amsterdam | Borealis | |-------------------------|----------| |<img width="2557" alt="network_IPs" src="https://github.com/user-attachments/assets/0e0b33d9-55b7-41a5-8910-11b80e539398" />|<img width="2559" alt="network_bor_light" src="https://github.com/user-attachments/assets/f616b3ab-5032-4e69-b67e-cde39b88ea5f" />| |<img width="2558" alt="host_IPs_dark" src="https://github.com/user-attachments/assets/9613a49f-f0c6-4b63-aa56-c960fac175fc" />|<img width="2560" alt="network_bor_dark" src="https://github.com/user-attachments/assets/911f0509-43ea-428a-94d6-9ce01f5425ac" />| ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [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 (cherry picked from commit 4ca5779)
angorayc · Feb 13, 2025 · 1ac9ee8 · 1ac9ee8
1 parent 043545b
commit 1ac9ee8
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 28 deletions.
diff --git a/...ommon/components/visualization_actions/lens_attributes/common/utils/unique_ips_palette.ts b/...ommon/components/visualization_actions/lens_attributes/common/utils/unique_ips_palette.ts
@@ -0,0 +1,13 @@
+/*
+ * 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 type { EuiThemeComputed } from '@elastic/eui';
+
+export const getDestinationIpColor = (euiTheme: EuiThemeComputed) =>
+  euiTheme.flags.hasVisColorAdjustment ? '#9170b8' : euiTheme.colors.vis.euiColorVis2;
+
+export const getSourceIpColor = (euiTheme: EuiThemeComputed) =>
+  euiTheme.flags.hasVisColorAdjustment ? '#d36186' : euiTheme.colors.vis.euiColorVis4;
diff --git a/...isualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_area.test.ts.snap b/...isualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_area.test.ts.snap
diff --git a/...visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_bar.test.ts.snap b/...visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_bar.test.ts.snap
diff --git a/...blic/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area.ts b/...blic/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area.ts
@@ -7,6 +7,7 @@
 
 import { DESTINATION_CHART_LABEL, SOURCE_CHART_LABEL } from '../../translations';
 import type { GetLensAttributes, LensAttributes } from '../../types';
+import { getDestinationIpColor, getSourceIpColor } from '../common/utils/unique_ips_palette';
 
 const columnSourceTimestamp = 'a0cb6400-f708-46c3-ad96-24788f12dae4';
 const columnSourceUniqueIp = 'd9a6eb6b-8b78-439e-98e7-a718f8ffbebe';
@@ -89,19 +90,15 @@ export const getKpiUniqueIpsAreaLensAttributes: GetLensAttributes = ({ euiTheme
             layerType: 'data',
             seriesType: 'area',
             xAccessor: columnSourceTimestamp,
-            yConfig: [
-              { color: euiTheme.colors.vis.euiColorVis4, forAccessor: columnSourceUniqueIp },
-            ],
+            yConfig: [{ color: getSourceIpColor(euiTheme), forAccessor: columnSourceUniqueIp }],
           },
           {
             accessors: [columnDestinationIp],
             layerId: layerDestinationIp,
             layerType: 'data',
             seriesType: 'area',
             xAccessor: columnDestinationTimestamp,
-            yConfig: [
-              { color: euiTheme.colors.vis.euiColorVis2, forAccessor: columnDestinationIp },
-            ],
+            yConfig: [{ color: getDestinationIpColor(euiTheme), forAccessor: columnDestinationIp }],
           },
         ],
         legend: { isVisible: false, position: 'right', showSingleSeries: false },

diff --git a/...ublic/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_bar.ts b/...ublic/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_bar.ts
@@ -7,6 +7,7 @@
 
 import type { GetLensAttributes, LensAttributes } from '../../types';
 import { SOURCE_CHART_LABEL, DESTINATION_CHART_LABEL, UNIQUE_COUNT } from '../../translations';
+import { getDestinationIpColor, getSourceIpColor } from '../common/utils/unique_ips_palette';
 const columnSourceIp = '32f66676-f4e1-48fd-b7f8-d4de38318601';
 const columnSourceFilter = 'f8bfa719-5c1c-4bf2-896e-c318d77fc08e';
 
@@ -96,17 +97,15 @@ export const getKpiUniqueIpsBarLensAttributes: GetLensAttributes = ({ euiTheme }
             layerType: 'data',
             seriesType: 'bar_horizontal_stacked',
             xAccessor: columnSourceFilter,
-            yConfig: [{ color: euiTheme.colors.vis.euiColorVis4, forAccessor: columnSourceIp }],
+            yConfig: [{ color: getSourceIpColor(euiTheme), forAccessor: columnSourceIp }],
           },
           {
             accessors: [columnDestinationIp],
             layerId: layerDestinationIp,
             layerType: 'data',
             seriesType: 'bar_horizontal_stacked',
             xAccessor: columnDestinationFilter,
-            yConfig: [
-              { color: euiTheme.colors.vis.euiColorVis2, forAccessor: columnDestinationIp },
-            ],
+            yConfig: [{ color: getDestinationIpColor(euiTheme), forAccessor: columnDestinationIp }],
           },
         ],
         legend: { isVisible: false, position: 'right', showSingleSeries: false },

diff --git a/...on_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_area.test.ts.snap b/...on_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_area.test.ts.snap
diff --git a/...ion_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_bar.test.ts.snap b/...ion_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_bar.test.ts.snap
diff --git a/...n/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_area.ts b/...n/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_area.ts
@@ -6,6 +6,7 @@
  */
 import { DESTINATION_CHART_LABEL, SOURCE_CHART_LABEL } from '../../translations';
 import type { LensAttributes, GetLensAttributes } from '../../types';
+import { getDestinationIpColor, getSourceIpColor } from '../common/utils/unique_ips_palette';
 
 const columnTimestamp = '662cd5e5-82bf-4325-a703-273f84b97e09';
 const columnSourceIp = '5f317308-cfbb-4ee5-bfb9-07653184fabf';
@@ -66,7 +67,7 @@ export const getKpiUniquePrivateIpsAreaLensAttributes: GetLensAttributes = ({ eu
             yConfig: [
               {
                 forAccessor: columnSourceIp,
-                color: euiTheme.colors.vis.euiColorVis4,
+                color: getSourceIpColor(euiTheme),
               },
             ],
           },
@@ -79,7 +80,7 @@ export const getKpiUniquePrivateIpsAreaLensAttributes: GetLensAttributes = ({ eu
             yConfig: [
               {
                 forAccessor: columnDestinationIp,
-                color: euiTheme.colors.vis.euiColorVis2,
+                color: getDestinationIpColor(euiTheme),
               },
             ],
           },

diff --git a/...on/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.ts b/...on/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.ts
@@ -7,6 +7,7 @@
 import { v4 as uuidv4 } from 'uuid';
 import { SOURCE_CHART_LABEL, DESTINATION_CHART_LABEL, UNIQUE_COUNT } from '../../translations';
 import type { LensAttributes, GetLensAttributes } from '../../types';
+import { getDestinationIpColor, getSourceIpColor } from '../common/utils/unique_ips_palette';
 
 const columnSourceIp = uuidv4();
 const columnSourceIpFilter = uuidv4();
@@ -69,7 +70,7 @@ export const getKpiUniquePrivateIpsBarLensAttributes: GetLensAttributes = ({ eui
             yConfig: [
               {
                 forAccessor: columnSourceIp,
-                color: euiTheme.colors.vis.euiColorVis4,
+                color: getSourceIpColor(euiTheme),
               },
             ],
             xAccessor: columnSourceIpFilter,
@@ -82,7 +83,7 @@ export const getKpiUniquePrivateIpsBarLensAttributes: GetLensAttributes = ({ eui
             yConfig: [
               {
                 forAccessor: columnDestinationIp,
-                color: euiTheme.colors.vis.euiColorVis2,
+                color: getDestinationIpColor(euiTheme),
               },
             ],
             xAccessor: columnDestinationIpFilter,

diff --git a/.../plugins/security_solution/public/explore/hosts/components/kpi_hosts/unique_ips/index.tsx b/.../plugins/security_solution/public/explore/hosts/components/kpi_hosts/unique_ips/index.tsx
@@ -16,6 +16,10 @@ import { kpiUniqueIpsSourceMetricLensAttributes } from '../../../../../common/co
 import { KpiBaseComponent } from '../../../../components/kpi';
 import type { HostsKpiProps } from '../types';
 import * as i18n from './translations';
+import {
+  getDestinationIpColor,
+  getSourceIpColor,
+} from '../../../../../common/components/visualization_actions/lens_attributes/common/utils/unique_ips_palette';
 
 export const ID = 'hostsKpiUniqueIpsQuery';
 
@@ -30,15 +34,15 @@ export const useGetUniqueIpsStatItems: () => Readonly<StatItems[]> = () => {
             key: 'uniqueSourceIps',
             name: i18n.SOURCE_CHART_LABEL,
             description: i18n.SOURCE_UNIT_LABEL,
-            color: euiTheme.colors.vis.euiColorVis4,
+            color: getSourceIpColor(euiTheme),
             icon: 'visMapCoordinate',
             lensAttributes: kpiUniqueIpsSourceMetricLensAttributes,
           },
           {
             key: 'uniqueDestinationIps',
             name: i18n.DESTINATION_CHART_LABEL,
             description: i18n.DESTINATION_UNIT_LABEL,
-            color: euiTheme.colors.vis.euiColorVis2,
+            color: getDestinationIpColor(euiTheme),
             icon: 'visMapCoordinate',
             lensAttributes: kpiUniqueIpsDestinationMetricLensAttributes,
           },
@@ -50,7 +54,7 @@ export const useGetUniqueIpsStatItems: () => Readonly<StatItems[]> = () => {
         getBarChartLensAttributes: getKpiUniqueIpsBarLensAttributes,
       },
     ],
-    [euiTheme.colors.vis.euiColorVis2, euiTheme.colors.vis.euiColorVis4]
+    [euiTheme]
   );
 };
 

diff --git a/...urity_solution/public/explore/network/components/kpi_network/unique_private_ips/index.tsx b/...urity_solution/public/explore/network/components/kpi_network/unique_private_ips/index.tsx
@@ -16,6 +16,10 @@ import { kpiUniquePrivateIpsDestinationMetricLensAttributes } from '../../../../
 import { getKpiUniquePrivateIpsAreaLensAttributes } from '../../../../../common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_area';
 import { getKpiUniquePrivateIpsBarLensAttributes } from '../../../../../common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar';
 import { KpiBaseComponent } from '../../../../components/kpi';
+import {
+  getDestinationIpColor,
+  getSourceIpColor,
+} from '../../../../../common/components/visualization_actions/lens_attributes/common/utils/unique_ips_palette';
 
 export const ID = 'networkKpiUniquePrivateIpsQuery';
 
@@ -30,15 +34,15 @@ export const useGetUniquePrivateIpsStatItems: () => Readonly<StatItems[]> = () =
             key: 'uniqueSourcePrivateIps',
             name: i18n.SOURCE_CHART_LABEL,
             description: i18n.SOURCE_UNIT_LABEL,
-            color: euiTheme.colors.vis.euiColorVis4,
+            color: getSourceIpColor(euiTheme),
             icon: 'visMapCoordinate',
             lensAttributes: kpiUniquePrivateIpsSourceMetricLensAttributes,
           },
           {
             key: 'uniqueDestinationPrivateIps',
             name: i18n.DESTINATION_CHART_LABEL,
             description: i18n.DESTINATION_UNIT_LABEL,
-            color: euiTheme.colors.vis.euiColorVis2,
+            color: getDestinationIpColor(euiTheme),
             icon: 'visMapCoordinate',
             lensAttributes: kpiUniquePrivateIpsDestinationMetricLensAttributes,
           },
@@ -50,7 +54,7 @@ export const useGetUniquePrivateIpsStatItems: () => Readonly<StatItems[]> = () =
         getBarChartLensAttributes: getKpiUniquePrivateIpsBarLensAttributes,
       },
     ],
-    [euiTheme.colors.vis.euiColorVis2, euiTheme.colors.vis.euiColorVis4]
+    [euiTheme]
   );
 };