[Security Solution] Migrate security Alerts from usage of TGrid component to the new data grid exposed by triggers_actions_ui plugin

[YulNaumenko]

The goal of the issue is to migrate from the existing EuiDataGrid layer (previously TGrid sub component) usage for the Alerts tables to the new data grid - stateful component common for Security, Observability and Stack Management.
This work has pre-requisite work defined by the issues.

The scope includes:

1. Usage of the new component registry interface to enrich the new table with security functionality:

export interface AlertsTableConfigurationRegistry {
  id: string;
  casesFeatureId: string;
  columns: EuiDataGridColumn[];
  useInternalFlyout?: () => {
      header: AlertTableFlyoutComponent;
      body: AlertTableFlyoutComponent;
      footer: AlertTableFlyoutComponent;
    };
  sort?: SortCombinations[];
  getRenderCellValue?: GetRenderCellValue;
  useActionsColumn?: () => {
    renderCustomActionsRow: (
      alert: EcsFieldsResponse,
      setFlyoutAlert: (data: unknown) => void,
      id?: string
    ) => JSX.Element;
    width?: number;
  };
  useBulkActions?: UseBulkActionsRegistry;
}

Basic example for cases is here:

kibana/x-pack/plugins/security_solution/public/common/lib/triggers_actions_ui/register_alerts_table_configuration.tsx

Lines 32 to 40 in 2fab204

	registry.register({
	id: APP_ID,
	casesFeatureId: CASES_FEATURE_ID,
	columns: alertColumns,
	getRenderCellValue: useRenderCellValue as GetRenderCellValue,
	useInternalFlyout: () => {
	const { header, body, footer } = useToGetInternalFlyout();
	return { header, body, footer };
	},

Lets describe all the parts we need to match with the new configuration:

• useInternalFlyout we should verify how does it fit with our existing flyout.

• useActionsColumn will be a replacement to the existing leadingControlColumns. Example from Observability:

kibana/x-pack/plugins/observability/public/config/register_alerts_table_configuration.tsx

Lines 28 to 29 in e7870e3

	useActionsColumn: getRowActions(observabilityRuleTypeRegistry),
	getRenderCellValue: (({ setFlyoutAlert }: { setFlyoutAlert: (data: TopAlert) => void }) => {

• getRenderCellValue configuration option should be used to set up the data value renderers which currently implemented by

kibana/x-pack/plugins/timelines/public/components/t_grid/body/index.tsx

Lines 786 to 808 in 2fab204

	const renderTGridCellValue = useMemo(() => {
	const Cell: React.FC<EuiDataGridCellValueElementProps> = ({
	columnId,
	rowIndex,
	colIndex,
	setCellProps,
	isDetails,
	}): React.ReactElement | null => {
	const pageRowIndex = getPageRowIndex(rowIndex, pageSize);
	const rowData = pageRowIndex < data.length ? data[pageRowIndex].data : null;
	const header = columnHeaders.find((h) => h.id === columnId);
	const eventId = pageRowIndex < data.length ? data[pageRowIndex]._id : null;
	const ecs = pageRowIndex < data.length ? data[pageRowIndex].ecs : null;
	useEffect(() => {
	const defaultStyles = { overflow: 'hidden' };
	setCellProps({ style: { ...defaultStyles } });
	if (ecs && rowData) {
	addBuildingBlockStyle(ecs, theme, setCellProps, defaultStyles);
	} else {
	// disable the cell when it has no data
	setCellProps({ style: { display: 'none' } });
	}

• useBulkActions?: UseBulkActionsRegistry; should help us to add our own bulk actions defined here:

kibana/x-pack/plugins/timelines/public/components/t_grid/body/index.tsx

Lines 523 to 547 in 5438508

	const toolbarVisibility: EuiDataGridToolBarVisibilityOptions = useMemo(
	() => ({
	additionalControls: (
	<>
	{isLoading && <EuiProgress size="xs" position="absolute" color="accent" />}
	<AlertCount data-test-subj="server-side-event-count">{alertCountText}</AlertCount>
	{showBulkActions ? (
	<>
	<Suspense fallback={<EuiLoadingSpinner />}>
	<StatefulAlertBulkActions
	showAlertStatusActions={showAlertStatusActions}
	data-test-subj="bulk-actions"
	id={id}
	totalItems={totalSelectAllAlerts ?? totalItems}
	filterStatus={filterStatus}
	query={filterQuery}
	indexName={indexNames.join()}
	onActionSuccess={onAlertStatusActionSuccess}
	onActionFailure={onAlertStatusActionFailure}
	customBulkActions={additionalBulkActions}
	refetch={refetch}
	/>
	</Suspense>
	{additionalControls ?? null}
	</>

We have pretty similar interface to the expected UseBulkActionsRegistry under timelines StatefulAlertBulkActionsProps

export interface CustomBulkAction {
  key: string;
  label: string;
  disableOnQuery?: boolean;
  disabledLabel?: string;
  onClick: (items?: TimelineItem[]) => void;
  ['data-test-subj']?: string;
}

export type CustomBulkActionProp = Omit<CustomBulkAction, 'onClick'> & {
  onClick: (eventIds: string[]) => void;
};

• useActionsColumn

As a simpler example could be used Observability registry configuration getAsyncO11yAlertsTableConfiguration.

2. Add a new table component from the triggersActionsUi plugin by using plugin interface method:

getAlertsStateTable: (props: AlertsTableStateProps) => ReactElement<AlertsTableStateProps>;

3. Do the comparison of the difference for the UI details we have between existing TGrid EuiDataGrid and the new table component. For example column actions naming:

[elasticmachine]

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

[logeekal]

Resolved with #149128