[Cloud Security] Fix for issue where date is not retained when openin…

…g new tab (#205128) ## Summary This PR addresses the issue where when user opens new tab by clicking on popout icon on Alerts Data grid on Alerts preview Contextual flyout, the date from original tab is not retained, as such there are scenario where user don't see any alerts on new tab because its defaulted to today when the alerts only exist from view days ago https://github.com/user-attachments/assets/58a30d7d-18b3-47a8-ab4b-2ce143583368
elastic · Jan 3, 2025 · 32dbd14 · 32dbd14
1 parent 8902f70
commit 32dbd14
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 5 deletions.
diff --git a/...on/public/cloud_security_posture/components/csp_details/alerts_findings_details_table.tsx b/...on/public/cloud_security_posture/components/csp_details/alerts_findings_details_table.tsx
@@ -6,6 +6,7 @@
  */
 
 import React, { memo, useCallback, useEffect, useState } from 'react';
+import { encode } from '@kbn/rison';
 import { capitalize } from 'lodash';
 import type { Criteria, EuiBasicTableColumn, EuiTableSortingType } from '@elastic/eui';
 import { EuiSpacer, EuiPanel, EuiText, EuiBasicTable, EuiIcon, EuiLink } from '@elastic/eui';
@@ -26,6 +27,7 @@ import {
   OPEN_IN_ALERTS_TITLE_STATUS,
   OPEN_IN_ALERTS_TITLE_USERNAME,
 } from '../../../overview/components/detection_response/translations';
+import { URL_PARAM_KEY } from '../../../common/hooks/use_url_state';
 import { useNavigateToAlertsPageWithFilters } from '../../../common/hooks/use_navigate_to_alerts_page_with_filters';
 import { DocumentDetailsPreviewPanelKey } from '../../../flyout/document_details/shared/constants/panel_keys';
 import { useGlobalTime } from '../../../common/containers/use_global_time';
@@ -114,6 +116,16 @@ export const AlertsDetailsTable = memo(
     };
 
     const { to, from } = useGlobalTime();
+    const timerange = encode({
+      global: {
+        [URL_PARAM_KEY.timerange]: {
+          kind: 'absolute',
+          from,
+          to,
+        },
+      },
+    });
+
     const { signalIndexName } = useSignalIndex();
     const { data, setQuery } = useQueryAlerts({
       query: buildEntityAlertsQuery({
@@ -327,9 +339,10 @@ export const AlertsDetailsTable = memo(
               fieldName: 'kibana.alert.workflow_status',
             },
           ],
-          true
+          true,
+          timerange
         ),
-      [field, openAlertsPageWithFilters, value]
+      [field, openAlertsPageWithFilters, timerange, value]
     );
 
     return (

diff --git a/...ns/security_solution/public/common/hooks/use_navigate_to_alerts_page_with_filters.test.ts b/...ns/security_solution/public/common/hooks/use_navigate_to_alerts_page_with_filters.test.ts
@@ -80,4 +80,54 @@ describe('useNavigateToAlertsPageWithFilters', () => {
       expect.objectContaining({ deepLinkId: SecurityPageName.alerts })
     );
   });
+
+  it('navigates to alerts page in new tab', () => {
+    const filter = {
+      title: 'test filter',
+      selectedOptions: ['test value'],
+      fieldName: 'test field',
+      exclude: false,
+      existsSelected: false,
+    };
+    const openInNewTab = true;
+
+    const {
+      result: { current: navigateToAlertsPageWithFilters },
+    } = renderHook(() => useNavigateToAlertsPageWithFilters());
+
+    navigateToAlertsPageWithFilters(filter, openInNewTab);
+
+    expect(mockNavigateTo).toHaveBeenCalledWith({
+      deepLinkId: SecurityPageName.alerts,
+      path: "?pageFilters=!((exclude:!f,existsSelected:!f,fieldName:'test field',hideActionBar:!f,selectedOptions:!('test value'),title:'test filter'))",
+      openInNewTab: true,
+    });
+  });
+
+  it('navigates to alerts page with timerange', () => {
+    const filter = {
+      title: 'test filter',
+      selectedOptions: ['test value'],
+      fieldName: 'test field',
+      exclude: false,
+      existsSelected: false,
+    };
+
+    const timerange =
+      '(global:(timerange:(from:"2024-12-12T17:03:23.481Z",kind:absolute,to:"2025-01-04T07:59:59.999Z")))';
+
+    const openInNewTab = true;
+
+    const {
+      result: { current: navigateToAlertsPageWithFilters },
+    } = renderHook(() => useNavigateToAlertsPageWithFilters());
+
+    navigateToAlertsPageWithFilters(filter, openInNewTab, timerange);
+
+    expect(mockNavigateTo).toHaveBeenCalledWith({
+      deepLinkId: SecurityPageName.alerts,
+      path: `?pageFilters=!((exclude:!f,existsSelected:!f,fieldName:'test field',hideActionBar:!f,selectedOptions:!('test value'),title:'test filter'))&timerange=(global:(timerange:(from:"2024-12-12T17:03:23.481Z",kind:absolute,to:"2025-01-04T07:59:59.999Z")))`,
+      openInNewTab: true,
+    });
+  });
 });
diff --git a/...plugins/security_solution/public/common/hooks/use_navigate_to_alerts_page_with_filters.ts b/...plugins/security_solution/public/common/hooks/use_navigate_to_alerts_page_with_filters.ts
@@ -16,14 +16,27 @@ import { URL_PARAM_KEY } from './use_url_state';
 export const useNavigateToAlertsPageWithFilters = () => {
   const { navigateTo } = useNavigation();
 
-  return (filterItems: FilterControlConfig | FilterControlConfig[], openInNewTab = false) => {
+  return (
+    /**
+     * Pass one or more filter control configurations to be applied to the alerts page filters
+     */
+    filterItems: FilterControlConfig | FilterControlConfig[],
+    /**
+     * If true, the alerts page will be opened in a new tab
+     */
+    openInNewTab = false,
+    /**
+     * Allows to customize the timerange url parameter. Should only be used in combination with the openInNewTab=true parameter
+     */
+    timerange?: string
+  ) => {
     const urlFilterParams = encode(
       formatPageFilterSearchParam(Array.isArray(filterItems) ? filterItems : [filterItems])
     );
-
+    const timerangePath = timerange ? `&timerange=${timerange}` : '';
     navigateTo({
       deepLinkId: SecurityPageName.alerts,
-      path: `?${URL_PARAM_KEY.pageFilter}=${urlFilterParams}`,
+      path: `?${URL_PARAM_KEY.pageFilter}=${urlFilterParams}${timerangePath}`,
       openInNewTab,
     });
   };