diff --git a/x-pack/solutions/observability/plugins/observability/public/pages/alert_details/alert_details.tsx b/x-pack/solutions/observability/plugins/observability/public/pages/alert_details/alert_details.tsx index 3e0929a55fbf..38aeb79d3e26 100644 --- a/x-pack/solutions/observability/plugins/observability/public/pages/alert_details/alert_details.tsx +++ b/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(TAB_IDS).includes(value); }; @@ -137,13 +127,11 @@ export function AlertDetails() { const [sources, setSources] = useState(); const [activeTabId, setActiveTabId] = useState(); - const handleSetTabId = async (tabId: TabId) => { + const handleSetTabId = async (tabId: TabId, newUrlState?: Record) => { 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({ diff --git a/x-pack/solutions/observability/plugins/observability/public/pages/alert_details/hooks/use_tab_id.ts b/x-pack/solutions/observability/plugins/observability/public/pages/alert_details/hooks/use_tab_id.ts index f0f004ddb689..093f548b534d 100644 --- a/x-pack/solutions/observability/plugins/observability/public/pages/alert_details/hooks/use_tab_id.ts +++ b/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 ) => { diff --git a/x-pack/solutions/observability/plugins/observability/public/pages/alert_details/types.ts b/x-pack/solutions/observability/plugins/observability/public/pages/alert_details/types.ts index 8e3fd620360c..7c18e6df9944 100644 --- a/x-pack/solutions/observability/plugins/observability/public/pages/alert_details/types.ts +++ b/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>; } + +export const TAB_IDS = [ + 'overview', + 'metadata', + 'related_alerts', + 'investigation_guide', + 'related_dashboards', +] as const; + +export type TabId = (typeof TAB_IDS)[number];