[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
  );
  }
 );