[RAC][Alert Triage][TGrid] Update the Alerts Table (TGrid) API to implement a subset of the EuiDataGridColumn API

[andrew-goldstein]

[RAC][Alert Triage][TGrid] Update the Alerts Table (TGrid) API to implement a subset of the EuiDataGridColumn API

This PR implements the following subset of the EuiDataGridColumn API from EuiDataGrid in the TGrid (Timeline grid):

Pick<EuiDataGridColumn, 'display' | 'displayAsText' | 'id' | 'initialWidth'>

The above properties are documented in EuiDataGrid's data_grid_types.ts, and summarized in the table below:

Property	Description
display?: ReactNode	A ReactNode used when rendering the column header
displayAsText?: string	Displays the column name as text (in lieu of using display). If not used, id will be shown as the column name.
id: string	The unique identifier for this column, e.g. user.name
initialWidth?: number	Initial width (in pixels) of the column

The following screenshot shows the TGrid rendering (from left-to-right):

• An (example) RAC-flavored Observability alerts table
• An (example) RAC-flavored Security Solution alerts table
• The production alerts table in the Security Solutions Detections page, which remains the default

Above, three table configurations, rendered via the updated API

The public/detections/configurations directory contains the configurations for the three tables shown in the screenshot above

This change works in concert with another recent change to the TGrid that added support for the renderCellValue API.

Example configurations

(example) RAC-flavored Observability alerts table

The column specification for the (example) RAC-flavored Observability alerts table, shown in the screenshot above is defined in x-pack/plugins/security_solution/public/detections/configurations/examples/observablity_alerts/columns.ts:

export const columns: Array<
  Pick<EuiDataGridColumn, 'display' | 'displayAsText' | 'id' | 'initialWidth'> & ColumnHeaderOptions
> = [
  {
    columnHeaderType: defaultColumnHeaderType,
    displayAsText: i18n.STATUS,
    id: 'kibana.rac.alert.status',
    initialWidth: 74,
  },
  {
    columnHeaderType: defaultColumnHeaderType,
    displayAsText: i18n.TRIGGERED,
    id: '@timestamp',
    initialWidth: DEFAULT_DATE_COLUMN_MIN_WIDTH + 5,
  },
  {
    columnHeaderType: defaultColumnHeaderType,
    displayAsText: i18n.ALERT_DURATION,
    id: 'kibana.rac.alert.duration.us',
    initialWidth: 116,
  },
  {
    columnHeaderType: defaultColumnHeaderType,
    displayAsText: i18n.ALERTS_HEADERS_SEVERITY,
    id: 'signal.rule.severity',
    initialWidth: 102,
  },
  {
    columnHeaderType: defaultColumnHeaderType,
    displayAsText: i18n.ALERTS_HEADERS_REASON,
    id: 'signal.reason',
    initialWidth: 644,
  },
];

The example implementation of EuiDataGrid's renderCellValue API used to render the RAC-flavored Observability alerts table shown in the screenshot above is located in x-pack/plugins/security_solution/public/detections/configurations/examples/observablity_alerts/render_cell_value.tsx:

/**
 * This implementation of `EuiDataGrid`'s `renderCellValue`
 * accepts `EuiDataGridCellValueElementProps`, plus `data`
 * from the TGrid
 */
export const renderCellValue: React.FC<
  EuiDataGridCellValueElementProps & CellValueElementProps
> = ({
  columnId,
  data,
  eventId,
  header,
  isDetails,
  isExpandable,
  isExpanded,
  linkValues,
  rowIndex,
  setCellProps,
  timelineId,
}) => {
  const value =
    getMappedNonEcsValue({
      data,
      fieldName: columnId,
    })?.reduce((x) => x[0]) ?? '';

  switch (columnId) {
    case 'kibana.rac.alert.status':
      return <Status status={random(0, 1) ? 'recovered' : 'active'} />;
    case 'kibana.rac.alert.duration.us':
      return <span>{moment(value).fromNow(true)}</span>;
    case 'signal.rule.severity':
      return <Severity severity={value} />;
    case 'signal.reason':
      return (
        <EuiLink>
          <TruncatableText>{reason}</TruncatableText>
        </EuiLink>
      );
    default:
      // NOTE: we're using `DefaultCellRenderer` in this example configuration as a fallback, but
      // using `DefaultCellRenderer` here is entirely optional
      return (
        <DefaultCellRenderer
          columnId={columnId}
          data={data}
          eventId={eventId}
          header={header}
          isDetails={isDetails}
          isExpandable={isExpandable}
          isExpanded={isExpanded}
          linkValues={linkValues}
          rowIndex={rowIndex}
          setCellProps={setCellProps}
          timelineId={timelineId}
        />
      );
  }
};

