PR comments

elastic · Aug 22, 2023 · f0cea46 · f0cea46
1 parent 460c083
commit f0cea46
Show file tree

Hide file tree

Showing 44 changed files with 575 additions and 651 deletions.
diff --git a/x-pack/plugins/security_solution/public/flyout/left/components/correlations_details.test.tsx b/x-pack/plugins/security_solution/public/flyout/left/components/correlations_details.test.tsx
@@ -15,9 +15,13 @@ import { useShowRelatedAlertsBySameSourceEvent } from '../../shared/hooks/use_sh
 import { useShowRelatedAlertsBySession } from '../../shared/hooks/use_show_related_alerts_by_session';
 import { useShowRelatedCases } from '../../shared/hooks/use_show_related_cases';
 import {
+  CORRELATIONS_DETAILS_BY_ANCESTRY_SECTION_TABLE_TEST_ID,
   CORRELATIONS_DETAILS_BY_ANCESTRY_SECTION_TEST_ID,
+  CORRELATIONS_DETAILS_BY_SESSION_SECTION_TABLE_TEST_ID,
   CORRELATIONS_DETAILS_BY_SESSION_SECTION_TEST_ID,
+  CORRELATIONS_DETAILS_BY_SOURCE_SECTION_TABLE_TEST_ID,
   CORRELATIONS_DETAILS_BY_SOURCE_SECTION_TEST_ID,
+  CORRELATIONS_DETAILS_CASES_SECTION_TABLE_TEST_ID,
   CORRELATIONS_DETAILS_CASES_SECTION_TEST_ID,
 } from './test_ids';
 import { useFetchRelatedAlertsBySession } from '../../shared/hooks/use_fetch_related_alerts_by_session';
