Skip to content

Commit

Permalink
[9.0] [Security Solution] Eui visual refresh - make palettes theme aw…
Browse files Browse the repository at this point in the history 
…are (#205873) (#211222)

# Backport

This will backport the following commits from `main` to `9.0`:
- [[Security Solution] Eui visual refresh - make palettes theme aware
(#205873)](#205873)

<!--- Backport version: 9.6.4 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Luke
Gmys","email":"11671118+lgestc@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-02-10T10:05:23Z","message":"[Security
Solution] Eui visual refresh - make palettes theme aware (#205873)\n\n##
Summary\r\n\r\nThis PR resolves
#201882 by\r\nmaking sure that
EUI palette functions are called during component\r\nre-renders in
Security Solution.\r\n\r\n### Testing\r\n\r\nPlease verify if
visualizations are displayed properly.\r\n\r\nRunning Kibana with the
Borealis theme\r\nIn order to run Kibana with Borealis, you'll need to
do the following:\r\n\r\nSet the following in
kibana.dev.yml:\r\n`uiSettings.experimental.themeSwitcherEnabled:
true`\r\n\r\nRun Kibana with the following environment variable
set:\r\n`KBN_OPTIMIZER_THEMES=\"borealislight,borealisdark,v8light,v8dark\"
yarn\r\nstart`\r\n\r\nThis will expose a toggle under Stack Management >
Advanced Settings >\r\nTheme version, which you can use to toggle
between Amsterdam
and\r\nBorealis.","sha":"bcb3d709b99ebe05a2a193fc975c680700bcfe73","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","backport:skip","Team:Threat
Hunting:Investigations","Team:Threat Hunting:Explore","EUI Visual
Refresh","v9.1.0"],"title":"[Security Solution] Eui visual refresh -
make palettes theme
aware","number":205873,"url":"https://github.com/elastic/kibana/pull/205873","mergeCommit":{"message":"[Security
Solution] Eui visual refresh - make palettes theme aware (#205873)\n\n##
Summary\r\n\r\nThis PR resolves
#201882 by\r\nmaking sure that
EUI palette functions are called during component\r\nre-renders in
Security Solution.\r\n\r\n### Testing\r\n\r\nPlease verify if
visualizations are displayed properly.\r\n\r\nRunning Kibana with the
Borealis theme\r\nIn order to run Kibana with Borealis, you'll need to
do the following:\r\n\r\nSet the following in
kibana.dev.yml:\r\n`uiSettings.experimental.themeSwitcherEnabled:
true`\r\n\r\nRun Kibana with the following environment variable
set:\r\n`KBN_OPTIMIZER_THEMES=\"borealislight,borealisdark,v8light,v8dark\"
yarn\r\nstart`\r\n\r\nThis will expose a toggle under Stack Management >
Advanced Settings >\r\nTheme version, which you can use to toggle
between Amsterdam
and\r\nBorealis.","sha":"bcb3d709b99ebe05a2a193fc975c680700bcfe73"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/205873","number":205873,"mergeCommit":{"message":"[Security
Solution] Eui visual refresh - make palettes theme aware (#205873)\n\n##
Summary\r\n\r\nThis PR resolves
#201882 by\r\nmaking sure that
EUI palette functions are called during component\r\nre-renders in
Security Solution.\r\n\r\n### Testing\r\n\r\nPlease verify if
visualizations are displayed properly.\r\n\r\nRunning Kibana with the
Borealis theme\r\nIn order to run Kibana with Borealis, you'll need to
do the following:\r\n\r\nSet the following in
kibana.dev.yml:\r\n`uiSettings.experimental.themeSwitcherEnabled:
true`\r\n\r\nRun Kibana with the following environment variable
set:\r\n`KBN_OPTIMIZER_THEMES=\"borealislight,borealisdark,v8light,v8dark\"
yarn\r\nstart`\r\n\r\nThis will expose a toggle under Stack Management >
Advanced Settings >\r\nTheme version, which you can use to toggle
between Amsterdam
and\r\nBorealis.","sha":"bcb3d709b99ebe05a2a193fc975c680700bcfe73"}}]}]
BACKPORT-->

Co-authored-by: Luke Gmys <11671118+lgestc@users.noreply.github.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
  • Loading branch information
@tkajtoch @lgestc @elasticmachine
3 people authored Feb 19, 2025
1 parent b064e1f commit 72cd91a
Show file tree
Hide file tree
Showing 5 changed files with 232 additions and 186 deletions.
31 changes: 21 additions & 10 deletions ...plugins/security_solution/public/explore/network/components/embeddables/__mocks__/mock.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
import type { IndexPatternMapping } from '../types';
import type { IndexPatternSavedObject } from '../../../../../common/hooks/types';
import { LAYER_TYPE } from '@kbn/maps-plugin/common';
import type { EuiThemeComputed } from '@elastic/eui';

export const mockIndexPatternIds: IndexPatternMapping[] = [
{ title: 'filebeat-*', id: '8c7323ac-97ad-4b53-ac0a-40f8f691a918' },
Expand Down Expand Up @@ -50,11 +51,11 @@ export const mockSourceLayer = {
properties: {
fillColor: {
type: 'STATIC',
options: { color: '#A6EDEA' },
options: { color: 'euiColorVis4' },
},
lineColor: {
type: 'STATIC',
options: { color: '#FFFFFF' },
options: { color: 'euiColorVisNeutral0' },
},
lineWidth: { type: 'STATIC', options: { size: 2 } },
iconSize: { type: 'STATIC', options: { size: 8 } },
Expand Down Expand Up @@ -108,11 +109,11 @@ export const mockDestinationLayer = {
properties: {
fillColor: {
type: 'STATIC',
options: { color: '#61A2FF' },
options: { color: 'euiColorVis2' },
},
lineColor: {
type: 'STATIC',
options: { color: '#FFFFFF' },
options: { color: 'euiColorVisNeutral0' },
},
lineWidth: { type: 'STATIC', options: { size: 2 } },
iconSize: { type: 'STATIC', options: { size: 8 } },
Expand Down Expand Up @@ -164,11 +165,11 @@ export const mockClientLayer = {
properties: {
fillColor: {
type: 'STATIC',
options: { color: '#A6EDEA' },
options: { color: 'euiColorVis4' },
},
lineColor: {
type: 'STATIC',
options: { color: '#FFFFFF' },
options: { color: 'euiColorVisNeutral0' },
},
lineWidth: { type: 'STATIC', options: { size: 2 } },
iconSize: { type: 'STATIC', options: { size: 8 } },
Expand Down Expand Up @@ -227,11 +228,11 @@ export const mockServerLayer = {
properties: {
fillColor: {
type: 'STATIC',
options: { color: '#61A2FF' },
options: { color: 'euiColorVis2' },
},
lineColor: {
type: 'STATIC',
options: { color: '#FFFFFF' },
options: { color: 'euiColorVisNeutral0' },
},
lineWidth: { type: 'STATIC', options: { size: 2 } },
iconSize: { type: 'STATIC', options: { size: 8 } },
Expand Down Expand Up @@ -282,7 +283,7 @@ export const mockLineLayer = {
properties: {
fillColor: {
type: 'STATIC',
options: { color: '#1EA593' },
options: { color: '#A6EDEA' },
},
lineColor: {
type: 'STATIC',
Expand Down Expand Up @@ -347,7 +348,7 @@ export const mockClientServerLineLayer = {
properties: {
fillColor: {
type: 'STATIC',
options: { color: '#1EA593' },
options: { color: '#A6EDEA' },
},
lineColor: {
type: 'STATIC',
Expand Down Expand Up @@ -530,3 +531,13 @@ export const mockCommaFilebeatExclusionGlobIndexPattern: IndexPatternSavedObject
title: 'filebeat-*,-filebeat-7.6.0*',
},
};

export const mockEuiTheme: EuiThemeComputed<{}> = {
colors: {
vis: {
euiColorVisNeutral0: 'euiColorVisNeutral0',
euiColorVis4: 'euiColorVis4',
euiColorVis2: 'euiColorVis2',
},
},
} as unknown as EuiThemeComputed<{}>;
6 changes: 3 additions & 3 deletions ...ins/security_solution/public/explore/network/components/embeddables/embedded_map.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,7 @@ describe('EmbeddedMapComponent', () => {
</TestProviders>
);
await waitFor(() => {
const dataViewArg = (getLayerList as jest.Mock).mock.calls[0][0];
const dataViewArg = (getLayerList as jest.Mock).mock.calls[0][1];
expect(dataViewArg).toEqual([filebeatDataView]);
});
});
Expand All @@ -221,7 +221,7 @@ describe('EmbeddedMapComponent', () => {
</TestProviders>
);
await waitFor(() => {
const dataViewArg = (getLayerList as jest.Mock).mock.calls[0][0];
const dataViewArg = (getLayerList as jest.Mock).mock.calls[0][1];
expect(dataViewArg).toEqual([filebeatDataView]);
});
rerender(
Expand All @@ -231,7 +231,7 @@ describe('EmbeddedMapComponent', () => {
);
await waitFor(() => {
// data view is updated with the returned embeddable.setLayerList callback, which is passesd getLayerList(dataViews)
const dataViewArg = (getLayerList as jest.Mock).mock.calls[1][0];
const dataViewArg = (getLayerList as jest.Mock).mock.calls[1][1];
expect(dataViewArg).toEqual([filebeatDataView, packetbeatDataView]);
});
});
Expand Down
7 changes: 4 additions & 3 deletions .../plugins/security_solution/public/explore/network/components/embeddables/embedded_map.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

// embedded map v2

import { EuiAccordion, EuiLink, EuiText } from '@elastic/eui';
import { EuiAccordion, EuiLink, EuiText, useEuiTheme } from '@elastic/eui';
import React, { useCallback, useEffect, useState, useMemo } from 'react';
import { useSelector } from 'react-redux';
import { createHtmlPortalNode, InPortal, OutPortal } from 'react-reverse-portal';
Expand Down Expand Up @@ -103,6 +103,7 @@ export const EmbeddedMapComponent = ({
setQuery,
startDate,
}: EmbeddedMapProps) => {
const { euiTheme } = useEuiTheme();
const { services } = useKibana();
const { storage } = services;

Expand Down Expand Up @@ -133,7 +134,7 @@ export const EmbeddedMapComponent = ({
// ensures only index patterns with maps fields are passed
const goodDataViews = availableDataViews.filter((_, i) => apiResponse[i] ?? false);
if (!canceled) {
setLayerList(getLayerList(goodDataViews));
setLayerList(getLayerList({ euiTheme }, goodDataViews));
}
} catch (e) {
if (!canceled) {
Expand All @@ -149,7 +150,7 @@ export const EmbeddedMapComponent = ({
return () => {
canceled = true;
};
}, [addError, availableDataViews, isFieldInIndexPattern]);
}, [addError, availableDataViews, euiTheme, isFieldInIndexPattern]);

useEffect(() => {
const dataViews = kibanaDataViews.filter((dataView) =>
Expand Down
19 changes: 16 additions & 3 deletions ...lugins/security_solution/public/explore/network/components/embeddables/map_config.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
mockLineLayer,
mockServerLayer,
mockSourceLayer,
mockEuiTheme,
} from './__mocks__/mock';

jest.mock('uuid', () => {
Expand All @@ -28,27 +29,36 @@ jest.mock('uuid', () => {
};
});

const layerProviderDependencies = { euiTheme: mockEuiTheme };

describe('map_config', () => {
describe('#getLayerList', () => {
test('it returns the complete layerList with a source, destination, and line layer', () => {
const layerList = getLayerList(mockIndexPatternIds);
const layerList = getLayerList(layerProviderDependencies, mockIndexPatternIds);
expect(layerList).toStrictEqual(mockLayerList);
});

test('it returns the complete layerList for multiple indices', () => {
const layerList = getLayerList([...mockIndexPatternIds, ...mockIndexPatternIds]);
const layerList = getLayerList(layerProviderDependencies, [
...mockIndexPatternIds,
...mockIndexPatternIds,
]);
expect(layerList).toStrictEqual(mockLayerListDouble);
});

test('it returns the complete layerList for multiple indices with custom layer mapping', () => {
const layerList = getLayerList([...mockIndexPatternIds, ...mockAPMIndexPatternIds]);
const layerList = getLayerList(layerProviderDependencies, [
...mockIndexPatternIds,
...mockAPMIndexPatternIds,
]);
expect(layerList).toStrictEqual(mockLayerListMixed);
});
});

describe('#getSourceLayer', () => {
test('it returns a source layer', () => {
const layerList = getSourceLayer(
layerProviderDependencies,
mockIndexPatternIds[0].title,
mockIndexPatternIds[0].id,
mockLayerGroup.id,
Expand All @@ -59,6 +69,7 @@ describe('map_config', () => {

test('it returns a source layer for custom layer mapping', () => {
const layerList = getSourceLayer(
layerProviderDependencies,
mockAPMIndexPatternIds[0].title,
mockAPMIndexPatternIds[0].id,
mockLayerGroup.id,
Expand All @@ -71,6 +82,7 @@ describe('map_config', () => {
describe('#getDestinationLayer', () => {
test('it returns a destination layer', () => {
const layerList = getDestinationLayer(
layerProviderDependencies,
mockIndexPatternIds[0].title,
mockIndexPatternIds[0].id,
mockLayerGroup.id,
Expand All @@ -81,6 +93,7 @@ describe('map_config', () => {

test('it returns a destination layer for custom layer mapping', () => {
const layerList = getDestinationLayer(
layerProviderDependencies,
mockAPMIndexPatternIds[0].title,
mockAPMIndexPatternIds[0].id,
mockLayerGroup.id,
Expand Down
Loading

0 comments on commit 72cd91a

Please sign in to comment.