Added page number and rows to query params

praveen5959 · praveen5959 · commit 88802eb2f045 · 2025-01-20T14:50:13.000+05:30
diff --git a/src/api/query.ts b/src/api/query.ts
@@ -18,6 +18,7 @@ type CorrelationLogs = {
 	startTime: Date;
 	endTime: Date;
 	limit: number;
+	pageOffset: number;
 	correlationCondition?: string;
 	selectedFields?: string[];
 };
diff --git a/src/hooks/useCorrelationQueryLogs.tsx b/src/hooks/useCorrelationQueryLogs.tsx
@@ -12,6 +12,7 @@ import {
 import { notifyError } from '@/utils/notification';
 import { useQuery } from 'react-query';
 import { LogsResponseWithHeaders } from '@/@types/parseable/api/query';
+import { useState } from 'react';
 
 const { setStreamData } = correlationStoreReducers;
 
@@ -22,6 +23,7 @@ export const useCorrelationQueryLogs = () => {
 	const [currentStream] = useAppStore((store) => store.currentStream);
 	const timePartitionColumn = _.get(streamInfo, 'time_partition', 'p_timestamp');
 	const [timeRange] = useAppStore((store) => store.timeRange);
+	const [loadingState, setLoading] = useState<boolean>(true);
 	const [
 		{
 			tableOpts: { currentOffset },
@@ -39,13 +41,10 @@ export const useCorrelationQueryLogs = () => {
 		correlationCondition: correlationCondition,
 	};
 
-	const {
-		isLoading: logsLoading,
-		isRefetching: logsRefetching,
-		refetch: getCorrelationData,
-	} = useQuery(
+	const { refetch: getCorrelationData } = useQuery(
 		['fetch-logs', defaultQueryOpts],
 		async () => {
+			setLoading(true);
 			const queryOpts = { ...defaultQueryOpts, streamNames };
 			const response = await getCorrelationQueryLogsWithHeaders(queryOpts);
 			return [response];
@@ -54,6 +53,7 @@ export const useCorrelationQueryLogs = () => {
 			enabled: false,
 			refetchOnWindowFocus: false,
 			onSuccess: async (responses) => {
+				setLoading(false);
 				responses.map((data: { data: LogsResponseWithHeaders }) => {
 					const logs = data.data;
 					const isInvalidResponse = _.isEmpty(logs) || _.isNil(logs);
@@ -70,6 +70,7 @@ export const useCorrelationQueryLogs = () => {
 				});
 			},
 			onError: (data: AxiosError) => {
+				setLoading(false);
 				const errorMessage = data.response?.data as string;
 				setError(_.isString(errorMessage) && !_.isEmpty(errorMessage) ? errorMessage : 'Failed to query logs');
 			},
@@ -78,7 +79,7 @@ export const useCorrelationQueryLogs = () => {
 
 	return {
 		error,
-		loading: logsLoading || logsRefetching,
+		loadingState,
 		getCorrelationData,
 	};
 };
diff --git a/src/pages/Correlation/Views/CorrelationFooter.tsx b/src/pages/Correlation/Views/CorrelationFooter.tsx
@@ -1,4 +1,4 @@
-import { FC, useCallback } from 'react';
+import { FC, useCallback, useEffect } from 'react';
 import { usePagination } from '@mantine/hooks';
 import { Box, Center, Group, Menu, Pagination, Stack, Tooltip } from '@mantine/core';
 import _ from 'lodash';
@@ -87,12 +87,17 @@ const LimitControl: FC = () => {
 const CorrelationFooter = (props: { loaded: boolean; hasNoData: boolean; isFetchingCount: boolean }) => {
 	const [tableOpts, setCorrelationStore] = useCorrelationStore((store) => store.tableOpts);
 	const [isCorrelatedData] = useCorrelationStore((store) => store.isCorrelatedData);
-	const { totalPages, currentOffset, currentPage, perPage, totalCount } = tableOpts;
+	const { totalPages, currentOffset, currentPage, perPage, totalCount, targetPage } = tableOpts;
 
 	const onPageChange = useCallback((page: number) => {
-		setCorrelationStore((store) => setPageAndPageData(store, page));
+		setCorrelationStore((store) => setPageAndPageData(store, page, perPage));
 	}, []);
 
+	useEffect(() => {
+		if (!props.loaded) return;
+		pagination.setPage(targetPage ? targetPage : 1);
+	}, [props.loaded]);
+
 	const pagination = usePagination({ total: totalPages ?? 1, initialPage: 1, onChange: onPageChange });
 	const onChangeOffset = useCallback(
 		(key: 'prev' | 'next') => {
@@ -113,14 +118,12 @@ const CorrelationFooter = (props: { loaded: boolean; hasNoData: boolean; isFetch
 		[currentOffset],
 	);
 
-	console.log('currentOffset', currentOffset);
-	// console.log(LOAD_LIMIT);
-	console.log('totalCount', totalCount);
-
 	return (
 		<Stack className={classes.footerContainer} gap={0} style={{ height: LOGS_FOOTER_HEIGHT }}>
 			<Stack w="100%" justify="center" align="flex-start">
-				{isCorrelatedData && <TotalLogsCount hasTableLoaded={props.loaded} isTableEmpty={props.hasNoData} />}
+				{isCorrelatedData && totalCount > 0 && (
+					<TotalLogsCount hasTableLoaded={props.loaded} isTableEmpty={props.hasNoData} />
+				)}
 			</Stack>
 			<Stack w="100%" justify="center">
 				{props.loaded ? (
diff --git a/src/pages/Correlation/hooks/useParamsController.ts b/src/pages/Correlation/hooks/useParamsController.ts
@@ -7,12 +7,14 @@ import timeRangeUtils from '@/utils/timeRangeUtils';
 import moment from 'moment-timezone';
 import { appStoreReducers, TimeRange, useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
 import { correlationStoreReducers, useCorrelationStore } from '../providers/CorrelationProvider';
+import { getOffset } from '@/utils';
+import { LOG_QUERY_LIMITS } from '@/pages/Stream/providers/LogsProvider';
 
 const { getRelativeStartAndEndDate, formatDateWithTimezone, getLocalTimezone } = timeRangeUtils;
-const { setCorrelationId } = correlationStoreReducers;
+const { setCorrelationId, setTargetPage, setCurrentOffset, setPerPage } = correlationStoreReducers;
 const { setTimeRange } = appStoreReducers;
 const timeRangeFormat = 'DD-MMM-YYYY_HH-mmz';
-const keys = ['id', 'interval', 'from', 'to'];
+const keys = ['id', 'interval', 'from', 'to', 'page', 'rows'];
 
 const dateToParamString = (date: Date) => {
 	return formatDateWithTimezone(date, timeRangeFormat);
@@ -48,10 +50,17 @@ const deriveTimeRangeParams = (timerange: TimeRange): { interval: string } | { f
 	}
 };
 
-const storeToParamsObj = (opts: { correlationId: string; timeRange: TimeRange }): Record<string, string> => {
-	const { correlationId, timeRange } = opts;
+const storeToParamsObj = (opts: {
+	correlationId: string;
+	timeRange: TimeRange;
+	rows: string;
+	page: string;
+}): Record<string, string> => {
+	const { correlationId, timeRange, page, rows } = opts;
 	const params: Record<string, string> = {
 		id: correlationId,
+		rows,
+		page,
 		...deriveTimeRangeParams(timeRange),
 	};
 	return _.pickBy(params, (val, key) => !_.isEmpty(val) && _.includes(keys, key));
@@ -71,39 +80,87 @@ const paramsStringToParamsObj = (searchParams: URLSearchParams): Record<string,
 const useParamsController = () => {
 	const [isStoreSynced, setStoreSynced] = useState(false);
 	const [{ correlationId }, setCorrelationStore] = useCorrelationStore((store) => store);
+	const [tableOpts] = useCorrelationStore((store) => store.tableOpts);
 	const [timeRange, setAppStore] = useAppStore((store) => store.timeRange);
 	const [searchParams, setSearchParams] = useSearchParams();
 
+	const { currentOffset, currentPage, targetPage, perPage } = tableOpts;
+
+	const pageOffset = Math.ceil(currentOffset / perPage);
+
 	useEffect(() => {
-		const storeAsParams = storeToParamsObj({ correlationId, timeRange });
+		const storeAsParams = storeToParamsObj({
+			correlationId,
+			timeRange,
+			rows: `${perPage}`,
+			page: `${targetPage ? targetPage : Math.ceil(currentPage + pageOffset)}`,
+		});
 		const presentParams = paramsStringToParamsObj(searchParams);
 		if (storeAsParams.id !== presentParams.id) {
 			setCorrelationStore((store) => setCorrelationId(store, presentParams.id));
 		}
+		if (storeAsParams.rows !== presentParams.rows && LOG_QUERY_LIMITS.includes(_.toNumber(presentParams.rows))) {
+			setCorrelationStore((store) => setPerPage(store, _.toNumber(presentParams.rows)));
+		}
+		if (storeAsParams.page !== presentParams.page && !_.isEmpty(presentParams.page)) {
+			setCorrelationStore((store) => setTargetPage(store, _.toNumber(presentParams.page)));
+			const offset = getOffset(_.toNumber(presentParams.page), _.toNumber(presentParams.rows));
+
+			if (offset > 0) {
+				setCorrelationStore((store) => setCurrentOffset(store, offset));
+
+				setCorrelationStore((store) =>
+					setTargetPage(
+						store,
+						Math.abs(_.toNumber(presentParams.page) - Math.ceil(offset / _.toNumber(presentParams.rows))),
+					),
+				);
+			}
+		}
 		syncTimeRangeToStore(storeAsParams, presentParams);
 		setStoreSynced(true);
 	}, []);
 
 	useEffect(() => {
 		if (isStoreSynced) {
-			const storeAsParams = storeToParamsObj({ correlationId, timeRange });
+			const storeAsParams = storeToParamsObj({
+				correlationId,
+				timeRange,
+				rows: `${perPage}`,
+				page: `${targetPage ? targetPage : Math.ceil(currentPage + pageOffset)}`,
+			});
 			const presentParams = paramsStringToParamsObj(searchParams);
 			if (_.isEqual(storeAsParams, presentParams)) return;
 
 			setSearchParams(storeAsParams);
 		}
-	}, [correlationId, isStoreSynced, timeRange.startTime.toISOString(), timeRange.endTime.toISOString()]);
+	}, [
+		correlationId,
+		isStoreSynced,
+		timeRange.startTime.toISOString(),
+		timeRange.endTime.toISOString(),
+		targetPage,
+		tableOpts,
+	]);
 
 	useEffect(() => {
 		if (!isStoreSynced) return;
 
-		const storeAsParams = storeToParamsObj({ correlationId, timeRange });
+		const storeAsParams = storeToParamsObj({
+			correlationId,
+			timeRange,
+			rows: `${perPage}`,
+			page: `${targetPage ? targetPage : Math.ceil(currentPage + pageOffset)}`,
+		});
 		const presentParams = paramsStringToParamsObj(searchParams);
 		if (_.isEqual(storeAsParams, presentParams)) return;
 
 		if (storeAsParams.id !== presentParams.id) {
 			setCorrelationStore((store) => setCorrelationId(store, presentParams.id));
 		}
+		if (storeAsParams.rows !== presentParams.rows && LOG_QUERY_LIMITS.includes(_.toNumber(presentParams.rows))) {
+			setCorrelationStore((store) => setPerPage(store, _.toNumber(presentParams.rows)));
+		}
 
 		syncTimeRangeToStore(storeAsParams, presentParams);
 	}, [searchParams]);
diff --git a/src/pages/Correlation/index.tsx b/src/pages/Correlation/index.tsx
@@ -43,6 +43,8 @@ const {
 	toggleSaveCorrelationModal,
 	setActiveCorrelation,
 	setCorrelationId,
+	setPageAndPageData,
+	setTargetPage,
 } = correlationStoreReducers;
 
 const Correlation = () => {
@@ -76,7 +78,7 @@ const Correlation = () => {
 		[];
 	const { isLoading: multipleSchemasLoading } = useGetMultipleStreamSchemas(streamsToFetch);
 
-	const { getCorrelationData, loading: logsLoading, error: errorMessage } = useCorrelationQueryLogs();
+	const { getCorrelationData, loadingState, error: errorMessage } = useCorrelationQueryLogs();
 	const { getFetchStreamData, loading: streamsLoading } = useFetchStreamData();
 	const { fetchCorrelations, getCorrelationByIdMutation } = useCorrelationsQuery();
 	const { refetchCount, countLoading } = useCorrelationFetchCount();
@@ -99,6 +101,7 @@ const Correlation = () => {
 			value: stream.name,
 			label: stream.name,
 		})) ?? [];
+	const { currentOffset, pageData, targetPage, currentPage } = tableOpts;
 
 	// Effects
 	useEffect(() => {
@@ -149,6 +152,14 @@ const Correlation = () => {
 		getFetchStreamData();
 	}, [isCorrelatedData]);
 
+	useEffect(() => {
+		if (isCorrelatedData) {
+			getCorrelationData();
+		} else {
+			getFetchStreamData();
+		}
+	}, [currentOffset]);
+
 	useEffect(() => {
 		if (isCorrelatedData) {
 			refetchCount();
@@ -217,10 +228,21 @@ const Correlation = () => {
 	}, []);
 
 	// View Flags
-	const hasContentLoaded = !schemaLoading && !logsLoading && !streamsLoading && !multipleSchemasLoading;
-	const hasNoData = hasContentLoaded && !errorMessage && tableOpts.pageData.length === 0;
+	const hasContentLoaded = !schemaLoading && !loadingState && !streamsLoading && !multipleSchemasLoading;
+	const hasNoData = hasContentLoaded && !errorMessage && pageData.length === 0;
 	const showTable = hasContentLoaded && !hasNoData && !errorMessage;
 
+	useEffect(() => {
+		if (!showTable) return;
+
+		if (targetPage) {
+			setCorrelationData((store) => setPageAndPageData(store, targetPage));
+			if (currentPage === targetPage) {
+				setCorrelationData((store) => setTargetPage(store, undefined));
+			}
+		}
+	}, [loadingState, currentPage]);
+
 	if (isLoading) return;
 
 	return (
@@ -273,7 +295,7 @@ const Correlation = () => {
 										}}
 									/>
 								</div>
-								{logsLoading || schemaLoading || streamsLoading || multipleSchemasLoading ? (
+								{loadingState || schemaLoading || streamsLoading || multipleSchemasLoading ? (
 									<Stack style={{ padding: '0.5rem 0.7rem' }}>
 										{Array.from({ length: 8 }).map((_, index) => (
 											<Skeleton key={index} height="24px" />
@@ -339,7 +361,7 @@ const Correlation = () => {
 							<StreamSelectBox
 								label="Add Stream 2"
 								placeholder="Select Stream 2"
-								disabled={logsLoading}
+								disabled={loadingState}
 								onChange={(value) => addStream(value)}
 								data={streamData.filter((stream) => !streamNames.includes(stream.value))}
 								isFirst={false}
@@ -498,7 +520,7 @@ const Correlation = () => {
 				{Object.keys(selectedFields).length > 0 && (
 					<>
 						<CorrelationTable
-							{...{ errorMessage, logsLoading, streamsLoading, showTable, hasNoData }}
+							{...{ errorMessage, logsLoading: loadingState, streamsLoading, showTable, hasNoData }}
 							primaryHeaderHeight={primaryHeaderHeight}
 						/>
 						<CorrelationFooter loaded={showTable} hasNoData={hasNoData} isFetchingCount={countLoading} />
diff --git a/src/pages/Correlation/providers/CorrelationProvider.tsx b/src/pages/Correlation/providers/CorrelationProvider.tsx
@@ -59,6 +59,7 @@ type CorrelationStore = {
 		displayedCount: number;
 		currentPage: number;
 		perPage: number;
+		targetPage: number | undefined;
 		currentOffset: number;
 		headers: string[];
 		orderedHeaders: string[];
@@ -91,6 +92,8 @@ type CorrelationStoreReducers = {
 	cleanCorrelationStore: (store: CorrelationStore) => ReducerOutput;
 	setSavedCorrelationId: (store: CorrelationStore, id: string) => ReducerOutput;
 	setTotalCount: (store: CorrelationStore, count: number) => ReducerOutput;
+	setTargetPage: (store: CorrelationStore, target: number | undefined) => ReducerOutput;
+	setPerPage: (store: CorrelationStore, perPage: number) => ReducerOutput;
 };
 
 const initialState: CorrelationStore = {
@@ -112,6 +115,7 @@ const initialState: CorrelationStore = {
 		pinnedColumns: [],
 		pageData: [],
 		perPage: 50,
+		targetPage: undefined,
 		totalCount: 0,
 		displayedCount: 0,
 		totalPages: 0,
@@ -291,6 +295,15 @@ const setCorrelations = (store: CorrelationStore, correlations: Correlation[]) =
 	};
 };
 
+const setPerPage = (store: CorrelationStore, perPage: number) => {
+	return {
+		tableOpts: {
+			...store.tableOpts,
+			perPage,
+		},
+	};
+};
+
 const setActiveCorrelation = (store: CorrelationStore, correlation: Correlation | null) => {
 	return {
 		...store,
@@ -485,6 +498,15 @@ const setCurrentOffset = (store: CorrelationStore, currentOffset: number) => {
 	};
 };
 
+const setTargetPage = (store: CorrelationStore, target: number | undefined) => {
+	return {
+		tableOpts: {
+			...store.tableOpts,
+			targetPage: target ? target : undefined,
+		},
+	};
+};
+
 const setCurrentPage = (store: CorrelationStore, currentPage: number) => {
 	return {
 		tableOpts: {
@@ -610,6 +632,8 @@ const correlationStoreReducers: CorrelationStoreReducers = {
 	cleanCorrelationStore,
 	setSavedCorrelationId,
 	setTotalCount,
+	setTargetPage,
+	setPerPage,
 };
 
 export { CorrelationProvider, useCorrelationStore, correlationStoreReducers };
diff --git a/src/utils/queryBuilder.ts b/src/utils/queryBuilder.ts
