[AI4DSOC] Change the Cases page to use the AI for SOC alerts table (#218742)

## Summary

While testing, we realized that the Cases alerts tab was showing the
`DetectionEngineAlertsTable` and the normal alert details flyout, even
in the AI4DSOC tier. This PR updates the logic to show the correct
alerts table and the correct alert details flyout depending on the tier:
- AI4DSOC will show the same table and flyout as the ones shown in the
Alert summary page
- the other tiers will continue showing the same table and flyout we
show today under the Alerts page or any other pages
(`DetectionEngineAlertsTable`)

Switching the table allows us to tackle at once all the other related
issues:
- wrong flyout was being shown
- too many row actions were being shown
- wrong default columns, and wrong cell renderers

### Notes

The approach is not ideal. We shouldn't have to check for the following
```typescript
const AIForSOC = capabilities[SECURITY_FEATURE_ID].configurations;
```
in the code, but because of time constraints, this was the best
approach.
[A ticket](https://github.com/elastic/kibana/issues/218741) has been
opened to make sure we come back to this and implement the check the
correct way later.

Current (wrong) behavior


https://github.com/user-attachments/assets/5d769f45-26d9-4631-af95-de38b0797ff9

New behavior


https://github.com/user-attachments/assets/1f9a2e4d-50b7-40e6-8efa-1a0cfdbf5c9a

## How to test

This needs to be ran in Serverless:
- `yarn es serverless --projectType security`
- `yarn serverless-security --no-base-path`

You also need to enable the AI for SOC tier, by adding the following to
your `serverless.security.dev.yaml` file:
```
xpack.securitySolutionServerless.productTypes:
  [
    { product_line: 'ai_soc', product_tier: 'search_ai_lake' },
  ]
```

### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

Relates to https://github.com/elastic/security-team/issues/11973

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

x-pack/solutions/security/plugins/security_solution/public/cases/components/ai_for_soc/table.test.tsx

@@ -0,0 +1,53 @@
+/*
+ * 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 React from 'react';
+import { render } from '@testing-library/react';
+import type { DataView } from '@kbn/data-views-plugin/common';
+import { createStubDataView } from '@kbn/data-views-plugin/common/data_views/data_view.stub';
+import { TestProviders } from '../../../common/mock';
+import { Table } from './table';
+import type { PackageListItem } from '@kbn/fleet-plugin/common';
+import { installationStatuses } from '@kbn/fleet-plugin/common/constants';
+
+const dataView: DataView = createStubDataView({ spec: {} });
+const packages: PackageListItem[] = [
+  {
+    id: 'splunk',
+    icons: [{ src: 'icon.svg', path: 'mypath/icon.svg', type: 'image/svg+xml' }],
+    name: 'splunk',
+    status: installationStatuses.NotInstalled,
+    title: 'Splunk',
+    version: '0.1.0',
+  },
+];
+const ruleResponse = {
+  rules: [],
+  isLoading: false,
+};
+const id = 'id';
+const query = { ids: { values: ['abcdef'] } };
+const onLoaded = jest.fn();
+
+describe('<Table />', () => {
+  it('should render all components', () => {
+    const { getByTestId } = render(
+      <TestProviders>
+        <Table
+          dataView={dataView}
+          id={id}
+          onLoaded={onLoaded}
+          packages={packages}
+          query={query}
+          ruleResponse={ruleResponse}
+        />
+      </TestProviders>
+    );
+
+    expect(getByTestId('alertsTableErrorPrompt')).toBeInTheDocument();
+  });
+});

x-pack/solutions/security/plugins/security_solution/public/cases/components/ai_for_soc/table.tsx

@@ -0,0 +1,126 @@
+/*
+ * 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 React, { memo, useMemo } from 'react';
+import type { DataView } from '@kbn/data-views-plugin/common';
+import { AlertsTable } from '@kbn/response-ops-alerts-table';
+import type { PackageListItem } from '@kbn/fleet-plugin/common';
+import type { QueryDslQueryContainer } from '@elastic/elasticsearch/lib/api/types';
+import type { Alert } from '@kbn/alerting-types';
+import type { EuiDataGridColumn } from '@elastic/eui';
+import type { AdditionalTableContext } from '../../../detections/components/alert_summary/table/table';
+import {
+  ACTION_COLUMN_WIDTH,
+  ALERT_TABLE_CONSUMERS,
+  columns,
+  GRID_STYLE,
+  ROW_HEIGHTS_OPTIONS,
+  RULE_TYPE_IDS,
+  TOOLBAR_VISIBILITY,
+} from '../../../detections/components/alert_summary/table/table';
+import { ActionsCell } from '../../../detections/components/alert_summary/table/actions_cell';
+import { getDataViewStateFromIndexFields } from '../../../common/containers/source/use_data_view';
+import { useKibana } from '../../../common/lib/kibana';
+import { CellValue } from '../../../detections/components/alert_summary/table/render_cell';
+import type { RuleResponse } from '../../../../common/api/detection_engine';
+
+export interface TableProps {
+  /**
+   * DataView created for the alert summary page
+   */
+  dataView: DataView;
+  /**
+   * Id to pass down to the ResponseOps alerts table
+   */
+  id: string;
+  /**
+   * Callback fired when the alerts have been first loaded
+   */
+  onLoaded?: (alerts: Alert[], columns: EuiDataGridColumn[]) => void;
+  /**
+   * List of installed AI for SOC integrations
+   */
+  packages: PackageListItem[];
+  /**
+   * Query that contains the id of the alerts to display in the table
+   */
+  query: Pick<QueryDslQueryContainer, 'bool' | 'ids'>;
+  /**
+   * Result from the useQuery to fetch all rules
+   */
+  ruleResponse: {
+    /**
+     * Result from fetching all rules
+     */
+    rules: RuleResponse[];
+    /**
+     * True while rules are being fetched
+     */
+    isLoading: boolean;
+  };
+}
+
+/**
+ * Component used in the Cases page under Alerts tab, only in the AI4DSOC tier.
+ * It leverages a lot of configurations and constants from the Alert summary page alerts table, and renders the ResponseOps AlertsTable.
+ */
+export const Table = memo(
+  ({ dataView, id, onLoaded, packages, query, ruleResponse }: TableProps) => {
+    const {
+      services: { application, data, fieldFormats, http, licensing, notifications, settings },
+    } = useKibana();
+    const services = useMemo(
+      () => ({
+        data,
+        http,
+        notifications,
+        fieldFormats,
+        application,
+        licensing,
+        settings,
+      }),
+      [application, data, fieldFormats, http, licensing, notifications, settings]
+    );
+
+    const dataViewSpec = useMemo(() => dataView.toSpec(), [dataView]);
+
+    const { browserFields } = useMemo(
+      () => getDataViewStateFromIndexFields('', dataViewSpec.fields),
+      [dataViewSpec.fields]
+    );
+
+    const additionalContext: AdditionalTableContext = useMemo(
+      () => ({
+        packages,
+        ruleResponse,
+      }),
+      [packages, ruleResponse]
+    );
+
+    return (
+      <AlertsTable
+        actionsColumnWidth={ACTION_COLUMN_WIDTH}
+        additionalContext={additionalContext}
+        browserFields={browserFields}
+        columns={columns}
+        consumers={ALERT_TABLE_CONSUMERS}
+        gridStyle={GRID_STYLE}
+        id={id}
+        onLoaded={onLoaded}
+        query={query}
+        renderActionsCell={ActionsCell}
+        renderCellValue={CellValue}
+        rowHeightsOptions={ROW_HEIGHTS_OPTIONS}
+        ruleTypeIds={RULE_TYPE_IDS}
+        services={services}
+        toolbarVisibility={TOOLBAR_VISIBILITY}
+      />
+    );
+  }
+);
+
+Table.displayName = 'Table';

x-pack/solutions/security/plugins/security_solution/public/cases/components/ai_for_soc/wrapper.test.tsx

@@ -0,0 +1,135 @@
+/*
+ * 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 React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { AiForSOCAlertsTable, CONTENT_TEST_ID, ERROR_TEST_ID, SKELETON_TEST_ID } from './wrapper';
+import { useKibana } from '../../../common/lib/kibana';
+import { TestProviders } from '../../../common/mock';
+import { useFetchIntegrations } from '../../../detections/hooks/alert_summary/use_fetch_integrations';
+import { useFindRulesQuery } from '../../../detection_engine/rule_management/api/hooks/use_find_rules_query';
+
+jest.mock('./table', () => ({
+  Table: () => <div />,
+}));
+jest.mock('../../../common/lib/kibana');
+jest.mock('../../../detections/hooks/alert_summary/use_fetch_integrations');
+jest.mock('../../../detection_engine/rule_management/api/hooks/use_find_rules_query');
+
+const id = 'id';
+const query = { ids: { values: ['abcdef'] } };
+const onLoaded = jest.fn();
+
+describe('<AiForSOCAlertsTab />', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    (useFetchIntegrations as jest.Mock).mockReturnValue({
+      installedPackages: [],
+      isLoading: false,
+    });
+    (useFindRulesQuery as jest.Mock).mockReturnValue({
+      data: [],
+      isLoading: false,
+    });
+  });
+
+  it('should render a loading skeleton while creating the dataView', async () => {
+    (useKibana as jest.Mock).mockReturnValue({
+      services: {
+        data: {
+          dataViews: {
+            create: jest.fn(),
+            clearInstanceCache: jest.fn(),
+          },
+        },
+        http: { basePath: { prepend: jest.fn() } },
+      },
+    });
+
+    render(<AiForSOCAlertsTable id={id} onLoaded={onLoaded} query={query} />);
+
+    await waitFor(() => {
+      expect(screen.getByTestId(SKELETON_TEST_ID)).toBeInTheDocument();
+    });
+  });
+
+  it('should render a loading skeleton while fetching packages (integrations)', async () => {
+    (useKibana as jest.Mock).mockReturnValue({
+      services: {
+        data: {
+          dataViews: {
+            create: jest.fn(),
+            clearInstanceCache: jest.fn(),
+          },
+        },
+        http: { basePath: { prepend: jest.fn() } },
+      },
+    });
+    (useFetchIntegrations as jest.Mock).mockReturnValue({
+      installedPackages: [],
+      isLoading: true,
+    });
+
+    render(<AiForSOCAlertsTable id={id} onLoaded={onLoaded} query={query} />);
+
+    expect(await screen.findByTestId(SKELETON_TEST_ID)).toBeInTheDocument();
+  });
+
+  it('should render an error if the dataView fail to be created correctly', async () => {
+    (useKibana as jest.Mock).mockReturnValue({
+      services: {
+        data: {
+          dataViews: {
+            create: jest.fn().mockReturnValue(undefined),
+            clearInstanceCache: jest.fn(),
+          },
+        },
+      },
+    });
+
+    jest.mock('react', () => ({
+      ...jest.requireActual('react'),
+      useEffect: jest.fn((f) => f()),
+    }));
+
+    render(<AiForSOCAlertsTable id={id} onLoaded={onLoaded} query={query} />);
+
+    expect(await screen.findByTestId(ERROR_TEST_ID)).toHaveTextContent(
+      'Unable to create data view'
+    );
+  });
+
+  it('should render the content', async () => {
+    (useKibana as jest.Mock).mockReturnValue({
+      services: {
+        data: {
+          dataViews: {
+            create: jest
+              .fn()
+              .mockReturnValue({ getIndexPattern: jest.fn(), id: 'id', toSpec: jest.fn() }),
+            clearInstanceCache: jest.fn(),
+          },
+          query: { filterManager: { getFilters: jest.fn() } },
+        },
+      },
+    });
+
+    jest.mock('react', () => ({
+      ...jest.requireActual('react'),
+      useEffect: jest.fn((f) => f()),
+    }));
+
+    render(
+      <TestProviders>
+        <AiForSOCAlertsTable id={id} onLoaded={onLoaded} query={query} />
+      </TestProviders>
+    );
+
+    expect(await screen.findByTestId(CONTENT_TEST_ID)).toBeInTheDocument();
+  });
+});

x-pack/solutions/security/plugins/security_solution/public/cases/components/ai_for_soc/wrapper.tsx

@@ -0,0 +1,123 @@
+/*
+ * 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 React, { memo, useEffect, useMemo, useState } from 'react';
+import type { DataView, DataViewSpec } from '@kbn/data-views-plugin/common';
+import { type EuiDataGridColumn, EuiEmptyPrompt, EuiSkeletonRectangle } from '@elastic/eui';
+import type { QueryDslQueryContainer } from '@elastic/elasticsearch/lib/api/types';
+import { i18n } from '@kbn/i18n';
+import type { Alert } from '@kbn/alerting-types';
+import { Table } from './table';
+import { useFetchIntegrations } from '../../../detections/hooks/alert_summary/use_fetch_integrations';
+import { useFindRulesQuery } from '../../../detection_engine/rule_management/api/hooks/use_find_rules_query';
+import { useKibana } from '../../../common/lib/kibana';
+
+const DATAVIEW_ERROR = i18n.translate(
+  'xpack.securitySolution.attackDiscovery.aiForSocTableTab.dataViewError',
+  {
+    defaultMessage: 'Unable to create data view',
+  }
+);
+
+export const ERROR_TEST_ID = 'cases-alert-error';
+export const SKELETON_TEST_ID = 'cases-alert-skeleton';
+export const CONTENT_TEST_ID = 'cases-alert-content';
+
+const dataViewSpec: DataViewSpec = { title: '.alerts-security.alerts-default' };
+
+interface AiForSOCAlertsTableProps {
+  /**
+   * Id to pass down to the ResponseOps alerts table
+   */
+  id: string;
+  /**
+   * Callback fired when the alerts have been first loaded
+   */
+  onLoaded?: (alerts: Alert[], columns: EuiDataGridColumn[]) => void;
+  /**
+   * Query that contains the id of the alerts to display in the table
+   */
+  query: Pick<QueryDslQueryContainer, 'bool' | 'ids'>;
+}
+
+/**
+ * Component used in the Cases page under the Alerts tab, only in the AI4DSOC tier.
+ * It fetches rules, packages (integrations) and creates a local dataView.
+ * It renders a loading skeleton while packages are being fetched and while the dataView is being created.
+ */
+export const AiForSOCAlertsTable = memo(({ id, onLoaded, query }: AiForSOCAlertsTableProps) => {
+  const { data } = useKibana().services;
+  const [dataView, setDataView] = useState<DataView | undefined>(undefined);
+  const [dataViewLoading, setDataViewLoading] = useState<boolean>(true);
+
+  // Fetch all integrations
+  const { installedPackages, isLoading: integrationIsLoading } = useFetchIntegrations();
+
+  // Fetch all rules. For the AI for SOC effort, there should only be one rule per integration (which means for now 5-6 rules total)
+  const { data: ruleData, isLoading: ruleIsLoading } = useFindRulesQuery({});
+  const ruleResponse = useMemo(
+    () => ({
+      rules: ruleData?.rules || [],
+      isLoading: ruleIsLoading,
+    }),
+    [ruleData, ruleIsLoading]
+  );
+
+  useEffect(() => {
+    let dv: DataView;
+    const createDataView = async () => {
+      try {
+        dv = await data.dataViews.create(dataViewSpec);
+        setDataView(dv);
+        setDataViewLoading(false);
+      } catch (err) {
+        setDataViewLoading(false);
+      }
+    };
+    createDataView();
+
+    // clearing after leaving the page
+    return () => {
+      if (dv?.id) {
+        data.dataViews.clearInstanceCache(dv.id);
+      }
+    };
+  }, [data.dataViews]);
+
+  return (
+    <EuiSkeletonRectangle
+      data-test-subj={SKELETON_TEST_ID}
+      height={400}
+      isLoading={integrationIsLoading || dataViewLoading}
+      width="100%"
+    >
+      <>
+        {!dataView || !dataView.id ? (
+          <EuiEmptyPrompt
+            color="danger"
+            data-test-subj={ERROR_TEST_ID}
+            iconType="error"
+            title={<h2>{DATAVIEW_ERROR}</h2>}
+          />
+        ) : (
+          <div data-test-subj={CONTENT_TEST_ID}>
+            <Table
+              dataView={dataView}
+              id={id}
+              onLoaded={onLoaded}
+              packages={installedPackages}
+              query={query}
+              ruleResponse={ruleResponse}
+            />
+          </div>
+        )}
+      </>
+    </EuiSkeletonRectangle>
+  );
+});
+
+AiForSOCAlertsTable.displayName = 'AiForSOCAlertsTable';

