From 0e9d84d191a660bae8014d9e543fd4b06d71614c Mon Sep 17 00:00:00 2001 From: Angela Chuang <6295984+angorayc@users.noreply.github.com> Date: Thu, 4 May 2023 18:30:14 +0100 Subject: [PATCH] [SecuritySolution] Unsync highlight state between visualizations (#156453) ## Summary issue: https://github.com/elastic/kibana/issues/156325 Before ![alerts](https://user-images.githubusercontent.com/4459398/235551083-f101aba4-7a32-41e8-95a0-4cf50dd09005.gif) After https://user-images.githubusercontent.com/6295984/235792908-c7832d7f-7424-4d11-b4f7-52acaa0fa7aa.mov ### Checklist - [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 --- .../markdown_editor/plugins/lens/processor.tsx | 2 ++ .../__snapshots__/external_alert.test.ts.snap | 6 ++++++ .../lens_attributes/common/event.test.ts | 15 +++++++++++++++ .../lens_attributes/common/events.ts | 1 + .../lens_attributes/common/external_alert.test.ts | 15 +++++++++++++++ .../lens_attributes/common/external_alert.ts | 6 ++++++ .../__snapshots__/dns_top_domains.test.ts.snap | 1 + .../network/dns_top_domains.test.ts | 6 ++++++ .../lens_attributes/network/dns_top_domains.ts | 1 + .../lens_embeddable.test.tsx | 5 +++++ .../visualization_actions/lens_embeddable.tsx | 2 ++ 11 files changed, 60 insertions(+) diff --git a/x-pack/plugins/cases/public/components/markdown_editor/plugins/lens/processor.tsx b/x-pack/plugins/cases/public/components/markdown_editor/plugins/lens/processor.tsx index de7bc8dfa216e8..b1a13c067f343f 100644 --- a/x-pack/plugins/cases/public/components/markdown_editor/plugins/lens/processor.tsx +++ b/x-pack/plugins/cases/public/components/markdown_editor/plugins/lens/processor.tsx @@ -53,6 +53,8 @@ const LensMarkDownRendererComponent: React.FC = ({ executionContext={{ type: 'cases', }} + syncTooltips={false} + syncCursor={false} /> diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/__snapshots__/external_alert.test.ts.snap b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/__snapshots__/external_alert.test.ts.snap index 6c56414f3c05e7..edf04f5aadbf5e 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/__snapshots__/external_alert.test.ts.snap +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/__snapshots__/external_alert.test.ts.snap @@ -190,6 +190,11 @@ Object { "query": "host.name: *", }, "visualization": Object { + "axisTitlesVisibilitySettings": Object { + "x": false, + "yLeft": false, + "yRight": true, + }, "layers": Array [ Object { "accessors": Array [ @@ -211,6 +216,7 @@ Object { "preferredSeriesType": "bar_stacked", "title": "Empty XY chart", "valueLabels": "hide", + "valuesInLegend": true, "yLeftExtent": Object { "mode": "full", }, diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/event.test.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/event.test.ts index 935e2a279d6736..2616d25164a9df 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/event.test.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/event.test.ts @@ -480,4 +480,19 @@ describe('getEventsHistogramLensAttributes', () => { }) ); }); + + it('should render values in legend', () => { + const { result } = renderHook( + () => + useLensAttributes({ + getLensAttributes: getEventsHistogramLensAttributes, + stackByField: 'event.dataset', + }), + { wrapper } + ); + + expect(result?.current?.state?.visualization).toEqual( + expect.objectContaining({ valuesInLegend: true }) + ); + }); }); diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/events.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/events.ts index 61e9bac0cb3ac5..bbdd521992b4f5 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/events.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/events.ts @@ -49,6 +49,7 @@ export const getEventsHistogramLensAttributes: GetLensAttributes = ( yLeft: false, yRight: true, }, + valuesInLegend: true, }, query: { query: '', diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.test.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.test.ts index 575960076dda4f..bef98c3678ce2a 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.test.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.test.ts @@ -43,4 +43,19 @@ describe('getExternalAlertLensAttributes', () => { expect(result?.current).toMatchSnapshot(); }); + + it('should render values in legend', () => { + const { result } = renderHook( + () => + useLensAttributes({ + getLensAttributes: getExternalAlertLensAttributes, + stackByField: 'event.dataset', + }), + { wrapper } + ); + + expect(result?.current?.state?.visualization).toEqual( + expect.objectContaining({ valuesInLegend: true }) + ); + }); }); diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.ts index 44aa790332ba09..5464f6e2cf85e8 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.ts @@ -42,6 +42,12 @@ export const getExternalAlertLensAttributes: GetLensAttributes = ( yLeftExtent: { mode: 'full', }, + axisTitlesVisibilitySettings: { + x: false, + yLeft: false, + yRight: true, + }, + valuesInLegend: true, }, query: { query: '', diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/dns_top_domains.test.ts.snap b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/dns_top_domains.test.ts.snap index 626e61fe0399a7..0bdfc50fae65c2 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/dns_top_domains.test.ts.snap +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/dns_top_domains.test.ts.snap @@ -237,6 +237,7 @@ Object { "yRight": true, }, "valueLabels": "hide", + "valuesInLegend": true, "yLeftExtent": Object { "mode": "full", }, diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/dns_top_domains.test.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/dns_top_domains.test.ts index b60d46203aa69a..9ceebcd902dff2 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/dns_top_domains.test.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/dns_top_domains.test.ts @@ -157,4 +157,10 @@ describe('getDnsTopDomainsLensAttributes', () => { } `); }); + + it('should render values in legend', () => { + expect(result?.current?.state?.visualization).toEqual( + expect.objectContaining({ valuesInLegend: true }) + ); + }); }); diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/dns_top_domains.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/dns_top_domains.ts index 24f611eb4ebf66..ba92a45b3ee556 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/dns_top_domains.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/dns_top_domains.ts @@ -36,6 +36,7 @@ export const getDnsTopDomainsLensAttributes: GetLensAttributes = ( yLeft: false, yRight: false, }, + valuesInLegend: true, tickLabelsVisibilitySettings: { x: true, yLeft: true, diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.test.tsx b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.test.tsx index bd26f2da172676..c7607cd1046df8 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.test.tsx @@ -123,4 +123,9 @@ describe('LensEmbeddable', () => { it('should render with searchSessionId', () => { expect(mockEmbeddableComponent.mock.calls[0][0].searchSessionId).toEqual(mockSearchSessionId); }); + + it('should not sync highlight state between visualizations', () => { + expect(mockEmbeddableComponent.mock.calls[0][0].syncTooltips).toEqual(false); + expect(mockEmbeddableComponent.mock.calls[0][0].syncCursor).toEqual(false); + }); }); diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx index 4a955500fbee90..abc9839e8f6d21 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx @@ -271,6 +271,8 @@ const LensEmbeddableComponent: React.FC = ({ extraActions={actions} searchSessionId={searchSessionId} showInspector={false} + syncTooltips={false} + syncCursor={false} /> )}