[Bugfix / Incident Management] Set proximal filter to true only when indicated (#225461)

Resolves #225460

Addresses an issue where the related alerts by timestamp filter is
applied without user request


https://github.com/user-attachments/assets/b911295e-0748-4a8d-a365-f2af06855d72

Author: baileycash-elastic

x-pack/solutions/observability/plugins/observability/public/pages/alert_details/alert_details.tsx

@@ -37,7 +37,7 @@ import { css } from '@emotion/react';
 import { omit } from 'lodash';
 import { usePageReady } from '@kbn/ebt-tools';
 import { RelatedAlerts } from './components/related_alerts/related_alerts';
-import { AlertDetailsSource } from './types';
+import { AlertDetailsSource, TAB_IDS, TabId } from './types';
 import { SourceBar } from './components';
 import { InvestigationGuide } from './components/investigation_guide';
 import { StatusBar } from './components/status_bar';
@@ -77,16 +77,6 @@ export const LOG_DOCUMENT_COUNT_RULE_TYPE_ID = 'logs.alert.document.count';
 export const METRIC_THRESHOLD_ALERT_TYPE_ID = 'metrics.alert.threshold';
 export const METRIC_INVENTORY_THRESHOLD_ALERT_TYPE_ID = 'metrics.alert.inventory.threshold';
 
-const TAB_IDS = [
-  'overview',
-  'metadata',
-  'related_alerts',
-  'investigation_guide',
-  'related_dashboards',
-] as const;
-
-type TabId = (typeof TAB_IDS)[number];
-
 const isTabId = (value: string): value is TabId => {
   return Object.values<string>(TAB_IDS).includes(value);
 };
@@ -137,13 +127,11 @@ export function AlertDetails() {
   const [sources, setSources] = useState<AlertDetailsSource[]>();
   const [activeTabId, setActiveTabId] = useState<TabId>();
 
-  const handleSetTabId = async (tabId: TabId) => {
+  const handleSetTabId = async (tabId: TabId, newUrlState?: Record<string, string>) => {
     setActiveTabId(tabId);
 
-    if (tabId === 'related_alerts') {
-      setUrlTabId(tabId, true, {
-        filterProximal: 'true',
-      });
+    if (newUrlState) {
+      setUrlTabId(tabId, true, newUrlState);
     } else {
       setUrlTabId(tabId, true);
     }
@@ -199,7 +187,9 @@ export function AlertDetails() {
   }, []);
 
   const showRelatedAlertsFromCallout = () => {
-    handleSetTabId('related_alerts');
+    handleSetTabId('related_alerts', {
+      filterProximal: 'true',
+    });
   };
 
   usePageReady({

x-pack/solutions/observability/plugins/observability/public/pages/alert_details/hooks/use_tab_id.ts

@@ -6,6 +6,7 @@
  */
 
 import { useHistory, useLocation } from 'react-router-dom';
+import { TabId } from '../types';
 
 const ALERT_DETAILS_TAB_URL_STORAGE_KEY = 'tabId';
 
@@ -19,7 +20,7 @@ export const useTabId = () => {
   };
 
   const setUrlTabId = (
-    tabId: string,
+    tabId: TabId,
     overrideSearchState?: boolean,
     newSearchState?: Record<string, string>
   ) => {

x-pack/solutions/observability/plugins/observability/public/pages/alert_details/types.ts

@@ -15,3 +15,13 @@ export interface AlertDetailsSource {
 export interface AlertDetailsAppSectionProps {
   setSources: React.Dispatch<React.SetStateAction<AlertDetailsSource[] | undefined>>;
 }
+
+export const TAB_IDS = [
+  'overview',
+  'metadata',
+  'related_alerts',
+  'investigation_guide',
+  'related_dashboards',
+] as const;
+
+export type TabId = (typeof TAB_IDS)[number];