x-pack/solutions/security/plugins/security_solution/public/cases/pages/index.tsx

@@ -10,13 +10,20 @@ import { useDispatch } from 'react-redux';
 import type { CaseViewRefreshPropInterface } from '@kbn/cases-plugin/common';
 import { CaseMetricsFeature } from '@kbn/cases-plugin/common';
 import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
+import type { CaseViewAlertsTableProps } from '@kbn/cases-plugin/public/components/case_view/types';
+import { IOCPanelKey } from '../../flyout/ai_for_soc/constants/panel_keys';
 import { DetectionEngineAlertsTable } from '../../detections/components/alerts_table';
 import { CaseDetailsRefreshContext } from '../../common/components/endpoint';
 import { DocumentDetailsRightPanelKey } from '../../flyout/document_details/shared/constants/panel_keys';
 import { RulePanelKey } from '../../flyout/rule_details/right';
 import { TimelineId } from '../../../common/types/timeline';
 import { useKibana, useNavigation } from '../../common/lib/kibana';
-import { APP_ID, CASES_PATH, SecurityPageName } from '../../../common/constants';
+import {
+  APP_ID,
+  CASES_PATH,
+  SECURITY_FEATURE_ID,
+  SecurityPageName,
+} from '../../../common/constants';
 import { timelineActions } from '../../timelines/store';
 import { SecuritySolutionPageWrapper } from '../../common/components/page_wrapper';
 import { getEndpointDetailsPath } from '../../management/common/routing';
