[8.10.3] [Security Solutions] Fix The 'Show top N' action inside the …

…timeline (#165109) (#165231)

# Backport

This will backport the following commits from `main` to `8.10`:
- [[Security Solutions] Fix The 'Show top N' action inside the timeline
(#165109)](#165109)

<!--- Backport version: 8.9.7 -->

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

<!--BACKPORT [{"author":{"name":"Pablo
Machado","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-08-30T12:45:00Z","message":"[Security
Solutions] Fix The 'Show top N' action inside the timeline
(#165109)\n\nissue:
https://github.com/elastic/kibana/issues/165075\r\n\r\n##
Summary\r\n\r\nThe \"Show top N\" action inside the timeline doesn't
take the timeline\r\nfilter and query into consideration\r\n\r\n###
Solutions\r\nPass the `combinedQuery` created by the `top_n` component
as a filter to\r\nLens and disable `applyGlobalQueriesAndFilters`
property (only for\r\n`top_n`
component).","sha":"b2371c9093061760620923e3aa2ef82a68ee700b","branchLabelMapping":{"^v8.11.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:fix","Team:Threat
Hunting","Team: SecuritySolution","Team:Threat
Hunting:Explore","v8.10.0","v8.11.0","v8.9.2"],"number":165109,"url":"https://github.com/elastic/kibana/pull/165109","mergeCommit":{"message":"[Security
Solutions] Fix The 'Show top N' action inside the timeline
(#165109)\n\nissue:
https://github.com/elastic/kibana/issues/165075\r\n\r\n##
Summary\r\n\r\nThe \"Show top N\" action inside the timeline doesn't
take the timeline\r\nfilter and query into consideration\r\n\r\n###
Solutions\r\nPass the `combinedQuery` created by the `top_n` component
as a filter to\r\nLens and disable `applyGlobalQueriesAndFilters`
property (only for\r\n`top_n`
component).","sha":"b2371c9093061760620923e3aa2ef82a68ee700b"}},"sourceBranch":"main","suggestedTargetBranches":["8.10","8.9"],"targetPullRequestStates":[{"branch":"8.10","label":"v8.10.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.11.0","labelRegex":"^v8.11.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/165109","number":165109,"mergeCommit":{"message":"[Security
Solutions] Fix The 'Show top N' action inside the timeline
(#165109)\n\nissue:
https://github.com/elastic/kibana/issues/165075\r\n\r\n##
Summary\r\n\r\nThe \"Show top N\" action inside the timeline doesn't
take the timeline\r\nfilter and query into consideration\r\n\r\n###
Solutions\r\nPass the `combinedQuery` created by the `top_n` component
as a filter to\r\nLens and disable `applyGlobalQueriesAndFilters`
property (only for\r\n`top_n`
component).","sha":"b2371c9093061760620923e3aa2ef82a68ee700b"}},{"branch":"8.9","label":"v8.9.2","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Pablo Machado <[email protected]>

x-pack/plugins/security_solution/public/common/components/matrix_histogram/index.tsx

@@ -12,6 +12,7 @@ import styled from 'styled-components';
 import { EuiFlexGroup, EuiFlexItem, EuiProgress, EuiSelect, EuiSpacer } from '@elastic/eui';
 import { useDispatch } from 'react-redux';
 import type { AggregationsTermsAggregateBase } from '@elastic/elasticsearch/lib/api/types';
+import { isString } from 'lodash/fp';
 import * as i18n from './translations';
 import { HeaderSection } from '../header_section';
 import { Panel } from '../panel';
@@ -66,6 +67,7 @@ export type MatrixHistogramComponentProps = MatrixHistogramProps &
     scopeId?: string;
     title: string | GetTitle;
     hideQueryToggle?: boolean;
+    applyGlobalQueriesAndFilters?: boolean;
   };
 
 const DEFAULT_PANEL_HEIGHT = 300;
@@ -117,6 +119,7 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramComponentProps> =
   yTickFormatter,
   skip,
   hideQueryToggle = false,
+  applyGlobalQueriesAndFilters = true,
 }) => {
   const visualizationId = `${id}-embeddable`;
   const dispatch = useDispatch();
@@ -258,9 +261,20 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramComponentProps> =
 
   const timerange = useMemo(() => ({ from: startDate, to: endDate }), [startDate, endDate]);
   const extraVisualizationOptions = useMemo(
-    () => ({ dnsIsPtrIncluded: isPtrIncluded ?? false }),
-    [isPtrIncluded]
+    () => ({
+      dnsIsPtrIncluded: isPtrIncluded ?? false,
+      filters: filterQuery
+        ? [
+            {
+              query: isString(filterQuery) ? JSON.parse(filterQuery) : filterQuery,
+              meta: {},
+            },
+          ]
+        : undefined,
+    }),
+    [isPtrIncluded, filterQuery]
   );
+
   if (hideHistogram) {
     return null;
   }
@@ -329,6 +343,7 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramComponentProps> =
           {toggleStatus ? (
             isChartEmbeddablesEnabled ? (
               <VisualizationEmbeddable
+                applyGlobalQueriesAndFilters={applyGlobalQueriesAndFilters}
                 data-test-subj="embeddable-matrix-histogram"
                 extraOptions={extraVisualizationOptions}
                 getLensAttributes={getLensAttributes}

x-pack/plugins/security_solution/public/common/components/top_n/top_n.tsx

@@ -116,6 +116,7 @@ const TopNComponent: React.FC<Props> = ({
       <TopNContent>
         {view === 'raw' || view === 'all' ? (
           <EventsByDataset
+            applyGlobalQueriesAndFilters={false} // Global filters are already included in combinedQueries
             combinedQueries={combinedQueries}
             deleteQuery={deleteQuery}
             filters={applicableFilters}

x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/events.ts

@@ -10,7 +10,8 @@ import type { GetLensAttributes } from '../../types';
 const layerId = uuidv4();
 
 export const getEventsHistogramLensAttributes: GetLensAttributes = (
-  stackByField = 'event.action'
+  stackByField = 'event.action',
+  extraOptions = {}
 ) => {
   return {
     title: 'Events',
@@ -55,7 +56,7 @@ export const getEventsHistogramLensAttributes: GetLensAttributes = (
         query: '',
         language: 'kuery',
       },
-      filters: [],
+      filters: extraOptions.filters ?? [],
       datasourceStates: {
         formBased: {
           layers: {

x-pack/plugins/security_solution/public/overview/components/events_by_dataset/index.tsx

@@ -60,6 +60,7 @@ interface Props extends Pick<GlobalTimeArgs, 'from' | 'to' | 'deleteQuery' | 'se
   scopeId?: string;
   toggleTopN?: () => void;
   hideQueryToggle?: boolean;
+  applyGlobalQueriesAndFilters?: boolean;
 }
 
 const getHistogramOption = (fieldName: string): MatrixHistogramOption => ({
@@ -95,6 +96,7 @@ const EventsByDatasetComponent: React.FC<Props> = ({
   to,
   toggleTopN,
   hideQueryToggle = false,
+  applyGlobalQueriesAndFilters = true,
 }) => {
   const uniqueQueryId = useMemo(() => `${ID}-${queryType}`, [queryType]);