refactor: Added new props to GetMetricQueryRange to control Step from without global time range. (#3304)

* refactor: added new props to GetMetricQueryRange

* refactor: review comments

* chore: removed the unnecessary props in query-range payload

* chore: name updated

---------

Co-authored-by: Vishal Sharma <makeavish786@gmail.com>
Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>
Co-authored-by: Palash Gupta <palashgdev@gmail.com>

frontend/src/container/FormAlertRules/ChartPreview/index.tsx

@@ -25,6 +25,7 @@ export interface ChartPreviewProps {
 	headline?: JSX.Element;
 	alertDef?: AlertDef;
 	userQueryKey?: string;
+	allowSelectedIntervalForStepGen?: boolean;
 }
 
 function ChartPreview({
@@ -35,6 +36,7 @@ function ChartPreview({
 	selectedInterval = '5min',
 	headline,
 	userQueryKey,
+	allowSelectedIntervalForStepGen = false,
 	alertDef,
 }: ChartPreviewProps): JSX.Element | null {
 	const { t } = useTranslation('alerts');
@@ -89,6 +91,9 @@ function ChartPreview({
 			globalSelectedInterval: selectedInterval,
 			graphType,
 			selectedTime,
+			params: {
+				allowSelectedIntervalForStepGen,
+			},
 		},
 		{
 			queryKey: [
@@ -146,6 +151,7 @@ ChartPreview.defaultProps = {
 	selectedInterval: '5min',
 	headline: undefined,
 	userQueryKey: '',
+	allowSelectedIntervalForStepGen: false,
 	alertDef: undefined,
 };
 

frontend/src/container/FormAlertRules/index.tsx

@@ -44,7 +44,7 @@ import {
 	StyledLeftContainer,
 } from './styles';
 import UserGuide from './UserGuide';
-import { toChartInterval } from './utils';
+import { getUpdatedStepInterval, toChartInterval } from './utils';
 
 function FormAlertRules({
 	alertType,
@@ -354,6 +354,16 @@ function FormAlertRules({
 		<BasicInfo alertDef={alertDef} setAlertDef={setAlertDef} />
 	);
 
+	const updatedStagedQuery = useMemo((): Query | null => {
+		const newQuery: Query | null = stagedQuery;
+		if (newQuery) {
+			newQuery.builder.queryData[0].stepInterval = getUpdatedStepInterval(
+				alertDef.evalWindow,
+			);
+		}
+		return newQuery;
+	}, [alertDef.evalWindow, stagedQuery]);
+
 	const renderQBChartPreview = (): JSX.Element => (
 		<ChartPreview
 			headline={
@@ -363,9 +373,10 @@ function FormAlertRules({
 				/>
 			}
 			name=""
-			query={stagedQuery}
+			query={updatedStagedQuery}
 			selectedInterval={toChartInterval(alertDef.evalWindow)}
 			alertDef={alertDef}
+			allowSelectedIntervalForStepGen
 		/>
 	);
 

frontend/src/container/FormAlertRules/utils.test.ts

@@ -0,0 +1,14 @@
+// Write a test for getUpdatedStepInterval function in src/container/FormAlertRules/utils.ts
+
+import { getUpdatedStepInterval } from './utils';
+
+describe('getUpdatedStepInterval', () => {
+	it('should return 60', () => {
+		const result = getUpdatedStepInterval('5m0s');
+		expect(result).toEqual(60);
+	});
+	it('should return 60 for 10m0s', () => {
+		const result = getUpdatedStepInterval('10m0s');
+		expect(result).toEqual(60);
+	});
+});

frontend/src/container/FormAlertRules/utils.ts

@@ -1,4 +1,6 @@
 import { Time } from 'container/TopNav/DateTimeSelection/config';
+import getStartEndRangeTime from 'lib/getStartEndRangeTime';
+import getStep from 'lib/getStep';
 
 // toChartInterval converts eval window to chart selection time interval
 export const toChartInterval = (evalWindow: string | undefined): Time => {
@@ -21,3 +23,15 @@ export const toChartInterval = (evalWindow: string | undefined): Time => {
 			return '5min';
 	}
 };
+
+export const getUpdatedStepInterval = (evalWindow?: string): number => {
+	const { start, end } = getStartEndRangeTime({
+		type: 'GLOBAL_TIME',
+		interval: toChartInterval(evalWindow),
+	});
+	return getStep({
+		start,
+		end,
+		inputFormat: 'ns',
+	});
+};

frontend/src/lib/dashboard/prepareQueryRangePayload.ts

@@ -22,6 +22,7 @@ export const prepareQueryRangePayload = ({
 	params = {},
 }: GetQueryResultsProps): PrepareQueryRangePayload => {
 	let legendMap: Record<string, string> = {};
+	const { allowSelectedIntervalForStepGen, ...restParams } = params;
 
 	const compositeQuery: QueryRangePayload['compositeQuery'] = {
 		queryType: query.queryType,
@@ -90,13 +91,17 @@ export const prepareQueryRangePayload = ({
 		start: parseInt(start, 10) * 1e3,
 		end: parseInt(end, 10) * 1e3,
 		step: getStep({
-			start: store.getState().globalTime.minTime,
+			start: allowSelectedIntervalForStepGen
-			end: store.getState().globalTime.maxTime,
+				? start
+				: store.getState().globalTime.minTime,
+			end: allowSelectedIntervalForStepGen
+				? end
+				: store.getState().globalTime.maxTime,
 			inputFormat: 'ns',
 		}),
 		variables,
 		compositeQuery,
-		...params,
+		...restParams,
 	};
 
 	return { legendMap, queryPayload };