@@ -28,9 +35,14 @@ import { useFetchAlertData } from './use_fetch_alert_data';
 import { useUpsellingMessage } from '../../common/hooks/use_upselling';
 import { useFetchNotes } from '../../notes/hooks/use_fetch_notes';
 import { DocumentEventTypes } from '../../common/lib/telemetry';
+import { AiForSOCAlertsTable } from '../components/ai_for_soc/wrapper';
 
 const CaseContainerComponent: React.FC = () => {
-  const { cases, telemetry } = useKibana().services;
+  const {
+    application: { capabilities },
+    cases,
+    telemetry,
+  } = useKibana().services;
   const { getAppUrl, navigateTo } = useNavigation();
   const userCasesPermissions = cases.helpers.canUseCases([APP_ID]);
   const dispatch = useDispatch();
@@ -41,24 +53,53 @@ const CaseContainerComponent: React.FC = () => {
 
   const interactionsUpsellingMessage = useUpsellingMessage('investigation_guide_interactions');
 
+  // TODO We shouldn't have to check capabilities here, this should be done at a much higher level.
+  //  https://github.com/elastic/kibana/issues/218741
+  const AIForSOC = capabilities[SECURITY_FEATURE_ID].configurations;
+
   const showAlertDetails = useCallback(
     (alertId: string, index: string) => {
-      openFlyout({
-        right: {
-          id: DocumentDetailsRightPanelKey,
-          params: {
-            id: alertId,
-            indexName: index,
-            scopeId: TimelineId.casePage,
+      //  For the AI for SOC we need to show the AI alert flyout.
+      if (AIForSOC) {
+        openFlyout({
+          right: {
+            id: IOCPanelKey,
+            params: {
+              id: alertId,
+              indexName: index,
+            },
           },
-        },
-      });
-      telemetry.reportEvent(DocumentEventTypes.DetailsFlyoutOpened, {
-        location: TimelineId.casePage,
-        panel: 'right',
-      });
+        });
+      } else {
+        openFlyout({
+          right: {
+            id: DocumentDetailsRightPanelKey,
+            params: {
+              id: alertId,
+              indexName: index,
+              scopeId: TimelineId.casePage,
+            },
+          },
+        });
+        telemetry.reportEvent(DocumentEventTypes.DetailsFlyoutOpened, {
+          location: TimelineId.casePage,
+          panel: 'right',
+        });
+      }
     },
-    [openFlyout, telemetry]
+    [AIForSOC, openFlyout, telemetry]
+  );
+
+  const renderAlertsTable = useCallback(
+    (props: CaseViewAlertsTableProps) => {
+      //  For the AI for SOC we need to show the Alert summary page alerts table.
+      if (AIForSOC) {
+        return <AiForSOCAlertsTable id={props.id} onLoaded={props.onLoaded} query={props.query} />;
+      } else {
+        return <DetectionEngineAlertsTable {...props} />;
+      }
+    },
+    [AIForSOC]
   );
 
   const onRuleDetailsClick = useCallback(
@@ -146,7 +187,7 @@ const CaseContainerComponent: React.FC = () => {
           useFetchAlertData,
           onAlertsTableLoaded,
           permissions: userCasesPermissions,
-          renderAlertsTable: (props) => <DetectionEngineAlertsTable {...props} />,
+          renderAlertsTable,
         })}
       </CaseDetailsRefreshContext.Provider>
       <SpyRoute pageName={SecurityPageName.case} />