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

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

@@ -68,7 +68,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',