@@ -55,9 +59,15 @@ describe('CorrelationsDetails', () => {
   });
 
   it('renders all sections', () => {
-    jest.mocked(useShowRelatedAlertsByAncestry).mockReturnValue(true);
-    jest.mocked(useShowRelatedAlertsBySameSourceEvent).mockReturnValue(true);
-    jest.mocked(useShowRelatedAlertsBySession).mockReturnValue(true);
+    jest
+      .mocked(useShowRelatedAlertsByAncestry)
+      .mockReturnValue({ show: true, documentId: 'documentId', indices: ['index1'] });
+    jest
+      .mocked(useShowRelatedAlertsBySameSourceEvent)
+      .mockReturnValue({ show: true, originalEventId: 'originalEventId' });
+    jest
+      .mocked(useShowRelatedAlertsBySession)
+      .mockReturnValue({ show: true, entityId: 'entityId' });
     jest.mocked(useShowRelatedCases).mockReturnValue(true);
 
     (useFetchRelatedAlertsByAncestry as jest.Mock).mockReturnValue({
@@ -87,16 +97,36 @@ describe('CorrelationsDetails', () => {
 
     const { getByTestId } = renderCorrelationDetails();
 
-    expect(getByTestId(CORRELATIONS_DETAILS_BY_ANCESTRY_SECTION_TEST_ID)).toBeInTheDocument();
-    expect(getByTestId(CORRELATIONS_DETAILS_BY_SOURCE_SECTION_TEST_ID)).toBeInTheDocument();
-    expect(getByTestId(CORRELATIONS_DETAILS_BY_SESSION_SECTION_TEST_ID)).toBeInTheDocument();
-    expect(getByTestId(CORRELATIONS_DETAILS_CASES_SECTION_TEST_ID)).toBeInTheDocument();
+    expect(getByTestId(CORRELATIONS_DETAILS_BY_ANCESTRY_SECTION_TABLE_TEST_ID)).toBeInTheDocument();
+    expect(getByTestId(CORRELATIONS_DETAILS_BY_SOURCE_SECTION_TABLE_TEST_ID)).toBeInTheDocument();
+    expect(getByTestId(CORRELATIONS_DETAILS_BY_SESSION_SECTION_TABLE_TEST_ID)).toBeInTheDocument();
+    expect(getByTestId(CORRELATIONS_DETAILS_CASES_SECTION_TABLE_TEST_ID)).toBeInTheDocument();
   });
 
-  it('should render no section', () => {
-    jest.mocked(useShowRelatedAlertsByAncestry).mockReturnValue(false);
-    jest.mocked(useShowRelatedAlertsBySameSourceEvent).mockReturnValue(false);
-    jest.mocked(useShowRelatedAlertsBySession).mockReturnValue(false);
+  it('should render no section if show values are false', () => {
+    jest
+      .mocked(useShowRelatedAlertsByAncestry)
+      .mockReturnValue({ show: false, documentId: 'documentId', indices: ['index1'] });
+    jest
+      .mocked(useShowRelatedAlertsBySameSourceEvent)
+      .mockReturnValue({ show: false, originalEventId: 'originalEventId' });
+    jest
+      .mocked(useShowRelatedAlertsBySession)
+      .mockReturnValue({ show: false, entityId: 'entityId' });
+    jest.mocked(useShowRelatedCases).mockReturnValue(false);
+
+    const { queryByTestId } = renderCorrelationDetails();
+
+    expect(queryByTestId(CORRELATIONS_DETAILS_BY_ANCESTRY_SECTION_TEST_ID)).not.toBeInTheDocument();
+    expect(queryByTestId(CORRELATIONS_DETAILS_BY_SOURCE_SECTION_TEST_ID)).not.toBeInTheDocument();
+    expect(queryByTestId(CORRELATIONS_DETAILS_BY_SESSION_SECTION_TEST_ID)).not.toBeInTheDocument();
+    expect(queryByTestId(CORRELATIONS_DETAILS_CASES_SECTION_TEST_ID)).not.toBeInTheDocument();
+  });
+
+  it('should render no section if values are null', () => {
+    jest.mocked(useShowRelatedAlertsByAncestry).mockReturnValue({ show: true });
+    jest.mocked(useShowRelatedAlertsBySameSourceEvent).mockReturnValue({ show: true });
+    jest.mocked(useShowRelatedAlertsBySession).mockReturnValue({ show: true });
     jest.mocked(useShowRelatedCases).mockReturnValue(false);
 
     const { queryByTestId } = renderCorrelationDetails();

diff --git a/x-pack/plugins/security_solution/public/flyout/left/components/correlations_details.tsx b/x-pack/plugins/security_solution/public/flyout/left/components/correlations_details.tsx
@@ -24,44 +24,40 @@ export const CORRELATIONS_TAB_ID = 'correlations-details';
  * Correlations displayed in the document details expandable flyout left section under the Insights tab
  */
 export const CorrelationsDetails: React.FC = () => {
-  const { dataFormattedForFieldBrowser, dataAsNestedObject, eventId, scopeId } =
+  const { dataAsNestedObject, dataFormattedForFieldBrowser, eventId, getFieldsData, scopeId } =
     useLeftPanelContext();
 
-  const showAlertsByAncestry = useShowRelatedAlertsByAncestry({
-    dataFormattedForFieldBrowser,
+  const {
+    show: showAlertsByAncestry,
+    documentId,
+    indices,
+  } = useShowRelatedAlertsByAncestry({
+    getFieldsData,
     dataAsNestedObject,
-  });
-  const showAlertsBySession = useShowRelatedAlertsBySession({ dataFormattedForFieldBrowser });
-  const showSameSourceAlerts = useShowRelatedAlertsBySameSourceEvent({
     dataFormattedForFieldBrowser,
   });
+  const { show: showSameSourceAlerts, originalEventId } = useShowRelatedAlertsBySameSourceEvent({
+    getFieldsData,
+  });
+  const { show: showAlertsBySession, entityId } = useShowRelatedAlertsBySession({ getFieldsData });
   const showCases = useShowRelatedCases();
 
   return (
     <>
-      {showAlertsByAncestry && (
-        <RelatedAlertsByAncestry
-          dataFormattedForFieldBrowser={dataFormattedForFieldBrowser}
-          scopeId={scopeId}
-        />
+      {showAlertsByAncestry && documentId && indices && (
+        <RelatedAlertsByAncestry documentId={documentId} indices={indices} scopeId={scopeId} />
       )}
 
       <EuiSpacer />
 
-      {showSameSourceAlerts && (
-        <RelatedAlertsBySameSourceEvent
-          dataFormattedForFieldBrowser={dataFormattedForFieldBrowser}
-          scopeId={scopeId}
-        />
+      {showSameSourceAlerts && originalEventId && (
+        <RelatedAlertsBySameSourceEvent originalEventId={originalEventId} scopeId={scopeId} />
       )}
 
       <EuiSpacer />
 
-      {showAlertsBySession && (
-        <RelatedAlertsBySession
-          dataFormattedForFieldBrowser={dataFormattedForFieldBrowser}
-          scopeId={scopeId}
-        />
+      {showAlertsBySession && entityId && (
+        <RelatedAlertsBySession entityId={entityId} scopeId={scopeId} />
       )}
 
       <EuiSpacer />

diff --git a/...ecurity_solution/public/flyout/left/components/correlations_details_alerts_table.test.tsx b/...ecurity_solution/public/flyout/left/components/correlations_details_alerts_table.test.tsx
@@ -8,7 +8,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { EuiBasicTable } from '@elastic/eui';
-import { AlertsTable, columns } from './correlations_details_alerts_table';
+import { CorrelationsDetailsAlertsTable, columns } from './correlations_details_alerts_table';
 import { usePaginatedAlerts } from '../hooks/use_paginated_alerts';
 
 jest.mock('../hooks/use_paginated_alerts');
@@ -59,7 +59,7 @@ describe('AlertsTable', () => {
   });
 
   it('renders EuiBasicTable with correct props', () => {
-    render(<AlertsTable loading={false} alertIds={alertIds} />);
+    render(<CorrelationsDetailsAlertsTable title={'title'} loading={false} alertIds={alertIds} />);
 
     expect(jest.mocked(usePaginatedAlerts)).toHaveBeenCalled();
 

diff --git a/...ins/security_solution/public/flyout/left/components/correlations_details_alerts_table.tsx b/...ins/security_solution/public/flyout/left/components/correlations_details_alerts_table.tsx
@@ -6,15 +6,15 @@
  */
 
 import React, { type FC, useMemo, useCallback } from 'react';
-import { type Criteria, EuiBasicTable, formatDate, EuiEmptyPrompt } from '@elastic/eui';
+import { type Criteria, EuiBasicTable, formatDate } from '@elastic/eui';
 
 import { Severity } from '@kbn/securitysolution-io-ts-alerting-types';
 import { isRight } from 'fp-ts/lib/Either';
 import { ALERT_REASON, ALERT_RULE_NAME } from '@kbn/rule-data-utils';
 import { SeverityBadge } from '../../../detections/components/rules/severity_badge';
 import { usePaginatedAlerts } from '../hooks/use_paginated_alerts';
-import { ERROR_MESSAGE, ERROR_TITLE } from '../../shared/translations';
 import * as i18n from './translations';
+import { ExpandablePanel } from '../../shared/components/expandable_panel';
 
 export const TIMESTAMP_DATE_FORMAT = 'MMM D, YYYY @ HH:mm:ss.SSS';
 
@@ -47,7 +47,11 @@ export const columns = [
   },
 ];
 
-export interface AlertsTableProps {
+export interface CorrelationsDetailsAlertsTableProps {
+  /**
+   * Text to display in the ExpandablePanel title section
+   */
+  title: string;
   /**
    * Whether the table is loading
    */
@@ -65,7 +69,8 @@ export interface AlertsTableProps {
 /**
  * Renders paginated alert array based on the provided alertIds
  */
-export const AlertsTable: FC<AlertsTableProps> = ({
+export const CorrelationsDetailsAlertsTable: FC<CorrelationsDetailsAlertsTableProps> = ({
+  title,
   loading,
   alertIds,
   'data-test-subj': dataTestSubj,
@@ -105,27 +110,28 @@ export const AlertsTable: FC<AlertsTableProps> = ({
       );
   }, [data]);
 
-  if (error) {
-    return (
-      <EuiEmptyPrompt
-        iconType="error"
-        color="danger"
-        title={<h2>{ERROR_TITLE('alert data')}</h2>}
-        body={<p>{ERROR_MESSAGE('alert data')}</p>}
-        data-test-subj={`${dataTestSubj}Error`}
-      />
-    );
-  }
-
   return (
-    <EuiBasicTable<Record<string, unknown>>
+    <ExpandablePanel
+      header={{
+        title,
+        iconType: 'warning',
+      }}
+      content={{ error }}
+      expand={{
+        expandable: true,
+        expandedOnFirstRender: true,
+      }}
       data-test-subj={dataTestSubj}
-      loading={loading || alertsLoading}
-      items={mappedData}
-      columns={columns}
-      pagination={paginationConfig}
-      sorting={sorting}
-      onChange={onTableChange}
-    />
+    >
+      <EuiBasicTable<Record<string, unknown>>
+        data-test-subj={`${dataTestSubj}Table`}
+        loading={loading || alertsLoading}
+        items={mappedData}
+        columns={columns}
+        pagination={paginationConfig}
+        sorting={sorting}
+        onChange={onTableChange}
+      />
+    </ExpandablePanel>
   );
 };
diff --git a/x-pack/plugins/security_solution/public/flyout/left/components/entities_details.test.tsx b/x-pack/plugins/security_solution/public/flyout/left/components/entities_details.test.tsx
@@ -13,6 +13,7 @@ import { TestProviders } from '../../../common/mock';
 import { EntitiesDetails } from './entities_details';
 import { ENTITIES_DETAILS_TEST_ID, HOST_DETAILS_TEST_ID, USER_DETAILS_TEST_ID } from './test_ids';
 import { mockContextValue } from '../mocks/mock_context';
+import { EXPANDABLE_PANEL_CONTENT_TEST_ID } from '../../shared/components/test_ids';
 
 jest.mock('react-router-dom', () => {
   const actual = jest.requireActual('react-router-dom');
@@ -31,6 +32,9 @@ jest.mock('react-redux', () => {
   };
 });
 
+const USER_TEST_ID = EXPANDABLE_PANEL_CONTENT_TEST_ID(USER_DETAILS_TEST_ID);
+const HOST_TEST_ID = EXPANDABLE_PANEL_CONTENT_TEST_ID(HOST_DETAILS_TEST_ID);
+
 describe('<EntitiesDetails />', () => {
   it('renders entities details correctly', () => {
     const { getByTestId } = render(
@@ -41,8 +45,8 @@ describe('<EntitiesDetails />', () => {
       </TestProviders>
     );
     expect(getByTestId(ENTITIES_DETAILS_TEST_ID)).toBeInTheDocument();
-    expect(getByTestId(USER_DETAILS_TEST_ID)).toBeInTheDocument();
-    expect(getByTestId(HOST_DETAILS_TEST_ID)).toBeInTheDocument();
+    expect(getByTestId(USER_TEST_ID)).toBeInTheDocument();
+    expect(getByTestId(HOST_TEST_ID)).toBeInTheDocument();
   });
 
   it('does not render user and host details if user name and host name are not available', () => {
@@ -59,8 +63,8 @@ describe('<EntitiesDetails />', () => {
         </LeftPanelContext.Provider>
       </TestProviders>
     );
-    expect(queryByTestId(USER_DETAILS_TEST_ID)).not.toBeInTheDocument();
-    expect(queryByTestId(HOST_DETAILS_TEST_ID)).not.toBeInTheDocument();
+    expect(queryByTestId(USER_TEST_ID)).not.toBeInTheDocument();
+    expect(queryByTestId(HOST_TEST_ID)).not.toBeInTheDocument();
   });
 
   it('does not render user and host details if @timestamp is not available', () => {
@@ -85,7 +89,7 @@ describe('<EntitiesDetails />', () => {
         </LeftPanelContext.Provider>
       </TestProviders>
     );
-    expect(queryByTestId(USER_DETAILS_TEST_ID)).not.toBeInTheDocument();
-    expect(queryByTestId(HOST_DETAILS_TEST_ID)).not.toBeInTheDocument();
+    expect(queryByTestId(USER_TEST_ID)).not.toBeInTheDocument();
+    expect(queryByTestId(HOST_TEST_ID)).not.toBeInTheDocument();
   });
 });
diff --git a/x-pack/plugins/security_solution/public/flyout/left/components/host_details.test.tsx b/x-pack/plugins/security_solution/public/flyout/left/components/host_details.test.tsx
@@ -21,6 +21,7 @@ import {
   HOST_DETAILS_INFO_TEST_ID,
   HOST_DETAILS_RELATED_USERS_TABLE_TEST_ID,
 } from './test_ids';
+import { EXPANDABLE_PANEL_CONTENT_TEST_ID } from '../../shared/components/test_ids';
 
 jest.mock('react-router-dom', () => {
   const actual = jest.requireActual('react-router-dom');
@@ -134,7 +135,7 @@ describe('<HostDetails />', () => {
         <HostDetails {...defaultProps} />
       </TestProviders>
     );
-    expect(getByTestId(HOST_DETAILS_TEST_ID)).toBeInTheDocument();
+    expect(getByTestId(EXPANDABLE_PANEL_CONTENT_TEST_ID(HOST_DETAILS_TEST_ID))).toBeInTheDocument();
   });
 
   describe('Host overview', () => {

diff --git a/...ugins/security_solution/public/flyout/left/components/related_alerts_by_ancestry.test.tsx b/...ugins/security_solution/public/flyout/left/components/related_alerts_by_ancestry.test.tsx
@@ -7,10 +7,12 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
-import { CORRELATIONS_DETAILS_BY_ANCESTRY_SECTION_TEST_ID } from './test_ids';
+import {
+  CORRELATIONS_DETAILS_BY_ANCESTRY_SECTION_TABLE_TEST_ID,
+  CORRELATIONS_DETAILS_BY_ANCESTRY_SECTION_TEST_ID,
+} from './test_ids';
 import { RelatedAlertsByAncestry } from './related_alerts_by_ancestry';
 import { useFetchRelatedAlertsByAncestry } from '../../shared/hooks/use_fetch_related_alerts_by_ancestry';
-import { mockDataFormattedForFieldBrowser } from '../../shared/mocks/mock_context';
 import {
   EXPANDABLE_PANEL_HEADER_TITLE_ICON_TEST_ID,
   EXPANDABLE_PANEL_HEADER_TITLE_TEXT_TEST_ID,
@@ -21,7 +23,8 @@ import { usePaginatedAlerts } from '../hooks/use_paginated_alerts';
 jest.mock('../../shared/hooks/use_fetch_related_alerts_by_ancestry');
 jest.mock('../hooks/use_paginated_alerts');
 
-const dataFormattedForFieldBrowser = mockDataFormattedForFieldBrowser;
+const documentId = 'documentId';
+const indices = ['index1'];
 const scopeId = 'scopeId';
 
 const TOGGLE_ICON = EXPANDABLE_PANEL_TOGGLE_ICON_TEST_ID(
@@ -44,7 +47,7 @@ describe('<RelatedAlertsByAncestry />', () => {
     });
     (usePaginatedAlerts as jest.Mock).mockReturnValue({
       loading: false,
-      erro: false,
+      error: false,
       data: [
         {
           _id: '1',
@@ -70,15 +73,12 @@ describe('<RelatedAlertsByAncestry />', () => {
     });
 
     const { getByTestId } = render(
-      <RelatedAlertsByAncestry
-        dataFormattedForFieldBrowser={dataFormattedForFieldBrowser}
-        scopeId={scopeId}
-      />
+      <RelatedAlertsByAncestry documentId={documentId} indices={indices} scopeId={scopeId} />
     );
     expect(getByTestId(TOGGLE_ICON)).toBeInTheDocument();
     expect(getByTestId(TITLE_ICON)).toBeInTheDocument();
     expect(getByTestId(TITLE_TEXT)).toBeInTheDocument();
-    expect(getByTestId(CORRELATIONS_DETAILS_BY_ANCESTRY_SECTION_TEST_ID)).toBeInTheDocument();
+    expect(getByTestId(CORRELATIONS_DETAILS_BY_ANCESTRY_SECTION_TABLE_TEST_ID)).toBeInTheDocument();
   });
 
   it('should render null if error', () => {
@@ -88,10 +88,7 @@ describe('<RelatedAlertsByAncestry />', () => {
     });
 
     const { container } = render(
-      <RelatedAlertsByAncestry
-        dataFormattedForFieldBrowser={dataFormattedForFieldBrowser}
-        scopeId={scopeId}
-      />
+      <RelatedAlertsByAncestry documentId={documentId} indices={indices} scopeId={scopeId} />
     );
     expect(container).toBeEmptyDOMElement();
   });