[SecuritySolution] Fix topN legend actions - filter in / out in timeline

src/plugins/chart_expressions/expression_xy/common/expression_functions/layered_xy_vis_fn.ts

@@ -66,6 +66,7 @@ export const layeredXyVisFn: LayeredXyVisFn['fn'] = async (data, args, handlers)
       syncTooltips: handlers?.isSyncTooltipsEnabled?.() ?? false,
       syncCursor: handlers?.isSyncCursorEnabled?.() ?? true,
       overrides: handlers.variables?.overrides as XYRender['value']['overrides'],
+      shouldShowLegendAction: handlers?.shouldShowLegendAction,
     },
   };
 };

src/plugins/chart_expressions/expression_xy/common/expression_functions/xy_vis_fn.ts

@@ -139,6 +139,7 @@ export const xyVisFn: XyVisFn['fn'] = async (data, args, handlers) => {
       syncTooltips: handlers?.isSyncTooltipsEnabled?.() ?? false,
       syncCursor: handlers?.isSyncCursorEnabled?.() ?? true,
       overrides: handlers.variables?.overrides as XYRender['value']['overrides'],
+      shouldShowLegendAction: handlers?.shouldShowLegendAction,
     },
   };
 };

src/plugins/chart_expressions/expression_xy/common/types/expression_renderers.ts

@@ -20,6 +20,7 @@ export interface XYChartProps {
   syncColors: boolean;
   canNavigateToLens?: boolean;
   overrides?: AllowedXYOverrides & AllowedSettingsOverrides & AllowedChartOverrides;
+  shouldShowLegendAction: (actionId: string) => boolean;
 }
 
 export interface XYRender {

src/plugins/chart_expressions/expression_xy/public/components/legend_action.test.tsx

@@ -203,7 +203,8 @@ describe('getLegendAction', function () {
         formattedColumns: {},
       },
     },
-    {}
+    {},
+    () => true
   );
   let wrapper: ReactWrapper<LegendActionProps>;
 

src/plugins/chart_expressions/expression_xy/public/components/legend_action.tsx

@@ -28,6 +28,7 @@ export const getLegendAction = (
   fieldFormats: LayersFieldFormats,
   formattedDatatables: DatatablesWithFormatInfo,
   titles: LayersAccessorsTitles,
+  shouldShowLegendAction: (actionId: string) => boolean,
   singleTable?: boolean
 ): LegendAction =>
   React.memo(({ series: [xySeries] }) => {
@@ -109,6 +110,7 @@ export const getLegendAction = (
         }
         onFilter={filterHandler}
         legendCellValueActions={legendCellValueActions}
+        shouldShowLegendAction={shouldShowLegendAction}
       />
     );
   });

src/plugins/chart_expressions/expression_xy/public/components/legend_action_popover.tsx

@@ -6,9 +6,15 @@
  * Side Public License, v 1.
  */
 
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiContextMenuPanelDescriptor, EuiIcon, EuiPopover, EuiContextMenu } from '@elastic/eui';
+import {
+  EuiContextMenuPanelDescriptor,
+  EuiIcon,
+  EuiPopover,
+  EuiContextMenu,
+  EuiContextMenuPanelItemDescriptor,
+} from '@elastic/eui';
 import { useLegendAction } from '@elastic/charts';
 import type { CellValueAction } from '../types';
 
