[8.10] [Security Solution] expandable flyout - add investigate in timeline f… (#165025) (#165064)

# Backport

This will backport the following commits from `main` to `8.10`:
- [[Security Solution] expandable flyout - add investigate in timeline
f… (#165025)](https://github.com/elastic/kibana/pull/165025)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Philippe
Oberti","email":"philippe.oberti@elastic.co"},"sourceCommit":{"committedDate":"2023-08-29T08:18:40Z","message":"[Security
Solution] expandable flyout - add investigate in timeline f…
(#165025)","sha":"1a006a98f6eae85612baeb7e323341a2f8be3e87","branchLabelMapping":{"^v8.11.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:enhancement","Team:Threat
Hunting:Investigations","v8.10.0","v8.11.0"],"number":165025,"url":"https://github.com/elastic/kibana/pull/165025","mergeCommit":{"message":"[Security
Solution] expandable flyout - add investigate in timeline f…
(#165025)","sha":"1a006a98f6eae85612baeb7e323341a2f8be3e87"}},"sourceBranch":"main","suggestedTargetBranches":["8.10"],"targetPullRequestStates":[{"branch":"8.10","label":"v8.10.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.11.0","labelRegex":"^v8.11.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/165025","number":165025,"mergeCommit":{"message":"[Security
Solution] expandable flyout - add investigate in timeline f…
(#165025)","sha":"1a006a98f6eae85612baeb7e323341a2f8be3e87"}}]}]
BACKPORT-->

Co-authored-by: Philippe Oberti <philippe.oberti@elastic.co>

x-pack/plugins/security_solution/public/common/components/event_details/table/use_action_cell_data_provider.ts

@@ -55,13 +55,14 @@ export const getDataProvider = (
   field: string,
   id: string,
   value: string | string[],
-  operator: QueryOperator = IS_OPERATOR
+  operator: QueryOperator = IS_OPERATOR,
+  excluded: boolean = false
 ): DataProvider => ({
   and: [],
   enabled: true,
   id: escapeDataProviderId(id),
   name: field,
-  excluded: false,
+  excluded,
   kqlQuery: '',
   queryMatch: {
     field,
@@ -75,9 +76,10 @@ export const getDataProviderAnd = (
   field: string,
   id: string,
   value: string | string[],
-  operator: QueryOperator = IS_OPERATOR
+  operator: QueryOperator = IS_OPERATOR,
+  excluded: boolean = false
 ): DataProvidersAnd => {
-  const { and, ...dataProvider } = getDataProvider(field, id, value, operator);
+  const { and, ...dataProvider } = getDataProvider(field, id, value, operator, excluded);
   return dataProvider;
 };
 

x-pack/plugins/security_solution/public/flyout/left/components/prevalence_details.test.tsx

@@ -15,9 +15,19 @@ import {
   PREVALENCE_DETAILS_TABLE_TEST_ID,
 } from './test_ids';
 import { usePrevalence } from '../../shared/hooks/use_prevalence';
+import { TestProviders } from '../../../common/mock';
 
 jest.mock('../../shared/hooks/use_prevalence');
 
+const mockDispatch = jest.fn();
+jest.mock('react-redux', () => {
+  const original = jest.requireActual('react-redux');
+  return {
+    ...original,
+    useDispatch: () => mockDispatch,
+  };
+});
+
 const panelContextValue = {
   eventId: 'event id',
   indexName: 'indexName',
@@ -53,9 +63,11 @@ describe('PrevalenceDetails', () => {
     });
 
     const { getByTestId } = render(
-      <LeftPanelContext.Provider value={panelContextValue}>
-        <PrevalenceDetails />
-      </LeftPanelContext.Provider>
+      <TestProviders>
+        <LeftPanelContext.Provider value={panelContextValue}>
+          <PrevalenceDetails />
+        </LeftPanelContext.Provider>
+      </TestProviders>
     );
 
     expect(getByTestId(PREVALENCE_DETAILS_TABLE_TEST_ID)).toBeInTheDocument();

x-pack/plugins/security_solution/public/flyout/left/components/prevalence_details.tsx

@@ -17,6 +17,7 @@ import {
   EuiSpacer,
   EuiSuperDatePicker,
 } from '@elastic/eui';
+import { InvestigateInTimelineButton } from '../../../common/components/event_details/table/investigate_in_timeline_button';
 import type { PrevalenceData } from '../../shared/hooks/use_prevalence';
 import { usePrevalence } from '../../shared/hooks/use_prevalence';
 import { ERROR_MESSAGE, ERROR_TITLE } from '../../shared/translations';
@@ -46,6 +47,12 @@ import {
   PREVALENCE_DETAILS_TABLE_TEST_ID,
 } from './test_ids';
 import { useLeftPanelContext } from '../context';
+import {
+  getDataProvider,
+  getDataProviderAnd,
+} from '../../../common/components/event_details/table/use_action_cell_data_provider';
+import { getEmptyTagValue } from '../../../common/components/empty_value';
+import { IS_OPERATOR } from '../../../../common/types';
 
 export const PREVALENCE_TAB_ID = 'prevalence-details';
 const DEFAULT_FROM = 'now-30d';
@@ -63,7 +70,6 @@ const columns: Array<EuiBasicTableColumn<PrevalenceData>> = [
     'data-test-subj': PREVALENCE_DETAILS_TABLE_VALUE_CELL_TEST_ID,
   },
   {
-    field: 'alertCount',
     name: (
       <EuiFlexGroup direction="column" gutterSize="none">
         <EuiFlexItem>{PREVALENCE_TABLE_ALERT_COUNT_COLUMN_TITLE}</EuiFlexItem>
@@ -71,10 +77,25 @@ const columns: Array<EuiBasicTableColumn<PrevalenceData>> = [
       </EuiFlexGroup>
     ),
     'data-test-subj': PREVALENCE_DETAILS_TABLE_ALERT_COUNT_CELL_TEST_ID,
+    render: (data: PrevalenceData) => {
+      const dataProviders = [
+        getDataProvider(data.field, `timeline-indicator-${data.field}-${data.value}`, data.value),
+      ];
+      return data.alertCount > 0 ? (
+        <InvestigateInTimelineButton
+          asEmptyButton={true}
+          dataProviders={dataProviders}
+          filters={[]}
+        >
+          <>{data.alertCount}</>
+        </InvestigateInTimelineButton>
+      ) : (
+        getEmptyTagValue()
+      );
+    },
     width: '10%',
   },
   {
-    field: 'docCount',
     name: (
       <EuiFlexGroup direction="column" gutterSize="none">
         <EuiFlexItem>{PREVALENCE_TABLE_DOC_COUNT_COLUMN_TITLE}</EuiFlexItem>
@@ -82,6 +103,38 @@ const columns: Array<EuiBasicTableColumn<PrevalenceData>> = [
       </EuiFlexGroup>
     ),
     'data-test-subj': PREVALENCE_DETAILS_TABLE_DOC_COUNT_CELL_TEST_ID,
+    render: (data: PrevalenceData) => {
+      const dataProviders = [
+        {
+          ...getDataProvider(
+            data.field,
+            `timeline-indicator-${data.field}-${data.value}`,
+            data.value
+          ),
+          and: [
+            getDataProviderAnd(
+              'event.kind',
+              `timeline-indicator-event.kind-not-signal`,
+              'signal',
+              IS_OPERATOR,
+              true
+            ),
+          ],
+        },
+      ];
+      return data.docCount > 0 ? (
+        <InvestigateInTimelineButton
+          asEmptyButton={true}
+          dataProviders={dataProviders}
+          filters={[]}
+          keepDataView // changing dataview from only detections to include non-alerts docs
+        >
+          <>{data.docCount}</>
+        </InvestigateInTimelineButton>
+      ) : (
+        getEmptyTagValue()
+      );
+    },
     width: '10%',
   },
   {

x-pack/test/security_solution_cypress/cypress/e2e/investigations/alerts/expandable_flyout/alert_details_left_panel_prevalence_tab.cy.ts

@@ -69,7 +69,7 @@ describe('Alert details expandable flyout left panel prevalence', () => {
     );
     cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_PREVALENCE_TABLE_DOC_COUNT_CELL).should(
       'contain.text',
-      0
+      '—'
     );
     cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_PREVALENCE_TABLE_HOST_PREVALENCE_CELL).should(
       'contain.text',