[RAC][Alert Triage][TGrid] Update the Alerts Table (TGrid) API to implement renderCellValue

[andrew-goldstein]

[RAC][Alert Triage][TGrid] Update the Alerts Table (TGrid) API to implement renderCellValue

• This PR implements a superset of the renderCellValue API from EuiDataGrid in the TGrid (Timeline grid) API

• The TGrid API was also updated to accept a collection of RowRenderers as a prop

The API changes are summarized by the following screenshot:

The following screenshot shows the signal.rule.risk_score column in the Alerts table being rendered with a green background color, using the same technique illustrated by EuiDataGrid's codesandbox example:

Note: In the screenshot above, the values in the Alerts table are also not rendered as draggables.

Related (RAC) issue: #94520

Details

The StatefulEventsViewer has been updated to accept renderCellValue as a (required) prop:

renderCellValue: (props: CellValueElementProps) => React.ReactNode;

The type definition of CellValueElementProps is:

export type CellValueElementProps = EuiDataGridCellValueElementProps & {
  data: TimelineNonEcsData[];
  eventId: string; // _id
  header: ColumnHeaderOptions;
  linkValues: string[] | undefined;
  timelineId: string;
};

The CellValueElementProps type above is a superset of EuiDataGridCellValueElementProps. The additional properties above include the data returned by the TGrid when it performs IO to retrieve alerts and events.

Using renderCellValue to control rendering

The internal implementation of TGrid's cell rendering didn't change with this PR; it moved to

x-pack/plugins/security_solution/public/timelines/components/timeline/cell_rendering/default_cell_renderer.tsx as shown below:

export const DefaultCellRenderer: React.FC<CellValueElementProps> = ({
  columnId,
  data,
  eventId,
  header,
  linkValues,
  setCellProps,
  timelineId,
}) => (
  <>
    {getColumnRenderer(header.id, columnRenderers, data).renderColumn({
      columnName: header.id,
      eventId,
      field: header,
      linkValues,
      timelineId,
      truncate: true,
      values: getMappedNonEcsValue({
        data,
        fieldName: header.id,
      }),
    })}
  </>
);

Any usages of TGrid were updated to pass DefaultCellRenderer as the value of the renderCellValue prop, as shown in the screenshot below:

The EuiDataGrid codesandbox example provides the following example renderCellValue implementation, which highlights a cell green based on it's numeric value:

  const renderCellValue = useMemo(() => {
    return ({ rowIndex, columnId, setCellProps }) => {
      const data = useContext(DataContext);
      useEffect(() => {
        if (columnId === 'amount') {
          if (data.hasOwnProperty(rowIndex)) {
            const numeric = parseFloat(
              data[rowIndex][columnId].match(/\d+\.\d+/)[0],
              10
            );
            setCellProps({
              style: {
                backgroundColor: `rgba(0, 255, 0, ${numeric * 0.0002})`,
              },
            });
          }
        }
      }, [rowIndex, columnId, setCellProps, data]);

      function getFormatted() {
        return data[rowIndex][columnId].formatted
          ? data[rowIndex][columnId].formatted
          : data[rowIndex][columnId];
      }

      return data.hasOwnProperty(rowIndex)
        ? getFormatted(rowIndex, columnId)
        : null;
    };
  }, []);

The sample code above formats the amount column in the example EuiDataGrid with a green backgroundColor based on the value of the data, as shown in the screenshot below:

To demonstrate that similar styling can be applied to TGrid using the same technique illustrated by EuiDataGrid's codesandbox example, we can update the DefaultCellRenderer in x-pack/plugins/security_solution/public/timelines/components/timeline/cell_rendering/default_cell_renderer.tsx to apply a similar technique:

export const DefaultCellRenderer: React.FC<CellValueElementProps> = ({
  columnId,
  data,
  eventId,
  header,
  linkValues,
  setCellProps,
  timelineId,
}) => {
  useEffect(() => {
    if (columnId === 'signal.rule.risk_score') {
      const value = getMappedNonEcsValue({
        data,
        fieldName: columnId,
      });
      if (Array.isArray(value) && value.length > 0) {
        const numeric = parseFloat(value[0]);
        setCellProps({
          style: {
            backgroundColor: `rgba(0, 255, 0, ${numeric * 0.002})`,
          },
        });
      }
    }
  }, [columnId, data, setCellProps]);

  return (
    <>
      {getMappedNonEcsValue({
        data,
        fieldName: columnId,
      })}
    </>
  );
};

The example code above renders the signal.rule.risk_score column in the Alerts table with a green backgroundColor based on the value of the data, as shown in the screenshot below:

Note: In the screenshot above, the values in the Alerts table are not rendered as draggables.

[elasticmachine]

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

[elasticmachine]

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

[kqualters-elastic]

checked out and ran locally, everything seems to work as before. the tests validate the approach and show how these can be customized. lgtm, awesome! 👍

[kibanamachine]

💚 Build Succeeded

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

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
securitySolution	2207	2209	+2

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.3MB	7.3MB	+5.2KB

History

• 💔 Build #117179 failed 343d33e
• 💚 Build #117023 succeeded 8ade869
• 💔 Build #116989 failed c20af6e
• 💚 Build #116985 succeeded 9b57462
• 💔 Build #116976 failed d2a3ad0

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

cc @andrew-goldstein