feat: removed the stepInterval default and added auto as placeholder

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.ts

@@ -78,7 +78,7 @@ function createBaseSpec(
 	);
 
 	return {
-		stepInterval: queryData.stepInterval,
+		stepInterval: queryData?.stepInterval || undefined,
 		disabled: queryData.disabled,
 		filter: queryData?.filter?.expression ? queryData.filter : undefined,
 		groupBy:
@@ -251,7 +251,7 @@ function convertPromQueriesToV5(
 				name: queryName,
 				query: queryData.query,
 				disabled: queryData.disabled || false,
-				step: queryData.stepInterval,
+				step: queryData?.stepInterval,
 				stats: false, // PromQL specific field
 			},
 		}),

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.tsx

@@ -112,7 +112,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 								<InputWithLabel
 									onChange={handleChangeAggregateEvery}
 									label="Seconds"
-									placeholder="Enter a number"
+									placeholder="Auto"
 									labelAfter
 									initialValue={query?.stepInterval ?? undefined}
 								/>

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

@@ -57,7 +57,7 @@ function QueryAggregationOptions({
 						<div className="query-aggregation-interval-input-container">
 							<InputWithLabel
 								initialValue={
-									queryData.stepInterval ? queryData.stepInterval : undefined
+									queryData?.stepInterval ? queryData?.stepInterval : undefined
 								}
 								className="query-aggregation-interval-input"
 								label="Seconds"

frontend/src/constants/queryBuilder.ts

@@ -179,7 +179,7 @@ export const initialQueryBuilderFormValues: IBuilderQuery = {
 		sourceNames: alphabet,
 	}),
 	disabled: false,
-	stepInterval: 60,
+	stepInterval: undefined,
 	having: [],
 	limit: null,
 	orderBy: [],

frontend/src/container/GridCardLayout/utils.ts

@@ -101,7 +101,7 @@ export function updateStepInterval(
 
 	// if user haven't enter anything manually, that is we have default value of 60 then do the interval adjustment for bar otherwise apply the user's value
 	const getSteps = (queryData: IBuilderQuery): number =>
-		queryData.stepInterval === 60
+		queryData?.stepInterval === 60
 			? stepIntervalPoints || 60
 			: queryData?.stepInterval || 60;
 

frontend/src/container/QueryBuilder/filters/AggregateEveryFilter/index.tsx

@@ -29,7 +29,7 @@ function AggregateEveryFilter({
 			placeholder="Enter in seconds"
 			disabled={isDisabled}
 			style={selectStyle}
-			value={query.stepInterval}
+			value={query?.stepInterval}
 			onChange={onChangeHandler}
 			min={0}
 		/>

frontend/src/hooks/queryBuilder/useStepInterval.ts

@@ -31,7 +31,7 @@ export const updateStepInterval = (
 			queryData:
 				query?.builder?.queryData?.map((item) => ({
 					...item,
-					stepInterval: getStepInterval(item.stepInterval),
+					stepInterval: getStepInterval(item?.stepInterval ?? 60),
 				})) || [],
 		},
 	};

frontend/src/types/api/queryBuilder/queryBuilderData.ts

@@ -80,7 +80,7 @@ export type IBuilderQuery = {
 	having: Having[];
 	havingExpression?: HavingV5;
 	limit: number | null;
-	stepInterval: number;
+	stepInterval: number | undefined;
 	orderBy: OrderByPayload[];
 	reduceTo: ReduceOperators;
 	legend: string;