diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/utils/unique_ips_palette.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/utils/unique_ips_palette.ts new file mode 100644 index 0000000000000..a2cbe731fa6c4 --- /dev/null +++ b/x-pack/solutions/security/plugins/security_solution/public/common/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/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_area.test.ts.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_area.test.ts.snap index a829f18fd216c..73b57d04c823e 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_area.test.ts.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_area.test.ts.snap @@ -199,7 +199,7 @@ Object { "xAccessor": "a0cb6400-f708-46c3-ad96-24788f12dae4", "yConfig": Array [ Object { - "color": "#CA8EAE", + "color": "#d36186", "forAccessor": "d9a6eb6b-8b78-439e-98e7-a718f8ffbebe", }, ], @@ -214,7 +214,7 @@ Object { "xAccessor": "95e74e6-99dd-4b11-8faf-439b4d959df9", "yConfig": Array [ Object { - "color": "#D36086", + "color": "#9170b8", "forAccessor": "e7052671-fb9e-481f-8df3-7724c98cfc6f", }, ], diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_bar.test.ts.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_bar.test.ts.snap index a6e3277032138..83135f5a4e4dd 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_bar.test.ts.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_bar.test.ts.snap @@ -212,7 +212,7 @@ Object { "xAccessor": "f8bfa719-5c1c-4bf2-896e-c318d77fc08e", "yConfig": Array [ Object { - "color": "#CA8EAE", + "color": "#d36186", "forAccessor": "32f66676-f4e1-48fd-b7f8-d4de38318601", }, ], @@ -227,7 +227,7 @@ Object { "xAccessor": "c72aad6a-fc9c-43dc-9194-e13ca3ee8aff", "yConfig": Array [ Object { - "color": "#D36086", + "color": "#9170b8", "forAccessor": "b7e59b08-96e6-40d1-84fd-e97b977d1c47", }, ], diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area.ts index 133f7a51a5e1b..5120365243a4f 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/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,9 +90,7 @@ 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], @@ -99,9 +98,7 @@ export const getKpiUniqueIpsAreaLensAttributes: GetLensAttributes = ({ euiTheme 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/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_bar.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_bar.ts index 0303c9abe9e12..5cec96c4eb953 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_bar.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/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,7 +97,7 @@ 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], @@ -104,9 +105,7 @@ export const getKpiUniqueIpsBarLensAttributes: GetLensAttributes = ({ euiTheme } 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/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_area.test.ts.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_area.test.ts.snap index 3e46284421b4a..23dd658448ccc 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_area.test.ts.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_area.test.ts.snap @@ -223,7 +223,7 @@ Object { "xAccessor": "662cd5e5-82bf-4325-a703-273f84b97e09", "yConfig": Array [ Object { - "color": "#CA8EAE", + "color": "#d36186", "forAccessor": "5f317308-cfbb-4ee5-bfb9-07653184fabf", }, ], @@ -238,7 +238,7 @@ Object { "xAccessor": "36444b8c-7e10-4069-8298-6c1b46912be2", "yConfig": Array [ Object { - "color": "#D36086", + "color": "#9170b8", "forAccessor": "ac1eb80c-ddde-46c4-a90c-400261926762", }, ], diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_bar.test.ts.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_bar.test.ts.snap index 443ddb2cfdfca..24b50ee3d6f61 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_bar.test.ts.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_bar.test.ts.snap @@ -238,7 +238,7 @@ Object { "xAccessor": "d9c438c5-f776-4436-9d20-d62dc8c03be8", "yConfig": Array [ Object { - "color": "#CA8EAE", + "color": "#d36186", "forAccessor": "5acd4c9d-dc3b-4b21-9632-e4407944c36d", }, ], @@ -253,7 +253,7 @@ Object { "xAccessor": "4607c585-3af3-43b9-804f-e49b27796d79", "yConfig": Array [ Object { - "color": "#D36086", + "color": "#9170b8", "forAccessor": "d27e0966-daf9-41f4-9033-230cf1e76dc9", }, ], diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_area.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_area.ts index a0a74af33cd68..2f0c97cb6ddac 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_area.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/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/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.ts index 7f4b444451a9f..eca03cc2e4f26 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/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/x-pack/solutions/security/plugins/security_solution/public/explore/hosts/components/kpi_hosts/unique_ips/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/hosts/components/kpi_hosts/unique_ips/index.tsx index 4dc8e9fd62b66..27f75c3864c43 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/explore/hosts/components/kpi_hosts/unique_ips/index.tsx +++ b/x-pack/solutions/security/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,7 +34,7 @@ export const useGetUniqueIpsStatItems: () => Readonly = () => { key: 'uniqueSourceIps', name: i18n.SOURCE_CHART_LABEL, description: i18n.SOURCE_UNIT_LABEL, - color: euiTheme.colors.vis.euiColorVis4, + color: getSourceIpColor(euiTheme), icon: 'visMapCoordinate', lensAttributes: kpiUniqueIpsSourceMetricLensAttributes, }, @@ -38,7 +42,7 @@ export const useGetUniqueIpsStatItems: () => Readonly = () => { 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 = () => { getBarChartLensAttributes: getKpiUniqueIpsBarLensAttributes, }, ], - [euiTheme.colors.vis.euiColorVis2, euiTheme.colors.vis.euiColorVis4] + [euiTheme] ); }; diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/kpi_network/unique_private_ips/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/kpi_network/unique_private_ips/index.tsx index b53804076b67c..37b8f9f349967 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/kpi_network/unique_private_ips/index.tsx +++ b/x-pack/solutions/security/plugins/security_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,7 +34,7 @@ export const useGetUniquePrivateIpsStatItems: () => Readonly = () = key: 'uniqueSourcePrivateIps', name: i18n.SOURCE_CHART_LABEL, description: i18n.SOURCE_UNIT_LABEL, - color: euiTheme.colors.vis.euiColorVis4, + color: getSourceIpColor(euiTheme), icon: 'visMapCoordinate', lensAttributes: kpiUniquePrivateIpsSourceMetricLensAttributes, }, @@ -38,7 +42,7 @@ export const useGetUniquePrivateIpsStatItems: () => Readonly = () = 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 = () = getBarChartLensAttributes: getKpiUniquePrivateIpsBarLensAttributes, }, ], - [euiTheme.colors.vis.euiColorVis2, euiTheme.colors.vis.euiColorVis4] + [euiTheme] ); };