@@ -29,57 +35,70 @@ export interface LegendActionPopoverProps {
    * Compatible actions to be added to the popover actions
    */
   legendCellValueActions?: LegendCellValueActions;
+  shouldShowLegendAction: (actionId: string) => boolean;
 }
 
 export const LegendActionPopover: React.FunctionComponent<LegendActionPopoverProps> = ({
   label,
   onFilter,
   legendCellValueActions = [],
+  shouldShowLegendAction,
 }) => {
   const [popoverOpen, setPopoverOpen] = useState(false);
   const [ref, onClose] = useLegendAction<HTMLDivElement>();
 
-  const legendCellValueActionPanelItems = legendCellValueActions.map((action) => ({
-    name: action.displayName,
-    'data-test-subj': `legend-${label}-${action.id}`,
-    icon: <EuiIcon type={action.iconType} size="m" />,
-    onClick: () => {
-      action.execute();
-      setPopoverOpen(false);
-    },
-  }));
-
-  const panels: EuiContextMenuPanelDescriptor[] = [
-    {
-      id: 'main',
-      title: label,
-      items: [
-        {
-          name: i18n.translate('expressionXY.legend.filterForValueButtonAriaLabel', {
-            defaultMessage: 'Filter for',
-          }),
-          'data-test-subj': `legend-${label}-filterIn`,
-          icon: <EuiIcon type="plusInCircle" size="m" />,
-          onClick: () => {
-            setPopoverOpen(false);
-            onFilter();
-          },
+  const panels: EuiContextMenuPanelDescriptor[] = useMemo(() => {
+    const defaultActions = [
+      {
+        id: 'filterIn',
+        displayName: i18n.translate('expressionXY.legend.filterForValueButtonAriaLabel', {
+          defaultMessage: 'Filter for',
+        }),
+        'data-test-subj': `legend-${label}-filterIn`,
+        iconType: 'plusInCircle',
+        execute: () => {
+          setPopoverOpen(false);
+          onFilter();
         },
-        {
-          name: i18n.translate('expressionXY.legend.filterOutValueButtonAriaLabel', {
-            defaultMessage: 'Filter out',
-          }),
-          'data-test-subj': `legend-${label}-filterOut`,
-          icon: <EuiIcon type="minusInCircle" size="m" />,
+      },
+      {
+        id: 'filterOut',
+        displayName: i18n.translate('expressionXY.legend.filterOutValueButtonAriaLabel', {
+          defaultMessage: 'Filter out',
+        }),
+        'data-test-subj': `legend-${label}-filterOut`,
+        iconType: 'minusInCircle',
+        execute: () => {
+          setPopoverOpen(false);
+          onFilter({ negate: true });
+        },
+      },
+    ];
+
+    const legendCellValueActionPanelItems = [...defaultActions, ...legendCellValueActions].reduce<
+      EuiContextMenuPanelItemDescriptor[]
+    >((acc, action) => {
+      if (shouldShowLegendAction(action.id)) {
+        acc.push({
+          name: action.displayName,
+          'data-test-subj': `legend-${label}-${action.id}`,
+          icon: <EuiIcon type={action.iconType} size="m" />,
           onClick: () => {
+            action.execute();
             setPopoverOpen(false);
-            onFilter({ negate: true });
           },
-        },
-        ...legendCellValueActionPanelItems,
-      ],
-    },
-  ];
+        });
+      }
+      return acc;
+    }, []);
+    return [
+      {
+        id: 'main',
+        title: label,
+        items: legendCellValueActionPanelItems,
+      },
+    ];
+  }, [label, legendCellValueActions, onFilter, shouldShowLegendAction]);
 
   const Button = (
     <div

src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx

@@ -145,6 +145,7 @@ export type XYChartRenderProps = Omit<XYChartProps, 'canNavigateToLens'> & {
   renderComplete: () => void;
   uiState?: PersistedState;
   timeFormat: string;
+  shouldShowLegendAction: (actionId: string) => boolean;
 };
 
 function nonNullable<T>(v: T): v is NonNullable<T> {
@@ -207,6 +208,7 @@ export function XYChart({
   uiState,
   timeFormat,
   overrides,
+  shouldShowLegendAction,
 }: XYChartRenderProps) {
   const {
     legend,
@@ -839,6 +841,7 @@ export function XYChart({
                     fieldFormats,
                     formattedDatatables,
                     titles,
+                    shouldShowLegendAction,
                     singleTable
                   )
                 : undefined

src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx

@@ -277,6 +277,7 @@ export const getXyChartRenderer = ({
               syncCursor={config.syncCursor}
               uiState={handlers.uiState as PersistedState}
               renderComplete={renderComplete}
+              shouldShowLegendAction={handlers.shouldShowLegendAction}
             />
           </div>
         </I18nProvider>

src/plugins/expressions/common/execution/types.ts

@@ -84,6 +84,8 @@ export interface ExecutionContext<
    * Logs datatable.
    */
   logDatatable?(name: string, datatable: Datatable): void;
+
+  shouldShowLegendAction: (actionId: string) => boolean;
 }
 
 /**

src/plugins/expressions/common/expression_renderers/types.ts

@@ -105,4 +105,5 @@ export interface IInterpreterRenderHandlers {
   uiState?: unknown;
 
   getExecutionContext(): KibanaExecutionContext | undefined;
+  shouldShowLegendAction: (actionId: string) => boolean;
 }

src/plugins/expressions/public/loader.ts

@@ -63,6 +63,7 @@ export class ExpressionLoader {
       hasCompatibleActions: params?.hasCompatibleActions,
       getCompatibleCellValueActions: params?.getCompatibleCellValueActions,
       executionContext: params?.executionContext,
+      shouldShowLegendAction: params?.shouldShowLegendAction,
     });
     this.render$ = this.renderHandler.render$;
     this.update$ = this.renderHandler.update$;

src/plugins/expressions/public/react_expression_renderer/react_expression_renderer.tsx

@@ -24,6 +24,7 @@ export interface ReactExpressionRendererProps
     error?: ExpressionRenderError | null
   ) => React.ReactElement | React.ReactElement[];
   padding?: 'xs' | 's' | 'm' | 'l' | 'xl';
+  shouldShowLegendAction: (actionId: string) => boolean;
 }
 
 export type ReactExpressionRendererType = React.ComponentType<ReactExpressionRendererProps>;

src/plugins/expressions/public/render.ts

@@ -36,6 +36,7 @@ export interface ExpressionRenderHandlerParams {
   hasCompatibleActions?: (event: ExpressionRendererEvent) => Promise<boolean>;
   getCompatibleCellValueActions?: (data: object[]) => Promise<unknown[]>;
   executionContext?: KibanaExecutionContext;
+  shouldShowLegendAction?: (actionId: string) => boolean;
 }
 
 type UpdateValue = IInterpreterRenderUpdateParams<IExpressionLoaderParams>;
@@ -66,6 +67,7 @@ export class ExpressionRenderHandler {
       hasCompatibleActions = async () => false,
       getCompatibleCellValueActions = async () => [],
       executionContext,
+      shouldShowLegendAction,
     }: ExpressionRenderHandlerParams = {}
   ) {
     this.element = element;
@@ -118,6 +120,9 @@ export class ExpressionRenderHandler {
       },
       hasCompatibleActions,
       getCompatibleCellValueActions,
+      shouldShowLegendAction: (actionId: string) => {
+        return shouldShowLegendAction?.(actionId) ?? true;
+      },
     };
   }
 

src/plugins/expressions/public/types/index.ts

@@ -67,6 +67,7 @@ export interface IExpressionLoaderParams {
    * By default, it equals 1000.
    */
   throttle?: number;
+  shouldShowLegendAction?: () => boolean;
 }
 
 export interface ExpressionRenderError extends Error {

x-pack/plugins/lens/public/embeddable/embeddable.tsx

@@ -176,6 +176,7 @@ interface LensBaseEmbeddableInput extends EmbeddableInput {
   onTableRowClick?: (
     data: Simplify<LensTableRowContextMenuEvent['data'] & PreventableEvent>
   ) => void;
+  shouldShowLegendAction: (actionId: string) => boolean;
 }
 
 export type LensByValueInput = {
@@ -1103,6 +1104,7 @@ export class Embeddable
               }}
               noPadding={this.visDisplayOptions.noPadding}
               docLinks={this.deps.coreStart.docLinks}
+              shouldShowLegendAction={input.shouldShowLegendAction}
             />
           </KibanaThemeProvider>
           <MessagesBadge

x-pack/plugins/lens/public/embeddable/expression_wrapper.tsx

@@ -47,6 +47,7 @@ export interface ExpressionWrapperProps {
   lensInspector: LensInspector;
   noPadding?: boolean;
   docLinks: CoreStart['docLinks'];
+  shouldShowLegendAction: (actionId: string) => boolean;
 }
 
 export function ExpressionWrapper({
@@ -73,6 +74,7 @@ export function ExpressionWrapper({
   lensInspector,
   noPadding,
   docLinks,
+  shouldShowLegendAction,
 }: ExpressionWrapperProps) {
   if (!expression) return null;
   return (
@@ -104,6 +106,7 @@ export function ExpressionWrapper({
           onEvent={handleEvent}
           hasCompatibleActions={hasCompatibleActions}
           getCompatibleCellValueActions={getCompatibleCellValueActions}
+          shouldShowLegendAction={shouldShowLegendAction}
         />
       </div>
     </I18nProvider>

x-pack/plugins/security_solution/public/actions/filter/index.ts

@@ -9,3 +9,7 @@ export { createFilterInCellActionFactory } from './cell_action/filter_in';
 export { createFilterOutCellActionFactory } from './cell_action/filter_out';
 export { createFilterInDiscoverCellActionFactory } from './discover/filter_in';
 export { createFilterOutDiscoverCellActionFactory } from './discover/filter_out';
+export { createFilterInTopNTimelineLegendAction } from './lens/filter_in_timeline';
+export { createFilterInTopNTopNLegendAction } from './lens/filter_in';
+export { createFilterOutTopNTimelineLegendAction } from './lens/filter_out_timeline';
+export { createFilterOutTopNLegendAction } from './lens/filter_out';

x-pack/plugins/security_solution/public/actions/filter/lens/filter_in.ts

@@ -0,0 +1,23 @@
+/*
+ * 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 { SecurityAppStore } from '../../../common/store';
+
+import type { StartServices } from '../../../types';
+import { createLensFilterLegendAction } from './helpers';
+
+export const ACTION_ID_TOP_N_FILTER_IN = 'topN_filterIn';
+
+export const createFilterInTopNTopNLegendAction = ({
+  store,
+  order,
+  services,
+}: {
+  store: SecurityAppStore;
+  order: number;
+  services: StartServices;
+}) => createLensFilterLegendAction({ id: ACTION_ID_TOP_N_FILTER_IN, order, store, services });

x-pack/plugins/security_solution/public/actions/filter/lens/filter_in_timeline.ts

@@ -0,0 +1,24 @@
+/*
+ * 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 { SecurityAppStore } from '../../../common/store';
+
+import type { StartServices } from '../../../types';
+import { createLensFilterLegendAction } from './helpers';
+
+export const ACTION_ID_TIMELINE_TOP_N_FILTER_IN = 'timeline_topN_filterIn';
+
+export const createFilterInTopNTimelineLegendAction = ({
+  store,
+  order,
+  services,
+}: {
+  store: SecurityAppStore;
+  order: number;
+  services: StartServices;
+}) =>
+  createLensFilterLegendAction({ id: ACTION_ID_TIMELINE_TOP_N_FILTER_IN, order, store, services });