[SECURITY SOLUTION] [RAC] Event rendered view

x-pack/plugins/security_solution/common/experimental_features.ts

@@ -14,7 +14,7 @@ export type ExperimentalFeatures = typeof allowedExperimentalValues;
 export const allowedExperimentalValues = Object.freeze({
   metricsEntitiesEnabled: false,
   ruleRegistryEnabled: false,
-  tGridEnabled: false,
+  tGridEnabled: true,
   trustedAppsByPolicyEnabled: false,
   excludePoliciesInFilterEnabled: false,
   uebaEnabled: false,

x-pack/plugins/timelines/public/components/rule_name/index.tsx

@@ -0,0 +1,51 @@
+/*
+ * 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 { EuiLink } from '@elastic/eui';
+import { isEmpty } from 'lodash';
+import React, { useCallback, useMemo } from 'react';
+import { CoreStart } from '../../../../../../src/core/public';
+import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
+
+interface RuleNameProps {
+  name: string;
+  id: string;
+}
+
+const appendSearch = (search?: string) =>
+  isEmpty(search) ? '' : `${search?.startsWith('?') ? search : `?${search}`}`;
+
+const RuleNameComponents = ({ name, id }: RuleNameProps) => {
+  const { navigateToApp, getUrlForApp } = useKibana<CoreStart>().services.application;
+
+  const hrefRuleDetails = useMemo(
+    () =>
+      getUrlForApp('securitySolution', {
+        deepLinkId: 'rules',
+        path: `/id/${id}${appendSearch(window.location.search)}`,
+      }),
+    [getUrlForApp, id]
+  );
+  const goToRuleDetails = useCallback(
+    (ev) => {
+      ev.preventDefault();
+      navigateToApp('securitySolution', {
+        deepLinkId: 'rules',
+        path: `/id/${id}${appendSearch(window.location.search)}`,
+      });
+    },
+    [navigateToApp, id]
+  );
+  return (
+    // eslint-disable-next-line @elastic/eui/href-or-on-click
+    <EuiLink href={hrefRuleDetails} onClick={goToRuleDetails}>
+      {name}
+    </EuiLink>
+  );
+};
+
+export const RuleName = React.memo(RuleNameComponents);

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

@@ -13,6 +13,8 @@ import {
   EuiDataGridStyle,
   EuiDataGridToolBarVisibilityOptions,
   EuiLoadingSpinner,
+  EuiFlexGroup,
+  EuiFlexItem,
 } from '@elastic/eui';
 import { getOr } from 'lodash/fp';
 import memoizeOne from 'memoize-one';
@@ -57,14 +59,16 @@ import { DEFAULT_ICON_BUTTON_WIDTH } from '../helpers';
 import type { BrowserFields } from '../../../../common/search_strategy/index_fields';
 import type { OnRowSelected, OnSelectAll } from '../types';
 import type { Refetch } from '../../../store/t_grid/inputs';
-import { StatefulFieldsBrowser } from '../../../';
+import { PaginationInputPaginated, StatefulFieldsBrowser } from '../../../';
 import { tGridActions, TGridModel, tGridSelectors, TimelineState } from '../../../store/t_grid';
 import { useDeepEqualSelector } from '../../../hooks/use_selector';
 import { RowAction } from './row_action';
 import * as i18n from './translations';
 import { AlertCount } from '../styles';
 import { checkBoxControlColumn } from './control_columns';
 import type { EuiTheme } from '../../../../../../../src/plugins/kibana_react/common';
+import { ViewSelection } from '../event_rendered_view/selector';
+import { EventRenderedView } from '../event_rendered_view';
 
 const StatefulAlertStatusBulkActions = lazy(
   () => import('../toolbar/bulk_actions/alert_status_bulk_actions')
@@ -79,9 +83,12 @@ interface OwnProps {
   defaultCellActions?: TGridCellAction[];
   id: string;
   isEventViewer?: boolean;
+  itemsPerPageOptions: number[];
+  pageInfo: Pick<PaginationInputPaginated, 'activePage' | 'querySize'>;
   renderCellValue: (props: CellValueElementProps) => React.ReactNode;
   rowRenderers: RowRenderer[];
   tabType: TimelineTabs;
+  tableView: ViewSelection;
   leadingControlColumns?: ControlColumnProps[];
   loadPage: (newActivePage: number) => void;
   trailingControlColumns?: ControlColumnProps[];
@@ -235,8 +242,10 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
     id,
     isEventViewer = false,
     isSelectAllChecked,
+    itemsPerPageOptions,
     loadingEventIds,
     loadPage,
+    pageInfo,
     selectedEventIds,
     setSelected,
     clearSelected,
@@ -246,6 +255,7 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
     rowRenderers,
     sort,
     tabType,
+    tableView,
     totalPages,
     totalItems,
     filterStatus,
@@ -328,6 +338,43 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
       return bulkActions.alertStatusActions ?? true;
     }, [selectedCount, showCheckboxes, bulkActions]);
 
+    const alertToolbar = useMemo(
+      () => (
+        <EuiFlexGroup alignItems="baseline">
+          <EuiFlexItem grow={false}>
+            <AlertCount>{alertCountText}</AlertCount>
+          </EuiFlexItem>
+          {showBulkActions && (
+            <Suspense fallback={<EuiLoadingSpinner />}>
+              <StatefulAlertStatusBulkActions
+                data-test-subj="bulk-actions"
+                id={id}
+                totalItems={totalItems}
+                filterStatus={filterStatus}
+                query={filterQuery}
+                indexName={indexNames.join()}
+                onActionSuccess={onAlertStatusActionSuccess}
+                onActionFailure={onAlertStatusActionFailure}
+                refetch={refetch}
+              />
+            </Suspense>
+          )}
+        </EuiFlexGroup>
+      ),
+      [
+        alertCountText,
+        filterQuery,
+        filterStatus,
+        id,
+        indexNames,
+        onAlertStatusActionFailure,
+        onAlertStatusActionSuccess,
+        refetch,
+        showBulkActions,
+        totalItems,
+      ]
+    );
+
     const toolbarVisibility: EuiDataGridToolBarVisibilityOptions = useMemo(
       () => ({
         additionalControls: (
@@ -543,20 +590,38 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
     );
 
     return (
-      <EuiDataGrid
-        data-test-subj="body-data-grid"
-        aria-label={i18n.TGRID_BODY_ARIA_LABEL}
-        columns={columnsWithCellActions}
-        columnVisibility={{ visibleColumns, setVisibleColumns }}
-        gridStyle={gridStyle}
-        leadingControlColumns={leadingTGridControlColumns}
-        trailingControlColumns={trailingTGridControlColumns}
-        toolbarVisibility={toolbarVisibility}
-        rowCount={data.length}
-        renderCellValue={renderTGridCellValue}
-        inMemory={{ level: 'sorting' }}
-        sorting={{ columns: sortingColumns, onSort }}
-      />
+      <>
+        {tableView === 'gridView' && (
+          <EuiDataGrid
+            data-test-subj="body-data-grid"
+            aria-label={i18n.TGRID_BODY_ARIA_LABEL}
+            columns={columnsWithCellActions}
+            columnVisibility={{ visibleColumns, setVisibleColumns }}
+            gridStyle={gridStyle}
+            leadingControlColumns={leadingTGridControlColumns}
+            trailingControlColumns={trailingTGridControlColumns}
+            toolbarVisibility={toolbarVisibility}
+            rowCount={data.length}
+            renderCellValue={renderTGridCellValue}
+            inMemory={{ level: 'sorting' }}
+            sorting={{ columns: sortingColumns, onSort }}
+          />
+        )}
+        {tableView === 'eventRenderedView' && (
+          <EventRenderedView
+            alertToolbar={alertToolbar}
+            browserFields={browserFields}
+            events={data}
+            leadingControlColumns={leadingTGridControlColumns ?? []}
+            onChangePage={loadPage}
+            pageIndex={pageInfo.activePage}
+            pageSize={pageInfo.querySize}
+            pageSizeOptions={itemsPerPageOptions}
+            rowRenderers={rowRenderers}
+            totalItemCount={totalItems}
+          />
+        )}
+      </>
     );
   }
 );