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

[andrew-goldstein]

Summary

This PR implements cell actions in the TGrid, rendering them via EuiDataGrid, per the Before and After screenshots below:

Before

Users previously hovered over a draggable field to view and trigger cell actions:

Above: legacy TGrid cell action rendering

After

Cell actions are now rendered via EuiDataGrid cell actions:

Above: new TGrid cell action rendering via EuiDataGrid

Technical Details

Every instance of the TGrid on a page can specify its own set of cell actions via defaultCellActions when calling the timelines.getTGrid() function to create an instance.

For example, the Observability Alerts TGrid is initialized in with a default set of actions in x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid.tsx, as shown in the code below:

      {timelines.getTGrid<'standalone'>({
        type: 'standalone',
        columns,
        deletedEventIds: [],
        defaultCellActions: getDefaultCellActions({ enableFilterActions: false }), // <-- defaultCellActions
        // ...
    </>

The type of the defaultCellActions is:

defaultCellActions?: TGridCellAction[];

and the definition of TGridCellAction is in x-pack/plugins/timelines/common/types/timeline/columns/index.tsx:

/**
 * A `TGridCellAction` function accepts `data`, where each row of data is
 * represented as a `TimelineNonEcsData[]`. For example, `data[0]` would
 * contain a `TimelineNonEcsData[]` with the first row of data.
 *
 * A `TGridCellAction` returns a function that has access to all the
 * `EuiDataGridColumnCellActionProps`, _plus_ access to `data`,
 *  which enables code like the following example to be written:
 *
 * Example:
 * ```
 * ({ data }: { data: TimelineNonEcsData[][] }) => ({ rowIndex, columnId, Component }) => {
 *   const value = getMappedNonEcsValue({
 *     data: data[rowIndex], // access a specific row's values
 *     fieldName: columnId,
 *   });
 *
 *   return (
 *     <Component onClick={() => alert(`row ${rowIndex} col ${columnId} has value ${value}`)} iconType="heart">
 *       {'Love it'}
 *      </Component>
 *   );
 * };
 * ```
 */
export type TGridCellAction = ({
  browserFields,
  data,
}: {
  browserFields: BrowserFields;
  /** each row of data is represented as one TimelineNonEcsData[] */
  data: TimelineNonEcsData[][];
}) => (props: EuiDataGridColumnCellActionProps) => ReactNode;

For example, the following TGridCellAction[] defines the Copy to clipboard action for the Observability Alerts table in x-pack/plugins/observability/public/pages/alerts/default_cell_actions.tsx:

/** 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,
        })}
      </>
    );
  },
];

Note that an implementation of the copy to clipboard cell action, including the button, is available for both the Observability and Security solutions to use via timelines.getHoverActions().getCopyButton(), (and both solutions use it in this PR), but there's no requirement to use that specific implementation of the copy action.

Security Solution cell actions

All previously-available hover actions in the Security Solution are now available as cell actions, i.e.:

• Filter for value
• Filter out value
• Add to timeline investigation
• Show Top <field> (only enabled for some data types)
• Copy to clipboard

Observability cell actions

In this PR:

• Only the Copy to clipboard cell action is enabled by default in the Observability Alerts table
• The Filter for value and Filter out value cell actions may be enabled in the Observability solution by changing a single line of code, (setting enableFilterActions to true), on the following line in x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid.tsx:

defaultCellActions: getDefaultCellActions({ enableFilterActions: false }), // <-- set this to `true` to enable the filter actions

enableFilterActions is set to false in this PR because the Observability Alerts page's search bar, defined in x-pack/plugins/observability/public/pages/alerts/alerts_search_bar.tsx:

  return (
    <SearchBar
      indexPatterns={dynamicIndexPattern}
      placeholder={i18n.translate('xpack.observability.alerts.searchBarPlaceholder', {
        defaultMessage: 'kibana.alert.evaluation.threshold > 75',
      })}
      query={{ query: query ?? '', language: queryLanguage }}
      // ...
    />

must be integrated with a filterManager to display the filters. A filterManager instance may be obtained in the Observability solution via the following boilerplate:

  const {
    services: {
      data: {
        query: { filterManager },
      },
    },
  } = useKibana<ObservabilityPublicPluginsStart>();

Desk testing

To desk test this PR, you must enable feature flags in the Observability and Security Solution:

• To desk test the Observability > Alerts page, add the following settings to config/kibana.dev.yml:

xpack.observability.unsafe.cases.enabled: true
xpack.observability.unsafe.alertingExperience.enabled: true
xpack.ruleRegistry.write.enabled: true

• To desk test the TGrid in the following Security Solution, edit x-pack/plugins/security_solution/common/experimental_features.ts and in the allowedExperimentalValues section set:

tGridEnabled: true,

cc @mdefazio

[elasticmachine]

Pinging @elastic/security-threat-hunting (Team:Threat Hunting)

[michaelolo24]

👍🏾

[michaelolo24]

🍟🍔

[michaelolo24]

Thanks for the awesome comment here and documenting the behavior!

[michaelolo24]

Nice cleanup

[michaelolo24]

We can just make this optional in the component. But that can be done in a follow up PR

[michaelolo24]

Noting here too: We can just make this optional in the filter component. But that can be done in a follow up PR

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: f24e4ea
• Storybooks Preview

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
observability	260	261	+1
securitySolution	2356	2357	+1
total			+2

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
observability	508.0KB	510.0KB	+2.0KB
securitySolution	6.5MB	6.5MB	+11.0KB
timelines	266.2KB	272.0KB	+5.8KB
total			+18.8KB

Unknown metric groups

API count

id	before	after	diff
timelines	925	927	+2

API count missing comments

id	before	after	diff
timelines	806	807	+1

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @andrew-goldstein

[michaelolo24]

Looks good. Tested locally and all the actions are working as expected. Things to update in a follow up PR:

• Make the onFilterAdded optional in the actions components
• Fix the ellipse not showing up in the dataGrid cell when actions show. (running hypothesis is the action tooltips may be causing it)

[kibanamachine]

💚 Backport successful

Status	Branch	Result
✅	7.x

This backport PR will be merged automatically after passing CI.