feat: pass fill gaps to query range api (#5276)

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -108,6 +108,7 @@ function GridCardGraph({
 				query: updatedQuery,
 				globalSelectedInterval,
 				variables: getDashboardVariables(variables),
+				fillGaps: widget.fillSpans,
 			};
 		}
 		updatedQuery.builder.queryData[0].pageSize = 10;
@@ -122,6 +123,7 @@ function GridCardGraph({
 					limit: updatedQuery.builder.queryData[0].limit || 0,
 				},
 			},
+			fillGaps: widget.fillSpans,
 		};
 	});
 
@@ -152,6 +154,7 @@ function GridCardGraph({
 				widget?.query,
 				widget?.panelTypes,
 				widget.timePreferance,
+				widget.fillSpans,
 				requestData,
 			],
 			retry(failureCount, error): boolean {

frontend/src/container/NewWidget/LeftContainer/index.tsx

@@ -72,10 +72,16 @@ function LeftContainer({
 				globalSelectedInterval,
 				graphType: getGraphType(selectedGraph || selectedWidget.panelTypes),
 				query: stagedQuery,
+				fillGaps: selectedWidget.fillSpans || false,
 			}));
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [stagedQuery, selectedTime, globalSelectedInterval]);
+	}, [
+		stagedQuery,
+		selectedTime,
+		selectedWidget.fillSpans,
+		globalSelectedInterval,
+	]);
 
 	const queryResponse = useGetQueryRange(
 		requestData,

frontend/src/lib/dashboard/getQueryResults.ts

@@ -75,6 +75,7 @@ export interface GetQueryResultsProps {
 	globalSelectedInterval: Time | TimeV2 | CustomTimeType;
 	variables?: Record<string, unknown>;
 	params?: Record<string, unknown>;
+	fillGaps?: boolean;
 	tableParams?: {
 		pagination?: Pagination;
 		selectColumns?: any;

frontend/src/lib/dashboard/prepareQueryRangePayload.ts

@@ -20,6 +20,7 @@ export const prepareQueryRangePayload = ({
 	tableParams,
 	variables = {},
 	params = {},
+	fillGaps = false,
 }: GetQueryResultsProps): PrepareQueryRangePayload => {
 	let legendMap: Record<string, string> = {};
 	const { allowSelectedIntervalForStepGen, ...restParams } = params;
@@ -27,6 +28,7 @@ export const prepareQueryRangePayload = ({
 	const compositeQuery: QueryRangePayload['compositeQuery'] = {
 		queryType: query.queryType,
 		panelType: graphType,
+		fillGaps,
 	};
 
 	switch (query.queryType) {

frontend/src/lib/uPlotLib/utils/getUplotChartData.ts

@@ -17,11 +17,7 @@ function getXAxisTimestamps(seriesList: QueryData[]): number[] {
 	return timestampsArr.sort((a, b) => a - b);
 }
 
-function fillMissingXAxisTimestamps(
+function fillMissingXAxisTimestamps(timestampArr: number[], data: any[]): any {
-	timestampArr: number[],
-	data: any[],
-	fillSpans: boolean,
-): any {
 	// Generate a set of all timestamps in the range
 	const allTimestampsSet = new Set(timestampArr);
 	const processedData = JSON.parse(JSON.stringify(data));
@@ -35,14 +31,14 @@ function fillMissingXAxisTimestamps(
 		);
 
 		missingTimestamps.forEach((timestamp) => {
-			const value = fillSpans ? 0 : null;
+			const value = null;
 
 			entry.values.push([timestamp, value]);
 		});
 
 		entry.values.forEach((v) => {
 			if (Number.isNaN(v[1])) {
-				const replaceValue = fillSpans ? 0 : null;
+				const replaceValue = null;
 				// eslint-disable-next-line no-param-reassign
 				v[1] = replaceValue;
 			} else if (v[1] !== null) {
@@ -85,11 +81,7 @@ export const getUPlotChartData = (
 ): any[] => {
 	const seriesList = apiResponse?.data?.result || [];
 	const timestampArr = getXAxisTimestamps(seriesList);
-	const yAxisValuesArr = fillMissingXAxisTimestamps(
+	const yAxisValuesArr = fillMissingXAxisTimestamps(timestampArr, seriesList);
-		timestampArr,
-		seriesList,
-		fillSpans || false,
-	);
 
 	return [
 		timestampArr,

frontend/src/types/api/metrics/getQueryRange.ts

@@ -18,6 +18,7 @@ export type QueryRangePayload = {
 		promQueries?: Record<string, IPromQLQuery>;
 		queryType: EQueryType;
 		panelType: PANEL_TYPES;
+		fillGaps?: boolean;
 	};
 	end: number;
 	start: number;