fix(api): guard deprecated generated-API handler against non-envelope bodies

Guard ErrorResponseHandlerForGeneratedAPIs like ErrorResponseHandlerV2: when
response.data has no error object (gateway 5xx with HTML/empty body during a
deploy), synthesize an UPSTREAM_UNAVAILABLE APIError instead of throwing on
response.data.error.code. A present error object (even without a code) is
still read, so real backend messages are preserved.

toAPIError now treats UPSTREAM_UNAVAILABLE (no backend code found) as 'could
not parse' and falls back to the caller's context-specific defaultMessage,
preserving the ServiceAccount/Roles error UX that previously relied on the
handler crashing.

Part of https://github.com/SigNoz/engineering-pod/issues/5761

frontend/package.json

@@ -89,7 +89,7 @@
     "lodash-es": "^4.17.21",
     "motion": "12.4.13",
     "nuqs": "2.8.8",
-    "overlayscrollbars": "^2.16.0",
+    "overlayscrollbars": "^2.8.1",
     "overlayscrollbars-react": "^0.5.6",
     "papaparse": "5.4.1",
     "posthog-js": "1.298.0",
@@ -221,18 +221,5 @@
     "*.(scss|css)": [
       "stylelint"
     ]
-  },
-  "overrides": {
-    "@babel/core@<=7.29.0": ">=7.29.6 <8",
-    "@istanbuljs/load-nyc-config>js-yaml": ">=4.2.0 <5",
-    "cookie@<0.7.0": ">=0.7.1 <1",
-    "dompurify@<=3.4.10": ">=3.4.11 <4",
-    "esbuild@>=0.27.3 <0.28.1": ">=0.28.1 <0.29.0",
-    "js-cookie@<=3.0.5": ">=3.0.7 <4",
-    "js-yaml@>=4.0.0 <=4.1.1": ">=4.2.0 <5",
-    "prismjs@<1.30.0": ">=1.30.0 <2",
-    "react-router@>=6.7.0 <6.30.4": ">=6.30.4 <7",
-    "tmp@<0.2.6": ">=0.2.6 <0.3.0",
-    "yaml@>=1.0.0 <1.10.3": ">=1.10.3 <2"
   }
-}
+}

frontend/pnpm-lock.yaml

@@ -187,11 +187,11 @@ importers:
         specifier: 2.8.8
         version: 2.8.8(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.4(react@18.2.0))(react@18.2.0)
       overlayscrollbars:
-        specifier: ^2.16.0
-        version: 2.16.0
+        specifier: ^2.8.1
+        version: 2.9.2
       overlayscrollbars-react:
         specifier: ^0.5.6
-        version: 0.5.6(overlayscrollbars@2.16.0)(react@18.2.0)
+        version: 0.5.6(overlayscrollbars@2.9.2)(react@18.2.0)
       papaparse:
         specifier: 5.4.1
         version: 5.4.1
@@ -6941,8 +6941,8 @@ packages:
       overlayscrollbars: ^2.0.0
       react: '>=16.8.0'
 
-  overlayscrollbars@2.16.0:
-    resolution: {integrity: sha512-N03oje/q7j93D0aLZtoCdsDSYLmhheSsv8H7oSLE7HhdV9P/bmCURtLV/KbPye7P/bpfyt/obSfDpGUYoJ0OWg==}
+  overlayscrollbars@2.9.2:
+    resolution: {integrity: sha512-iDT84r39i7oWP72diZN2mbJUsn/taCq568aQaIrc84S87PunBT7qtsVltAF2esk7ORTRjQDnfjVYoqqTzgs8QA==}
 
   oxfmt@0.54.0:
     resolution: {integrity: sha512-DjnMwn7smSLF+Mc2+pRItnuPftm/dkUFpY/d4+33y9TfKrsHZo8GLhmUg9BrOIUEy94Rlom1Q11N6vuhE+e0oQ==}
@@ -16456,12 +16456,12 @@ snapshots:
 
   outvariant@1.4.0: {}
 
-  overlayscrollbars-react@0.5.6(overlayscrollbars@2.16.0)(react@18.2.0):
+  overlayscrollbars-react@0.5.6(overlayscrollbars@2.9.2)(react@18.2.0):
     dependencies:
-      overlayscrollbars: 2.16.0
+      overlayscrollbars: 2.9.2
       react: 18.2.0
 
-  overlayscrollbars@2.16.0: {}
+  overlayscrollbars@2.9.2: {}
 
   oxfmt@0.54.0:
     dependencies:

frontend/src/__tests__/fields_api.util.ts

@@ -1,20 +0,0 @@
-import { ENVIRONMENT } from 'constants/env';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-
-export function mockFieldsAPIsWithEmptyResponse(): void {
-	server.use(
-		rest.get(`${ENVIRONMENT.baseURL}/api/v1/fields/keys`, (_, res, ctx) =>
-			res(
-				ctx.status(200),
-				ctx.json({ status: 'success', data: { keys: {}, complete: true } }),
-			),
-		),
-		rest.get(`${ENVIRONMENT.baseURL}/api/v1/fields/values`, (_, res, ctx) =>
-			res(
-				ctx.status(200),
-				ctx.json({ status: 'success', data: { values: {}, complete: true } }),
-			),
-		),
-	);
-}

frontend/src/api/ErrorResponseHandlerForGeneratedAPIs.ts

@@ -2,6 +2,29 @@ import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import APIError from 'types/api/error';
 
