[7.x] [SIEM] Fixes Host Details Events Table to only show events for specified Host (#57388)

x-pack/legacy/plugins/siem/public/pages/hosts/details/details_tabs.test.tsx

@@ -11,10 +11,11 @@ import { MemoryRouter } from 'react-router-dom';
 import { mockIndexPattern } from '../../../mock/index_pattern';
 import { TestProviders } from '../../../mock/test_providers';
 import { HostDetailsTabs } from './details_tabs';
-import { SetAbsoluteRangeDatePicker } from './types';
+import { HostDetailsTabsProps, SetAbsoluteRangeDatePicker } from './types';
 import { hostDetailsPagePath } from '../types';
 import { type } from './utils';
 import { useMountAppended } from '../../../utils/use_mount_appended';
+import { getHostDetailsPageFilters } from './helpers';
 
 jest.mock('../../../containers/source', () => ({
   indicesExistOrDataTemporarilyUnavailable: () => true,
@@ -41,6 +42,23 @@ describe('body', () => {
     uncommonProcesses: 'UncommonProcessQueryTabBody',
     anomalies: 'AnomaliesQueryTabBody',
     events: 'EventsQueryTabBody',
+    alerts: 'HostAlertsQueryTabBody',
+  };
+
+  const mockHostDetailsPageFilters = getHostDetailsPageFilters('host-1');
+
+  const filterQuery = JSON.stringify({
+    bool: {
+      must: [],
+      filter: [{ match_all: {} }, { match_phrase: { 'host.name': { query: 'host-1' } } }],
+      should: [],
+      must_not: [],
+    },
+  });
+
+  const componentProps: Record<string, Partial<HostDetailsTabsProps>> = {
+    events: { pageFilters: mockHostDetailsPageFilters },
+    alerts: { pageFilters: mockHostDetailsPageFilters },
   };
   const mount = useMountAppended();
 
@@ -59,7 +77,8 @@ describe('body', () => {
               hostDetailsPagePath={hostDetailsPagePath}
               indexPattern={mockIndexPattern}
               type={type}
-              filterQuery='{"bool":{"must":[],"filter":[{"match_all":{}},{"match_phrase":{"host.name":{"query":"host-1"}}}],"should":[],"must_not":[]}}'
+              pageFilters={mockHostDetailsPageFilters}
+              filterQuery={filterQuery}
             />
           </MemoryRouter>
         </TestProviders>
@@ -68,8 +87,7 @@ describe('body', () => {
       // match against everything but the functions to ensure they are there as expected
       expect(wrapper.find(componentName).props()).toMatchObject({
         endDate: 0,
-        filterQuery:
-          '{"bool":{"must":[],"filter":[{"match_all":{}},{"match_phrase":{"host.name":{"query":"host-1"}}}],"should":[],"must_not":[]}}',
+        filterQuery,
         skip: false,
         startDate: 0,
         type: 'details',
@@ -93,6 +111,7 @@ describe('body', () => {
           title: 'filebeat-*,auditbeat-*,packetbeat-*',
         },
         hostName: 'host-1',
+        ...(componentProps[path] != null ? componentProps[path] : []),
       });
     })
   );

x-pack/legacy/plugins/siem/public/pages/hosts/details/details_tabs.tsx

@@ -93,7 +93,7 @@ const HostDetailsTabs = React.memo<HostDetailsTabsProps>(
         />
         <Route
           path={`${hostDetailsPagePath}/:tabName(${HostsTableType.events})`}
-          render={() => <EventsQueryTabBody {...tabProps} />}
+          render={() => <EventsQueryTabBody {...tabProps} pageFilters={pageFilters} />}
         />
         <Route
           path={`${hostDetailsPagePath}/:tabName(${HostsTableType.alerts})`}

x-pack/legacy/plugins/siem/public/pages/hosts/details/helpers.test.ts

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { getHostDetailsEventsKqlQueryExpression } from './helpers';
+import { getHostDetailsEventsKqlQueryExpression, getHostDetailsPageFilters } from './helpers';
+import { esFilters } from '../../../../../../../../src/plugins/data/common/es_query';
 
 describe('hosts page helpers', () => {
   describe('getHostDetailsEventsKqlQueryExpression', () => {
@@ -35,4 +36,33 @@ describe('hosts page helpers', () => {
       ).toEqual('');
     });
   });
+
+  describe('getHostDetailsPageFilters', () => {
+    it('correctly constructs pageFilters for the given hostName', () => {
+      const expected: esFilters.Filter[] = [
+        {
+          meta: {
+            alias: null,
+            negate: false,
+            disabled: false,
+            type: 'phrase',
+            key: 'host.name',
+            value: 'host-1',
+            params: {
+              query: 'host-1',
+            },
+          },
+          query: {
+            match: {
+              'host.name': {
+                query: 'host-1',
+                type: 'phrase',
+              },
+            },
+          },
+        },
+      ];
+      expect(getHostDetailsPageFilters('host-1')).toEqual(expected);
+    });
+  });
 });

x-pack/legacy/plugins/siem/public/pages/hosts/details/helpers.ts

@@ -5,6 +5,7 @@
  */
 
 import { escapeQueryValue } from '../../../lib/keury';
+import { esFilters } from '../../../../../../../../src/plugins/data/common/es_query';
 
 /** Returns the kqlQueryExpression for the `Events` widget on the `Host Details` page */
 export const getHostDetailsEventsKqlQueryExpression = ({
@@ -22,3 +23,27 @@ export const getHostDetailsEventsKqlQueryExpression = ({
     return hostName.length ? `host.name: ${escapeQueryValue(hostName)}` : '';
   }
 };
+
+export const getHostDetailsPageFilters = (hostName: string): esFilters.Filter[] => [
+  {
+    meta: {
+      alias: null,
+      negate: false,
+      disabled: false,
+      type: 'phrase',
+      key: 'host.name',
+      value: hostName,
+      params: {
+        query: hostName,
+      },
+    },
+    query: {
+      match: {
+        'host.name': {
+          query: hostName,
+          type: 'phrase',
+        },
+      },
+    },
+  },
+];

x-pack/legacy/plugins/siem/public/pages/hosts/details/index.tsx

@@ -5,7 +5,7 @@
  */
 
 import { EuiHorizontalRule, EuiSpacer } from '@elastic/eui';
-import React, { useContext, useEffect, useCallback } from 'react';
+import React, { useContext, useEffect, useCallback, useMemo } from 'react';
 import { connect } from 'react-redux';
 import { StickyContainer } from 'react-sticky';
 import { compose } from 'redux';
@@ -41,6 +41,7 @@ import { HostDetailsTabs } from './details_tabs';
 import { navTabsHostDetails } from './nav_tabs';
 import { HostDetailsComponentProps, HostDetailsProps } from './types';
 import { type } from './utils';
+import { getHostDetailsPageFilters } from './helpers';
 
 const HostOverviewManage = manageQuery(HostOverview);
 const KpiHostDetailsManage = manageQuery(KpiHostsComponent);
@@ -64,29 +65,10 @@ const HostDetailsComponent = React.memo<HostDetailsComponentProps>(
     }, [setHostDetailsTablesActivePageToZero, detailName]);
     const capabilities = useContext(MlCapabilitiesContext);
     const kibana = useKibana();
-    const hostDetailsPageFilters: esFilters.Filter[] = [
-      {
-        meta: {
-          alias: null,
-          negate: false,
-          disabled: false,
-          type: 'phrase',
-          key: 'host.name',
-          value: detailName,
-          params: {
-            query: detailName,
-          },
-        },
-        query: {
-          match: {
-            'host.name': {
-              query: detailName,
-              type: 'phrase',
-            },
-          },
-        },
-      },
-    ];
+    const hostDetailsPageFilters: esFilters.Filter[] = useMemo(
+      () => getHostDetailsPageFilters(detailName),
+      [detailName]
+    );
     const getFilters = () => [...hostDetailsPageFilters, ...filters];
     const narrowDateRange = useCallback(
       (min: number, max: number) => {

x-pack/legacy/plugins/siem/public/pages/hosts/navigation/events_query_tab_body.tsx

@@ -36,6 +36,7 @@ export const EventsQueryTabBody = ({
   deleteQuery,
   endDate,
   filterQuery,
+  pageFilters,
   setQuery,
   skip,
   startDate,
@@ -73,6 +74,7 @@ export const EventsQueryTabBody = ({
         end={endDate}
         id={HOSTS_PAGE_TIMELINE_ID}
         start={startDate}
+        pageFilters={pageFilters}
       />
     </>
   );

x-pack/legacy/plugins/siem/public/pages/hosts/navigation/types.ts

@@ -47,6 +47,7 @@ export interface QueryTabBodyProps {
 export type HostsComponentsQueryProps = QueryTabBodyProps & {
   deleteQuery?: ({ id }: { id: string }) => void;
   indexPattern: IIndexPattern;
+  pageFilters?: esFilters.Filter[];
   skip: boolean;
   setQuery: SetQuery;
   updateDateRange?: UpdateDateRange;