[RAC] [TGrid] Implements cell actions in the TGrid

x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid.tsx

@@ -31,6 +31,7 @@ import type {
 import { getRenderCellValue } from './render_cell_value';
 import { usePluginContext } from '../../hooks/use_plugin_context';
 import { decorateResponse } from './decorate_response';
+import { getDefaultCellActions } from './default_cell_actions';
 import { LazyAlertsFlyout } from '../..';
 
 interface AlertsTableTGridProps {
@@ -192,6 +193,7 @@ export function AlertsTableTGrid(props: AlertsTableTGridProps) {
         type: 'standalone',
         columns,
         deletedEventIds: [],
+        defaultCellActions: getDefaultCellActions({ enableFilterActions: false }),
         end: rangeTo,
         filters: [],
         indexNames: [indexName],

x-pack/plugins/observability/public/pages/alerts/default_cell_actions.tsx

@@ -0,0 +1,109 @@
+/*
+ * 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 React from 'react';
+
+import { ObservabilityPublicPluginsStart } from '../..';
+import { getMappedNonEcsValue } from './render_cell_value';
+import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
+import { TimelineNonEcsData } from '../../../../timelines/common/search_strategy';
+import { TGridCellAction } from '../../../../timelines/common/types/timeline';
+import { TimelinesUIStart } from '../../../../timelines/public';
+
+/** a noop required by the filter in / out buttons */
+const onFilterAdded = () => {};
+
+/** a hook to eliminate the verbose boilerplate required to use common services */
+const useKibanaServices = () => {
+  const { timelines } = useKibana<{ timelines: TimelinesUIStart }>().services;
+  const {
+    services: {
+      data: {
+        query: { filterManager },
+      },
+    },
+  } = useKibana<ObservabilityPublicPluginsStart>();
+
+  return { timelines, filterManager };
+};
+
+/** actions for adding filters to the search bar */
+const filterCellActions: TGridCellAction[] = [
+  ({ data }: { data: TimelineNonEcsData[][] }) => ({ rowIndex, columnId, Component }) => {
+    const { timelines, filterManager } = useKibanaServices();
+
+    const value = getMappedNonEcsValue({
+      data: data[rowIndex],
+      fieldName: columnId,
+    });
+
+    return (
+      <>
+        {timelines.getHoverActions().getFilterForValueButton({
+          Component,
+          field: columnId,
+          filterManager,
+          onFilterAdded,
+          ownFocus: false,
+          showTooltip: false,
+          value,
+        })}
+      </>
+    );
+  },
+  ({ data }: { data: TimelineNonEcsData[][] }) => ({ rowIndex, columnId, Component }) => {
+    const { timelines, filterManager } = useKibanaServices();
+
+    const value = getMappedNonEcsValue({
+      data: data[rowIndex],
+      fieldName: columnId,
+    });
+
+    return (
+      <>
+        {timelines.getHoverActions().getFilterOutValueButton({
+          Component,
+          field: columnId,
+          filterManager,
+          onFilterAdded,
+          ownFocus: false,
+          showTooltip: false,
+          value,
+        })}
+      </>
+    );
+  },
+];
+
+/** actions common to all cells (e.g. copy to clipboard) */
+const commonCellActions: TGridCellAction[] = [
+  ({ data }: { data: TimelineNonEcsData[][] }) => ({ rowIndex, columnId, Component }) => {
+    const { timelines } = useKibanaServices();
+
+    const value = getMappedNonEcsValue({
+      data: data[rowIndex],
+      fieldName: columnId,
+    });
+
+    return (
+      <>
+        {timelines.getHoverActions().getCopyButton({
+          Component,
+          field: columnId,
+          isHoverAction: false,
+          ownFocus: false,
+          showTooltip: false,
+          value,
+        })}
+      </>
+    );
+  },
+];
+
+/** returns the default actions shown in `EuiDataGrid` cells */
+export const getDefaultCellActions = ({ enableFilterActions }: { enableFilterActions: boolean }) =>
+  enableFilterActions ? [...filterCellActions, ...commonCellActions] : [...commonCellActions];

x-pack/plugins/observability/public/pages/alerts/render_cell_value.tsx

@@ -23,7 +23,7 @@ import { TopAlert } from '.';
 import { decorateResponse } from './decorate_response';
 import { usePluginContext } from '../../hooks/use_plugin_context';
 
-const getMappedNonEcsValue = ({
+export const getMappedNonEcsValue = ({
   data,
   fieldName,
 }: {

x-pack/plugins/security_solution/public/common/components/alerts_viewer/alerts_table.tsx

@@ -15,6 +15,7 @@ import { alertsDefaultModel } from './default_headers';
 import { defaultRowRenderers } from '../../../timelines/components/timeline/body/renderers';
 import { DefaultCellRenderer } from '../../../timelines/components/timeline/cell_rendering/default_cell_renderer';
 import * as i18n from './translations';
+import { defaultCellActions } from '../../lib/cell_actions/default_cell_actions';
 import { useKibana } from '../../lib/kibana';
 import { SourcererScopeName } from '../../store/sourcerer/model';
 import { useIsExperimentalFeatureEnabled } from '../../hooks/use_experimental_features';
@@ -104,6 +105,7 @@ const AlertsTableComponent: React.FC<Props> = ({
     <StatefulEventsViewer
       pageFilters={alertsFilter}
       defaultModel={alertsDefaultModel}
+      defaultCellActions={defaultCellActions}
       end={endDate}
       id={timelineId}
       renderCellValue={DefaultCellRenderer}

x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.test.tsx

@@ -29,6 +29,7 @@ import { defaultRowRenderers } from '../../../timelines/components/timeline/body
 import { DefaultCellRenderer } from '../../../timelines/components/timeline/cell_rendering/default_cell_renderer';
 import { useTimelineEvents } from '../../../timelines/containers';
 import { useIsExperimentalFeatureEnabled } from '../../hooks/use_experimental_features';
+import { defaultCellActions } from '../../lib/cell_actions/default_cell_actions';
 
 jest.mock('../../lib/kibana');
 
@@ -124,6 +125,7 @@ describe('EventsViewer', () => {
   const mount = useMountAppended();
 
   let testProps = {
+    defaultCellActions,
     defaultModel: eventsDefaultModel,
     end: to,
     id: TimelineId.test,

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

@@ -21,6 +21,7 @@ import { SourcererScopeName } from '../../store/sourcerer/model';
 import { DefaultCellRenderer } from '../../../timelines/components/timeline/cell_rendering/default_cell_renderer';
 import { useTimelineEvents } from '../../../timelines/containers';
 import { defaultRowRenderers } from '../../../timelines/components/timeline/body/renderers';
+import { defaultCellActions } from '../../lib/cell_actions/default_cell_actions';
 
 jest.mock('../../../common/lib/kibana');
 
@@ -38,6 +39,7 @@ const from = '2019-08-27T22:10:56.794Z';
 const to = '2019-08-26T22:10:56.791Z';
 
 const testProps = {
+  defaultCellActions,
   defaultModel: eventsDefaultModel,
   end: to,
   indexNames: [],

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

@@ -23,6 +23,7 @@ import { useGlobalFullScreen } from '../../containers/use_full_screen';
 import { useIsExperimentalFeatureEnabled } from '../../hooks/use_experimental_features';
 import { SourcererScopeName } from '../../store/sourcerer/model';
 import { useSourcererScope } from '../../containers/sourcerer';
+import { TGridCellAction } from '../../../../../timelines/common/types';
 import { DetailsPanel } from '../../../timelines/components/side_panel';
 import { CellValueElementProps } from '../../../timelines/components/timeline/cell_rendering';
 import { useKibana } from '../../lib/kibana';
@@ -47,6 +48,7 @@ const FullScreenContainer = styled.div<{ $isFullScreen: boolean }>`
 `;
 
 export interface OwnProps {
+  defaultCellActions?: TGridCellAction[];
   defaultModel: SubsetTimelineModel;
   end: string;
   id: TimelineId;
@@ -73,6 +75,7 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
   createTimeline,
   columns,
   dataProviders,
+  defaultCellActions,
   deletedEventIds,
   deleteEventQuery,
   end,
@@ -140,6 +143,7 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
               browserFields,
               columns,
               dataProviders: dataProviders!,
+              defaultCellActions,
               deletedEventIds,
               docValueFields,
               end,
@@ -269,6 +273,7 @@ export const StatefulEventsViewer = connector(
       prevProps.scopeId === nextProps.scopeId &&
       deepEqual(prevProps.columns, nextProps.columns) &&
       deepEqual(prevProps.dataProviders, nextProps.dataProviders) &&
+      prevProps.defaultCellActions === nextProps.defaultCellActions &&
       deepEqual(prevProps.excludedRowRendererIds, nextProps.excludedRowRendererIds) &&
       prevProps.deletedEventIds === nextProps.deletedEventIds &&
       prevProps.end === nextProps.end &&

x-pack/plugins/security_solution/public/common/components/hover_actions/actions/show_top_n.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { useMemo } from 'react';
-import { EuiButtonIcon, EuiPopover, EuiToolTip } from '@elastic/eui';
+import { EuiButtonEmpty, EuiButtonIcon, EuiPopover, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { StatefulTopN } from '../../top_n';
 import { TimelineId } from '../../../../../common/types/timeline';
@@ -23,17 +23,30 @@ const SHOW_TOP = (fieldName: string) =>
   });
 
 interface Props {
+  /** `Component` is only used with `EuiDataGrid`; the grid keeps a reference to `Component` for show / hide functionality */
+  Component?: typeof EuiButtonEmpty | typeof EuiButtonIcon;
   field: string;
   onClick: () => void;
   onFilterAdded?: () => void;
   ownFocus: boolean;
   showTopN: boolean;
+  showTooltip?: boolean;
   timelineId?: string | null;
   value?: string[] | string | null;
 }
 
 export const ShowTopNButton: React.FC<Props> = React.memo(
-  ({ field, onClick, onFilterAdded, ownFocus, showTopN, timelineId, value }) => {
+  ({
+    Component,
+    field,
+    onClick,
+    onFilterAdded,
+    ownFocus,
+    showTooltip = true,
+    showTopN,
+    timelineId,
+    value,
+  }) => {
     const activeScope: SourcererScopeName =
       timelineId === TimelineId.active
         ? SourcererScopeName.timeline
@@ -44,19 +57,32 @@ export const ShowTopNButton: React.FC<Props> = React.memo(
         ? SourcererScopeName.detections
         : SourcererScopeName.default;
     const { browserFields, indexPattern } = useSourcererScope(activeScope);
+
     const button = useMemo(
-      () => (
-        <EuiButtonIcon
-          aria-label={SHOW_TOP(field)}
-          className="securitySolution__hoverActionButton"
-          data-test-subj="show-top-field"
-          iconSize="s"
-          iconType="visBarVertical"
-          onClick={onClick}
-        />
-      ),
-      [field, onClick]
+      () =>
+        Component ? (
+          <Component
+            aria-label={SHOW_TOP(field)}
+            data-test-subj="show-top-field"
+            iconType="visBarVertical"
+            onClick={onClick}
+            title={SHOW_TOP(field)}
+          >
+            {SHOW_TOP(field)}
+          </Component>
+        ) : (
+          <EuiButtonIcon
+            aria-label={SHOW_TOP(field)}
+            className="securitySolution__hoverActionButton"
+            data-test-subj="show-top-field"
+            iconSize="s"
+            iconType="visBarVertical"
+            onClick={onClick}
+          />
+        ),
+      [Component, field, onClick]
     );
+
     return showTopN ? (
       <EuiPopover button={button} isOpen={showTopN} closePopover={onClick}>
         <StatefulTopN
@@ -69,7 +95,7 @@ export const ShowTopNButton: React.FC<Props> = React.memo(
           value={value}
         />
       </EuiPopover>
-    ) : (
+    ) : showTooltip ? (
       <EuiToolTip
         content={
           <TooltipWithKeyboardShortcut
@@ -85,6 +111,8 @@ export const ShowTopNButton: React.FC<Props> = React.memo(
       >
         {button}
       </EuiToolTip>
+    ) : (
+      button
     );
   }
 );