(example) RAC-flavored Security Solution alerts table

The column specification for the (example) RAC-flavored Security Solution alerts table, shown in the screenshot above is defined in x-pack/plugins/security_solution/public/detections/configurations/examples/security_solution_rac/columns.ts:

/**
 * columns implements a subset of `EuiDataGrid`'s `EuiDataGridColumn` interface,
 * plus additional TGrid column properties
 */
export const columns: Array<
  Pick<EuiDataGridColumn, 'display' | 'displayAsText' | 'id' | 'initialWidth'> & ColumnHeaderOptions
> = [
  {
    columnHeaderType: defaultColumnHeaderType,
    id: '@timestamp',
    initialWidth: DEFAULT_DATE_COLUMN_MIN_WIDTH + 5,
  },
  {
    columnHeaderType: defaultColumnHeaderType,
    id: 'signal.rule.name',
    displayAsText: i18n.ALERTS_HEADERS_RULE_NAME,
    linkField: 'signal.rule.id',
    initialWidth: 212,
  },
  {
    columnHeaderType: defaultColumnHeaderType,
    id: 'signal.rule.severity',
    displayAsText: i18n.ALERTS_HEADERS_SEVERITY,
    initialWidth: 104,
  },
  {
    columnHeaderType: defaultColumnHeaderType,
    id: 'signal.reason',
    displayAsText: i18n.ALERTS_HEADERS_REASON,
    initialWidth: 644,
  },
];

Testing the example configurations locally

For now, the alerts table in the Security Solution's Detections page is configured to use the existing (7.13) column configuration.

To test the Alerts table in the Security Solution Detections page with the example configurations provided in this PR:

1. Edit x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx and change the following line:

import { columns, RenderCellValue } from '../../configurations/security_solution_detections';

from the above to

import { columns, RenderCellValue } from '../../configurations/examples/observablity_alerts';

for the (example) RAC-flavored Observability alerts table, or change it to

import { columns, RenderCellValue } from '../../configurations/examples/security_solution_rac';

for the (example) RAC-flavored Security solution alerts table.

2. Navigate to your local instance of the Security Solution Detections page (Note: you may need to enable detection rules to populate the alerts table.)

3. Click the customize_columns button shown in the screenshot below:

4. In the Customize Columns popover, click the Reset Fields button, shown in the screenshot below:

After clicking Reset Fields, the new default columns will be displayed.

Backwards compatibility

The width property of Timeline's model was changed to initialWidth as part of this PR.

• This change has no effect on Timelines persisted as saved objects
• This change has no effect on Timeline's Export and Import Timelines feature
• When a TGrid's column configuration containing the legacy width and label ColumnHeaderOptions is read from localstorage, these properties are migrated to initialWidth and displayAsText respectively.
  • Backwards compatibility was desk tested by persisting a custom column configuration while running off master, and then re-visiting the page after running this PR branch. As expected, the previously persisted column configuration was rendered correctly after running the PR branch.
  • Unit tests were added to x-pack/plugins/security_solution/public/timelines/containers/local_storage/index.test.ts to test the migration of the width and label properties

Other changes

• The minium width of a resized column is now 70px. The new minium is no longer data-type specific.

[elasticmachine]

Pinging @elastic/security-solution (Team: SecuritySolution)

[elasticmachine]

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

[kibanamachine]

💚 Build Succeeded

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

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
securitySolution	2172	2175	+3

Async chunks

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

id	before	after	diff
securitySolution	7.0MB	7.0MB	+5.9KB

History

• 💔 Build #122475 failed f9aa4ec
• 💔 Build #122460 failed 073c3f8
• 💔 Build #122192 failed 8630375

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

cc @andrew-goldstein

[kqualters-elastic]

tested both the new examples and the existing functionality locally, no visible regressions or bugs. everything lgtm 👍