+// The wire shape these handlers can actually rely on. The generated
+// RenderErrorResponseDTO marks code/message/url/errors as required, but the
+// server omits any of them even on valid errors (e.g. a 400 with just a
+// message), so a present `error` object is all the guard can guarantee.
+type ErrorEnvelope = {
+	error: {
+		code?: string;
+		message?: string;
+		url?: string;
+		errors?: { message?: string }[];
+	};
+};
+
+function isErrorEnvelope(data: unknown): data is ErrorEnvelope {
+	return (
+		typeof data === 'object' &&
+		data !== null &&
+		'error' in data &&
+		typeof (data as ErrorEnvelope).error === 'object' &&
+		(data as ErrorEnvelope).error !== null
+	);
+}
+
 // @deprecated Use convertToApiError instead
 export function ErrorResponseHandlerForGeneratedAPIs(
 	error: AxiosError<RenderErrorResponseDTO>,
@@ -10,15 +33,29 @@ export function ErrorResponseHandlerForGeneratedAPIs(
 	// The request was made and the server responded with a status code
 	// that falls out of the range of 2xx
 	if (response) {
+		// The body isn't guaranteed to be an error envelope — e.g. a gateway 5xx
+		// with an HTML/empty body during a deploy. Verify the shape before reading
+		// it; otherwise synthesize a consistent error from the status.
+		const data: unknown = response.data;
+		if (isErrorEnvelope(data)) {
+			const { code, message, url, errors } = data.error;
+			throw new APIError({
+				httpStatusCode: response.status || 500,
+				error: {
+					code: code ?? '',
+					message: message ?? '',
+					url: url ?? '',
+					errors: (errors ?? []).map((e) => ({ message: e.message ?? '' })),
+				},
+			});
+		}
 		throw new APIError({
 			httpStatusCode: response.status || 500,
 			error: {
-				code: response.data.error.code,
-				message: response.data.error.message,
-				url: response.data.error.url ?? '',
-				errors: (response.data.error.errors ?? []).map((e) => ({
-					message: e.message ?? '',
-				})),
+				code: 'UPSTREAM_UNAVAILABLE',
+				message: error.message || 'Something went wrong',
+				url: '',
+				errors: [],
 			},
 		});
 	}
@@ -62,9 +99,7 @@ export function convertToApiError(
 	return new APIError({
 		httpStatusCode: response?.status || error.status || 500,
 		error: {
-			code:
-				errorData?.code ||
-				String(response?.status || error.code || 'unknown_error'),
+			code: errorData?.code || 'UPSTREAM_UNAVAILABLE',
 			message:
 				errorData?.message ||
 				response?.statusText ||

frontend/src/api/ErrorResponseHandlerV2.ts

@@ -2,19 +2,38 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp } from 'types/api';
 import APIError from 'types/api/error';
 
+function isErrorV2Resp(data: unknown): data is ErrorV2Resp {
+	return (
+		typeof data === 'object' &&
+		data !== null &&
+		'error' in data &&
+		typeof (data as ErrorV2Resp).error?.code === 'string'
+	);
+}
+
 // reference - https://axios-http.com/docs/handling_errors
 export function ErrorResponseHandlerV2(error: AxiosError<ErrorV2Resp>): never {
 	const { response, request } = error;
 	// The request was made and the server responded with a status code
 	// that falls out of the range of 2xx
 	if (response) {
+		// response.data isn't guaranteed to be a V2 envelope (e.g. a gateway 5xx
+		// with an HTML/empty body during a deploy), so verify the shape first.
+		const data: unknown = response.data;
+		if (isErrorV2Resp(data)) {
+			const { code, message, url, errors } = data.error;
+			throw new APIError({
+				httpStatusCode: response.status || 500,
+				error: { code, message, url, errors },
+			});
+		}
 		throw new APIError({
 			httpStatusCode: response.status || 500,
 			error: {
-				code: response.data.error.code,
-				message: response.data.error.message,
-				url: response.data.error.url,
-				errors: response.data.error.errors,
+				code: 'UPSTREAM_UNAVAILABLE',
+				message: error.message || 'Something went wrong',
+				url: '',
+				errors: [],
 			},
 		});
 	}

frontend/src/api/__tests__/ErrorResponseHandlerV2.test.ts

@@ -0,0 +1,126 @@
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp } from 'types/api';
+import APIError from 'types/api/error';
+
+function asAxiosError(partial: Partial<AxiosError>): AxiosError<ErrorV2Resp> {
+	return partial as AxiosError<ErrorV2Resp>;
+}
+
+// ErrorResponseHandlerV2 always throws — capture the APIError so assertions stay
+// unconditional.
+function runHandler(error: AxiosError<ErrorV2Resp>): APIError {
+	try {
+		ErrorResponseHandlerV2(error);
+	} catch (thrown) {
+		return thrown as APIError;
+	}
+	throw new Error('expected ErrorResponseHandlerV2 to throw');
+}
+
+type ExpectedError = {
+	httpStatusCode: number;
+	code: string;
+	message: string;
+	errors: { message: string }[];
+};
+
+// One row per response shape the handler must normalize. New shapes (with
+// different bodies) can be added here without a new test block.
+const cases: {
+	name: string;
+	error: AxiosError<ErrorV2Resp>;
+	expected: ExpectedError;
+}[] = [
+	{
+		name: 'well-formed V2 error envelope',
+		error: asAxiosError({
+			message: 'Request failed with status code 400',
+			response: {
+				status: 400,
+				data: {
+					error: {
+						code: 'bad_request',
+						message: 'Invalid dashboard payload',
+						url: 'https://signoz.io/docs',
+						errors: [{ message: 'name is required' }, { message: 'name too long' }],
+					},
+				},
+			} as AxiosError['response'],
+		}),
+		expected: {
+			httpStatusCode: 400,
+			code: 'bad_request',
+			message: 'Invalid dashboard payload',
+			errors: [{ message: 'name is required' }, { message: 'name too long' }],
+		},
+	},
+	{
+		// Regression: during a deployment the gateway returns a 5xx with a
+		// non-envelope body. Reading response.data.error.code used to throw a
+		// TypeError from inside the handler itself. See engineering-pod#5760.
+		name: '5xx with a non-envelope HTML body',
+		error: asAxiosError({
+			message: 'Request failed with status code 503',
+			response: {
+				status: 503,
+				data: '<html><body>503 Service Temporarily Unavailable</body></html>',
+			} as AxiosError['response'],
+		}),
+		expected: {
+			httpStatusCode: 503,
+			code: 'UPSTREAM_UNAVAILABLE',
+			message: 'Request failed with status code 503',
+			errors: [],
+		},
+	},
+	{
+		name: '5xx with an empty body',
+		error: asAxiosError({
+			message: 'Request failed with status code 502',
+			response: {
+				status: 502,
+				data: undefined,
+			} as AxiosError['response'],
+		}),
+		expected: {
+			httpStatusCode: 502,
+			code: 'UPSTREAM_UNAVAILABLE',
+			message: 'Request failed with status code 502',
+			errors: [],
+		},
+	},
+	{
+		name: 'no response received (network error)',
+		error: asAxiosError({
+			message: 'Network Error',
+			code: 'ERR_NETWORK',
+			name: 'AxiosError',
+			request: {},
+		}),
+		expected: {
+			httpStatusCode: 500,
+			code: 'ERR_NETWORK',
+			message: 'Network Error',
+			errors: [],
+		},
+	},
+];
+
+describe('ErrorResponseHandlerV2', () => {
+	it.each(cases)(
+		'normalizes $name into a consistent APIError',
+		({ error, expected }) => {
+			const apiError = runHandler(error);
+
+			expect(apiError).toBeInstanceOf(APIError);
+			expect(apiError.getHttpStatusCode()).toBe(expected.httpStatusCode);
+			expect(apiError.getErrorCode()).toBe(expected.code);
+			expect(apiError.getErrorMessage()).toBe(expected.message);
+			// The sub-error messages feed several parts of the UI, so assert them.
+			expect(apiError.getErrorDetails().error.errors).toStrictEqual(
+				expected.errors,
+			);
+		},
+	);
+});

frontend/src/api/alerts/ruleStats.ts

@@ -0,0 +1,28 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { AlertRuleStatsPayload } from 'types/api/alerts/def';
+import { RuleStatsProps } from 'types/api/alerts/ruleStats';
+
+const ruleStats = async (
+	props: RuleStatsProps,
+): Promise<SuccessResponse<AlertRuleStatsPayload> | ErrorResponse> => {
+	try {
+		const response = await axios.post(`/rules/${props.id}/history/stats`, {
+			start: props.start,
+			end: props.end,
+		});
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default ruleStats;

frontend/src/api/alerts/timelineGraph.ts

@@ -0,0 +1,33 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { AlertRuleTimelineGraphResponsePayload } from 'types/api/alerts/def';
+import { GetTimelineGraphRequestProps } from 'types/api/alerts/timelineGraph';
+
+const timelineGraph = async (
+	props: GetTimelineGraphRequestProps,
+): Promise<
+	SuccessResponse<AlertRuleTimelineGraphResponsePayload> | ErrorResponse
+> => {
+	try {
+		const response = await axios.post(
+			`/rules/${props.id}/history/overall_status`,
+			{
+				start: props.start,
+				end: props.end,
+			},
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default timelineGraph;

frontend/src/api/alerts/timelineTable.ts

@@ -0,0 +1,36 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { AlertRuleTimelineTableResponsePayload } from 'types/api/alerts/def';
+import { GetTimelineTableRequestProps } from 'types/api/alerts/timelineTable';
+
+const timelineTable = async (
+	props: GetTimelineTableRequestProps,
+): Promise<
+	SuccessResponse<AlertRuleTimelineTableResponsePayload> | ErrorResponse
+> => {
+	try {
+		const response = await axios.post(`/rules/${props.id}/history/timeline`, {
+			start: props.start,
+			end: props.end,
+			offset: props.offset,
+			limit: props.limit,
+			order: props.order,
+			state: props.state,
+			// TODO(shaheer): implement filters
+			filters: props.filters,
+		});
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default timelineTable;

frontend/src/api/alerts/topContributors.ts

@@ -0,0 +1,33 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { AlertRuleTopContributorsPayload } from 'types/api/alerts/def';
+import { TopContributorsProps } from 'types/api/alerts/topContributors';
+
+const topContributors = async (
+	props: TopContributorsProps,
+): Promise<
+	SuccessResponse<AlertRuleTopContributorsPayload> | ErrorResponse
+> => {
+	try {
+		const response = await axios.post(
+			`/rules/${props.id}/history/top_contributors`,
+			{
+				start: props.start,
+				end: props.end,
+			},
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default topContributors;

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -96,15 +96,6 @@ interface QuerySearchProps {
 	showFilterSuggestionsWithoutMetric?: boolean;
 	/** When set, the editor shows only the user expression; API/filter uses `initial AND (user)`. */
 	initialExpression?: string;
-	/** When set, replaces the generic value-suggestion API with a custom fetcher. */
-	valueSuggestionsOverride?: (
-		key: string,
-		searchText: string,
-	) => Promise<{
-		stringValues: string[];
-		numberValues: number[];
-		complete: boolean;
-	}>;
 }
 
 function QuerySearch({
@@ -118,7 +109,6 @@ function QuerySearch({
 	showFilterSuggestionsWithoutMetric,
 	initialExpression,
 	metricNamespace,
-	valueSuggestionsOverride,
 }: QuerySearchProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const [valueSuggestions, setValueSuggestions] = useState<any[]>([]);
@@ -476,24 +466,13 @@ function QuerySearch({
 			const sanitizedSearchText = searchText ? searchText?.trim() : '';
 
 			try {
-				const values = valueSuggestionsOverride
-					? await valueSuggestionsOverride(key, sanitizedSearchText)
-					: await getValueSuggestions({
-							key,
-							searchText: sanitizedSearchText,
-							signal: dataSource,
-							signalSource: signalSource as 'meter' | '',
-							metricName: debouncedMetricName ?? undefined,
-						}).then((response) => {
-							const responseData = response.data as any;
-							const data = responseData.data || {};
-							const values = data.values || {};
-							return {
-								stringValues: values.stringValues || [],
-								numberValues: values.numberValues || [],
-								complete: data.complete ?? false,
-							};
-						});
+				const response = await getValueSuggestions({
+					key,
+					searchText: sanitizedSearchText,
+					signal: dataSource,
+					signalSource: signalSource as 'meter' | '',
+					metricName: debouncedMetricName ?? undefined,
+				});
 
 				// Skip updates if component unmounted or key changed
 				if (
@@ -505,6 +484,8 @@ function QuerySearch({
 				}
 
 				// Process the response data
+				const responseData = response.data as any;
+				const values = responseData.data?.values || {};
 				const stringValues = values.stringValues || [];
 				const numberValues = values.numberValues || [];
 
@@ -585,7 +566,6 @@ function QuerySearch({
 			debouncedMetricName,
 			signalSource,
 			toggleSuggestions,
-			valueSuggestionsOverride,
 		],
 	);
 

frontend/src/constants/reactQueryKeys.ts

@@ -20,6 +20,10 @@ export const REACT_QUERY_KEY = {
 	DELETE_DASHBOARD: 'DELETE_DASHBOARD',
 	LOGS_PIPELINE_PREVIEW: 'LOGS_PIPELINE_PREVIEW',
 	ALERT_RULE_DETAILS: 'ALERT_RULE_DETAILS',
+	ALERT_RULE_STATS: 'ALERT_RULE_STATS',
+	ALERT_RULE_TOP_CONTRIBUTORS: 'ALERT_RULE_TOP_CONTRIBUTORS',
+	ALERT_RULE_TIMELINE_TABLE: 'ALERT_RULE_TIMELINE_TABLE',
+	ALERT_RULE_TIMELINE_GRAPH: 'ALERT_RULE_TIMELINE_GRAPH',
 	GET_CONSUMER_LAG_DETAILS: 'GET_CONSUMER_LAG_DETAILS',
 	TOGGLE_ALERT_STATE: 'TOGGLE_ALERT_STATE',
 	GET_ALL_ALERTS: 'GET_ALL_ALERTS',

frontend/src/container/AlertHistory/Statistics/StatsCardsRenderer/StatsCardsRenderer.tsx

@@ -1,7 +1,6 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 import { useGetAlertRuleDetailsStats } from 'pages/AlertDetails/hooks';
 import DataStateRenderer from 'periscope/components/DataStateRenderer/DataStateRenderer';
-import { StatsTimeSeriesItem } from 'types/api/alerts/def';
 
 import AverageResolutionCard from '../AverageResolutionCard/AverageResolutionCard';
 import StatsCard from '../StatsCard/StatsCard';
@@ -26,59 +25,24 @@ type StatsCardsRendererProps = {
 };
 
 // TODO(shaheer): render the DataStateRenderer inside the TotalTriggeredCard/AverageResolutionCard, it should display the title
-type AdaptedStatsData = {
-	totalCurrentTriggers: number;
-	totalPastTriggers: number;
-	currentAvgResolutionTime: string;
-	pastAvgResolutionTime: string;
-	currentTriggersSeries: StatsTimeSeriesItem[];
-	currentAvgResolutionTimeSeries: StatsTimeSeriesItem[];
-};
-
 function StatsCardsRenderer({
 	setTotalCurrentTriggers,
 }: StatsCardsRendererProps): JSX.Element {
 	const { isLoading, isRefetching, isError, data, isValidRuleId, ruleId } =
 		useGetAlertRuleDetailsStats();
 
-	const adaptedData = useMemo((): AdaptedStatsData | null => {
-		if (!data?.data) {
-			return null;
-		}
-		const statsData = data.data;
-
-		const adaptTimeSeries = (
-			series: typeof statsData.currentTriggersSeries,
-		): StatsTimeSeriesItem[] =>
-			series?.values?.map((item) => ({
-				timestamp: item.timestamp ?? 0,
-				value: String(item.value ?? 0),
-			})) ?? [];
-
-		return {
-			totalCurrentTriggers: statsData.totalCurrentTriggers,
-			totalPastTriggers: statsData.totalPastTriggers,
-			currentAvgResolutionTime: String(statsData.currentAvgResolutionTime),
-			pastAvgResolutionTime: String(statsData.pastAvgResolutionTime),
-			currentTriggersSeries: adaptTimeSeries(statsData.currentTriggersSeries),
-			currentAvgResolutionTimeSeries: adaptTimeSeries(
-				statsData.currentAvgResolutionTimeSeries,
-			),
-		};
-	}, [data?.data]);
-
 	useEffect(() => {
-		if (adaptedData?.totalCurrentTriggers !== undefined) {
-			setTotalCurrentTriggers(adaptedData.totalCurrentTriggers);
+		if (data?.payload?.data?.totalCurrentTriggers !== undefined) {
+			setTotalCurrentTriggers(data.payload.data.totalCurrentTriggers);
 		}
-	}, [adaptedData, setTotalCurrentTriggers]);
+	}, [data, setTotalCurrentTriggers]);
 
 	return (
 		<DataStateRenderer
 			isLoading={isLoading}
 			isRefetching={isRefetching}
 			isError={isError || !isValidRuleId || !ruleId}
-			data={adaptedData}
+			data={data?.payload?.data || null}
 		>
 			{(data): JSX.Element => {
 				const {
@@ -96,7 +60,7 @@ function StatsCardsRenderer({
 							<TotalTriggeredCard
 								totalCurrentTriggers={totalCurrentTriggers}
 								totalPastTriggers={totalPastTriggers}
-								timeSeries={currentTriggersSeries}
+								timeSeries={currentTriggersSeries?.values}
 							/>
 						) : (
 							<StatsCard
@@ -113,7 +77,7 @@ function StatsCardsRenderer({
 							<AverageResolutionCard
 								currentAvgResolutionTime={currentAvgResolutionTime}
 								pastAvgResolutionTime={pastAvgResolutionTime}
-								timeSeries={currentAvgResolutionTimeSeries}
+								timeSeries={currentAvgResolutionTimeSeries?.values}
 							/>
 						) : (
 							<StatsCard

frontend/src/container/AlertHistory/Statistics/TopContributorsRenderer/TopContributorsRenderer.tsx

@@ -1,8 +1,6 @@
-import { useMemo } from 'react';
 import { useGetAlertRuleDetailsTopContributors } from 'pages/AlertDetails/hooks';
-import { labelsArrayToObject } from 'container/AlertHistory/utils/labelAdapters';
 import DataStateRenderer from 'periscope/components/DataStateRenderer/DataStateRenderer';
-import { AlertRuleStats, AlertRuleTopContributors } from 'types/api/alerts/def';
+import { AlertRuleStats } from 'types/api/alerts/def';
 
 import TopContributorsCard from '../TopContributorsCard/TopContributorsCard';
 
@@ -15,27 +13,15 @@ function TopContributorsRenderer({
 }: TopContributorsRendererProps): JSX.Element {
 	const { isLoading, isRefetching, isError, data, isValidRuleId, ruleId } =
 		useGetAlertRuleDetailsTopContributors();
+	const response = data?.payload?.data;
 
 	// TODO(shaheer): render the DataStateRenderer inside the TopContributorsCard, it should display the title and view all
-	const adaptedData = useMemo((): AlertRuleTopContributors[] | null => {
-		if (!data?.data) {
-			return null;
-		}
-		return data.data.map((contributor) => ({
-			fingerprint: contributor.fingerprint,
-			count: contributor.count,
-			labels: labelsArrayToObject(contributor.labels),
-			relatedLogsLink: contributor.relatedLogsLink ?? '',
-			relatedTracesLink: contributor.relatedTracesLink ?? '',
-		}));
-	}, [data?.data]);
-
 	return (
 		<DataStateRenderer
 			isLoading={isLoading}
 			isRefetching={isRefetching}
 			isError={isError || !isValidRuleId || !ruleId}
-			data={adaptedData}
+			data={response || null}
 		>
 			{(topContributorsData): JSX.Element => (
 				<TopContributorsCard

frontend/src/container/AlertHistory/Timeline/Graph/constants.ts

@@ -1,17 +1,11 @@
 import { Color } from '@signozhq/design-tokens';
-import { RuletypesAlertStateDTO } from 'api/generated/services/sigNoz.schemas';
 
-export const ALERT_STATUS: Record<RuletypesAlertStateDTO, number> & {
-	[key: string]: number;
-} = {
-	[RuletypesAlertStateDTO.firing]: 0,
-	[RuletypesAlertStateDTO.inactive]: 1,
+export const ALERT_STATUS: { [key: string]: number } = {
+	firing: 0,
+	inactive: 1,
 	normal: 1,
-	[RuletypesAlertStateDTO.pending]: 1,
-	[RuletypesAlertStateDTO.recovering]: 1,
 	'no-data': 2,
-	[RuletypesAlertStateDTO.nodata]: 2,
-	[RuletypesAlertStateDTO.disabled]: 3,
+	disabled: 3,
 	muted: 4,
 };
 

frontend/src/container/AlertHistory/Timeline/GraphWrapper/GraphWrapper.tsx

@@ -1,8 +1,6 @@
-import { useMemo } from 'react';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { useGetAlertRuleDetailsTimelineGraphData } from 'pages/AlertDetails/hooks';
 import DataStateRenderer from 'periscope/components/DataStateRenderer/DataStateRenderer';
-import { AlertRuleTimelineGraphResponse } from 'types/api/alerts/def';
 
 import Graph from '../Graph/Graph';
 
@@ -20,16 +18,26 @@ function GraphWrapper({
 	const { isLoading, isRefetching, isError, data, isValidRuleId, ruleId } =
 		useGetAlertRuleDetailsTimelineGraphData();
 
-	const adaptedData = useMemo((): AlertRuleTimelineGraphResponse[] | null => {
-		if (!data?.data) {
-			return null;
-		}
-		return data.data.map((item) => ({
-			start: item.start,
-			end: item.end,
-			state: item.state as AlertRuleTimelineGraphResponse['state'],
-		}));
-	}, [data?.data]);
+	// TODO(shaheer): uncomment when the API is ready for
+	// const { startTime } = useAlertHistoryQueryParams();
+
+	// const [isVerticalGraph, setIsVerticalGraph] = useState(false);
+
+	// useEffect(() => {
+	// 	const checkVerticalGraph = (): void => {
+	// 		if (startTime) {
+	// 			const startTimeDate = dayjs(Number(startTime));
+	// 			const twentyFourHoursAgo = dayjs().subtract(
+	// 				HORIZONTAL_GRAPH_HOURS_THRESHOLD,
+	// 				DAYJS_MANIPULATE_TYPES.HOUR,
+	// 			);
+
+	// 			setIsVerticalGraph(startTimeDate.isBefore(twentyFourHoursAgo));
+	// 		}
+	// 	};
+
+	// 	checkVerticalGraph();
+	// }, [startTime]);
 
 	return (
 		<div className="timeline-graph">
@@ -41,7 +49,7 @@ function GraphWrapper({
 					isLoading={isLoading}
 					isError={isError || !isValidRuleId || !ruleId}
 					isRefetching={isRefetching}
-					data={adaptedData}
+					data={data?.payload?.data || null}
 				>
 					{(data): JSX.Element => <Graph type="horizontal" data={data} />}
 				</DataStateRenderer>

frontend/src/container/AlertHistory/Timeline/Table/Table.styles.scss

@@ -4,22 +4,6 @@
 	overflow: hidden;
 	margin-top: 4px;
 	min-height: 600px;
-
-	&__filter {
-		padding: 12px 16px;
-		background: var(--l1-background);
-		border-bottom: 1px solid var(--l1-border);
-	}
-
-	&__filter-row {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-	}
-
-	&__filter-search {
-		flex: 1;
-	}
 	.ant-table {
 		background: var(--l1-background);
 		&-cell {
@@ -39,9 +23,6 @@
 		&-tbody > tr > td {
 			border: none;
 		}
-		&-footer {
-			background-color: var(--l1-background);
-		}
 	}
 
 	.label-filter {
@@ -105,38 +86,4 @@
 			background: var(--l2-background);
 		}
 	}
-
-	&__error {
-		display: flex;
-		align-self: flex-start;
-		justify-content: flex-start;
-		text-align: left;
-	}
-
-	&__pagination {
-		display: flex;
-		justify-content: flex-end;
-		align-items: center;
-		gap: var(--spacing-4);
-		padding: var(--spacing-6) var(--spacing-8);
-		background: var(--l1-background);
-
-		.pagination-controls {
-			display: flex;
-			gap: 4px;
-
-			.ant-btn {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				padding: 4px;
-				min-width: 24px;
-				height: 24px;
-
-				&:disabled {
-					opacity: 0.4;
-				}
-			}
-		}
-	}
 }

frontend/src/container/AlertHistory/Timeline/Table/Table.tsx

@@ -1,130 +1,52 @@
-import { HTMLAttributes, useCallback, useMemo } from 'react';
-import { Button, Table } from 'antd';
-import { ChevronLeft, ChevronRight } from '@signozhq/icons';
+import { HTMLAttributes, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Table } from 'antd';
 import logEvent from 'api/common/logEvent';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import ErrorContent from 'components/ErrorModal/components/ErrorContent';
-import {
-	QuerySearchV2Provider,
-	useExpression,
-	useInputExpression,
-	useQuerySearchOnChange,
-	useQuerySearchOnRun,
-} from 'components/QueryBuilderV2';
-import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
-import { initialQueryBuilderFormValuesMap } from 'constants/queryBuilder';
-import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
+import { initialFilters } from 'constants/queryBuilder';
 import {
 	useGetAlertRuleDetailsTimelineTable,
 	useTimelineTable,
 } from 'pages/AlertDetails/hooks';
-import { labelsArrayToObject } from 'container/AlertHistory/utils/labelAdapters';
 import { useTimezone } from 'providers/Timezone';
 import { AlertRuleTimelineTableResponse } from 'types/api/alerts/def';
-import { DataSource } from 'types/common/queryBuilder';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { useAlertHistoryFilterSuggestions } from './useAlertHistoryFilterSuggestions';
 import { timelineTableColumns } from './useTimelineTable';
 
 import './Table.styles.scss';
 
-export const ALERT_HISTORY_EXPRESSION_KEY = 'alertHistoryExpression';
+function TimelineTable(): JSX.Element {
+	const [filters, setFilters] = useState<TagFilter>(initialFilters);
 
-function TimelineTableContent(): JSX.Element {
-	const expression = useExpression();
-	const inputExpression = useInputExpression();
-	const querySearchOnChange = useQuerySearchOnChange();
-	const querySearchOnRun = useQuerySearchOnRun();
-
-	const {
-		isLoading,
-		isRefetching,
-		isError,
-		data,
-		error,
-		ruleId,
-		refetch,
-		cancel,
-	} = useGetAlertRuleDetailsTimelineTable({ filterExpression: expression });
-
-	const apiError = useMemo(() => convertToApiError(error), [error]);
-
-	const { hardcodedAttributeKeys, valueSuggestionsOverride, isLoadingKeys } =
-		useAlertHistoryFilterSuggestions(ruleId ?? null);
-
-	const { timelineData, totalItems, nextCursor } = useMemo(() => {
-		const response = data?.data;
-		const items: AlertRuleTimelineTableResponse[] | undefined =
-			response?.items?.map((item) => {
-				const itemWithLinks = item as typeof item & {
-					relatedLogsLink?: string;
-					relatedTracesLink?: string;
-				};
-				return {
-					ruleID: item.ruleId,
-					ruleName: item.ruleName,
-					overallState: item.overallState as string,
-					overallStateChanged: item.overallStateChanged,
-					state: item.state as string,
-					stateChanged: item.stateChanged,
-					unixMilli: item.unixMilli,
-					fingerprint: item.fingerprint,
-					value: item.value,
-					labels: labelsArrayToObject(item.labels),
-					relatedLogsLink: itemWithLinks.relatedLogsLink,
-					relatedTracesLink: itemWithLinks.relatedTracesLink,
-				};
-			});
+	const { isLoading, isRefetching, isError, data, isValidRuleId, ruleId } =
+		useGetAlertRuleDetailsTimelineTable({ filters });
 
+	const { timelineData, totalItems, labels } = useMemo(() => {
+		const response = data?.payload?.data;
 		return {
-			timelineData: items,
-			totalItems: response?.total ?? 0,
-			nextCursor: response?.nextCursor,
+			timelineData: response?.items,
+			totalItems: response?.total,
+			labels: response?.labels,
 		};
-	}, [data?.data]);
+	}, [data?.payload?.data]);
 
-	const {
-		paginationConfig,
-		onChangeHandler,
-		handleNextPage,
-		handlePrevPage,
-		hasNextPage,
-		hasPrevPage,
-	} = useTimelineTable({
+	const { paginationConfig, onChangeHandler } = useTimelineTable({
 		totalItems: totalItems ?? 0,
-		nextCursor,
 	});
 
+	const { t } = useTranslation('common');
+
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 
-	const handleRunQuery = useCallback(
-		(updatedExpression?: string): void => {
-			const nextExpression = updatedExpression ?? inputExpression;
-			querySearchOnRun(nextExpression);
-
-			if (nextExpression === expression) {
-				refetch();
-			}
-		},
-		[querySearchOnRun, refetch, inputExpression, expression],
-	);
-
-	const queryData = useMemo(
-		() => ({
-			...initialQueryBuilderFormValuesMap.logs,
-			queryName: 'A',
-			dataSource: DataSource.LOGS,
-			filter: { expression },
-			expression,
-		}),
-		[expression],
-	);
+	if (isError || !isValidRuleId || !ruleId) {
+		return <div>{t('something_went_wrong')}</div>;
+	}
 
 	const handleRowClick = (
 		record: AlertRuleTimelineTableResponse,
 	): HTMLAttributes<AlertRuleTimelineTableResponse> => ({
 		onClick: (): void => {
-			void logEvent('Alert history: Timeline table row: Clicked', {
+			logEvent('Alert history: Timeline table row: Clicked', {
 				ruleId: record.ruleID,
 				labels: record.labels,
 			});
@@ -133,100 +55,23 @@ function TimelineTableContent(): JSX.Element {
 
 	return (
 		<div className="timeline-table">
-			{!isLoadingKeys || hardcodedAttributeKeys ? (
-				<div className="timeline-table__filter">
-					<div className="timeline-table__filter-row">
-						<div className="timeline-table__filter-search">
-							<QuerySearch
-								onChange={querySearchOnChange}
-								queryData={queryData}
-								dataSource={DataSource.LOGS}
-								onRun={handleRunQuery}
-								hardcodedAttributeKeys={hardcodedAttributeKeys}
-								valueSuggestionsOverride={valueSuggestionsOverride}
-							/>
-						</div>
-						<RunQueryBtn
-							isLoadingQueries={isLoading || isRefetching}
-							onStageRunQuery={(): void => handleRunQuery()}
-							handleCancelQuery={cancel}
-						/>
-					</div>
-				</div>
-			) : (
-				<div className="timeline-table__filter timeline-table__filter--loading" />
-			)}
 			<Table
 				rowKey={(row): string => `${row.fingerprint}-${row.value}-${row.unixMilli}`}
 				columns={timelineTableColumns({
+					filters,
+					labels: labels ?? {},
+					setFilters,
 					formatTimezoneAdjustedTimestamp,
 				})}
 				onRow={handleRowClick}
 				dataSource={timelineData}
-				pagination={false}
+				pagination={paginationConfig}
 				size="middle"
 				onChange={onChangeHandler}
 				loading={isLoading || isRefetching}
-				locale={{
-					emptyText:
-						isError && apiError ? (
-							<div className="timeline-table__error">
-								<ErrorContent error={apiError} />
-							</div>
-						) : undefined,
-				}}
-				footer={(): JSX.Element => (
-					<div className="timeline-table__pagination">
-						<div className="timeline-table__pagination-info">
-							{paginationConfig.showTotal?.(totalItems, [
-								totalItems === 0
-									? 0
-									: ((paginationConfig.current ?? 1) - 1) *
-											(paginationConfig.pageSize ?? 10) +
-										1,
-								Math.min(
-									(paginationConfig.current ?? 1) * (paginationConfig.pageSize ?? 10),
-									totalItems,
-								),
-							])}
-						</div>
-						<div className="pagination-controls">
-							<Button
-								type="text"
-								size="small"
-								disabled={!hasPrevPage}
-								onClick={handlePrevPage}
-								data-testid="timeline-prev-page"
-							>
-								<ChevronLeft size={14} />
-							</Button>
-							<Button
-								type="text"
-								size="small"
-								disabled={!hasNextPage}
-								onClick={handleNextPage}
-								data-testid="timeline-next-page"
-							>
-								<ChevronRight size={14} />
-							</Button>
-						</div>
-					</div>
-				)}
 			/>
 		</div>
 	);
 }
 
-function TimelineTable(): JSX.Element {
-	return (
-		<QuerySearchV2Provider
-			queryParamKey={ALERT_HISTORY_EXPRESSION_KEY}
-			initialExpression=""
-			persistOnUnmount
-		>
-			<TimelineTableContent />
-		</QuerySearchV2Provider>
-	);
-}
-
 export default TimelineTable;

frontend/src/container/AlertHistory/Timeline/Table/useAlertHistoryFilterSuggestions.ts

@@ -1,117 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import {
-	getRuleHistoryFilterValues,
-	useGetRuleHistoryFilterKeys,
-} from 'api/generated/services/rules';
-import { QUERY_BUILDER_KEY_TYPES } from 'constants/antlrQueryConstants';
-import { useAlertHistoryQueryParams } from 'pages/AlertDetails/hooks';
-import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
-import {
-	dataTypeToKeyType,
-	dataTypeToSuggestionType,
-	fieldContextToSuggestionContext,
-} from 'container/AlertHistory/Timeline/Table/utils';
-
-export const ALERT_HISTORY_FALLBACK_FILTER_KEYS: QueryKeyDataSuggestionsProps[] =
-	[
-		{
-			label: 'severity',
-			name: 'severity',
-			type: 'keyword',
-			signal: 'logs' as const,
-			fieldDataType: QUERY_BUILDER_KEY_TYPES.STRING,
-		},
-		{
-			label: 'threshold.name',
-			name: 'threshold.name',
-			type: 'keyword',
-			signal: 'logs' as const,
-			fieldDataType: QUERY_BUILDER_KEY_TYPES.STRING,
-		},
-	];
-
-export interface AlertHistoryFilterSuggestions {
-	hardcodedAttributeKeys: QueryKeyDataSuggestionsProps[];
-	valueSuggestionsOverride: (
-		key: string,
-		searchText: string,
-	) => Promise<{
-		stringValues: string[];
-		numberValues: number[];
-		complete: boolean;
-	}>;
-	isLoadingKeys: boolean;
-}
-
-export function useAlertHistoryFilterSuggestions(
-	ruleId: string | null,
-): AlertHistoryFilterSuggestions {
-	const { startTime, endTime } = useAlertHistoryQueryParams();
-
-	const { data: filterKeysData, isLoading: isLoadingKeys } =
-		useGetRuleHistoryFilterKeys(
-			{ id: ruleId ?? '' },
-			{ startUnixMilli: startTime, endUnixMilli: endTime },
-			{
-				query: {
-					enabled: !!ruleId,
-					refetchOnMount: false,
-					refetchOnWindowFocus: false,
-				},
-			},
-		);
-
-	const hardcodedAttributeKeys = useMemo((): QueryKeyDataSuggestionsProps[] => {
-		const keys = filterKeysData?.data?.keys;
-		if (!keys) {
-			return ALERT_HISTORY_FALLBACK_FILTER_KEYS;
-		}
-		return Object.values(keys).flatMap((items) =>
-			items.map((item) => ({
-				label: item.name,
-				name: item.name,
-				type: dataTypeToSuggestionType(item.fieldDataType),
-				signal: 'logs' as const,
-				fieldDataType: dataTypeToKeyType(item.fieldDataType),
-				fieldContext: fieldContextToSuggestionContext(item.fieldContext),
-			})),
-		);
-	}, [filterKeysData]);
-
-	const valueSuggestionsOverride = useCallback(
-		async (
-			key: string,
-			searchText: string,
-		): Promise<{
-			stringValues: string[];
-			numberValues: number[];
-			complete: boolean;
-		}> => {
-			if (!ruleId) {
-				return {
-					stringValues: [],
-					numberValues: [],
-					complete: true,
-				};
-			}
-			const response = await getRuleHistoryFilterValues(
-				{ id: ruleId },
-				{
-					name: key,
-					searchText,
-					startUnixMilli: startTime,
-					endUnixMilli: endTime,
-				},
-			);
-			const values = response.data?.values;
-			return {
-				stringValues: values?.stringValues ?? [],
-				numberValues: values?.numberValues ?? [],
-				complete: response.data?.complete ?? false,
-			};
-		},
-		[ruleId, startTime, endTime],
-	);
-
-	return { hardcodedAttributeKeys, valueSuggestionsOverride, isLoadingKeys };
-}

frontend/src/container/AlertHistory/Timeline/Table/useTimelineTable.tsx

@@ -1,15 +1,83 @@
-import { Ellipsis } from '@signozhq/icons';
-import { Button, TableColumnsType as ColumnsType, Tooltip } from 'antd';
+import { useMemo } from 'react';
+import { Ellipsis, Search } from '@signozhq/icons';
+import { Color } from '@signozhq/design-tokens';
+import { Button, TableColumnsType as ColumnsType } from 'antd';
+import ClientSideQBSearch, {
+	AttributeKey,
+} from 'components/ClientSideQBSearch/ClientSideQBSearch';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { ConditionalAlertPopover } from 'container/AlertHistory/AlertPopover/AlertPopover';
+import { transformKeyValuesToAttributeValuesMap } from 'container/QueryBuilder/filters/utils';
+import { useIsDarkMode } from 'hooks/useDarkMode';
 import { TimestampInput } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
-import AlertLabels from 'pages/AlertDetails/AlertHeader/AlertLabels/AlertLabels';
+import AlertLabels, {
+	AlertLabelsProps,
+} from 'pages/AlertDetails/AlertHeader/AlertLabels/AlertLabels';
 import AlertState from 'pages/AlertDetails/AlertHeader/AlertState/AlertState';
 import { AlertRuleTimelineTableResponse } from 'types/api/alerts/def';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+
+const transformLabelsToQbKeys = (
+	labels: AlertRuleTimelineTableResponse['labels'],
+): AttributeKey[] => Object.keys(labels).flatMap((key) => [{ key }]);
+
+function LabelFilter({
+	filters,
+	setFilters,
+	labels,
+}: {
+	setFilters: (filters: TagFilter) => void;
+	filters: TagFilter;
+	labels: AlertLabelsProps['labels'];
+}): JSX.Element | null {
+	const isDarkMode = useIsDarkMode();
+
+	const { transformedKeys, attributesMap } = useMemo(
+		() => ({
+			transformedKeys: transformLabelsToQbKeys(labels || {}),
+			attributesMap: transformKeyValuesToAttributeValuesMap(labels),
+		}),
+		[labels],
+	);
+
+	const handleSearch = (tagFilters: TagFilter): void => {
+		const tagFiltersLength = tagFilters.items.length;
+
+		if (
+			(!tagFiltersLength && (!filters || !filters.items.length)) ||
+			tagFiltersLength === filters?.items.length
+		) {
+			return;
+		}
+		setFilters(tagFilters);
+	};
+
+	return (
+		<ClientSideQBSearch
+			onChange={handleSearch}
+			filters={filters}
+			className="alert-history-label-search"
+			attributeKeys={transformedKeys}
+			attributeValuesMap={attributesMap}
+			suffixIcon={
+				<Search
+					size={14}
+					color={isDarkMode ? Color.TEXT_VANILLA_100 : Color.TEXT_INK_100}
+				/>
+			}
+		/>
+	);
+}
 
 export const timelineTableColumns = ({
+	filters,
+	labels,
+	setFilters,
 	formatTimezoneAdjustedTimestamp,
 }: {
+	filters: TagFilter;
+	labels: AlertLabelsProps['labels'];
+	setFilters: (filters: TagFilter) => void;
 	formatTimezoneAdjustedTimestamp: (
 		input: TimestampInput,
 		format?: string,
@@ -27,7 +95,9 @@ export const timelineTableColumns = ({
 		),
 	},
 	{
-		title: 'LABELS',
+		title: (
+			<LabelFilter setFilters={setFilters} filters={filters} labels={labels} />
+		),
 		dataIndex: 'labels',
 		render: (labels): JSX.Element => (
 			<div className="alert-rule-labels">
@@ -49,27 +119,15 @@ export const timelineTableColumns = ({
 		title: 'ACTIONS',
 		width: 140,
 		align: 'right',
-		render: (_, record): JSX.Element => {
-			if (!record.relatedTracesLink && !record.relatedLogsLink) {
-				return (
-					<Tooltip title="No links available for this item">
-						<Button type="text" ghost disabled>
-							<Ellipsis className="dropdown-icon" size="md" />
-						</Button>
-					</Tooltip>
-				);
-			}
-
-			return (
-				<ConditionalAlertPopover
-					relatedTracesLink={record.relatedTracesLink ?? ''}
-					relatedLogsLink={record.relatedLogsLink ?? ''}
-				>
-					<Button type="text" ghost>
-						<Ellipsis className="dropdown-icon" size="md" />
-					</Button>
-				</ConditionalAlertPopover>
-			);
-		},
+		render: (record): JSX.Element => (
+			<ConditionalAlertPopover
+				relatedTracesLink={record.relatedTracesLink}
+				relatedLogsLink={record.relatedLogsLink}
+			>
+				<Button type="text" ghost>
+					<Ellipsis className="dropdown-icon" size="md" />
+				</Button>
+			</ConditionalAlertPopover>
+		),
 	},
 ];

frontend/src/container/AlertHistory/Timeline/Table/useTimelineTableCursor.ts

@@ -1,53 +0,0 @@
-import {
-	Options,
-	parseAsInteger,
-	parseAsStringLiteral,
-	useQueryState,
-	UseQueryStateReturn,
-} from 'nuqs';
-import { TIMELINE_TABLE_PAGE_SIZE } from 'container/AlertHistory/constants';
-
-const defaultNuqsOptions: Options = {
-	history: 'push',
-};
-
-export const TIMELINE_TABLE_PARAMS = {
-	PAGE: 'page',
-	ORDER: 'order',
-} as const;
-
-const ORDER_VALUES = ['asc', 'desc'] as const;
-export type OrderDirection = (typeof ORDER_VALUES)[number];
-
-export const useTimelineTablePage = (): UseQueryStateReturn<number, number> =>
-	useQueryState(
-		TIMELINE_TABLE_PARAMS.PAGE,
-		parseAsInteger.withDefault(1).withOptions(defaultNuqsOptions),
-	);
-
-export const useTimelineTableOrder = (): UseQueryStateReturn<
-	OrderDirection,
-	OrderDirection
-> =>
-	useQueryState(
-		TIMELINE_TABLE_PARAMS.ORDER,
-		parseAsStringLiteral(ORDER_VALUES)
-			.withDefault('asc')
-			.withOptions(defaultNuqsOptions),
-	);
-
-export function encodeCursor(page: number, limit: number): string | undefined {
-	if (page <= 1) {
-		return undefined;
-	}
-	const offset = (page - 1) * limit;
-	// Backend uses base64.RawURLEncoding (URL-safe, no padding)
-	return btoa(JSON.stringify({ offset, limit }))
-		.replace(/\+/g, '-')
-		.replace(/\//g, '_')
-		.replace(/=+$/, '');
-}
-
-export function computeCursorForPage(page: number): string | undefined {
-	return encodeCursor(page, TIMELINE_TABLE_PAGE_SIZE);
-}

frontend/src/container/AlertHistory/Timeline/Table/utils.ts

@@ -1,56 +0,0 @@
-import {
-	TelemetrytypesFieldContextDTO,
-	TelemetrytypesFieldDataTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { QUERY_BUILDER_KEY_TYPES } from 'constants/antlrQueryConstants';
-import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
-
-export function dataTypeToKeyType(
-	dt: TelemetrytypesFieldDataTypeDTO | undefined,
-): QUERY_BUILDER_KEY_TYPES {
-	if (
-		dt === TelemetrytypesFieldDataTypeDTO.float64 ||
-		dt === TelemetrytypesFieldDataTypeDTO.int64 ||
-		dt === TelemetrytypesFieldDataTypeDTO.number
-	) {
-		return QUERY_BUILDER_KEY_TYPES.NUMBER;
-	}
-	if (dt === TelemetrytypesFieldDataTypeDTO.bool) {
-		return QUERY_BUILDER_KEY_TYPES.BOOLEAN;
-	}
-	return QUERY_BUILDER_KEY_TYPES.STRING;
-}
-
-export function fieldContextToSuggestionContext(
-	fc: TelemetrytypesFieldContextDTO | undefined,
-): QueryKeyDataSuggestionsProps['fieldContext'] {
-	if (fc === TelemetrytypesFieldContextDTO.resource) {
-		return 'resource';
-	}
-	if (fc === TelemetrytypesFieldContextDTO.span) {
-		return 'span';
-	}
-	if (fc === TelemetrytypesFieldContextDTO.attribute) {
-		return 'attribute';
-	}
-	return undefined;
-}
-
-export function dataTypeToSuggestionType(
-	dt: TelemetrytypesFieldDataTypeDTO | undefined,
-): string {
-	if (dt === TelemetrytypesFieldDataTypeDTO.string) {
-		return 'keyword';
-	}
-	if (
-		dt === TelemetrytypesFieldDataTypeDTO.float64 ||
-		dt === TelemetrytypesFieldDataTypeDTO.int64 ||
-		dt === TelemetrytypesFieldDataTypeDTO.number
-	) {
-		return 'number';
-	}
-	if (dt === TelemetrytypesFieldDataTypeDTO.bool) {
-		return 'bool';
-	}
-	return 'keyword';
-}

frontend/src/container/AlertHistory/utils/labelAdapters.ts

@@ -1,19 +0,0 @@
-import type { Querybuildertypesv5LabelDTO } from 'api/generated/services/sigNoz.schemas';
-import type { Labels } from 'types/api/alerts/def';
-
-export function labelsArrayToObject(
-	labels: Querybuildertypesv5LabelDTO[] | null | undefined,
-): Labels {
-	if (!labels) {
-		return {};
-	}
-
-	return labels.reduce<Labels>((acc, label) => {
-		const key = label.key?.name ?? '';
-		const value = String(label.value ?? '');
-		if (key) {
-			acc[key] = value;
-		}
-		return acc;
-	}, {});
-}

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseDetails.tsx

@@ -1,39 +1,148 @@
-import { useCallback, useEffect, useMemo } from 'react';
+import React, {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
 import { useQuery } from 'react-query';
 import { Color, Spacing } from '@signozhq/design-tokens';
-import { X } from '@signozhq/icons';
+import { Button, Drawer, Tooltip } from 'antd';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { Divider } from '@signozhq/ui/divider';
 import { Typography } from '@signozhq/ui/typography';
-import { Drawer } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ErrorContent from 'components/ErrorModal/components/ErrorContent';
 import APIError from 'types/api/error';
+import { combineInitialAndUserExpression } from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
 import { InfraMonitoringEvents } from 'constants/events';
-import { useIsDarkMode } from 'hooks/useDarkMode';
+import { QueryParams } from 'constants/query';
 import {
-	GlobalTimeProvider,
-	NANO_SECOND_MULTIPLIER,
-	useGlobalTimeStore,
-} from 'store/globalTime';
+	initialQueryBuilderFormValuesMap,
+	initialQueryState,
+} from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
+import {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import GetMinMax from 'lib/getMinMax';
+import {
+	BarChart,
+	ChevronsLeftRight,
+	Compass,
+	DraftingCompass,
+	ScrollText,
+	X,
+} from '@signozhq/icons';
+import { isCustomTimeRange, useGlobalTimeStore } from 'store/globalTime';
+import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
+import {
+	LogsAggregatorOperator,
+	TracesAggregatorOperator,
+} from 'types/common/queryBuilder';
+import { openInNewTab } from 'utils/navigation';
 
-import { INFRA_MONITORING_K8S_PARAMS_KEYS } from '../constants';
-import { useInfraMonitoringSelectedItemParams } from '../hooks';
+import { InfraMonitoringEntity, VIEW_TYPES } from '../constants';
+import EntityEvents from '../EntityDetailsUtils/EntityEvents';
+import EntityLogs from '../EntityDetailsUtils/EntityLogs';
+import { K8S_ENTITY_LOGS_EXPRESSION_KEY } from '../EntityDetailsUtils/EntityLogs/hooks';
+import EntityMetrics from '../EntityDetailsUtils/EntityMetrics';
+import EntityTraces from '../EntityDetailsUtils/EntityTraces';
+import { K8S_ENTITY_TRACES_EXPRESSION_KEY } from '../EntityDetailsUtils/EntityTraces/hooks';
+import {
+	SelectedItemParams,
+	useInfraMonitoringEventsFilters,
+	useInfraMonitoringLogFilters,
+	useInfraMonitoringSelectedItemParams,
+	useInfraMonitoringTracesFilters,
+	useInfraMonitoringView,
+} from '../hooks';
 import LoadingContainer from '../LoadingContainer';
 
-import K8sBaseDetailsContent from './K8sBaseDetailsContent';
-import { K8sBaseDetailsProps } from './types';
-
 import '../EntityDetailsUtils/entityDetails.styles.scss';
+import { parseAsString, useQueryState } from 'nuqs';
+import {
+	EntityCountConfig,
+	EntityCountsSection,
+} from './components/EntityCountsSection/EntityCountsSection';
 
-export type {
-	CustomTab,
-	CustomTabRenderProps,
-	K8sBaseDetailsProps,
-	K8sDetailsCountConfig,
-	K8sDetailsFilters,
-	K8sDetailsMetadataConfig,
-} from './types';
+const TimeRangeOffset = 1000000000;
 
+export interface K8sDetailsMetadataConfig<T> {
+	label: string;
+	getValue: (entity: T) => string | number;
+	render?: (value: string | number, entity: T) => React.ReactNode;
+}
+
+export type K8sDetailsCountConfig<T> = EntityCountConfig<T>;
+
+export interface K8sDetailsFilters {
+	filter: { expression: string };
+	start: number;
+	end: number;
+}
+
+export interface CustomTabRenderProps<T> {
+	entity: T;
+	timeRange: { startTime: number; endTime: number };
+	selectedInterval: Time;
+	handleTimeChange: (
+		interval: Time | CustomTimeType,
+		dateTimeRange?: [number, number],
+	) => void;
+}
+
+export interface CustomTab<T> {
+	key: string;
+	label: string;
+	icon: React.ReactNode;
+	render: (props: CustomTabRenderProps<T>) => React.ReactNode;
+}
+
+export interface K8sBaseDetailsProps<T> {
+	category: InfraMonitoringEntity;
+	eventCategory: string;
+	// Data fetching configuration
+	getSelectedItemExpression: (params: SelectedItemParams) => string;
+	fetchEntityData: (
+		filters: K8sDetailsFilters,
+		signal?: AbortSignal,
+	) => Promise<{ data: T | null; error?: APIError | null }>;
+	// Entity configuration
+	getEntityName: (entity: T) => string;
+	getInitialLogTracesExpression: (entity: T) => string;
+	getInitialEventsExpression: (entity: T) => string;
+	metadataConfig: K8sDetailsMetadataConfig<T>[];
+	countsConfig?: K8sDetailsCountConfig<T>[];
+	getCountsFilterExpression?: (entity: T) => string;
+	entityWidgetInfo: {
+		title: string;
+		yAxisUnit: string;
+		docPath?: string;
+	}[];
+	getEntityQueryPayload: (
+		entity: T,
+		start: number,
+		end: number,
+		dotMetricsEnabled: boolean,
+	) => GetQueryResultsProps[];
+	queryKeyPrefix: string;
+	/** When true, only metrics are shown and the Metrics/Logs/Traces/Events tab bar is hidden. */
+	hideDetailViewTabs?: boolean;
+	tabsConfig?: {
+		showMetrics?: boolean;
+		showLogs?: boolean;
+		showTraces?: boolean;
+		showEvents?: boolean;
+	};
+	customTabs?: Array<CustomTab<T>>;
+}
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
 export default function K8sBaseDetails<T>({
 	category,
 	eventCategory,
@@ -54,6 +163,7 @@ export default function K8sBaseDetails<T>({
 }: K8sBaseDetailsProps<T>): JSX.Element {
 	const selectedTime = useGlobalTimeStore((s) => s.selectedTime);
 	const getMinMaxTime = useGlobalTimeStore((s) => s.getMinMaxTime);
+	const lastComputedMinMax = useGlobalTimeStore((s) => s.lastComputedMinMax);
 	const getAutoRefreshQueryKey = useGlobalTimeStore(
 		(s) => s.getAutoRefreshQueryKey,
 	);
@@ -127,9 +237,86 @@ export default function K8sBaseDetails<T>({
 
 	const entityName = entity ? getEntityName(entity) : '';
 
+	// Content state (previously in K8sBaseDetailsContent)
+	const tabVisibility = useMemo(
+		() => ({
+			showMetrics: true,
+			showLogs: true,
+			showTraces: true,
+			showEvents: true,
+			...tabsConfig,
+		}),
+		[tabsConfig],
+	);
+
+	const { startMs, endMs } = useMemo(
+		() => ({
+			startMs: Math.floor(lastComputedMinMax.minTime / NANO_SECOND_MULTIPLIER),
+			endMs: Math.floor(lastComputedMinMax.maxTime / NANO_SECOND_MULTIPLIER),
+		}),
+		[lastComputedMinMax],
+	);
+
+	const [modalTimeRange, setModalTimeRange] = useState(() => ({
+		startTime: startMs,
+		endTime: endMs,
+	}));
+
+	// TODO(h4ad): Remove this and use context/zustand
+	const lastSelectedInterval = useRef<Time | null>(null);
+	const [selectedInterval, setSelectedInterval] = useState<Time>(
+		lastSelectedInterval.current
+			? lastSelectedInterval.current
+			: isCustomTimeRange(selectedTime)
+				? DEFAULT_TIME_RANGE
+				: selectedTime,
+	);
+
+	const [selectedView, setSelectedView] = useInfraMonitoringView();
+	const effectiveView = hideDetailViewTabs ? VIEW_TYPES.METRICS : selectedView;
+
+	const validTabs = useMemo(() => {
+		const tabs: string[] = [];
+		if (tabVisibility.showMetrics) {
+			tabs.push(VIEW_TYPES.METRICS);
+		}
+		if (tabVisibility.showLogs) {
+			tabs.push(VIEW_TYPES.LOGS);
+		}
+		if (tabVisibility.showTraces) {
+			tabs.push(VIEW_TYPES.TRACES);
+		}
+		if (tabVisibility.showEvents) {
+			tabs.push(VIEW_TYPES.EVENTS);
+		}
+		if (customTabs) {
+			tabs.push(...customTabs.map((t) => t.key));
+		}
+		return tabs;
+	}, [tabVisibility, customTabs]);
+
+	useEffect(() => {
+		if (!hideDetailViewTabs && !validTabs.includes(selectedView)) {
+			const firstValid = validTabs[0] || VIEW_TYPES.METRICS;
+			void setSelectedView(firstValid);
+		}
+	}, [hideDetailViewTabs, selectedView, validTabs, setSelectedView]);
+
+	const [, setLogFiltersParam] = useInfraMonitoringLogFilters();
+	const [, setTracesFiltersParam] = useInfraMonitoringTracesFilters();
+	const [, setEventsFiltersParam] = useInfraMonitoringEventsFilters();
+	const [userLogsExpression] = useQueryState(
+		K8S_ENTITY_LOGS_EXPRESSION_KEY,
+		parseAsString,
+	);
+	const [userTracesExpression] = useQueryState(
+		K8S_ENTITY_TRACES_EXPRESSION_KEY,
+		parseAsString,
+	);
+
 	useEffect(() => {
 		if (entity) {
-			void logEvent(InfraMonitoringEvents.PageVisited, {
+			logEvent(InfraMonitoringEvents.PageVisited, {
 				entity: InfraMonitoringEvents.K8sEntity,
 				page: InfraMonitoringEvents.DetailedPage,
 				category: eventCategory,
@@ -137,6 +324,136 @@ export default function K8sBaseDetails<T>({
 		}
 	}, [entity, eventCategory]);
 
+	useEffect(() => {
+		const currentSelectedInterval = lastSelectedInterval.current || selectedTime;
+		if (!isCustomTimeRange(currentSelectedInterval)) {
+			setSelectedInterval(currentSelectedInterval);
+			const { minTime, maxTime } = getMinMaxTime();
+
+			setModalTimeRange({
+				startTime: Math.floor(minTime / TimeRangeOffset),
+				endTime: Math.floor(maxTime / TimeRangeOffset),
+			});
+		}
+	}, [getMinMaxTime, selectedTime]);
+
+	const handleTabChange = (value: string | null): void => {
+		if (!value) {
+			return;
+		}
+		setSelectedView(value);
+		setLogFiltersParam(null);
+		setTracesFiltersParam(null);
+		setEventsFiltersParam(null);
+		logEvent(InfraMonitoringEvents.TabChanged, {
+			entity: InfraMonitoringEvents.K8sEntity,
+			page: InfraMonitoringEvents.DetailedPage,
+			category: eventCategory,
+			view: value,
+		});
+	};
+
+	const handleTimeChange = useCallback(
+		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
+			lastSelectedInterval.current = interval as Time;
+			setSelectedInterval(interval as Time);
+
+			if (interval === 'custom' && dateTimeRange) {
+				setModalTimeRange({
+					startTime: Math.floor(dateTimeRange[0] / 1000),
+					endTime: Math.floor(dateTimeRange[1] / 1000),
+				});
+			} else {
+				const { maxTime, minTime } = GetMinMax(interval);
+
+				setModalTimeRange({
+					startTime: Math.floor(minTime / TimeRangeOffset),
+					endTime: Math.floor(maxTime / TimeRangeOffset),
+				});
+			}
+
+			logEvent(InfraMonitoringEvents.TimeUpdated, {
+				entity: InfraMonitoringEvents.K8sEntity,
+				page: InfraMonitoringEvents.DetailedPage,
+				category: eventCategory,
+				interval,
+				view: effectiveView,
+			});
+		},
+		[eventCategory, effectiveView],
+	);
+
+	const handleExplorePagesRedirect = (): void => {
+		const urlQuery = new URLSearchParams();
+
+		if (selectedInterval !== 'custom') {
+			urlQuery.set(QueryParams.relativeTime, selectedInterval);
+		} else {
+			urlQuery.delete(QueryParams.relativeTime);
+			urlQuery.set(QueryParams.startTime, modalTimeRange.startTime.toString());
+			urlQuery.set(QueryParams.endTime, modalTimeRange.endTime.toString());
+		}
+
+		logEvent(InfraMonitoringEvents.ExploreClicked, {
+			entity: InfraMonitoringEvents.K8sEntity,
+			page: InfraMonitoringEvents.DetailedPage,
+			category: eventCategory,
+			view: selectedView,
+		});
+
+		if (selectedView === VIEW_TYPES.LOGS) {
+			const fullExpression = combineInitialAndUserExpression(
+				logsAndTracesInitialExpression,
+				userLogsExpression || '',
+			);
+
+			const compositeQuery = {
+				...initialQueryState,
+				queryType: 'builder',
+				builder: {
+					...initialQueryState.builder,
+					queryData: [
+						{
+							...initialQueryBuilderFormValuesMap.logs,
+							aggregateOperator: LogsAggregatorOperator.NOOP,
+							expression: fullExpression,
+							filter: { expression: fullExpression },
+						},
+					],
+				},
+			};
+
+			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
+
+			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
+		} else if (selectedView === VIEW_TYPES.TRACES) {
+			const fullExpression = combineInitialAndUserExpression(
+				logsAndTracesInitialExpression,
+				userTracesExpression || '',
+			);
+
+			const compositeQuery = {
+				...initialQueryState,
+				queryType: 'builder',
+				builder: {
+					...initialQueryState.builder,
+					queryData: [
+						{
+							...initialQueryBuilderFormValuesMap.traces,
+							aggregateOperator: TracesAggregatorOperator.NOOP,
+							expression: fullExpression,
+							filter: { expression: fullExpression },
+						},
+					],
+				},
+			};
+
+			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
+
+			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
+		}
+	};
+
 	return (
 		<Drawer
 			width="70%"
@@ -181,33 +498,207 @@ export default function K8sBaseDetails<T>({
 				</div>
 			)}
 			{entity && !isEntityLoading && !hasResponseError && (
-				<GlobalTimeProvider
-					inheritGlobalTime
-					enableUrlParams={{
-						relativeTimeKey: INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_RELATIVE_TIME,
-						startTimeKey: INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_START_TIME,
-						endTimeKey: INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_END_TIME,
-					}}
-				>
-					<K8sBaseDetailsContent<T>
-						entity={entity}
-						category={category}
-						eventCategory={eventCategory}
-						metadataConfig={metadataConfig}
-						countsConfig={countsConfig}
-						getCountsFilterExpression={getCountsFilterExpression}
-						selectedItem={selectedItem}
-						handleClose={handleClose}
-						entityWidgetInfo={entityWidgetInfo}
-						getEntityQueryPayload={getEntityQueryPayload}
-						queryKeyPrefix={queryKeyPrefix}
-						hideDetailViewTabs={hideDetailViewTabs}
-						tabsConfig={tabsConfig}
-						customTabs={customTabs}
-						logsAndTracesInitialExpression={logsAndTracesInitialExpression}
-						eventsInitialExpression={eventsInitialExpression}
-					/>
-				</GlobalTimeProvider>
+				<>
+					<div className="entity-detail-drawer__entity">
+						<div className="entity-details-grid">
+							<div className="labels-row">
+								{metadataConfig.map((config) => (
+									<Typography.Text
+										key={config.label}
+										color="muted"
+										className="entity-details-metadata-label"
+									>
+										{config.label}
+									</Typography.Text>
+								))}
+							</div>
+
+							<div className="values-row">
+								{metadataConfig.map((config) => {
+									const value = config.getValue(entity);
+									const displayValue = String(value);
+									return (
+										<Typography.Text
+											key={config.label}
+											className="entity-details-metadata-value"
+										>
+											{config.render ? (
+												config.render(value, entity)
+											) : (
+												<Tooltip title={displayValue}>{displayValue}</Tooltip>
+											)}
+										</Typography.Text>
+									);
+								})}
+							</div>
+						</div>
+
+						{countsConfig &&
+							countsConfig.length > 0 &&
+							selectedItem &&
+							getCountsFilterExpression && (
+								<EntityCountsSection
+									entity={entity}
+									countsConfig={countsConfig}
+									selectedItem={selectedItem}
+									filterExpression={getCountsFilterExpression(entity)}
+									closeDrawer={handleClose}
+								/>
+							)}
+					</div>
+
+					{!hideDetailViewTabs && (
+						<div className="views-tabs-container">
+							<ToggleGroupSimple
+								type="single"
+								className="views-tabs"
+								onChange={handleTabChange}
+								value={selectedView}
+								items={[
+									...(tabVisibility.showMetrics
+										? [
+												{
+													value: VIEW_TYPES.METRICS,
+													label: (
+														<div className="view-title">
+															<BarChart size={14} />
+															Metrics
+														</div>
+													),
+												},
+											]
+										: []),
+									...(tabVisibility.showLogs
+										? [
+												{
+													value: VIEW_TYPES.LOGS,
+													label: (
+														<div className="view-title">
+															<ScrollText size={14} />
+															Logs
+														</div>
+													),
+												},
+											]
+										: []),
+									...(tabVisibility.showTraces
+										? [
+												{
+													value: VIEW_TYPES.TRACES,
+													label: (
+														<div className="view-title">
+															<DraftingCompass size={14} />
+															Traces
+														</div>
+													),
+												},
+											]
+										: []),
+									...(tabVisibility.showEvents
+										? [
+												{
+													value: VIEW_TYPES.EVENTS,
+													label: (
+														<div className="view-title">
+															<ChevronsLeftRight size={14} />
+															Events
+														</div>
+													),
+												},
+											]
+										: []),
+									...(customTabs?.map((tab) => ({
+										value: tab.key,
+										label: (
+											<div className="view-title">
+												{tab.icon}
+												{tab.label}
+											</div>
+										),
+									})) ?? []),
+								]}
+							/>
+
+							{selectedView === VIEW_TYPES.LOGS && (
+								<Tooltip title="Go to Logs Explorer" placement="left">
+									<Button
+										icon={<Compass size={18} />}
+										className="compass-button"
+										onClick={handleExplorePagesRedirect}
+									/>
+								</Tooltip>
+							)}
+							{selectedView === VIEW_TYPES.TRACES && (
+								<Tooltip title="Go to Traces Explorer" placement="left">
+									<Button
+										icon={<Compass size={18} />}
+										className="compass-button"
+										onClick={handleExplorePagesRedirect}
+									/>
+								</Tooltip>
+							)}
+						</div>
+					)}
+
+					{effectiveView === VIEW_TYPES.METRICS && (
+						<EntityMetrics<T>
+							entity={entity}
+							selectedInterval={selectedInterval}
+							timeRange={modalTimeRange}
+							handleTimeChange={handleTimeChange}
+							isModalTimeSelection
+							entityWidgetInfo={entityWidgetInfo}
+							getEntityQueryPayload={getEntityQueryPayload}
+							category={category}
+							queryKey={`${queryKeyPrefix}Metrics`}
+						/>
+					)}
+					{effectiveView === VIEW_TYPES.LOGS && (
+						<EntityLogs
+							timeRange={modalTimeRange}
+							isModalTimeSelection
+							handleTimeChange={handleTimeChange}
+							selectedInterval={selectedInterval}
+							queryKey={`${queryKeyPrefix}Logs`}
+							category={category}
+							initialExpression={logsAndTracesInitialExpression}
+						/>
+					)}
+					{effectiveView === VIEW_TYPES.TRACES && (
+						<EntityTraces
+							timeRange={modalTimeRange}
+							isModalTimeSelection
+							handleTimeChange={handleTimeChange}
+							selectedInterval={selectedInterval}
+							queryKey={`${queryKeyPrefix}Traces`}
+							category={category}
+							initialExpression={logsAndTracesInitialExpression}
+						/>
+					)}
+					{effectiveView === VIEW_TYPES.EVENTS && tabVisibility.showEvents && (
+						<EntityEvents
+							timeRange={modalTimeRange}
+							isModalTimeSelection
+							handleTimeChange={handleTimeChange}
+							selectedInterval={selectedInterval}
+							category={category}
+							queryKey={`${queryKeyPrefix}Events`}
+							initialExpression={eventsInitialExpression}
+						/>
+					)}
+					{customTabs?.map((tab) =>
+						selectedView === tab.key ? (
+							<React.Fragment key={tab.key}>
+								{tab.render({
+									entity,
+									timeRange: modalTimeRange,
+									selectedInterval,
+									handleTimeChange,
+								})}
+							</React.Fragment>
+						) : null,
+					)}
+				</>
 			)}
 		</Drawer>
 	);

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseDetailsContent.tsx

@@ -1,401 +0,0 @@
-import { Fragment, useEffect, useMemo } from 'react';
-import {
-	BarChart,
-	ChevronsLeftRight,
-	Compass,
-	DraftingCompass,
-	ScrollText,
-} from '@signozhq/icons';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
-import { Typography } from '@signozhq/ui/typography';
-import { Button, Tooltip } from 'antd';
-import logEvent from 'api/common/logEvent';
-import { combineInitialAndUserExpression } from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
-import { InfraMonitoringEvents } from 'constants/events';
-import { QueryParams } from 'constants/query';
-import {
-	initialQueryBuilderFormValuesMap,
-	initialQueryState,
-} from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import { parseAsString, useQueryState } from 'nuqs';
-import {
-	LogsAggregatorOperator,
-	TracesAggregatorOperator,
-} from 'types/common/queryBuilder';
-import { openInNewTab } from 'utils/navigation';
-
-import { VIEW_TYPES } from '../constants';
-import { useEntityDetailsTime } from '../EntityDetailsUtils/EntityDateTimeSelector/useEntityDetailsTime';
-import EntityEvents from '../EntityDetailsUtils/EntityEvents';
-import EntityLogs from '../EntityDetailsUtils/EntityLogs';
-import { K8S_ENTITY_LOGS_EXPRESSION_KEY } from '../EntityDetailsUtils/EntityLogs/hooks';
-import EntityMetrics from '../EntityDetailsUtils/EntityMetrics';
-import EntityTraces from '../EntityDetailsUtils/EntityTraces';
-import { K8S_ENTITY_TRACES_EXPRESSION_KEY } from '../EntityDetailsUtils/EntityTraces/hooks';
-import {
-	useInfraMonitoringEventsFilters,
-	useInfraMonitoringLogFilters,
-	useInfraMonitoringTracesFilters,
-	useInfraMonitoringView,
-} from '../hooks';
-
-import { EntityCountsSection } from './components/EntityCountsSection/EntityCountsSection';
-import { K8sBaseDetailsContentProps } from './types';
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-export default function K8sBaseDetailsContent<T>({
-	entity,
-	category,
-	eventCategory,
-	metadataConfig,
-	countsConfig,
-	getCountsFilterExpression,
-	selectedItem,
-	handleClose,
-	entityWidgetInfo,
-	getEntityQueryPayload,
-	queryKeyPrefix,
-	hideDetailViewTabs,
-	tabsConfig,
-	customTabs,
-	logsAndTracesInitialExpression,
-	eventsInitialExpression,
-}: K8sBaseDetailsContentProps<T>): JSX.Element {
-	const { timeRange, selectedInterval, handleTimeChange } =
-		useEntityDetailsTime();
-
-	const tabVisibility = useMemo(
-		() => ({
-			showMetrics: true,
-			showLogs: true,
-			showTraces: true,
-			showEvents: true,
-			...tabsConfig,
-		}),
-		[tabsConfig],
-	);
-
-	const [selectedView, setSelectedView] = useInfraMonitoringView();
-
-	const validTabs = useMemo(() => {
-		const tabs: string[] = [];
-		if (tabVisibility.showMetrics) {
-			tabs.push(VIEW_TYPES.METRICS);
-		}
-		if (tabVisibility.showLogs) {
-			tabs.push(VIEW_TYPES.LOGS);
-		}
-		if (tabVisibility.showTraces) {
-			tabs.push(VIEW_TYPES.TRACES);
-		}
-		if (tabVisibility.showEvents) {
-			tabs.push(VIEW_TYPES.EVENTS);
-		}
-		if (customTabs) {
-			tabs.push(...customTabs.map((t) => t.key));
-		}
-		return tabs;
-	}, [tabVisibility, customTabs]);
-
-	useEffect(() => {
-		if (!hideDetailViewTabs && !validTabs.includes(selectedView)) {
-			const firstValid = validTabs[0] || VIEW_TYPES.METRICS;
-			void setSelectedView(firstValid);
-		}
-	}, [hideDetailViewTabs, selectedView, validTabs, setSelectedView]);
-
-	const effectiveView = hideDetailViewTabs ? VIEW_TYPES.METRICS : selectedView;
-
-	const [, setLogFiltersParam] = useInfraMonitoringLogFilters();
-	const [, setTracesFiltersParam] = useInfraMonitoringTracesFilters();
-	const [, setEventsFiltersParam] = useInfraMonitoringEventsFilters();
-	const [userLogsExpression] = useQueryState(
-		K8S_ENTITY_LOGS_EXPRESSION_KEY,
-		parseAsString,
-	);
-	const [userTracesExpression] = useQueryState(
-		K8S_ENTITY_TRACES_EXPRESSION_KEY,
-		parseAsString,
-	);
-
-	const handleTabChange = (value: string | null): void => {
-		if (!value) {
-			return;
-		}
-		void setSelectedView(value);
-		void setLogFiltersParam(null);
-		void setTracesFiltersParam(null);
-		void setEventsFiltersParam(null);
-		void logEvent(InfraMonitoringEvents.TabChanged, {
-			entity: InfraMonitoringEvents.K8sEntity,
-			page: InfraMonitoringEvents.DetailedPage,
-			category: eventCategory,
-			view: value,
-		});
-	};
-
-	const handleExplorePagesRedirect = (): void => {
-		const urlQuery = new URLSearchParams();
-
-		if (selectedInterval !== 'custom') {
-			urlQuery.set(QueryParams.relativeTime, selectedInterval);
-		} else {
-			urlQuery.delete(QueryParams.relativeTime);
-			// Explorer URL params are in milliseconds, timeRange is in seconds
-			urlQuery.set(QueryParams.startTime, (timeRange.startTime * 1000).toString());
-			urlQuery.set(QueryParams.endTime, (timeRange.endTime * 1000).toString());
-		}
-
-		void logEvent(InfraMonitoringEvents.ExploreClicked, {
-			entity: InfraMonitoringEvents.K8sEntity,
-			page: InfraMonitoringEvents.DetailedPage,
-			category: eventCategory,
-			view: selectedView,
-		});
-
-		if (selectedView === VIEW_TYPES.LOGS) {
-			const fullExpression = combineInitialAndUserExpression(
-				logsAndTracesInitialExpression,
-				userLogsExpression || '',
-			);
-
-			const compositeQuery = {
-				...initialQueryState,
-				queryType: 'builder',
-				builder: {
-					...initialQueryState.builder,
-					queryData: [
-						{
-							...initialQueryBuilderFormValuesMap.logs,
-							aggregateOperator: LogsAggregatorOperator.NOOP,
-							expression: fullExpression,
-							filter: { expression: fullExpression },
-						},
-					],
-				},
-			};
-
-			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
-
-			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
-		} else if (selectedView === VIEW_TYPES.TRACES) {
-			const fullExpression = combineInitialAndUserExpression(
-				logsAndTracesInitialExpression,
-				userTracesExpression || '',
-			);
-
-			const compositeQuery = {
-				...initialQueryState,
-				queryType: 'builder',
-				builder: {
-					...initialQueryState.builder,
-					queryData: [
-						{
-							...initialQueryBuilderFormValuesMap.traces,
-							aggregateOperator: TracesAggregatorOperator.NOOP,
-							expression: fullExpression,
-							filter: { expression: fullExpression },
-						},
-					],
-				},
-			};
-
-			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
-
-			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
-		}
-	};
-
-	return (
-		<>
-			<div className="entity-detail-drawer__entity">
-				<div className="entity-details-grid">
-					<div className="labels-row">
-						{metadataConfig.map((config) => (
-							<Typography.Text
-								key={config.label}
-								color="muted"
-								className="entity-details-metadata-label"
-							>
-								{config.label}
-							</Typography.Text>
-						))}
-					</div>
-
-					<div className="values-row">
-						{metadataConfig.map((config) => {
-							const value = config.getValue(entity);
-							const displayValue = String(value);
-							return (
-								<Typography.Text
-									key={config.label}
-									className="entity-details-metadata-value"
-								>
-									{config.render ? (
-										config.render(value, entity)
-									) : (
-										<Tooltip title={displayValue}>{displayValue}</Tooltip>
-									)}
-								</Typography.Text>
-							);
-						})}
-					</div>
-				</div>
-
-				{countsConfig &&
-					countsConfig.length > 0 &&
-					selectedItem &&
-					getCountsFilterExpression && (
-						<EntityCountsSection
-							entity={entity}
-							countsConfig={countsConfig}
-							selectedItem={selectedItem}
-							filterExpression={getCountsFilterExpression(entity)}
-							closeDrawer={handleClose}
-						/>
-					)}
-			</div>
-
-			{!hideDetailViewTabs && (
-				<div className="views-tabs-container">
-					<ToggleGroupSimple
-						type="single"
-						className="views-tabs"
-						onChange={handleTabChange}
-						value={selectedView}
-						items={[
-							...(tabVisibility.showMetrics
-								? [
-										{
-											value: VIEW_TYPES.METRICS,
-											label: (
-												<div className="view-title">
-													<BarChart size={14} />
-													Metrics
-												</div>
-											),
-										},
-									]
-								: []),
-							...(tabVisibility.showLogs
-								? [
-										{
-											value: VIEW_TYPES.LOGS,
-											label: (
-												<div className="view-title">
-													<ScrollText size={14} />
-													Logs
-												</div>
-											),
-										},
-									]
-								: []),
-							...(tabVisibility.showTraces
-								? [
-										{
-											value: VIEW_TYPES.TRACES,
-											label: (
-												<div className="view-title">
-													<DraftingCompass size={14} />
-													Traces
-												</div>
-											),
-										},
-									]
-								: []),
-							...(tabVisibility.showEvents
-								? [
-										{
-											value: VIEW_TYPES.EVENTS,
-											label: (
-												<div className="view-title">
-													<ChevronsLeftRight size={14} />
-													Events
-												</div>
-											),
-										},
-									]
-								: []),
-							...(customTabs?.map((tab) => ({
-								value: tab.key,
-								label: (
-									<div className="view-title">
-										{tab.icon}
-										{tab.label}
-									</div>
-								),
-							})) ?? []),
-						]}
-					/>
-
-					{selectedView === VIEW_TYPES.LOGS && (
-						<Tooltip title="Go to Logs Explorer" placement="left">
-							<Button
-								icon={<Compass size={18} />}
-								className="compass-button"
-								onClick={handleExplorePagesRedirect}
-							/>
-						</Tooltip>
-					)}
-					{selectedView === VIEW_TYPES.TRACES && (
-						<Tooltip title="Go to Traces Explorer" placement="left">
-							<Button
-								icon={<Compass size={18} />}
-								className="compass-button"
-								onClick={handleExplorePagesRedirect}
-							/>
-						</Tooltip>
-					)}
-				</div>
-			)}
-
-			{effectiveView === VIEW_TYPES.METRICS && (
-				<EntityMetrics<T>
-					entity={entity}
-					eventEntity={eventCategory}
-					entityWidgetInfo={entityWidgetInfo}
-					getEntityQueryPayload={getEntityQueryPayload}
-					category={category}
-					queryKey={`${queryKeyPrefix}Metrics`}
-				/>
-			)}
-			{effectiveView === VIEW_TYPES.LOGS && (
-				<EntityLogs
-					eventEntity={eventCategory}
-					queryKey={`${queryKeyPrefix}Logs`}
-					category={category}
-					initialExpression={logsAndTracesInitialExpression}
-				/>
-			)}
-			{effectiveView === VIEW_TYPES.TRACES && (
-				<EntityTraces
-					eventEntity={eventCategory}
-					queryKey={`${queryKeyPrefix}Traces`}
-					category={category}
-					initialExpression={logsAndTracesInitialExpression}
-				/>
-			)}
-			{effectiveView === VIEW_TYPES.EVENTS && tabVisibility.showEvents && (
-				<EntityEvents
-					eventEntity={eventCategory}
-					queryKey={`${queryKeyPrefix}Events`}
-					initialExpression={eventsInitialExpression}
-					category={category}
-				/>
-			)}
-			{customTabs?.map((tab) =>
-				selectedView === tab.key ? (
-					<Fragment key={tab.key}>
-						{tab.render({
-							entity,
-							timeRange,
-							selectedInterval,
-							handleTimeChange,
-						})}
-					</Fragment>
-				) : null,
-			)}
-		</>
-	);
-}

frontend/src/container/InfraMonitoringK8sV2/Base/K8sHeader.tsx

@@ -245,7 +245,6 @@ function K8sHeader<TData>({
 						showAutoRefresh={showAutoRefresh}
 						showRefreshText={false}
 						hideShareModal
-						defaultRelativeTime="30m"
 					/>
 				</div>
 

frontend/src/container/InfraMonitoringK8sV2/Base/components/EntityCountsSection/EntityCountsSection.tsx

@@ -52,6 +52,7 @@ export function EntityCountsSection<T>({
 			},
 		};
 
+		// TODO(H4ad): After https://github.com/SigNoz/signoz/pull/12038, inherit custom time of drawer to list
 		const urlParams = new URLSearchParams();
 		urlParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.CATEGORY, targetCategory);
 		urlParams.set(
@@ -59,44 +60,6 @@ export function EntityCountsSection<T>({
 			encodeURIComponent(JSON.stringify(compositeQuery)),
 		);
 
-		const currentSearchParams = new URLSearchParams(window.location.search);
-		const detailRelativeTime = currentSearchParams.get(
-			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_RELATIVE_TIME,
-		);
-		const detailStartTime = currentSearchParams.get(
-			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_START_TIME,
-		);
-		const detailEndTime = currentSearchParams.get(
-			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_END_TIME,
-		);
-
-		const listRelativeTime = currentSearchParams.get(QueryParams.relativeTime);
-		const listStartTime = currentSearchParams.get(QueryParams.startTime);
-		const listEndTime = currentSearchParams.get(QueryParams.endTime);
-
-		if (listRelativeTime) {
-			urlParams.set(QueryParams.relativeTime, listRelativeTime);
-		} else if (listStartTime && listEndTime) {
-			urlParams.set(QueryParams.startTime, listStartTime);
-			urlParams.set(QueryParams.endTime, listEndTime);
-		}
-
-		if (detailRelativeTime) {
-			urlParams.set(
-				INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_RELATIVE_TIME,
-				detailRelativeTime,
-			);
-		} else if (detailStartTime && detailEndTime) {
-			urlParams.set(
-				INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_START_TIME,
-				detailStartTime,
-			);
-			urlParams.set(
-				INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_END_TIME,
-				detailEndTime,
-			);
-		}
-
 		return `${ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES}?${urlParams.toString()}`;
 	};
 

frontend/src/container/InfraMonitoringK8sV2/Base/types.ts

@@ -1,17 +1,3 @@
-import { ReactNode } from 'react';
-import {
-	CustomTimeType,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
-import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import APIError from 'types/api/error';
-
-import { EntityCountConfig } from './components/EntityCountsSection/EntityCountsSection';
-import { InfraMonitoringEntity } from '../constants';
-import { SelectedItemParams } from '../hooks';
-
-export type K8sDetailsCountConfig<T> = EntityCountConfig<T>;
-
 export type K8sBaseFilters = {
 	filter: {
 		expression: string;
@@ -47,100 +33,3 @@ export type K8sTableRowData<T> = T & {
 	/** Metadata about which attributes were used for grouping */
 	groupedByMeta?: Record<string, string>;
 };
-
-export interface K8sDetailsMetadataConfig<T> {
-	label: string;
-	getValue: (entity: T) => string | number;
-	render?: (value: string | number, entity: T) => ReactNode;
-}
-
-export interface K8sDetailsFilters {
-	filter: { expression: string };
-	start: number;
-	end: number;
-}
-
-export interface K8sDetailsWidgetInfo {
-	title: string;
-	yAxisUnit: string;
-}
-
-export type GetEntityQueryPayload<T> = (
-	entity: T,
-	start: number,
-	end: number,
-	dotMetricsEnabled: boolean,
-) => GetQueryResultsProps[];
-
-export interface K8sDetailsTabsConfig {
-	showMetrics?: boolean;
-	showLogs?: boolean;
-	showTraces?: boolean;
-	showEvents?: boolean;
-}
-
-export interface K8sDetailsCustomTabRenderProps<T> {
-	entity: T;
-	/** Time range in seconds — see useEntityDetailsTime */
-	timeRange: { startTime: number; endTime: number };
-	selectedInterval: Time;
-	handleTimeChange: (
-		interval: Time | CustomTimeType,
-		dateTimeRange?: [number, number],
-	) => void;
-}
-
-export interface K8sDetailsCustomTab<T> {
-	key: string;
-	label: string;
-	icon: ReactNode;
-	render: (props: K8sDetailsCustomTabRenderProps<T>) => ReactNode;
-}
-
-export interface K8sBaseDetailsProps<T> {
-	category: InfraMonitoringEntity;
-	eventCategory: string;
-	// Data fetching configuration
-	getSelectedItemExpression: (params: SelectedItemParams) => string;
-	fetchEntityData: (
-		filters: K8sDetailsFilters,
-		signal?: AbortSignal,
-	) => Promise<{ data: T | null; error?: APIError | null }>;
-	// Entity configuration
-	getEntityName: (entity: T) => string;
-	getInitialLogTracesExpression: (entity: T) => string;
-	getInitialEventsExpression: (entity: T) => string;
-	metadataConfig: K8sDetailsMetadataConfig<T>[];
-	countsConfig?: K8sDetailsCountConfig<T>[];
-	getCountsFilterExpression?: (entity: T) => string;
-	entityWidgetInfo: K8sDetailsWidgetInfo[];
-	getEntityQueryPayload: GetEntityQueryPayload<T>;
-	queryKeyPrefix: string;
-	/** When true, only metrics are shown and the Metrics/Logs/Traces/Events tab bar is hidden. */
-	hideDetailViewTabs?: boolean;
-	tabsConfig?: K8sDetailsTabsConfig;
-	customTabs?: K8sDetailsCustomTab<T>[];
-}
-
-export interface K8sBaseDetailsContentProps<T> {
-	entity: T;
-	category: InfraMonitoringEntity;
-	eventCategory: string;
-	metadataConfig: K8sDetailsMetadataConfig<T>[];
-	countsConfig?: K8sDetailsCountConfig<T>[];
-	getCountsFilterExpression?: (entity: T) => string;
-	selectedItem: string | null;
-	handleClose: () => void;
-	entityWidgetInfo: K8sDetailsWidgetInfo[];
-	getEntityQueryPayload: GetEntityQueryPayload<T>;
-	queryKeyPrefix: string;
-	hideDetailViewTabs: boolean;
-	tabsConfig?: K8sDetailsTabsConfig;
-	customTabs?: K8sDetailsCustomTab<T>[];
-	logsAndTracesInitialExpression: string;
-	eventsInitialExpression: string;
-}
-
-// Aliases for backward compatibility
-export type CustomTab<T> = K8sDetailsCustomTab<T>;
-export type CustomTabRenderProps<T> = K8sDetailsCustomTabRenderProps<T>;

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityDateTimeSelector/EntityDateTimeSelector.tsx

@@ -1,78 +0,0 @@
-import { useCallback } from 'react';
-import { Undo } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-import logEvent from 'api/common/logEvent';
-import { InfraMonitoringEvents } from 'constants/events';
-import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
-import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
-import {
-	CustomTimeType,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
-
-import { useEntityDetailsTime } from './useEntityDetailsTime';
-
-interface EntityDateTimeSelectorProps {
-	eventEntity: string;
-	category: InfraMonitoringEntity;
-	view: string;
-}
-
-function EntityDateTimeSelector({
-	eventEntity,
-	category,
-	view,
-}: EntityDateTimeSelectorProps): JSX.Element {
-	const {
-		timeRange,
-		selectedInterval,
-		handleTimeChange,
-		handleResetToParentTime,
-		hasTimeChanged,
-	} = useEntityDetailsTime();
-
-	const onTimeChange = useCallback(
-		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
-			void logEvent(InfraMonitoringEvents.TimeUpdated, {
-				entity: eventEntity,
-				page: InfraMonitoringEvents.DetailedPage,
-				category,
-				view,
-				interval,
-			});
-			handleTimeChange(interval, dateTimeRange);
-		},
-		[category, view, eventEntity, handleTimeChange],
-	);
-
-	return (
-		<div className="entity-date-time-selector">
-			{hasTimeChanged && (
-				<TooltipSimple title="Reset to list time" side="bottom">
-					<Button
-						variant="outlined"
-						color="secondary"
-						onClick={handleResetToParentTime}
-						data-testid="reset-to-list-time-button"
-						prefix={<Undo size={14} />}
-					>
-						Reset
-					</Button>
-				</TooltipSimple>
-			)}
-			<DateTimeSelectionV2
-				showAutoRefresh
-				showRefreshText={false}
-				hideShareModal
-				isModalTimeSelection
-				onTimeChange={onTimeChange}
-				modalSelectedInterval={selectedInterval}
-				modalInitialStartTime={timeRange.startTime * 1000}
-				modalInitialEndTime={timeRange.endTime * 1000}
-			/>
-		</div>
-	);
-}
-
-export default EntityDateTimeSelector;

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityDateTimeSelector/useEntityDetailsTime.ts

@@ -1,95 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import {
-	CustomTimeType,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
-import {
-	createCustomTimeRange,
-	isCustomTimeRange,
-	NANO_SECOND_MULTIPLIER,
-	useGlobalTime,
-} from 'store/globalTime';
-
-export interface EntityDetailsTimeRange {
-	/** Unix timestamp in seconds — the unit API payload builders expect. Multiply by 1000 for ms-based UI (modals, URL params). */
-	startTime: number;
-	/** Unix timestamp in seconds — the unit API payload builders expect. Multiply by 1000 for ms-based UI (modals, URL params). */
-	endTime: number;
-}
-
-export interface UseEntityDetailsTimeResult {
-	/** Time range in seconds */
-	timeRange: EntityDetailsTimeRange;
-	selectedInterval: Time;
-	handleTimeChange: (
-		interval: Time | CustomTimeType,
-		dateTimeRange?: [number, number],
-	) => void;
-	handleResetToParentTime: () => boolean;
-	canResetToParent: boolean;
-	hasTimeChanged: boolean;
-}
-
-export function useEntityDetailsTime(): UseEntityDetailsTimeResult {
-	const selectedTime = useGlobalTime((s) => s.selectedTime);
-	const lastComputedMinMax = useGlobalTime((s) => s.lastComputedMinMax);
-	const setSelectedTime = useGlobalTime((s) => s.setSelectedTime);
-	const handleResetToParentTime = useGlobalTime((s) => s.resetToParentTime);
-	const parentStore = useGlobalTime((s) => s.parentStore);
-
-	const canResetToParent = !!parentStore;
-
-	const hasTimeChanged = useMemo(() => {
-		if (!parentStore) {
-			return false;
-		}
-		return selectedTime !== parentStore.getState().selectedTime;
-	}, [parentStore, selectedTime]);
-
-	const timeRange = useMemo<EntityDetailsTimeRange>(
-		() => ({
-			startTime: Math.floor(
-				lastComputedMinMax.minTime / NANO_SECOND_MULTIPLIER / 1000,
-			),
-			endTime: Math.floor(
-				lastComputedMinMax.maxTime / NANO_SECOND_MULTIPLIER / 1000,
-			),
-		}),
-		[lastComputedMinMax],
-	);
-
-	const selectedInterval = useMemo<Time>(
-		() =>
-			isCustomTimeRange(selectedTime)
-				? ('custom' as Time)
-				: (selectedTime as Time),
-		[selectedTime],
-	);
-
-	const handleTimeChange = useCallback(
-		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
-			if (interval === 'custom' && dateTimeRange) {
-				// DateTimeSelector delivers milliseconds; the store keys custom
-				// ranges by nanoseconds.
-				setSelectedTime(
-					createCustomTimeRange(
-						dateTimeRange[0] * NANO_SECOND_MULTIPLIER,
-						dateTimeRange[1] * NANO_SECOND_MULTIPLIER,
-					),
-				);
-			} else {
-				setSelectedTime(interval as Time);
-			}
-		},
-		[setSelectedTime],
-	);
-
-	return {
-		timeRange,
-		selectedInterval,
-		handleTimeChange,
-		handleResetToParentTime,
-		canResetToParent,
-		hasTimeChanged,
-	};
-}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityEvents/EntityEvents.tsx

@@ -21,14 +21,17 @@ import Controls from 'container/Controls';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
 import LoadingContainer from 'container/InfraMonitoringK8sV2/LoadingContainer';
 import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
+import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
 import { ChevronDown, ChevronRight } from '@signozhq/icons';
 import { useQueryState } from 'nuqs';
 import { DataSource } from 'types/common/queryBuilder';
 import { parseAsJsonNoValidate } from 'utils/nuqsParsers';
 import { validateQuery } from 'utils/queryValidationUtils';
 
-import EntityDateTimeSelector from '../EntityDateTimeSelector/EntityDateTimeSelector';
-import { useEntityDetailsTime } from '../EntityDateTimeSelector/useEntityDetailsTime';
 import EntityEmptyState from '../EntityEmptyState/EntityEmptyState';
 import EntityError from '../EntityError/EntityError';
 import { EventContents } from './EventsContent';
@@ -50,7 +53,16 @@ interface EventDataType {
 }
 
 interface Props {
-	eventEntity: string;
+	timeRange: {
+		startTime: number;
+		endTime: number;
+	};
+	isModalTimeSelection: boolean;
+	handleTimeChange: (
+		interval: Time | CustomTimeType,
+		dateTimeRange?: [number, number],
+	) => void;
+	selectedInterval: Time;
 	queryKey: string;
 	category: InfraMonitoringEntity;
 	initialExpression: string;
@@ -65,11 +77,13 @@ const handleExpandRow = (record: EventDataType): JSX.Element => (
 );
 
 function EntityEventsContent({
-	eventEntity,
+	timeRange,
+	isModalTimeSelection,
+	handleTimeChange,
+	selectedInterval,
 	queryKey,
 	category,
 }: Omit<Props, 'initialExpression'>): JSX.Element {
-	const { timeRange } = useEntityDetailsTime();
 	const expression = useExpression();
 	const inputExpression = useInputExpression();
 	const userExpression = useUserExpression();
@@ -117,8 +131,8 @@ function EntityEventsContent({
 			if (validation.isValid) {
 				querySearchOnRun(newUserExpression || '');
 
-				void logEvent(InfraMonitoringEvents.FilterApplied, {
-					entity: eventEntity,
+				logEvent(InfraMonitoringEvents.FilterApplied, {
+					entity: InfraMonitoringEvents.K8sEntity,
 					page: InfraMonitoringEvents.DetailedPage,
 					category,
 					view: InfraMonitoringEvents.EventsView,
@@ -127,14 +141,7 @@ function EntityEventsContent({
 				refetch();
 			}
 		},
-		[
-			inputExpression,
-			initialExpression,
-			refetch,
-			querySearchOnRun,
-			category,
-			eventEntity,
-		],
+		[inputExpression, initialExpression, refetch, querySearchOnRun, category],
 	);
 
 	const queryData = useMemo(
@@ -222,10 +229,16 @@ function EntityEventsContent({
 		<div className={styles.container}>
 			<div className={styles.filterContainer}>
 				<div className={styles.filterContainerTime}>
-					<EntityDateTimeSelector
-						eventEntity={eventEntity}
-						category={category}
-						view={InfraMonitoringEvents.EventsView}
+					<DateTimeSelectionV2
+						showAutoRefresh
+						showRefreshText={false}
+						hideShareModal
+						isModalTimeSelection={isModalTimeSelection}
+						onTimeChange={handleTimeChange}
+						defaultRelativeTime="5m"
+						modalSelectedInterval={selectedInterval}
+						modalInitialStartTime={timeRange.startTime * 1000}
+						modalInitialEndTime={timeRange.endTime * 1000}
 					/>
 
 					<RunQueryBtn

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityEvents/__tests__/EntityEvents.test.tsx

@@ -29,25 +29,25 @@ function verifyEntityEventsV5Request({
 	expect(orderKeys).toContain('timestamp');
 }
 
-jest.mock('../../EntityDateTimeSelector/EntityDateTimeSelector', () => ({
+jest.mock('container/TopNav/DateTimeSelectionV2/index.tsx', () => ({
 	__esModule: true,
-	default: (): JSX.Element => (
-		<div data-testid="mock-datetime-selection">Date Time</div>
+	default: ({
+		onTimeChange,
+	}: {
+		onTimeChange?: (interval: string, dateTimeRange?: [number, number]) => void;
+	}): JSX.Element => (
+		<button
+			type="button"
+			data-testid="mock-datetime-selection"
+			onClick={(): void => {
+				onTimeChange?.('5m');
+			}}
+		>
+			Select Time
+		</button>
 	),
 }));
 
-jest.mock('../../EntityDateTimeSelector/useEntityDetailsTime', () => ({
-	useEntityDetailsTime: (): {
-		timeRange: { startTime: number; endTime: number };
-		selectedInterval: string;
-		handleTimeChange: jest.Mock;
-	} => ({
-		timeRange: { startTime: 1, endTime: 2 },
-		selectedInterval: '5m',
-		handleTimeChange: jest.fn(),
-	}),
-}));
-
 describe('EntityEvents', () => {
 	let capturedQueryRangePayloads: QueryRangePayloadV5[] = [];
 
@@ -69,7 +69,10 @@ describe('EntityEvents', () => {
 					searchParams={`${K8S_ENTITY_EVENTS_EXPRESSION_KEY}=k8s.pod.name+%3D+%22x%22`}
 				>
 					<EntityEvents
-						eventEntity="test"
+						timeRange={{ startTime: 1, endTime: 2 }}
+						isModalTimeSelection={false}
+						handleTimeChange={jest.fn()}
+						selectedInterval="5m"
 						queryKey="test"
 						category={InfraMonitoringEntity.PODS}
 						initialExpression='k8s.pod.name = "x"'

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityEvents/__tests__/EntityEvents.timeRange.test.tsx

@@ -1,81 +0,0 @@
-import { mockFieldsAPIsWithEmptyResponse } from '__tests__/fields_api.util';
-import { mockQueryRangeV5WithEventsResponse } from '__tests__/query_range_v5.util';
-import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
-import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import {
-	createCustomTimeRange,
-	createGlobalTimeStore,
-	GlobalTimeContext,
-	NANO_SECOND_MULTIPLIER,
-} from 'store/globalTime';
-import { act, render, waitFor } from 'tests/test-utils';
-import { QueryRangePayloadV5 } from 'types/api/v5/queryRange';
-
-import EntityEvents from '../EntityEvents';
-import { K8S_ENTITY_EVENTS_EXPRESSION_KEY } from '../hooks';
-
-jest.mock('../../EntityDateTimeSelector/EntityDateTimeSelector', () => ({
-	__esModule: true,
-	default: (): JSX.Element => (
-		<div data-testid="mock-datetime-selection">Date Time</div>
-	),
-}));
-
-const START_MS = 1705315200000; // 2024-01-15T10:40:00Z
-const END_MS = 1705318800000; // 2024-01-15T11:40:00Z
-
-describe('EntityEvents time range wiring', () => {
-	let capturedPayloads: QueryRangePayloadV5[] = [];
-
-	beforeEach(() => {
-		capturedPayloads = [];
-		mockQueryRangeV5WithEventsResponse({
-			onReceiveRequest: async (req) => {
-				const body = (await req.json()) as QueryRangePayloadV5;
-				capturedPayloads.push(body);
-				return {};
-			},
-		});
-		mockFieldsAPIsWithEmptyResponse();
-	});
-
-	it('should query the V5 API with the global time range converted to milliseconds', async () => {
-		const store = createGlobalTimeStore();
-		store
-			.getState()
-			.setSelectedTime(
-				createCustomTimeRange(
-					START_MS * NANO_SECOND_MULTIPLIER,
-					END_MS * NANO_SECOND_MULTIPLIER,
-				),
-			);
-
-		const expression = 'k8s.pod.name = "test-pod"';
-
-		act(() => {
-			render(
-				<GlobalTimeContext.Provider value={store}>
-					<NuqsTestingAdapter
-						searchParams={`${K8S_ENTITY_EVENTS_EXPRESSION_KEY}=${encodeURIComponent(
-							expression,
-						)}`}
-					>
-						<EntityEvents
-							eventEntity="test"
-							queryKey="test"
-							category={InfraMonitoringEntity.PODS}
-							initialExpression={expression}
-						/>
-					</NuqsTestingAdapter>
-				</GlobalTimeContext.Provider>,
-			);
-		});
-
-		await waitFor(() => {
-			expect(capturedPayloads).toHaveLength(1);
-		});
-
-		expect(capturedPayloads[0].start).toBe(START_MS);
-		expect(capturedPayloads[0].end).toBe(END_MS);
-	});
-});

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityLogs/EntityLogs.tsx

@@ -25,6 +25,11 @@ import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants'
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { FontSize } from 'container/OptionsMenu/types';
 import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
+import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
 import { getOldLogsOperatorFromNew } from 'hooks/logs/useActiveLog';
 import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
 import useScrollToLog from 'hooks/logs/useScrollToLog';
@@ -33,8 +38,6 @@ import { ILog } from 'types/api/logs/log';
 import { DataSource } from 'types/common/queryBuilder';
 import { validateQuery } from 'utils/queryValidationUtils';
 
-import EntityDateTimeSelector from '../EntityDateTimeSelector/EntityDateTimeSelector';
-import { useEntityDetailsTime } from '../EntityDateTimeSelector/useEntityDetailsTime';
 import EntityEmptyState from '../EntityEmptyState/EntityEmptyState';
 import EntityError from '../EntityError/EntityError';
 import { isKeyNotFoundError } from '../utils';
@@ -44,18 +47,29 @@ import { getEntityLogsQueryPayload } from './utils';
 import styles from './EntityLogs.module.scss';
 
 interface Props {
-	eventEntity: string;
+	timeRange: {
+		startTime: number;
+		endTime: number;
+	};
+	isModalTimeSelection: boolean;
+	handleTimeChange: (
+		interval: Time | CustomTimeType,
+		dateTimeRange?: [number, number],
+	) => void;
+	selectedInterval: Time;
 	queryKey: string;
 	category: InfraMonitoringEntity;
 	initialExpression: string;
 }
 
 function EntityLogsContent({
-	eventEntity,
+	timeRange,
+	isModalTimeSelection,
+	handleTimeChange,
+	selectedInterval,
 	queryKey,
 	category,
 }: Omit<Props, 'initialExpression'>): JSX.Element {
-	const { timeRange } = useEntityDetailsTime();
 	const virtuosoRef = useRef<VirtuosoHandle>(null);
 
 	const expression = useExpression();
@@ -120,7 +134,7 @@ function EntityLogsContent({
 			if (validation.isValid) {
 				querySearchOnRun(newUserExpression);
 
-				void logEvent(InfraMonitoringEvents.FilterApplied, {
+				logEvent(InfraMonitoringEvents.FilterApplied, {
 					entity: InfraMonitoringEvents.K8sEntity,
 					page: InfraMonitoringEvents.DetailedPage,
 					category,
@@ -225,10 +239,16 @@ function EntityLogsContent({
 		<div className={styles.container}>
 			<div className={styles.filterContainer}>
 				<div className={styles.filterContainerTime}>
-					<EntityDateTimeSelector
-						eventEntity={eventEntity}
-						category={category}
-						view={InfraMonitoringEvents.LogsView}
+					<DateTimeSelectionV2
+						showAutoRefresh
+						showRefreshText={false}
+						hideShareModal
+						isModalTimeSelection={isModalTimeSelection}
+						onTimeChange={handleTimeChange}
+						defaultRelativeTime="5m"
+						modalSelectedInterval={selectedInterval}
+						modalInitialStartTime={timeRange.startTime * 1000}
+						modalInitialEndTime={timeRange.endTime * 1000}
 					/>
 
 					<RunQueryBtn

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityLogs/__tests__/EntityLogs.test.tsx

@@ -50,25 +50,25 @@ jest.mock(
 		},
 );
 
-jest.mock('../../EntityDateTimeSelector/EntityDateTimeSelector', () => ({
+jest.mock('container/TopNav/DateTimeSelectionV2/index.tsx', () => ({
 	__esModule: true,
-	default: (): JSX.Element => (
-		<div data-testid="mock-datetime-selection">Date Time</div>
+	default: ({
+		onTimeChange,
+	}: {
+		onTimeChange?: (interval: string, dateTimeRange?: [number, number]) => void;
+	}): JSX.Element => (
+		<button
+			type="button"
+			data-testid="mock-datetime-selection"
+			onClick={(): void => {
+				onTimeChange?.('5m');
+			}}
+		>
+			Select Time
+		</button>
 	),
 }));
 
-jest.mock('../../EntityDateTimeSelector/useEntityDetailsTime', () => ({
-	useEntityDetailsTime: (): {
-		timeRange: { startTime: number; endTime: number };
-		selectedInterval: string;
-		handleTimeChange: jest.Mock;
-	} => ({
-		timeRange: { startTime: 1, endTime: 2 },
-		selectedInterval: '5m',
-		handleTimeChange: jest.fn(),
-	}),
-}));
-
 describe('EntityLogs', () => {
 	let capturedQueryRangePayloads: QueryRangePayloadV5[] = [];
 	const itemHeight = 100;
@@ -94,7 +94,10 @@ describe('EntityLogs', () => {
 				>
 					<VirtuosoMockContext.Provider value={{ viewportHeight: 500, itemHeight }}>
 						<EntityLogs
-							eventEntity="test"
+							timeRange={{ startTime: 1, endTime: 2 }}
+							isModalTimeSelection={false}
+							handleTimeChange={jest.fn()}
+							selectedInterval="5m"
 							queryKey="test"
 							category={InfraMonitoringEntity.PODS}
 							initialExpression='k8s.pod.name = "x"'

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityLogs/__tests__/EntityLogs.timeRange.test.tsx

@@ -1,93 +0,0 @@
-import { mockFieldsAPIsWithEmptyResponse } from '__tests__/fields_api.util';
-import { mockQueryRangeV5WithLogsResponse } from '__tests__/query_range_v5.util';
-import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
-import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import {
-	createCustomTimeRange,
-	createGlobalTimeStore,
-	GlobalTimeContext,
-	NANO_SECOND_MULTIPLIER,
-} from 'store/globalTime';
-import { act, render, waitFor } from 'tests/test-utils';
-import { QueryRangePayloadV5 } from 'types/api/v5/queryRange';
-
-import EntityLogs from '../EntityLogs';
-import { K8S_ENTITY_LOGS_EXPRESSION_KEY } from '../hooks';
-
-jest.mock(
-	'components/OverlayScrollbar/OverlayScrollbar',
-	() =>
-		function MockOverlayScrollbar({
-			children,
-		}: {
-			children: React.ReactNode;
-		}): JSX.Element {
-			return <div>{children}</div>;
-		},
-);
-
-jest.mock('../../EntityDateTimeSelector/EntityDateTimeSelector', () => ({
-	__esModule: true,
-	default: (): JSX.Element => (
-		<div data-testid="mock-datetime-selection">Date Time</div>
-	),
-}));
-
-const START_MS = 1705315200000; // 2024-01-15T10:40:00Z
-const END_MS = 1705318800000; // 2024-01-15T11:40:00Z
-
-describe('EntityLogs time range wiring', () => {
-	let capturedPayloads: QueryRangePayloadV5[] = [];
-
-	beforeEach(() => {
-		capturedPayloads = [];
-		mockQueryRangeV5WithLogsResponse({
-			onReceiveRequest: async (req) => {
-				const body = (await req.json()) as QueryRangePayloadV5;
-				capturedPayloads.push(body);
-				return {};
-			},
-		});
-		mockFieldsAPIsWithEmptyResponse();
-	});
-
-	it('should query the V5 API with the global time range converted to milliseconds', async () => {
-		const store = createGlobalTimeStore();
-		store
-			.getState()
-			.setSelectedTime(
-				createCustomTimeRange(
-					START_MS * NANO_SECOND_MULTIPLIER,
-					END_MS * NANO_SECOND_MULTIPLIER,
-				),
-			);
-
-		const expression = 'k8s.pod.name = "test-pod"';
-
-		act(() => {
-			render(
-				<GlobalTimeContext.Provider value={store}>
-					<NuqsTestingAdapter
-						searchParams={`${K8S_ENTITY_LOGS_EXPRESSION_KEY}=${encodeURIComponent(
-							expression,
-						)}`}
-					>
-						<EntityLogs
-							eventEntity="test"
-							queryKey="test"
-							category={InfraMonitoringEntity.PODS}
-							initialExpression={expression}
-						/>
-					</NuqsTestingAdapter>
-				</GlobalTimeContext.Provider>,
-			);
-		});
-
-		await waitFor(() => {
-			expect(capturedPayloads.length).toBeGreaterThanOrEqual(1);
-		});
-
-		expect(capturedPayloads[0].start).toBe(START_MS);
-		expect(capturedPayloads[0].end).toBe(END_MS);
-	});
-});

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityMetrics/EntityMetrics.tsx

@@ -2,11 +2,15 @@ import { useCallback, useMemo, useRef } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Skeleton } from 'antd';
 import cx from 'classnames';
-import { InfraMonitoringEvents } from 'constants/events';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import TimeSeries from 'container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
+import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
@@ -20,17 +24,25 @@ import { getMetricsExplorerUrl } from 'utils/explorerUtils';
 import { buildEntityMetricsChartConfig } from './configBuilder';
 import ChartHeader from './ChartHeader';
 
-import EntityDateTimeSelector from '../EntityDateTimeSelector/EntityDateTimeSelector';
-import { useEntityDetailsTime } from '../EntityDateTimeSelector/useEntityDetailsTime';
 import { useEntityMetrics } from './hooks';
 import { isKeyNotFoundError } from '../utils';
 
 import styles from './EntityMetrics.module.scss';
 import { MetricsTable } from './MetricsTable';
+import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
 
 interface EntityMetricsProps<T> {
+	timeRange: {
+		startTime: number;
+		endTime: number;
+	};
+	isModalTimeSelection: boolean;
+	handleTimeChange: (
+		interval: Time | CustomTimeType,
+		dateTimeRange?: [number, number],
+	) => void;
+	selectedInterval: Time;
 	entity: T;
-	eventEntity: string;
 	entityWidgetInfo: {
 		title: string;
 		yAxisUnit: string;
@@ -47,16 +59,16 @@ interface EntityMetricsProps<T> {
 }
 
 function EntityMetrics<T>({
+	selectedInterval,
 	entity,
-	eventEntity,
+	timeRange,
+	handleTimeChange,
+	isModalTimeSelection,
 	entityWidgetInfo,
 	getEntityQueryPayload,
 	queryKey,
 	category,
 }: EntityMetricsProps<T>): JSX.Element {
-	const { timeRange, selectedInterval, handleTimeChange } =
-		useEntityDetailsTime();
-
 	const { visibilities, setElement } = useMultiIntersectionObserver(
 		entityWidgetInfo.length,
 		{ threshold: 0.1 },
@@ -79,8 +91,10 @@ function EntityMetrics<T>({
 
 	const onDragSelect = useCallback(
 		(start: number, end: number): void => {
-			// UPlotConfigBuilder's setSelect hook already delivers milliseconds
-			handleTimeChange('custom', [Math.trunc(start), Math.trunc(end)]);
+			const startTimestamp = Math.trunc(start);
+			const endTimestamp = Math.trunc(end);
+
+			handleTimeChange('custom', [startTimestamp, endTimestamp]);
 		},
 		[handleTimeChange],
 	);
@@ -174,10 +188,16 @@ function EntityMetrics<T>({
 	return (
 		<>
 			<div className={styles.metricsHeader}>
-				<EntityDateTimeSelector
-					eventEntity={eventEntity}
-					category={category}
-					view={InfraMonitoringEvents.MetricsView}
+				<DateTimeSelectionV2
+					showAutoRefresh
+					showRefreshText={false}
+					hideShareModal
+					onTimeChange={handleTimeChange}
+					defaultRelativeTime={DEFAULT_TIME_RANGE}
+					isModalTimeSelection={isModalTimeSelection}
+					modalSelectedInterval={selectedInterval}
+					modalInitialStartTime={timeRange.startTime * 1000}
+					modalInitialEndTime={timeRange.endTime * 1000}
 				/>
 			</div>
 			<div className={styles.entityMetricsContainer}>

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityMetrics/__tests__/EntityMetrics.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
+import { Time } from 'container/TopNav/DateTimeSelectionV2/types';
 import * as appContextHooks from 'providers/App/App';
 import { LicenseEvent } from 'types/api/licensesV3/getActive';
 import uPlot from 'uplot';
@@ -27,28 +28,13 @@ jest.mock('lib/uPlotV2/utils/dataUtils', () => ({
 	hasSingleVisiblePoint: jest.fn().mockReturnValue(false),
 }));
 
-jest.mock('../../EntityDateTimeSelector/EntityDateTimeSelector', () => ({
+jest.mock('container/TopNav/DateTimeSelectionV2', () => ({
 	__esModule: true,
 	default: (): JSX.Element => (
 		<div data-testid="date-time-selection">Date Time</div>
 	),
 }));
 
-const mockTimeRange = { startTime: 1705315200, endTime: 1705318800 };
-let mockSelectedInterval = '5m';
-
-jest.mock('../../EntityDateTimeSelector/useEntityDetailsTime', () => ({
-	useEntityDetailsTime: (): {
-		timeRange: { startTime: number; endTime: number };
-		selectedInterval: string;
-		handleTimeChange: jest.Mock;
-	} => ({
-		timeRange: mockTimeRange,
-		selectedInterval: mockSelectedInterval,
-		handleTimeChange: jest.fn(),
-	}),
-}));
-
 jest.mock(
 	'container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries',
 	() => ({
@@ -158,6 +144,13 @@ const mockGetEntityQueryPayload = jest.fn().mockReturnValue([
 	},
 ]);
 
+const mockTimeRange = {
+	startTime: 1705315200,
+	endTime: 1705318800,
+};
+
+const mockHandleTimeChange = jest.fn();
+
 const mockQueries = [
 	{
 		data: {
@@ -290,6 +283,10 @@ const mockEmptyQueries = [
 
 const renderEntityMetrics = (overrides = {}): any => {
 	const defaultProps = {
+		timeRange: mockTimeRange,
+		isModalTimeSelection: false,
+		handleTimeChange: mockHandleTimeChange,
+		selectedInterval: '5m' as Time,
 		entity: mockEntity,
 		entityWidgetInfo: mockEntityWidgetInfo,
 		getEntityQueryPayload: mockGetEntityQueryPayload,
@@ -301,8 +298,11 @@ const renderEntityMetrics = (overrides = {}): any => {
 	return render(
 		<MemoryRouter>
 			<EntityMetrics
+				timeRange={defaultProps.timeRange}
+				isModalTimeSelection={defaultProps.isModalTimeSelection}
+				handleTimeChange={defaultProps.handleTimeChange}
+				selectedInterval={defaultProps.selectedInterval}
 				entity={defaultProps.entity}
-				eventEntity="test"
 				entityWidgetInfo={defaultProps.entityWidgetInfo}
 				getEntityQueryPayload={defaultProps.getEntityQueryPayload}
 				queryKey={defaultProps.queryKey}
@@ -344,7 +344,6 @@ const mockQueryPayloads = [
 describe('EntityMetrics', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
-		mockSelectedInterval = '5m';
 		mockUseEntityMetrics.mockReturnValue({
 			queries: mockQueries as any,
 			chartData: mockChartData,
@@ -455,8 +454,7 @@ describe('EntityMetrics', () => {
 	});
 
 	it('builds metrics explorer link with relativeTime when a relative interval is selected', () => {
-		mockSelectedInterval = '5m';
-		renderEntityMetrics();
+		renderEntityMetrics({ selectedInterval: '5m' as Time });
 		const href = screen
 			.getByTestId('open-metrics-explorer-0')
 			.getAttribute('href');
@@ -466,8 +464,7 @@ describe('EntityMetrics', () => {
 	});
 
 	it('builds metrics explorer link with absolute time range in milliseconds for custom interval', () => {
-		mockSelectedInterval = 'custom';
-		renderEntityMetrics();
+		renderEntityMetrics({ selectedInterval: 'custom' as Time });
 		const href = screen
 			.getByTestId('open-metrics-explorer-0')
 			.getAttribute('href');
@@ -481,6 +478,7 @@ describe('EntityMetrics', () => {
 		expect(mockUseEntityMetrics).toHaveBeenCalledWith(
 			expect.objectContaining({
 				queryKey: 'test-query-key',
+				timeRange: mockTimeRange,
 				entity: mockEntity,
 				category: InfraMonitoringEntity.PODS,
 			}),

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityMetrics/__tests__/EntityMetrics.timeRange.test.tsx

@@ -1,119 +0,0 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
-import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import {
-	createCustomTimeRange,
-	createGlobalTimeStore,
-	GlobalTimeContext,
-	GlobalTimeStoreApi,
-	NANO_SECOND_MULTIPLIER,
-} from 'store/globalTime';
-import { act, render } from 'tests/test-utils';
-
-import { buildEntityMetricsChartConfig } from '../configBuilder';
-import EntityMetrics from '../EntityMetrics';
-
-jest.mock('../configBuilder', () => ({
-	buildEntityMetricsChartConfig: jest.fn().mockReturnValue({
-		getId: jest.fn().mockReturnValue('mock-id'),
-	}),
-}));
-
-jest.mock('../../EntityDateTimeSelector/EntityDateTimeSelector', () => ({
-	__esModule: true,
-	default: (): JSX.Element => (
-		<div data-testid="date-time-selection">Date Time</div>
-	),
-}));
-
-const mockBuildChartConfig = buildEntityMetricsChartConfig as jest.Mock;
-
-const START_MS = 1705315200000; // 2024-01-15T10:40:00Z
-const END_MS = 1705318800000; // 2024-01-15T11:40:00Z
-const START_SECONDS = 1705315200;
-const END_SECONDS = 1705318800;
-
-const entity = { id: 'test-entity-1' };
-
-// The jsdom IntersectionObserver polyfill never reports visibility, so the
-// queries stay disabled and no network request is issued.
-const queryPayload = {
-	graphType: PANEL_TYPES.TIME_SERIES,
-} as unknown as GetQueryResultsProps;
-
-function createStoreWithCustomRange(): GlobalTimeStoreApi {
-	const store = createGlobalTimeStore();
-	store
-		.getState()
-		.setSelectedTime(
-			createCustomTimeRange(
-				START_MS * NANO_SECOND_MULTIPLIER,
-				END_MS * NANO_SECOND_MULTIPLIER,
-			),
-		);
-	return store;
-}
-
-function renderEntityMetrics(store: GlobalTimeStoreApi): jest.Mock {
-	const getEntityQueryPayload = jest.fn().mockReturnValue([queryPayload]);
-	render(
-		<GlobalTimeContext.Provider value={store}>
-			<EntityMetrics
-				entity={entity}
-				eventEntity="test"
-				entityWidgetInfo={[{ title: 'CPU Usage', yAxisUnit: 'percentage' }]}
-				getEntityQueryPayload={getEntityQueryPayload}
-				queryKey="test-query-key"
-				category={InfraMonitoringEntity.PODS}
-			/>
-		</GlobalTimeContext.Provider>,
-	);
-	return getEntityQueryPayload;
-}
-
-describe('EntityMetrics time range wiring', () => {
-	beforeEach(() => {
-		mockBuildChartConfig.mockClear();
-	});
-
-	it('should build the metrics query payloads and chart config from the global time range in seconds', () => {
-		const store = createStoreWithCustomRange();
-
-		const getEntityQueryPayload = renderEntityMetrics(store);
-
-		expect(getEntityQueryPayload).toHaveBeenCalledWith(
-			entity,
-			START_SECONDS,
-			END_SECONDS,
-			false,
-		);
-		expect(mockBuildChartConfig).toHaveBeenCalledWith(
-			expect.objectContaining({
-				minTimeScale: START_SECONDS,
-				maxTimeScale: END_SECONDS,
-			}),
-		);
-	});
-
-	it('should store a drag selection (received in milliseconds) as the equivalent custom range', () => {
-		const store = createStoreWithCustomRange();
-
-		renderEntityMetrics(store);
-
-		const { onDragSelect } = mockBuildChartConfig.mock.calls[0][0];
-
-		// UPlotConfigBuilder's setSelect hook calls onDragSelect with milliseconds
-		const dragStartMs = 1705316000000;
-		const dragEndMs = 1705317000000;
-		act(() => {
-			onDragSelect(dragStartMs, dragEndMs);
-		});
-
-		expect(store.getState().selectedTime).toBe(
-			createCustomTimeRange(
-				dragStartMs * NANO_SECOND_MULTIPLIER,
-				dragEndMs * NANO_SECOND_MULTIPLIER,
-			),
-		);
-	});
-});

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityTraces/EntityTraces.tsx

@@ -20,6 +20,11 @@ import { InfraMonitoringEvents } from 'constants/events';
 import Controls from 'container/Controls';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
 import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
+import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
 import { PER_PAGE_OPTIONS } from 'container/TracesExplorer/ListView/configs';
 import { TracesLoading } from 'container/TracesExplorer/TraceLoading/TraceLoading';
 import { useQueryState } from 'nuqs';
@@ -27,11 +32,10 @@ import { DataSource } from 'types/common/queryBuilder';
 import { parseAsJsonNoValidate } from 'utils/nuqsParsers';
 import { validateQuery } from 'utils/queryValidationUtils';
 
-import EntityDateTimeSelector from '../EntityDateTimeSelector/EntityDateTimeSelector';
-import { useEntityDetailsTime } from '../EntityDateTimeSelector/useEntityDetailsTime';
 import EntityEmptyState from '../EntityEmptyState/EntityEmptyState';
 import EntityError from '../EntityError/EntityError';
-import { isKeyNotFoundError, selectedEntityTracesColumns } from '../utils';
+import { selectedEntityTracesColumns } from '../utils';
+import { isKeyNotFoundError } from '../utils';
 import { K8S_ENTITY_TRACES_EXPRESSION_KEY, useEntityTraces } from './hooks';
 import { getTraceListColumns } from './traceListColumns';
 import { getEntityTracesQueryPayload } from './utils';
@@ -40,18 +44,29 @@ import styles from './EntityTraces.module.scss';
 import { useTimezone } from 'providers/Timezone';
 
 interface Props {
-	eventEntity: string;
+	timeRange: {
+		startTime: number;
+		endTime: number;
+	};
+	isModalTimeSelection: boolean;
+	handleTimeChange: (
+		interval: Time | CustomTimeType,
+		dateTimeRange?: [number, number],
+	) => void;
+	selectedInterval: Time;
 	queryKey: string;
 	category: InfraMonitoringEntity;
 	initialExpression: string;
 }
 
 function EntityTracesContent({
-	eventEntity,
+	timeRange,
+	isModalTimeSelection,
+	handleTimeChange,
+	selectedInterval,
 	queryKey,
 	category,
 }: Omit<Props, 'initialExpression'>): JSX.Element {
-	const { timeRange } = useEntityDetailsTime();
 	const expression = useExpression();
 	const inputExpression = useInputExpression();
 	const userExpression = useUserExpression();
@@ -99,8 +114,8 @@ function EntityTracesContent({
 			if (validation.isValid) {
 				querySearchOnRun(newUserExpression || '');
 
-				void logEvent(InfraMonitoringEvents.FilterApplied, {
-					entity: eventEntity,
+				logEvent(InfraMonitoringEvents.FilterApplied, {
+					entity: InfraMonitoringEvents.K8sEntity,
 					page: InfraMonitoringEvents.DetailedPage,
 					category,
 					view: InfraMonitoringEvents.TracesView,
@@ -109,14 +124,7 @@ function EntityTracesContent({
 				refetch();
 			}
 		},
-		[
-			inputExpression,
-			initialExpression,
-			refetch,
-			querySearchOnRun,
-			category,
-			eventEntity,
-		],
+		[inputExpression, initialExpression, refetch, querySearchOnRun, category],
 	);
 
 	const queryData = useMemo(
@@ -144,7 +152,7 @@ function EntityTracesContent({
 	const hasAdditionalFilters = !!userExpression?.trim();
 
 	const handleRowClick = useCallback(() => {
-		void logEvent(InfraMonitoringEvents.ItemClicked, {
+		logEvent(InfraMonitoringEvents.ItemClicked, {
 			entity: InfraMonitoringEvents.K8sEntity,
 			category,
 			view: InfraMonitoringEvents.TracesView,
@@ -161,10 +169,16 @@ function EntityTracesContent({
 		<div className={styles.container}>
 			<div className={styles.filterContainer}>
 				<div className={styles.filterContainerTime}>
-					<EntityDateTimeSelector
-						eventEntity={eventEntity}
-						category={category}
-						view={InfraMonitoringEvents.TracesView}
+					<DateTimeSelectionV2
+						showAutoRefresh
+						showRefreshText={false}
+						hideShareModal
+						isModalTimeSelection={isModalTimeSelection}
+						onTimeChange={handleTimeChange}
+						defaultRelativeTime="5m"
+						modalSelectedInterval={selectedInterval}
+						modalInitialStartTime={timeRange.startTime * 1000}
+						modalInitialEndTime={timeRange.endTime * 1000}
 					/>
 
 					<RunQueryBtn

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityTraces/__tests__/EntityTraces.default.test.tsx

@@ -34,8 +34,10 @@ describe('EntityTraces - Default Behavior', () => {
 	});
 
 	it('should pass time range to API (converted to milliseconds)', async () => {
+		const timeRange = { startTime: 1000, endTime: 2000 };
+
 		act(() => {
-			renderEntityTraces();
+			renderEntityTraces({ timeRange });
 		});
 
 		await waitFor(() => {
@@ -45,8 +47,8 @@ describe('EntityTraces - Default Behavior', () => {
 		verifyQueryPayload({
 			payload: capturedPayloads[0],
 			expectedTimeRange: {
-				start: 1 * 1000,
-				end: 2 * 1000,
+				start: timeRange.startTime * 1000,
+				end: timeRange.endTime * 1000,
 			},
 		});
 	});

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityTraces/__tests__/EntityTraces.timeRange.test.tsx

@@ -1,81 +0,0 @@
-import { mockFieldsAPIsWithEmptyResponse } from '__tests__/fields_api.util';
-import { mockQueryRangeV5WithTracesResponse } from '__tests__/query_range_v5.util';
-import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
-import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import {
-	createCustomTimeRange,
-	createGlobalTimeStore,
-	GlobalTimeContext,
-	NANO_SECOND_MULTIPLIER,
-} from 'store/globalTime';
-import { act, render, waitFor } from 'tests/test-utils';
-import { QueryRangePayloadV5 } from 'types/api/v5/queryRange';
-
-import EntityTraces from '../EntityTraces';
-import { K8S_ENTITY_TRACES_EXPRESSION_KEY } from '../hooks';
-
-jest.mock('../../EntityDateTimeSelector/EntityDateTimeSelector', () => ({
-	__esModule: true,
-	default: (): JSX.Element => (
-		<div data-testid="mock-datetime-selection">Date Time</div>
-	),
-}));
-
-const START_MS = 1705315200000; // 2024-01-15T10:40:00Z
-const END_MS = 1705318800000; // 2024-01-15T11:40:00Z
-
-describe('EntityTraces time range wiring', () => {
-	let capturedPayloads: QueryRangePayloadV5[] = [];
-
-	beforeEach(() => {
-		capturedPayloads = [];
-		mockQueryRangeV5WithTracesResponse({
-			onReceiveRequest: async (req) => {
-				const body = (await req.json()) as QueryRangePayloadV5;
-				capturedPayloads.push(body);
-				return {};
-			},
-		});
-		mockFieldsAPIsWithEmptyResponse();
-	});
-
-	it('should query the V5 API with the global time range converted to milliseconds', async () => {
-		const store = createGlobalTimeStore();
-		store
-			.getState()
-			.setSelectedTime(
-				createCustomTimeRange(
-					START_MS * NANO_SECOND_MULTIPLIER,
-					END_MS * NANO_SECOND_MULTIPLIER,
-				),
-			);
-
-		const expression = 'k8s.pod.name = "test-pod"';
-
-		act(() => {
-			render(
-				<GlobalTimeContext.Provider value={store}>
-					<NuqsTestingAdapter
-						searchParams={`${K8S_ENTITY_TRACES_EXPRESSION_KEY}=${encodeURIComponent(
-							expression,
-						)}`}
-					>
-						<EntityTraces
-							eventEntity="test"
-							queryKey="test"
-							category={InfraMonitoringEntity.PODS}
-							initialExpression={expression}
-						/>
-					</NuqsTestingAdapter>
-				</GlobalTimeContext.Provider>,
-			);
-		});
-
-		await waitFor(() => {
-			expect(capturedPayloads).toHaveLength(1);
-		});
-
-		expect(capturedPayloads[0].start).toBe(START_MS);
-		expect(capturedPayloads[0].end).toBe(END_MS);
-	});
-});

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityTraces/__tests__/testUtils.tsx

@@ -1,5 +1,7 @@
-import { mockFieldsAPIsWithEmptyResponse } from '__tests__/fields_api.util';
+import { ENVIRONMENT } from 'constants/env';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { render, RenderResult } from 'tests/test-utils';
 import { QueryRangePayloadV5 } from 'types/api/v5/queryRange';
@@ -7,19 +9,39 @@ import { QueryRangePayloadV5 } from 'types/api/v5/queryRange';
 import EntityTraces from '../EntityTraces';
 import { K8S_ENTITY_TRACES_EXPRESSION_KEY } from '../hooks';
 
+// QuerySearch fires autocomplete requests on mount; without handlers MSW
+// passes them through to the real network and the resulting AxiosError fails
+// whichever test happens to be running.
 beforeEach(() => {
-	mockFieldsAPIsWithEmptyResponse();
+	server.use(
+		rest.get(`${ENVIRONMENT.baseURL}/api/v1/fields/keys`, (_, res, ctx) =>
+			res(
+				ctx.status(200),
+				ctx.json({ status: 'success', data: { keys: {}, complete: true } }),
+			),
+		),
+		rest.get(`${ENVIRONMENT.baseURL}/api/v1/fields/values`, (_, res, ctx) =>
+			res(
+				ctx.status(200),
+				ctx.json({ status: 'success', data: { values: {}, complete: true } }),
+			),
+		),
+	);
 });
 
 export interface RenderEntityTracesOptions {
 	expression?: string;
+	timeRange?: { startTime: number; endTime: number };
 	category?: InfraMonitoringEntity;
+	selectedInterval?: '5m' | '15m' | '30m' | '1h';
 	pagination?: { offset: number; limit: number };
 }
 
 export function renderEntityTraces({
 	expression = 'k8s.pod.name = "test-pod"',
+	timeRange = { startTime: 1, endTime: 2 },
 	category = InfraMonitoringEntity.PODS,
+	selectedInterval = '5m',
 	pagination,
 }: RenderEntityTracesOptions = {}): RenderResult {
 	const encodedExpression = encodeURIComponent(expression);
@@ -33,7 +55,10 @@ export function renderEntityTraces({
 	return render(
 		<NuqsTestingAdapter searchParams={searchParams}>
 			<EntityTraces
-				eventEntity="test"
+				timeRange={timeRange}
+				isModalTimeSelection={false}
+				handleTimeChange={jest.fn()}
+				selectedInterval={selectedInterval}
 				queryKey="test"
 				category={category}
 				initialExpression={expression}
@@ -76,21 +101,21 @@ export function verifyQueryPayload({
 	expect(orderKeys).toContain('timestamp');
 }
 
-jest.mock('../../EntityDateTimeSelector/EntityDateTimeSelector', () => ({
+jest.mock('container/TopNav/DateTimeSelectionV2/index.tsx', () => ({
 	__esModule: true,
-	default: (): JSX.Element => (
-		<div data-testid="mock-datetime-selection">Date Time</div>
+	default: ({
+		onTimeChange,
+	}: {
+		onTimeChange?: (interval: string, dateTimeRange?: [number, number]) => void;
+	}): JSX.Element => (
+		<button
+			type="button"
+			data-testid="mock-datetime-selection"
+			onClick={(): void => {
+				onTimeChange?.('5m');
+			}}
+		>
+			Select Time
+		</button>
 	),
 }));
-
-jest.mock('../../EntityDateTimeSelector/useEntityDetailsTime', () => ({
-	useEntityDetailsTime: (): {
-		timeRange: { startTime: number; endTime: number };
-		selectedInterval: string;
-		handleTimeChange: jest.Mock;
-	} => ({
-		timeRange: { startTime: 1, endTime: 2 },
-		selectedInterval: '5m',
-		handleTimeChange: jest.fn(),
-	}),
-}));

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/createPodMetricsTab.tsx

@@ -1,5 +1,4 @@
 import { Container } from '@signozhq/icons';
-import { InfraMonitoringEvents } from 'constants/events';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 
 import { CustomTab } from '../Base/K8sBaseDetails';
@@ -11,20 +10,6 @@ import {
 
 import EntityMetrics from './EntityMetrics';
 
-const categoryToEventEntity: Record<InfraMonitoringEntity, string> = {
-	[InfraMonitoringEntity.DAEMONSETS]: InfraMonitoringEvents.DaemonSet,
-	[InfraMonitoringEntity.DEPLOYMENTS]: InfraMonitoringEvents.Deployment,
-	[InfraMonitoringEntity.JOBS]: InfraMonitoringEvents.Job,
-	[InfraMonitoringEntity.NAMESPACES]: InfraMonitoringEvents.Namespace,
-	[InfraMonitoringEntity.STATEFULSETS]: InfraMonitoringEvents.StatefulSet,
-	[InfraMonitoringEntity.PODS]: InfraMonitoringEvents.Pod,
-	[InfraMonitoringEntity.NODES]: InfraMonitoringEvents.Node,
-	[InfraMonitoringEntity.CLUSTERS]: InfraMonitoringEvents.Cluster,
-	[InfraMonitoringEntity.VOLUMES]: InfraMonitoringEvents.Volume,
-	[InfraMonitoringEntity.HOSTS]: InfraMonitoringEvents.HostEntity,
-	[InfraMonitoringEntity.CONTAINERS]: 'container',
-};
-
 interface CreatePodMetricsTabParams<T> {
 	getQueryPayload: (
 		entity: T,
@@ -32,29 +17,30 @@ interface CreatePodMetricsTabParams<T> {
 		end: number,
 		dotMetricsEnabled: boolean,
 	) => GetQueryResultsProps[];
-	queryKey: string;
 	category: InfraMonitoringEntity;
+	queryKey: string;
 }
 
 export function createPodMetricsTab<T>({
 	getQueryPayload,
-	queryKey,
 	category,
+	queryKey,
 }: CreatePodMetricsTabParams<T>): CustomTab<T> {
-	const eventEntity = categoryToEventEntity[category];
-
 	return {
 		key: VIEW_TYPES.POD_METRICS,
 		label: 'Pod Metrics',
 		icon: <Container size={14} />,
-		render: ({ entity }) => (
+		render: ({ entity, timeRange, selectedInterval, handleTimeChange }) => (
 			<EntityMetrics
 				entity={entity}
-				eventEntity={eventEntity}
+				selectedInterval={selectedInterval}
+				timeRange={timeRange}
+				handleTimeChange={handleTimeChange}
+				isModalTimeSelection
 				entityWidgetInfo={podUtilizationByPodWidgetInfo}
 				getEntityQueryPayload={getQueryPayload}
-				queryKey={queryKey}
 				category={category}
+				queryKey={queryKey}
 			/>
 		),
 	};

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/entityDetails.styles.scss

@@ -454,9 +454,3 @@
 		gap: 16px;
 	}
 }
-
-.entity-date-time-selector {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}

frontend/src/container/InfraMonitoringK8sV2/constants.ts

@@ -905,9 +905,6 @@ export const INFRA_MONITORING_K8S_PARAMS_KEYS = {
 	SELECTED_ITEM: 'selectedItem',
 	SELECTED_ITEM_CLUSTER_NAME: 'selectedItemClusterName',
 	SELECTED_ITEM_NAMESPACE_NAME: 'selectedItemNamespaceName',
-	DETAIL_RELATIVE_TIME: 'detailRelativeTime',
-	DETAIL_START_TIME: 'detailStartTime',
-	DETAIL_END_TIME: 'detailEndTime',
 };
 
 /** Metric namespace prefixes for /fields/keys and /fields/values APIs */

frontend/src/index.tsx

@@ -7,7 +7,6 @@ import AppRoutes from 'AppRoutes';
 import { AxiosError } from 'axios';
 import { GlobalTimeStoreAdapter } from 'components/GlobalTimeStoreAdapter/GlobalTimeStoreAdapter';
 import { ThemeProvider } from 'hooks/useDarkMode';
-import { configureOverlayScrollbars } from 'lib/configureOverlayScrollbars';
 import { NuqsAdapter } from 'nuqs/adapters/react';
 import { AppProvider } from 'providers/App/App';
 import TimezoneProvider from 'providers/Timezone';
@@ -18,8 +17,6 @@ import './ReactI18';
 
 import 'styles.scss';
 
-configureOverlayScrollbars();
-
 const queryClient = new QueryClient({
 	defaultOptions: {
 		queries: {

frontend/src/lib/configureOverlayScrollbars.ts

@@ -1,22 +0,0 @@
-import { OverlayScrollbars } from 'overlayscrollbars';
-
-/**
- * Disables the content `elementEvents` option (default: `[['img', 'load']]`)
- * for every OverlayScrollbars instance.
- *
- * The per-element event cleanups OverlayScrollbars stores in its internal
- * WeakMap close over the MutationObserver callback scope, which holds arrays
- * with every node added/removed in that mutation batch. A single long-lived
- * reference to one of those elements (e.g. CodeMirror's EditContext or its
- * module-level scratch Range pinning a detached editor) then retains entire
- * unmounted subtrees as detached DOM — ~1.3k nodes per InfraMonitoring
- * category switch.
- *
- * Content size changes from loading images are still handled by the
- * scrollbars' size observer, so scrollbar geometry stays correct.
- */
-export function configureOverlayScrollbars(): void {
-	OverlayScrollbars.env().setDefaultOptions({
-		update: { elementEvents: null },
-	});
-}

frontend/src/pages/AlertDetails/AlertHeader/AlertState/AlertState.tsx

@@ -1,12 +1,11 @@
 import { Color } from '@signozhq/design-tokens';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { BellOff, CircleCheck, CircleOff, Flame } from '@signozhq/icons';
-import { RuletypesAlertStateDTO } from 'api/generated/services/sigNoz.schemas';
 
 import './AlertState.styles.scss';
 
 type AlertStateProps = {
-	state: RuletypesAlertStateDTO | string;
+	state: string;
 	showLabel?: boolean;
 };
 
@@ -18,7 +17,7 @@ export default function AlertState({
 	let label;
 	const isDarkMode = useIsDarkMode();
 	switch (state) {
-		case RuletypesAlertStateDTO.nodata:
+		case 'nodata':
 			icon = (
 				<CircleOff
 					size={18}
@@ -29,7 +28,7 @@ export default function AlertState({
 			label = <span style={{ color: Color.BG_SIENNA_400 }}>No Data</span>;
 			break;
 
-		case RuletypesAlertStateDTO.disabled:
+		case 'disabled':
 			icon = (
 				<BellOff
 					size={18}
@@ -39,16 +38,15 @@ export default function AlertState({
 			);
 			label = <span style={{ color: Color.BG_VANILLA_400 }}>Muted</span>;
 			break;
-
-		case RuletypesAlertStateDTO.firing:
+		case 'firing':
 			icon = (
 				<Flame size={18} fill={Color.BG_CHERRY_500} color={Color.BG_CHERRY_500} />
 			);
 			label = <span style={{ color: Color.BG_CHERRY_500 }}>Firing</span>;
 			break;
 
-		case RuletypesAlertStateDTO.inactive:
-		case 'normal': // legacy
+		case 'normal':
+		case 'inactive':
 			icon = (
 				<CircleCheck
 					size={18}

frontend/src/pages/AlertDetails/hooks.tsx

@@ -1,34 +1,28 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { useMutation, useQueryClient, useQuery } from 'react-query';
-import { generatePath } from 'react-router-dom';
+import { useCallback, useMemo } from 'react';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { generatePath, useLocation } from 'react-router-dom';
 import { TablePaginationConfig, TableProps } from 'antd';
 import type { FilterValue, SorterResult } from 'antd/es/table/interface';
 import { patchRulePartial } from 'api/alerts/patchRulePartial';
+import ruleStats from 'api/alerts/ruleStats';
+import timelineGraph from 'api/alerts/timelineGraph';
+import timelineTable from 'api/alerts/timelineTable';
+import topContributors from 'api/alerts/topContributors';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	createRule,
 	deleteRuleByID,
 	getGetRuleByIDQueryKey,
-	getGetRuleHistoryTimelineQueryOptions,
 	invalidateGetRuleByID,
 	invalidateListRules,
 	updateRuleByID,
 	useGetRuleByID,
-	useGetRuleHistoryOverallStatus,
-	useGetRuleHistoryStats,
-	useGetRuleHistoryTopContributors,
 	useListRules,
 } from 'api/generated/services/rules';
-import {
-	Querybuildertypesv5OrderDirectionDTO,
-	RuletypesAlertStateDTO,
-	type GetRuleByID200,
-	type GetRuleHistoryOverallStatus200,
-	type GetRuleHistoryStats200,
-	type GetRuleHistoryTimeline200,
-	type GetRuleHistoryTopContributors200,
-	type RenderErrorResponseDTO,
-	type RuletypesPostableRuleDTO,
+import type {
+	GetRuleByID200,
+	RenderErrorResponseDTO,
+	RuletypesPostableRuleDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import { TabRoutes } from 'components/RouteTab/types';
@@ -37,27 +31,35 @@ import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ROUTES from 'constants/routes';
 import AlertHistory from 'container/AlertHistory';
 import { TIMELINE_TABLE_PAGE_SIZE } from 'container/AlertHistory/constants';
-import {
-	computeCursorForPage,
-	useTimelineTableOrder,
-	useTimelineTablePage,
-} from 'container/AlertHistory/Timeline/Table/useTimelineTableCursor';
 import { AlertDetailsTab, TimelineFilter } from 'container/AlertHistory/types';
+import { urlKey } from 'container/AllError/utils';
 import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
 import { useNotifications } from 'hooks/useNotifications';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
+import createQueryParams from 'lib/createQueryParams';
 import GetMinMax from 'lib/getMinMax';
 import history from 'lib/history';
 import { History, Table } from '@signozhq/icons';
 import EditRules from 'pages/EditRules';
+import { OrderPreferenceItems } from 'pages/Logs/config';
 import BetaTag from 'periscope/components/BetaTag/BetaTag';
+import PaginationInfoText from 'periscope/components/PaginationInfoText/PaginationInfoText';
 import { useAlertRule } from 'providers/Alert';
 import { useErrorModal } from 'providers/ErrorModalProvider';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import { toPostableRuleDTOFromAlertDef } from 'types/api/alerts/convert';
-import { AlertDef, AlertRuleTimelineTableResponse } from 'types/api/alerts/def';
+import {
+	AlertDef,
+	AlertRuleStatsPayload,
+	AlertRuleTimelineGraphResponsePayload,
+	AlertRuleTimelineTableResponse,
+	AlertRuleTimelineTableResponsePayload,
+	AlertRuleTopContributorsPayload,
+} from 'types/api/alerts/def';
 import APIError from 'types/api/error';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { nanoToMilli } from 'utils/timeUtils';
-import { Typography } from '@signozhq/ui/typography';
 
 export const useAlertHistoryQueryParams = (): {
 	ruleId: string | null;
@@ -199,7 +201,10 @@ type GetAlertRuleDetailsApiProps = {
 };
 
 type GetAlertRuleDetailsStatsProps = GetAlertRuleDetailsApiProps & {
-	data: GetRuleHistoryStats200 | undefined;
+	data:
+		| SuccessResponse<AlertRuleStatsPayload, unknown>
+		| ErrorResponse
+		| undefined;
 };
 
 export const useGetAlertRuleDetailsStats =
@@ -208,15 +213,18 @@ export const useGetAlertRuleDetailsStats =
 
 		const isValidRuleId = ruleId !== null && String(ruleId).length !== 0;
 
-		const { isLoading, isRefetching, isError, data } = useGetRuleHistoryStats(
-			{ id: ruleId || '' },
-			{ start: startTime, end: endTime },
+		const { isLoading, isRefetching, isError, data } = useQuery(
+			[REACT_QUERY_KEY.ALERT_RULE_STATS, ruleId, startTime, endTime],
 			{
-				query: {
-					enabled: isValidRuleId && !!startTime && !!endTime,
-					refetchOnMount: false,
-					refetchOnWindowFocus: false,
-				},
+				queryFn: () =>
+					ruleStats({
+						id: ruleId || '',
+						start: startTime,
+						end: endTime,
+					}),
+				enabled: isValidRuleId && !!startTime && !!endTime,
+				refetchOnMount: false,
+				refetchOnWindowFocus: false,
 			},
 		);
 
@@ -224,7 +232,10 @@ export const useGetAlertRuleDetailsStats =
 	};
 
 type GetAlertRuleDetailsTopContributorsProps = GetAlertRuleDetailsApiProps & {
-	data: GetRuleHistoryTopContributors200 | undefined;
+	data:
+		| SuccessResponse<AlertRuleTopContributorsPayload, unknown>
+		| ErrorResponse
+		| undefined;
 };
 
 export const useGetAlertRuleDetailsTopContributors =
@@ -233,128 +244,90 @@ export const useGetAlertRuleDetailsTopContributors =
 
 		const isValidRuleId = ruleId !== null && String(ruleId).length !== 0;
 
-		const { isLoading, isRefetching, isError, data } =
-			useGetRuleHistoryTopContributors(
-				{ id: ruleId || '' },
-				{ start: startTime, end: endTime },
-				{
-					query: {
-						enabled: isValidRuleId && !!startTime && !!endTime,
-						refetchOnMount: false,
-						refetchOnWindowFocus: false,
-					},
-				},
-			);
+		const { isLoading, isRefetching, isError, data } = useQuery(
+			[REACT_QUERY_KEY.ALERT_RULE_TOP_CONTRIBUTORS, ruleId, startTime, endTime],
+			{
+				queryFn: () =>
+					topContributors({
+						id: ruleId || '',
+						start: startTime,
+						end: endTime,
+					}),
+				enabled: isValidRuleId,
+				refetchOnMount: false,
+				refetchOnWindowFocus: false,
+			},
+		);
 
 		return { isLoading, isRefetching, isError, data, isValidRuleId, ruleId };
 	};
 
 type GetAlertRuleDetailsTimelineTableProps = GetAlertRuleDetailsApiProps & {
-	data: GetRuleHistoryTimeline200 | undefined;
-	error: AxiosError<RenderErrorResponseDTO> | null;
-	refetch: () => void;
-	cancel: () => void;
+	data:
+		| SuccessResponse<AlertRuleTimelineTableResponsePayload, unknown>
+		| ErrorResponse
+		| undefined;
 };
 
 export const useGetAlertRuleDetailsTimelineTable = ({
-	filterExpression,
+	filters,
 }: {
-	filterExpression: string;
+	filters: TagFilter;
 }): GetAlertRuleDetailsTimelineTableProps => {
-	const queryClient = useQueryClient();
 	const { ruleId, startTime, endTime, params } = useAlertHistoryQueryParams();
-	const [page, setPage] = useTimelineTablePage();
-	const [order] = useTimelineTableOrder();
-
-	const updatedOrder = useMemo(
-		() =>
-			order === 'asc'
-				? Querybuildertypesv5OrderDirectionDTO.asc
-				: Querybuildertypesv5OrderDirectionDTO.desc,
-		[order],
+	const { updatedOrder, offset } = useMemo(
+		() => ({
+			updatedOrder: params.get(urlKey.order) ?? OrderPreferenceItems.ASC,
+			offset: parseInt(params.get(urlKey.offset) ?? '0', 10),
+		}),
+		[params],
 	);
 
 	const timelineFilter = params.get('timelineFilter');
 
 	const isValidRuleId = ruleId !== null && String(ruleId).length !== 0;
+	const hasStartAndEnd = startTime !== null && endTime !== null;
 
-	const stateFilter = useMemo(() => {
-		if (!timelineFilter || timelineFilter === TimelineFilter.ALL) {
-			return undefined;
-		}
-		return timelineFilter === TimelineFilter.FIRED
-			? RuletypesAlertStateDTO.firing
-			: RuletypesAlertStateDTO.inactive;
-	}, [timelineFilter]);
-
-	const filtersKey = `${filterExpression}|${stateFilter ?? ''}|${startTime}|${endTime}`;
-	const prevFiltersKeyRef = useRef(filtersKey);
-	const filtersChanged = prevFiltersKeyRef.current !== filtersKey;
-	const cursor = computeCursorForPage(filtersChanged ? 1 : page);
-
-	useEffect(() => {
-		if (prevFiltersKeyRef.current !== filtersKey) {
-			prevFiltersKeyRef.current = filtersKey;
-			if (page > 1) {
-				void setPage(1);
-			}
-		}
-	}, [filtersKey, page, setPage]);
-
-	const queryParams = useMemo(
-		() => ({
-			start: startTime,
-			end: endTime,
-			limit: TIMELINE_TABLE_PAGE_SIZE,
-			order: updatedOrder,
-			cursor,
-			filterExpression: filterExpression || undefined,
-			state: stateFilter,
-		}),
-		[startTime, endTime, updatedOrder, cursor, filterExpression, stateFilter],
-	);
-
-	const queryOptions = getGetRuleHistoryTimelineQueryOptions(
-		{ id: ruleId || '' },
-		queryParams,
+	const { isLoading, isRefetching, isError, data } = useQuery(
+		[
+			REACT_QUERY_KEY.ALERT_RULE_TIMELINE_TABLE,
+			ruleId,
+			startTime,
+			endTime,
+			timelineFilter,
+			updatedOrder,
+			offset,
+			JSON.stringify(filters.items),
+		],
 		{
-			query: {
-				enabled: isValidRuleId,
-				refetchOnMount: false,
-				refetchOnWindowFocus: false,
-			},
+			queryFn: () =>
+				timelineTable({
+					id: ruleId || '',
+					start: startTime,
+					end: endTime,
+					limit: TIMELINE_TABLE_PAGE_SIZE,
+					order: updatedOrder,
+					offset,
+					filters,
+					...(timelineFilter && timelineFilter !== TimelineFilter.ALL
+						? {
+								state: timelineFilter === TimelineFilter.FIRED ? 'firing' : 'normal',
+							}
+						: {}),
+				}),
+			enabled: isValidRuleId && hasStartAndEnd,
+			refetchOnMount: false,
+			refetchOnWindowFocus: false,
 		},
 	);
 
-	const { isLoading, isRefetching, isError, data, error, refetch } =
-		useQuery(queryOptions);
-
-	const queryKeyRef = useRef(queryOptions.queryKey);
-	queryKeyRef.current = queryOptions.queryKey;
-
-	const cancel = useCallback(() => {
-		void queryClient.cancelQueries({ queryKey: queryKeyRef.current });
-	}, [queryClient]);
-
-	return {
-		isLoading,
-		isRefetching,
-		isError,
-		data,
-		error: error as AxiosError<RenderErrorResponseDTO> | null,
-		isValidRuleId,
-		ruleId,
-		refetch,
-		cancel,
-	};
+	return { isLoading, isRefetching, isError, data, isValidRuleId, ruleId };
 };
 
 export const useTimelineTable = ({
 	totalItems,
-	nextCursor,
 }: {
 	totalItems: number;
-	nextCursor?: string;
 }): {
 	paginationConfig: TablePaginationConfig;
 	onChangeHandler: (
@@ -363,13 +336,16 @@ export const useTimelineTable = ({
 		filters: any,
 		extra: any,
 	) => void;
-	handleNextPage: () => void;
-	handlePrevPage: () => void;
-	hasNextPage: boolean;
-	hasPrevPage: boolean;
 } => {
-	const [page, setPage] = useTimelineTablePage();
-	const [, setOrder] = useTimelineTableOrder();
+	const { safeNavigate } = useSafeNavigate();
+
+	const { pathname } = useLocation();
+
+	const { search } = useLocation();
+
+	const params = useMemo(() => new URLSearchParams(search), [search]);
+
+	const offset = params.get('offset') ?? '0';
 
 	const onChangeHandler: TableProps<AlertRuleTimelineTableResponse>['onChange'] =
 		useCallback(
@@ -381,52 +357,38 @@ export const useTimelineTable = ({
 					| SorterResult<AlertRuleTimelineTableResponse>,
 			) => {
 				if (!Array.isArray(sorter)) {
+					const { pageSize = 0, current = 0 } = pagination;
 					const { order } = sorter;
 					const updatedOrder = order === 'ascend' ? 'asc' : 'desc';
-					void Promise.all([setOrder(updatedOrder), setPage(1)]);
+					const params = new URLSearchParams(window.location.search);
+
+					safeNavigate(
+						`${pathname}?${createQueryParams({
+							...Object.fromEntries(params),
+							order: updatedOrder,
+							offset: current * TIMELINE_TABLE_PAGE_SIZE - TIMELINE_TABLE_PAGE_SIZE,
+							pageSize,
+						})}`,
+					);
 				}
 			},
-			[setOrder, setPage],
+			[pathname, safeNavigate],
 		);
 
-	const handleNextPage = useCallback(() => {
-		if (!nextCursor) {
-			return;
-		}
-		void setPage(page + 1);
-	}, [nextCursor, page, setPage]);
-
-	const handlePrevPage = useCallback(() => {
-		if (page <= 1) {
-			return;
-		}
-		void setPage(page - 1);
-	}, [page, setPage]);
+	const offsetInt = parseInt(offset, 10);
+	const pageSize = params.get('pageSize') ?? String(TIMELINE_TABLE_PAGE_SIZE);
+	const pageSizeInt = parseInt(pageSize, 10);
 
 	const paginationConfig: TablePaginationConfig = {
-		pageSize: TIMELINE_TABLE_PAGE_SIZE,
-		showTotal: (total, [start, end]) => (
-			<span>
-				<Typography.Text size="small">
-					{start} &#8212; {end}
-				</Typography.Text>
-				<Typography.Text size="small"> of {total}</Typography.Text>
-			</span>
-		),
-		current: page,
+		pageSize: pageSizeInt,
+		showTotal: PaginationInfoText,
+		current: offsetInt / TIMELINE_TABLE_PAGE_SIZE + 1,
 		showSizeChanger: false,
 		hideOnSinglePage: true,
 		total: totalItems,
 	};
 
-	return {
-		paginationConfig,
-		onChangeHandler,
-		handleNextPage,
-		handlePrevPage,
-		hasNextPage: !!nextCursor,
-		hasPrevPage: page > 1,
-	};
+	return { paginationConfig, onChangeHandler };
 };
 
 export const useAlertRuleStatusToggle = ({
@@ -619,7 +581,10 @@ export const useAlertRuleDelete = ({
 };
 
 type GetAlertRuleDetailsTimelineGraphProps = GetAlertRuleDetailsApiProps & {
-	data: GetRuleHistoryOverallStatus200 | undefined;
+	data:
+		| SuccessResponse<AlertRuleTimelineGraphResponsePayload, unknown>
+		| ErrorResponse
+		| undefined;
 };
 
 export const useGetAlertRuleDetailsTimelineGraphData =
@@ -629,18 +594,20 @@ export const useGetAlertRuleDetailsTimelineGraphData =
 		const isValidRuleId = ruleId !== null && String(ruleId).length !== 0;
 		const hasStartAndEnd = startTime !== null && endTime !== null;
 
-		const { isLoading, isRefetching, isError, data } =
-			useGetRuleHistoryOverallStatus(
-				{ id: ruleId || '' },
-				{ start: startTime, end: endTime },
-				{
-					query: {
-						enabled: isValidRuleId && hasStartAndEnd,
-						refetchOnMount: false,
-						refetchOnWindowFocus: false,
-					},
-				},
-			);
+		const { isLoading, isRefetching, isError, data } = useQuery(
+			[REACT_QUERY_KEY.ALERT_RULE_TIMELINE_GRAPH, ruleId, startTime, endTime],
+			{
+				queryFn: () =>
+					timelineGraph({
+						id: ruleId || '',
+						start: startTime,
+						end: endTime,
+					}),
+				enabled: isValidRuleId && hasStartAndEnd,
+				refetchOnMount: false,
+				refetchOnWindowFocus: false,
+			},
+		);
 
 		return { isLoading, isRefetching, isError, data, isValidRuleId, ruleId };
 	};

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelStatus/__tests__/utils.test.ts

@@ -1,6 +1,8 @@
-import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
+import type {
+	Querybuildertypesv5QueryWarnDataDTO as WarningDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import type { AxiosError } from 'axios';
-import type { Querybuildertypesv5QueryWarnDataDTO as WarningDTO } from 'api/generated/services/sigNoz.schemas';
 import { StatusCodes } from 'http-status-codes';
 
 import { panelStatusFromError, panelStatusFromWarning } from '../utils';
@@ -44,7 +46,7 @@ describe('panelStatusFromError', () => {
 
 	it('falls back to the error message when there is no structured body', () => {
 		expect(panelStatusFromError(new Error('boom'))).toStrictEqual({
-			code: 'unknown_error',
+			code: 'UPSTREAM_UNAVAILABLE',
 			message: 'boom',
 			docsUrl: undefined,
 			messages: [],

frontend/src/store/globalTime/GlobalTimeContext.tsx

@@ -55,7 +55,6 @@ export function GlobalTimeProvider({
 			name,
 			selectedTime: resolveInitialTime(),
 			refreshInterval: initialRefreshInterval ?? 0,
-			parentStore: inheritGlobalTime ? globalStore : undefined,
 		}),
 	);
 

frontend/src/store/globalTime/__tests__/GlobalTimeContext.test.tsx

@@ -38,36 +38,6 @@ const createWrapper = (
 	};
 };
 
-const createNestedWrapper = (
-	parentProps: GlobalTimeProviderOptions,
-	childProps: GlobalTimeProviderOptions,
-	nuqsProps?: {
-		searchParams?: string;
-		onUrlUpdate?: (event: { queryString: string }) => void;
-	},
-) => {
-	const queryClient = createTestQueryClient();
-
-	return function NestedWrapper({
-		children,
-	}: {
-		children: ReactNode;
-	}): JSX.Element {
-		return (
-			<QueryClientProvider client={queryClient}>
-				<NuqsTestingAdapter
-					searchParams={nuqsProps?.searchParams}
-					onUrlUpdate={nuqsProps?.onUrlUpdate}
-				>
-					<GlobalTimeProvider {...parentProps}>
-						<GlobalTimeProvider {...childProps}>{children}</GlobalTimeProvider>
-					</GlobalTimeProvider>
-				</NuqsTestingAdapter>
-			</QueryClientProvider>
-		);
-	};
-};
-
 describe('GlobalTimeProvider', () => {
 	describe('name prop', () => {
 		it('should pass name to store when provided', () => {
@@ -112,73 +82,138 @@ describe('GlobalTimeProvider', () => {
 
 	describe('inheritGlobalTime', () => {
 		it('should inherit time from parent store when inheritGlobalTime is true', () => {
-			const wrapper = createNestedWrapper(
-				{ initialTime: '6h' },
-				{ inheritGlobalTime: true },
+			const queryClient = createTestQueryClient();
+
+			const NestedWrapper = ({
+				children,
+			}: {
+				children: React.ReactNode;
+			}): JSX.Element => (
+				<QueryClientProvider client={queryClient}>
+					<NuqsTestingAdapter>
+						<GlobalTimeProvider initialTime="6h">
+							<GlobalTimeProvider inheritGlobalTime>{children}</GlobalTimeProvider>
+						</GlobalTimeProvider>
+					</NuqsTestingAdapter>
+				</QueryClientProvider>
 			);
 
 			const { result } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-				wrapper,
+				wrapper: NestedWrapper,
 			});
 
+			// Should inherit '6h' from parent provider
 			expect(result.current).toBe('6h');
 		});
 
 		it('should use initialTime when inheritGlobalTime is false', () => {
-			const wrapper = createNestedWrapper(
-				{ initialTime: '6h' },
-				{ inheritGlobalTime: false, initialTime: '15m' },
+			const queryClient = createTestQueryClient();
+
+			const NestedWrapper = ({
+				children,
+			}: {
+				children: React.ReactNode;
+			}): JSX.Element => (
+				<QueryClientProvider client={queryClient}>
+					<NuqsTestingAdapter>
+						<GlobalTimeProvider initialTime="6h">
+							<GlobalTimeProvider inheritGlobalTime={false} initialTime="15m">
+								{children}
+							</GlobalTimeProvider>
+						</GlobalTimeProvider>
+					</NuqsTestingAdapter>
+				</QueryClientProvider>
 			);
 
 			const { result } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-				wrapper,
+				wrapper: NestedWrapper,
 			});
 
+			// Should use its own initialTime, not parent's
 			expect(result.current).toBe('15m');
 		});
 
 		it('should prefer URL params over inheritGlobalTime when both are present', async () => {
-			const wrapper = createNestedWrapper(
-				{ initialTime: '6h' },
-				{ inheritGlobalTime: true, enableUrlParams: true },
-				{ searchParams: '?relativeTime=1h' },
+			const queryClient = createTestQueryClient();
+
+			const NestedWrapper = ({
+				children,
+			}: {
+				children: React.ReactNode;
+			}): JSX.Element => (
+				<QueryClientProvider client={queryClient}>
+					<NuqsTestingAdapter searchParams="?relativeTime=1h">
+						<GlobalTimeProvider initialTime="6h">
+							<GlobalTimeProvider inheritGlobalTime enableUrlParams>
+								{children}
+							</GlobalTimeProvider>
+						</GlobalTimeProvider>
+					</NuqsTestingAdapter>
+				</QueryClientProvider>
 			);
 
 			const { result } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-				wrapper,
+				wrapper: NestedWrapper,
 			});
 
+			// inheritGlobalTime sets initial value to '6h', but URL sync updates it to '1h'
 			await waitFor(() => {
 				expect(result.current).toBe('1h');
 			});
 		});
 
 		it('should use inherited time when URL params are empty', async () => {
-			const wrapper = createNestedWrapper(
-				{ initialTime: '6h' },
-				{ inheritGlobalTime: true, enableUrlParams: true },
-				{ searchParams: '' },
+			const queryClient = createTestQueryClient();
+
+			const NestedWrapper = ({
+				children,
+			}: {
+				children: React.ReactNode;
+			}): JSX.Element => (
+				<QueryClientProvider client={queryClient}>
+					<NuqsTestingAdapter searchParams="">
+						<GlobalTimeProvider initialTime="6h">
+							<GlobalTimeProvider inheritGlobalTime enableUrlParams>
+								{children}
+							</GlobalTimeProvider>
+						</GlobalTimeProvider>
+					</NuqsTestingAdapter>
+				</QueryClientProvider>
 			);
 
 			const { result } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-				wrapper,
+				wrapper: NestedWrapper,
 			});
 
+			// No URL params, should keep inherited value
 			expect(result.current).toBe('6h');
 		});
 
 		it('should prefer custom time URL params over inheritGlobalTime', async () => {
+			const queryClient = createTestQueryClient();
 			const startTime = 1700000000000;
 			const endTime = 1700003600000;
 
-			const wrapper = createNestedWrapper(
-				{ initialTime: '6h' },
-				{ inheritGlobalTime: true, enableUrlParams: true },
-				{ searchParams: `?startTime=${startTime}&endTime=${endTime}` },
+			const NestedWrapper = ({
+				children,
+			}: {
+				children: React.ReactNode;
+			}): JSX.Element => (
+				<QueryClientProvider client={queryClient}>
+					<NuqsTestingAdapter
+						searchParams={`?startTime=${startTime}&endTime=${endTime}`}
+					>
+						<GlobalTimeProvider initialTime="6h">
+							<GlobalTimeProvider inheritGlobalTime enableUrlParams>
+								{children}
+							</GlobalTimeProvider>
+						</GlobalTimeProvider>
+					</NuqsTestingAdapter>
+				</QueryClientProvider>
 			);
 
 			const { result } = renderHook(() => useGlobalTime(), {
-				wrapper,
+				wrapper: NestedWrapper,
 			});
 
 			// URL custom time params should override inherited time
@@ -655,151 +690,4 @@ describe('GlobalTimeProvider', () => {
 			expect(result.current.isRefreshEnabled).toBe(true);
 		});
 	});
-
-	describe('resetToParentTime', () => {
-		it('should return false when no parent store exists', () => {
-			const wrapper = createWrapper({ initialTime: '1h' });
-
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			expect(result.current.resetToParentTime()).toBe(false);
-			expect(result.current.parentStore).toBeUndefined();
-		});
-
-		it('should have parentStore when inheritGlobalTime is true', () => {
-			const wrapper = createNestedWrapper(
-				{ initialTime: '6h' },
-				{ inheritGlobalTime: true },
-			);
-
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			expect(result.current.parentStore).toBeDefined();
-		});
-
-		it('should reset to parent time when called', () => {
-			const wrapper = createNestedWrapper(
-				{ initialTime: '6h' },
-				{ inheritGlobalTime: true },
-			);
-
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			expect(result.current.selectedTime).toBe('6h');
-			const initialMinMax = result.current.lastComputedMinMax;
-
-			act(() => {
-				result.current.setSelectedTime('15m');
-			});
-
-			expect(result.current.selectedTime).toBe('15m');
-			const changedMinMax = result.current.lastComputedMinMax;
-			expect(changedMinMax.maxTime - changedMinMax.minTime).toBeLessThan(
-				initialMinMax.maxTime - initialMinMax.minTime,
-			);
-
-			act(() => {
-				const success = result.current.resetToParentTime();
-				expect(success).toBe(true);
-			});
-
-			expect(result.current.selectedTime).toBe('6h');
-			const resetMinMax = result.current.lastComputedMinMax;
-			expect(resetMinMax.maxTime - resetMinMax.minTime).toBeGreaterThan(
-				changedMinMax.maxTime - changedMinMax.minTime,
-			);
-		});
-
-		it('should set shouldClearUrlParams flag when reset', () => {
-			const wrapper = createNestedWrapper(
-				{ initialTime: '6h' },
-				{ inheritGlobalTime: true },
-			);
-
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			act(() => {
-				result.current.setSelectedTime('15m');
-			});
-
-			act(() => {
-				result.current.resetToParentTime();
-			});
-
-			expect(result.current.shouldClearUrlParams).toBe(true);
-
-			act(() => {
-				result.current.clearUrlParamsFlag();
-			});
-
-			expect(result.current.shouldClearUrlParams).toBe(false);
-		});
-
-		it('should clear URL params when resetToParentTime is called with enableUrlParams', async () => {
-			let currentQueryString = 'relativeTime=15m';
-
-			const wrapper = createNestedWrapper(
-				{ initialTime: '6h' },
-				{ inheritGlobalTime: true, enableUrlParams: true },
-				{
-					searchParams: currentQueryString,
-					onUrlUpdate: (event): void => {
-						currentQueryString = event.queryString;
-					},
-				},
-			);
-
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			await waitFor(() => {
-				expect(result.current.selectedTime).toBe('15m');
-			});
-
-			act(() => {
-				result.current.resetToParentTime();
-			});
-
-			await waitFor(() => {
-				expect(currentQueryString).not.toContain('relativeTime');
-				expect(currentQueryString).not.toContain('startTime');
-				expect(currentQueryString).not.toContain('endTime');
-			});
-
-			expect(result.current.selectedTime).toBe('6h');
-		});
-
-		it('should clear custom time URL params when resetToParentTime is called', async () => {
-			const startTime = 1700000000000;
-			const endTime = 1700003600000;
-			let currentQueryString = `startTime=${startTime}&endTime=${endTime}`;
-
-			const wrapper = createNestedWrapper(
-				{ initialTime: '6h' },
-				{ inheritGlobalTime: true, enableUrlParams: true },
-				{
-					searchParams: currentQueryString,
-					onUrlUpdate: (event): void => {
-						currentQueryString = event.queryString;
-					},
-				},
-			);
-
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			await waitFor(() => {
-				expect(result.current.selectedTime).toContain('||_||');
-			});
-
-			act(() => {
-				result.current.resetToParentTime();
-			});
-
-			await waitFor(() => {
-				expect(currentQueryString).not.toContain('startTime');
-				expect(currentQueryString).not.toContain('endTime');
-			});
-
-			expect(result.current.selectedTime).toBe('6h');
-		});
-	});
 });

frontend/src/store/globalTime/globalTimeStore.ts

@@ -5,7 +5,6 @@ import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constan
 import {
 	GlobalTimeSelectedTime,
 	GlobalTimeState,
-	GlobalTimeStoreApiRef,
 	GlobalTimeStore,
 	ParsedTimeRange,
 } from './types';
@@ -19,10 +18,6 @@ import {
 export type GlobalTimeStoreApi = StoreApi<GlobalTimeStore>;
 export type IGlobalTimeStore = GlobalTimeStore;
 
-export interface CreateGlobalTimeStoreOptions extends Partial<GlobalTimeState> {
-	parentStore?: GlobalTimeStoreApiRef;
-}
-
 function computeIsRefreshEnabled(
 	selectedTime: GlobalTimeSelectedTime,
 	refreshInterval: number,
@@ -34,12 +29,11 @@ function computeIsRefreshEnabled(
 }
 
 export function createGlobalTimeStore(
-	options?: CreateGlobalTimeStoreOptions,
+	initialState?: Partial<GlobalTimeState>,
 ): GlobalTimeStoreApi {
-	const selectedTime = options?.selectedTime ?? DEFAULT_TIME_RANGE;
-	const refreshInterval = options?.refreshInterval ?? 0;
-	const name = options?.name;
-	const parentStore = options?.parentStore;
+	const selectedTime = initialState?.selectedTime ?? DEFAULT_TIME_RANGE;
+	const refreshInterval = initialState?.refreshInterval ?? 0;
+	const name = initialState?.name;
 
 	return createStore<GlobalTimeStore>((set, get) => ({
 		name,
@@ -48,8 +42,6 @@ export function createGlobalTimeStore(
 		isRefreshEnabled: computeIsRefreshEnabled(selectedTime, refreshInterval),
 		lastRefreshTimestamp: 0,
 		lastComputedMinMax: safeParseSelectedTime(selectedTime),
-		parentStore,
-		shouldClearUrlParams: false,
 
 		setSelectedTime: (
 			time: GlobalTimeSelectedTime,
@@ -138,29 +130,6 @@ export function createGlobalTimeStore(
 			}
 			return [REACT_QUERY_KEY.AUTO_REFRESH_QUERY, ...queryParts, selectedTime];
 		},
-
-		resetToParentTime: (): boolean => {
-			const state = get();
-			if (!state.parentStore) {
-				return false;
-			}
-
-			const parentSelectedTime = state.parentStore.getState().selectedTime;
-			const computedMinMax = parseSelectedTime(parentSelectedTime);
-
-			set({
-				selectedTime: parentSelectedTime,
-				lastComputedMinMax: computedMinMax,
-				lastRefreshTimestamp: Date.now(),
-				shouldClearUrlParams: true,
-			});
-
-			return true;
-		},
-
-		clearUrlParamsFlag: (): void => {
-			set({ shouldClearUrlParams: false });
-		},
 	}));
 }
 

frontend/src/store/globalTime/index.ts

@@ -206,7 +206,6 @@
  * | `getMinMaxTime(time?)` | Get min/max (fresh if auto-refresh enabled, cached otherwise) |
  * | `computeAndStoreMinMax()` | Compute fresh values and cache them |
  * | `getAutoRefreshQueryKey(time, ...parts)` | Build scoped query key for this store instance |
- * | `resetToParentTime()` | Reset to parent store's time (only if `inheritGlobalTime` was used). Clears URL params. Returns `true` on success |
  *
  * ### Utilities
  *
@@ -236,7 +235,7 @@
  * | Option | Type | Description |
  * |--------|------|-------------|
  * | `name` | `string` | Scope query keys to this store (enables isolated invalidation) |
- * | `inheritGlobalTime` | `boolean` | Initialize with parent/global time value. Enables `resetToParentTime()` |
+ * | `inheritGlobalTime` | `boolean` | Initialize with parent/global time value |
  * | `initialTime` | `string` | Initial time if not inheriting |
  * | `enableUrlParams` | `boolean \| object` | Sync time to URL query params |
  * | `removeQueryParamsOnUnmount` | `boolean` | Clean URL params on unmount |
@@ -342,39 +341,7 @@
  * }
  * ```
  *
- * ### Example 3: Reset to Parent Time
- *
- * When using `inheritGlobalTime`, you can reset the child store back to the parent's time:
- *
- * ```tsx
- * function DrawerHeader({ onClose }) {
- *   const selectedTime = useGlobalTime((s) => s.selectedTime);
- *   const resetToParentTime = useGlobalTime((s) => s.resetToParentTime);
- *   const parentStore = useGlobalTime((s) => s.parentStore);
- *
- *   const handleReset = () => {
- *     // Returns true if reset succeeded, false if no parent store
- *     const success = resetToParentTime();
- *     if (success) {
- *       // URL params are automatically cleared
- *       console.log('Reset to parent time');
- *     }
- *   };
- *
- *   return (
- *     <div>
- *       <DateTimeSelectionV3 />
- *       {parentStore && (
- *         <Button onClick={handleReset}>
- *           Reset to Global Time
- *         </Button>
- *       )}
- *     </div>
- *   );
- * }
- * ```
- *
- * ### Example 4: Nested Contexts
+ * ### Example 3: Nested Contexts
  *
  * Contexts can be nested - each level creates isolation:
  *
@@ -412,10 +379,9 @@
  * }
  * ```
  *
- * ### Example 5: URL Sync for Shareable Links
+ * ### Example 4: URL Sync for Shareable Links
  *
- * Persist time selection to URL for shareable links. When using `resetToParentTime()`,
- * URL params are automatically cleared:
+ * Persist time selection to URL for shareable links:
  *
  * ```tsx
  * function TracesExplorer() {
@@ -434,7 +400,7 @@
  * }
  * ```
  *
- * ### Example 6: localStorage Persistence
+ * ### Example 5: localStorage Persistence
  *
  * Remember user's last selected time across sessions:
  *

frontend/src/store/globalTime/types.ts

@@ -1,13 +1,9 @@
-import { StoreApi } from 'zustand';
 import { Time } from 'container/TopNav/DateTimeSelectionV2/types';
 
 export type CustomTimeRangeSeparator = '||_||';
 export type CustomTimeRange = `${number}${CustomTimeRangeSeparator}${number}`;
 export type GlobalTimeSelectedTime = Time | CustomTimeRange;
 
-// Forward declaration to avoid circular dependency
-export type GlobalTimeStoreApiRef = StoreApi<GlobalTimeStore>;
-
 export interface IGlobalTimeStoreState {
 	/**
 	 * The selected time range, can be:
@@ -92,16 +88,6 @@ export interface GlobalTimeState {
 	isRefreshEnabled: boolean;
 	lastRefreshTimestamp: number;
 	lastComputedMinMax: ParsedTimeRange;
-	/**
-	 * Reference to parent store when inheritGlobalTime was used.
-	 * Enables resetToParentTime() functionality.
-	 */
-	parentStore?: GlobalTimeStoreApiRef;
-	/**
-	 * Flag indicating URL params should be cleared (not synced).
-	 * Set by resetToParentTime(), consumed by useUrlSync.
-	 */
-	shouldClearUrlParams: boolean;
 }
 
 export interface GlobalTimeActions {
@@ -132,16 +118,6 @@ export interface GlobalTimeActions {
 		selectedTime: GlobalTimeSelectedTime,
 		...queryParts: unknown[]
 	) => unknown[];
-	/**
-	 * Reset to parent store's time. Only works if inheritGlobalTime was used.
-	 * Clears URL params and sets selectedTime to parent's value.
-	 * @returns true if reset succeeded, false if no parent store
-	 */
-	resetToParentTime: () => boolean;
-	/**
-	 * Clear the shouldClearUrlParams flag after URL sync has processed it.
-	 */
-	clearUrlParamsFlag: () => void;
 }
 
 export type GlobalTimeStore = GlobalTimeState & GlobalTimeActions;

frontend/src/store/globalTime/useUrlSync.ts

@@ -91,17 +91,6 @@ export function useUrlSync(
 		let previousSelectedTime = store.getState().selectedTime;
 
 		return store.subscribe((state) => {
-			if (state.shouldClearUrlParams) {
-				previousSelectedTime = state.selectedTime;
-				void setUrlState({
-					[keys.relativeTimeKey]: null,
-					[keys.startTimeKey]: null,
-					[keys.endTimeKey]: null,
-				});
-				store.getState().clearUrlParamsFlag();
-				return;
-			}
-
 			if (state.selectedTime === previousSelectedTime) {
 				return;
 			}

frontend/src/types/api/alerts/def.ts

@@ -1,4 +1,4 @@
-import { RuletypesAlertStateDTO } from 'api/generated/services/sigNoz.schemas';
+import { AlertLabelsProps } from 'pages/AlertDetails/AlertHeader/AlertLabels/AlertLabels';
 import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery';
 
 // default match type for threshold
@@ -73,6 +73,10 @@ export interface StatsTimeSeriesItem {
 	value: string;
 }
 
+export type AlertRuleStatsPayload = {
+	data: AlertRuleStats;
+};
+
 export interface AlertRuleTopContributors {
 	fingerprint: number;
 	labels: Labels;
@@ -80,6 +84,9 @@ export interface AlertRuleTopContributors {
 	relatedLogsLink: string;
 	relatedTracesLink: string;
 }
+export type AlertRuleTopContributorsPayload = {
+	data: AlertRuleTopContributors[];
+};
 
 export interface AlertRuleTimelineTableResponse {
 	ruleID: string;
@@ -92,12 +99,24 @@ export interface AlertRuleTimelineTableResponse {
 	labels: Labels;
 	fingerprint: number;
 	value: number;
-	relatedLogsLink?: string;
-	relatedTracesLink?: string;
+	relatedTracesLink: string;
+	relatedLogsLink: string;
 }
+export type AlertRuleTimelineTableResponsePayload = {
+	data: {
+		items: AlertRuleTimelineTableResponse[];
+		total: number;
+		labels: AlertLabelsProps['labels'];
+	};
+};
+
+type AlertState = 'firing' | 'normal' | 'nodata' | 'muted';
 
 export interface AlertRuleTimelineGraphResponse {
 	start: number;
 	end: number;
-	state: RuletypesAlertStateDTO;
+	state: AlertState;
 }
+export type AlertRuleTimelineGraphResponsePayload = {
+	data: AlertRuleTimelineGraphResponse[];
+};

frontend/src/types/api/alerts/ruleStats.ts

@@ -0,0 +1,7 @@
+import { AlertDef } from './def';
+
+export interface RuleStatsProps {
+	id: AlertDef['id'];
+	start: number;
+	end: number;
+}

frontend/src/types/api/alerts/timelineGraph.ts

@@ -0,0 +1,7 @@
+import { AlertDef } from './def';
+
+export interface GetTimelineGraphRequestProps {
+	id: AlertDef['id'];
+	start: number;
+	end: number;
+}

frontend/src/types/api/alerts/timelineTable.ts

@@ -0,0 +1,13 @@
+import { TagFilter } from '../queryBuilder/queryBuilderData';
+import { AlertDef } from './def';
+
+export interface GetTimelineTableRequestProps {
+	id: AlertDef['id'];
+	start: number;
+	end: number;
+	offset: number;
+	limit: number;
+	order: string;
+	filters?: TagFilter;
+	state?: string;
+}

frontend/src/types/api/alerts/topContributors.ts

@@ -0,0 +1,7 @@
+import { AlertDef } from './def';
+
+export interface TopContributorsProps {
+	id: AlertDef['id'];
+	start: number;
+	end: number;
+}

frontend/src/utils/errorUtils.ts

@@ -42,7 +42,12 @@ export function toAPIError(
 	try {
 		ErrorResponseHandlerForGeneratedAPIs(error);
 	} catch (apiError) {
-		if (apiError instanceof APIError) {
+		// UPSTREAM_UNAVAILABLE means the handler couldn't find a backend error code
+		// (non-envelope body); prefer the caller's context-specific defaultMessage.
+		if (
+			apiError instanceof APIError &&
+			apiError.getErrorCode() !== 'UPSTREAM_UNAVAILABLE'
+		) {
 			return apiError;
 		}
 	}

pkg/modules/rulestatehistory/implrulestatehistory/store.go

@@ -485,11 +485,9 @@ func (s *store) buildFilterClause(ctx context.Context, orgID valuer.UUID, filter
 	}
 
 	fieldKeys, _, err := s.telemetryMetadataStore.GetKeysMulti(ctx, orgID, selectors)
-	if err != nil {
+	if err != nil || len(fieldKeys) == 0 {
 		fieldKeys = map[string][]*telemetrytypes.TelemetryFieldKey{}
-	}
-	for _, sel := range selectors {
-		if len(fieldKeys[sel.Name]) == 0 {
+		for _, sel := range selectors {
 			fieldKeys[sel.Name] = []*telemetrytypes.TelemetryFieldKey{{
 				Name:          sel.Name,
 				Signal:        sel.Signal,

tests/fixtures/clickhouse.py

@@ -203,9 +203,9 @@ def create_clickhouse(  # pylint: disable=too-many-arguments,too-many-positional
     pytestconfig: pytest.Config,
     cache_key: str = "clickhouse",
 ) -> types.TestContainerClickhouse:
+    coordinator = next(iter(keeper.container_configs.values()))
+
     def create() -> types.TestContainerClickhouse:
-        # Lazy: the keeper fixture is empty under --teardown (never created).
-        coordinator = next(iter(keeper.container_configs.values()))
         clickhouse_version = request.config.getoption("--clickhouse-version")
 
         container = ClickHouseContainer(
@@ -381,10 +381,9 @@ def create_clickhouse_cluster(  # pylint: disable=too-many-arguments,too-many-po
     migration goes through. Per-node containers are exposed via `nodes` so
     tests can assert shard-local state.
     """
+    coordinator = next(iter(keeper.container_configs.values()))
 
     def create() -> types.TestContainerClickhouse:
-        # Lazy: the keeper fixture is empty under --teardown (never created).
-        coordinator = next(iter(keeper.container_configs.values()))
         clickhouse_version = request.config.getoption("--clickhouse-version")
 
         # Unique aliases per creation: docker allows duplicate network aliases

tests/fixtures/network.py

@@ -1,5 +1,3 @@
-import time
-
 import docker
 import docker.errors
 import pytest
@@ -25,37 +23,12 @@ def network(request: pytest.FixtureRequest, pytestconfig: pytest.Config) -> type
     def delete(nw: types.Network):
         client = docker.from_env()
         try:
-            network = client.networks.get(network_id=nw.id)
+            client.networks.get(network_id=nw.id).remove()
         except docker.errors.NotFound:
             logger.info(
                 "Skipping removal of Network, Network(%s) not found. Maybe it was manually removed?",
                 {"name": nw.name, "id": nw.id},
             )
-            return
-
-        # Docker detaches endpoints asynchronously, so the network can briefly
-        # report "has active endpoints" after its containers are gone. Retry,
-        # force-disconnecting any stragglers.
-        last_err: docker.errors.APIError | None = None
-        for _ in range(10):
-            try:
-                network.remove()
-                return
-            except docker.errors.NotFound:
-                return
-            except docker.errors.APIError as err:
-                if "has active endpoints" not in str(err):
-                    raise
-                last_err = err
-                network.reload()
-                for container_id in network.attrs.get("Containers") or {}:
-                    try:
-                        network.disconnect(container_id, force=True)
-                    except docker.errors.APIError:
-                        pass
-                time.sleep(1)
-
-        raise last_err
 
     def restore(existing: dict) -> types.Network:
         client = docker.from_env()