fix: added utility functions to calculate minimum step intervals and time ranges

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/StatusCodeBarCharts.tsx

@@ -21,14 +21,17 @@ import { useResizeObserver } from 'hooks/useDimensions';
 import { useNotifications } from 'hooks/useNotifications';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
-import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { useTimezone } from 'providers/Timezone';
 import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
 import ErrorState from './ErrorState';
-import { prepareStatusCodeBarChartsConfig } from './utils';
+import {
+	getStepIntervalForQuery,
+	getTracesTimeRangeFromStepInterval,
+	prepareStatusCodeBarChartsConfig,
+} from './utils';
 
 function StatusCodeBarCharts({
 	endPointStatusCodeBarChartsDataQuery,
@@ -135,6 +138,18 @@ function StatusCodeBarCharts({
 		[domainName, filters],
 	);
 
+	const activeApiResponse = useMemo(
+		() =>
+			currentWidgetInfoIndex === 0
+				? formattedEndPointStatusCodeBarChartsDataPayload
+				: formattedEndPointStatusCodeLatencyBarChartsDataPayload,
+		[
+			currentWidgetInfoIndex,
+			formattedEndPointStatusCodeBarChartsDataPayload,
+			formattedEndPointStatusCodeLatencyBarChartsDataPayload,
+		],
+	);
+
 	const graphClickHandler = useCallback(
 		(
 			xValue: number,
@@ -144,11 +159,14 @@ function StatusCodeBarCharts({
 			metric?: { [key: string]: string },
 			queryData?: { queryName: string; inFocusOrNot: boolean },
 		): void => {
-			const TWO_AND_HALF_MINUTES_IN_MILLISECONDS = 2.5 * 60 * 1000; // 150,000 milliseconds
 			const customFilters = getCustomFiltersForBarChart(metric);
-			const { start, end } = getStartAndEndTimesInMilliseconds(
+			const stepInterval = getStepIntervalForQuery(
+				activeApiResponse,
+				queryData?.queryName,
+			);
+			const { start, end } = getTracesTimeRangeFromStepInterval(
 				xValue,
-				TWO_AND_HALF_MINUTES_IN_MILLISECONDS,
+				stepInterval,
 			);
 
 			handleGraphClick({
@@ -171,6 +189,7 @@ function StatusCodeBarCharts({
 			});
 		},
 		[
+			activeApiResponse,
 			widget,
 			navigateToExplorerPages,
 			navigateToExplorer,

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/__tests__/utils.test.ts

@@ -0,0 +1,68 @@
+import {
+	getMinStepIntervalFromApiResponse,
+	getStepIntervalForQuery,
+	getTracesTimeRangeFromStepInterval,
+} from '../utils';
+
+describe('StatusCodeBarCharts utils', () => {
+	describe('getTracesTimeRangeFromStepInterval', () => {
+		const xValue = 1609459200; // seconds
+
+		it('keeps start at click time with a minimum 5 minute end range', () => {
+			const { start, end } = getTracesTimeRangeFromStepInterval(xValue, 60);
+
+			expect(start).toBe(xValue * 1000);
+			expect(end - start).toBe(5 * 60 * 1000);
+			expect(end).toBe(xValue * 1000 + 5 * 60 * 1000);
+		});
+
+		it('extends end when step interval is larger than 5 minutes', () => {
+			const stepInterval = 600; // 10 minutes
+			const { start, end } = getTracesTimeRangeFromStepInterval(
+				xValue,
+				stepInterval,
+			);
+
+			expect(start).toBe(xValue * 1000);
+			expect(end - start).toBe(10 * 60 * 1000);
+			expect(end).toBe(xValue * 1000 + 10 * 60 * 1000);
+		});
+	});
+
+	describe('getMinStepIntervalFromApiResponse', () => {
+		it('returns 60 when step intervals are missing', () => {
+			expect(getMinStepIntervalFromApiResponse({} as any)).toBe(60);
+		});
+
+		it('returns the minimum step interval from the response', () => {
+			const apiResponse = {
+				data: {
+					newResult: {
+						meta: {
+							stepIntervals: { A: 120, B: 60 },
+						},
+					},
+				},
+			};
+
+			expect(getMinStepIntervalFromApiResponse(apiResponse as any)).toBe(60);
+		});
+	});
+
+	describe('getStepIntervalForQuery', () => {
+		it('returns query-specific step interval when available', () => {
+			const apiResponse = {
+				data: {
+					newResult: {
+						meta: {
+							stepIntervals: { A: 120, B: 60 },
+						},
+					},
+				},
+			};
+
+			expect(getStepIntervalForQuery(apiResponse as any, 'A')).toBe(120);
+			expect(getStepIntervalForQuery(apiResponse as any, 'B')).toBe(60);
+		});
+	});
+});

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/utils.ts

@@ -13,6 +13,65 @@ import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { QueryData } from 'types/api/widgets/getQuery';
 import { v4 } from 'uuid';
 
+const DEFAULT_STEP_INTERVAL_SECONDS = 60;
+const MIN_TRACES_TIME_RANGE_MINUTES = 5;
+
+export function getMinStepIntervalFromApiResponse(
+	apiResponse: MetricRangePayloadProps,
+): number {
+	const stepIntervals: ExecStats['stepIntervals'] = get(
+		apiResponse,
+		'data.newResult.meta.stepIntervals',
+		{},
+	);
+	const values = Object.values(stepIntervals).filter(
+		(value): value is number =>
+			typeof value === 'number' && Number.isFinite(value),
+	);
+
+	if (values.length === 0) {
+		return DEFAULT_STEP_INTERVAL_SECONDS;
+	}
+
+	return Math.min(...values);
+}
+
+export function getStepIntervalForQuery(
+	apiResponse: MetricRangePayloadProps,
+	queryName?: string,
+): number {
+	const minStepInterval = getMinStepIntervalFromApiResponse(apiResponse);
+
+	if (!queryName) {
+		return minStepInterval;
+	}
+
+	const stepIntervals: ExecStats['stepIntervals'] = get(
+		apiResponse,
+		'data.newResult.meta.stepIntervals',
+		{},
+	);
+
+	return get(stepIntervals, queryName, minStepInterval) ?? minStepInterval;
+}
+
+export function getTracesTimeRangeFromStepInterval(
+	xValue: number,
+	stepIntervalSeconds: number,
+): { start: number; end: number } {
+	const rangeMinutes = Math.max(
+		stepIntervalSeconds / 60,
+		MIN_TRACES_TIME_RANGE_MINUTES,
+	);
+	const rangeMs = rangeMinutes * 60 * 1000;
+	const start = Math.floor(xValue * 1000);
+
+	return {
+		start,
+		end: Math.ceil(start + rangeMs),
+	};
+}
+
 export const prepareStatusCodeBarChartsConfig = ({
 	timezone,
 	isDarkMode,
@@ -41,7 +100,7 @@ export const prepareStatusCodeBarChartsConfig = ({
 		'data.newResult.meta.stepIntervals',
 		{},
 	);
-	const minStepInterval = Math.min(...Object.values(stepIntervals));
+	const minStepInterval = getMinStepIntervalFromApiResponse(apiResponse);
 
 	const config = buildBaseConfig({
 		id: v4(),