[Security Solutions] Fix The 'Show top N' action inside the timeline (e…

…lastic#165109) issue: elastic#165075 ## Summary The "Show top N" action inside the timeline doesn't take the timeline filter and query into consideration ### Solutions Pass the `combinedQuery` created by the `top_n` component as a filter to Lens and disable `applyGlobalQueriesAndFilters` property (only for `top_n` component).
fkanout · Aug 30, 2023 · b2371c9 · b2371c9
1 parent da9c22a
commit b2371c9
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 4 deletions.
diff --git a/x-pack/plugins/security_solution/public/common/components/matrix_histogram/index.tsx b/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}

diff --git a/x-pack/plugins/security_solution/public/common/components/top_n/top_n.tsx b/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}

diff --git a/..._solution/public/common/components/visualization_actions/lens_attributes/common/events.ts b/..._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: {

diff --git a/x-pack/plugins/security_solution/public/overview/components/events_by_dataset/index.tsx b/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]);