Skip to content
This repository was archived by the owner on May 13, 2025. It is now read-only.

Commit 88802eb

Browse files
praveen5959praveen5959
committed
Added page number and rows to query params
1 parent e08e116 commit 88802eb

File tree

7 files changed

+149
-34
lines changed

7 files changed

+149
-34
lines changed

‎src/api/query.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ type CorrelationLogs = {
1818
startTime: Date;
1919
endTime: Date;
2020
limit: number;
21+
pageOffset: number;
2122
correlationCondition?: string;
2223
selectedFields?: string[];
2324
};

‎src/hooks/useCorrelationQueryLogs.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
import { notifyError } from '@/utils/notification';
1313
import { useQuery } from 'react-query';
1414
import { LogsResponseWithHeaders } from '@/@types/parseable/api/query';
15+
import { useState } from 'react';
1516

1617
const { setStreamData } = correlationStoreReducers;
1718

@@ -22,6 +23,7 @@ export const useCorrelationQueryLogs = () => {
2223
const [currentStream] = useAppStore((store) => store.currentStream);
2324
const timePartitionColumn = _.get(streamInfo, 'time_partition', 'p_timestamp');
2425
const [timeRange] = useAppStore((store) => store.timeRange);
26+
const [loadingState, setLoading] = useState<boolean>(true);
2527
const [
2628
{
2729
tableOpts: { currentOffset },
@@ -39,13 +41,10 @@ export const useCorrelationQueryLogs = () => {
3941
correlationCondition: correlationCondition,
4042
};
4143

42-
const {
43-
isLoading: logsLoading,
44-
isRefetching: logsRefetching,
45-
refetch: getCorrelationData,
46-
} = useQuery(
44+
const { refetch: getCorrelationData } = useQuery(
4745
['fetch-logs', defaultQueryOpts],
4846
async () => {
47+
setLoading(true);
4948
const queryOpts = { ...defaultQueryOpts, streamNames };
5049
const response = await getCorrelationQueryLogsWithHeaders(queryOpts);
5150
return [response];
@@ -54,6 +53,7 @@ export const useCorrelationQueryLogs = () => {
5453
enabled: false,
5554
refetchOnWindowFocus: false,
5655
onSuccess: async (responses) => {
56+
setLoading(false);
5757
responses.map((data: { data: LogsResponseWithHeaders }) => {
5858
const logs = data.data;
5959
const isInvalidResponse = _.isEmpty(logs) || _.isNil(logs);
@@ -70,6 +70,7 @@ export const useCorrelationQueryLogs = () => {
7070
});
7171
},
7272
onError: (data: AxiosError) => {
73+
setLoading(false);
7374
const errorMessage = data.response?.data as string;
7475
setError(_.isString(errorMessage) && !_.isEmpty(errorMessage) ? errorMessage : 'Failed to query logs');
7576
},
@@ -78,7 +79,7 @@ export const useCorrelationQueryLogs = () => {
7879

7980
return {
8081
error,
81-
loading: logsLoading || logsRefetching,
82+
loadingState,
8283
getCorrelationData,
8384
};
8485
};

‎src/pages/Correlation/Views/CorrelationFooter.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FC, useCallback } from 'react';
1+
import { FC, useCallback, useEffect } from 'react';
22
import { usePagination } from '@mantine/hooks';
33
import { Box, Center, Group, Menu, Pagination, Stack, Tooltip } from '@mantine/core';
44
import _ from 'lodash';
@@ -87,12 +87,17 @@ const LimitControl: FC = () => {
8787
const CorrelationFooter = (props: { loaded: boolean; hasNoData: boolean; isFetchingCount: boolean }) => {
8888
const [tableOpts, setCorrelationStore] = useCorrelationStore((store) => store.tableOpts);
8989
const [isCorrelatedData] = useCorrelationStore((store) => store.isCorrelatedData);
90-
const { totalPages, currentOffset, currentPage, perPage, totalCount } = tableOpts;
90+
const { totalPages, currentOffset, currentPage, perPage, totalCount, targetPage } = tableOpts;
9191

9292
const onPageChange = useCallback((page: number) => {
93-
setCorrelationStore((store) => setPageAndPageData(store, page));
93+
setCorrelationStore((store) => setPageAndPageData(store, page, perPage));
9494
}, []);
9595

96+
useEffect(() => {
97+
if (!props.loaded) return;
98+
pagination.setPage(targetPage ? targetPage : 1);
99+
}, [props.loaded]);
100+
96101
const pagination = usePagination({ total: totalPages ?? 1, initialPage: 1, onChange: onPageChange });
97102
const onChangeOffset = useCallback(
98103
(key: 'prev' | 'next') => {
@@ -113,14 +118,12 @@ const CorrelationFooter = (props: { loaded: boolean; hasNoData: boolean; isFetch
113118
[currentOffset],
114119
);
115120

116-
console.log('currentOffset', currentOffset);
117-
// console.log(LOAD_LIMIT);
118-
console.log('totalCount', totalCount);
119-
120121
return (
121122
<Stack className={classes.footerContainer} gap={0} style={{ height: LOGS_FOOTER_HEIGHT }}>
122123
<Stack w="100%" justify="center" align="flex-start">
123-
{isCorrelatedData && <TotalLogsCount hasTableLoaded={props.loaded} isTableEmpty={props.hasNoData} />}
124+
{isCorrelatedData && totalCount > 0 && (
125+
<TotalLogsCount hasTableLoaded={props.loaded} isTableEmpty={props.hasNoData} />
126+
)}
124127
</Stack>
125128
<Stack w="100%" justify="center">
126129
{props.loaded ? (

‎src/pages/Correlation/hooks/useParamsController.ts‎

Lines changed: 65 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,14 @@ import timeRangeUtils from '@/utils/timeRangeUtils';
77
import moment from 'moment-timezone';
88
import { appStoreReducers, TimeRange, useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
99
import { correlationStoreReducers, useCorrelationStore } from '../providers/CorrelationProvider';
10+
import { getOffset } from '@/utils';
11+
import { LOG_QUERY_LIMITS } from '@/pages/Stream/providers/LogsProvider';
1012

1113
const { getRelativeStartAndEndDate, formatDateWithTimezone, getLocalTimezone } = timeRangeUtils;
12-
const { setCorrelationId } = correlationStoreReducers;
14+
const { setCorrelationId, setTargetPage, setCurrentOffset, setPerPage } = correlationStoreReducers;
1315
const { setTimeRange } = appStoreReducers;
1416
const timeRangeFormat = 'DD-MMM-YYYY_HH-mmz';
15-
const keys = ['id', 'interval', 'from', 'to'];
17+
const keys = ['id', 'interval', 'from', 'to', 'page', 'rows'];
1618

1719
const dateToParamString = (date: Date) => {
1820
return formatDateWithTimezone(date, timeRangeFormat);
@@ -48,10 +50,17 @@ const deriveTimeRangeParams = (timerange: TimeRange): { interval: string } | { f
4850
}
4951
};
5052

51-
const storeToParamsObj = (opts: { correlationId: string; timeRange: TimeRange }): Record<string, string> => {
52-
const { correlationId, timeRange } = opts;
53+
const storeToParamsObj = (opts: {
54+
correlationId: string;
55+
timeRange: TimeRange;
56+
rows: string;
57+
page: string;
58+
}): Record<string, string> => {
59+
const { correlationId, timeRange, page, rows } = opts;
5360
const params: Record<string, string> = {
5461
id: correlationId,
62+
rows,
63+
page,
5564
...deriveTimeRangeParams(timeRange),
5665
};
5766
return _.pickBy(params, (val, key) => !_.isEmpty(val) && _.includes(keys, key));
@@ -71,39 +80,87 @@ const paramsStringToParamsObj = (searchParams: URLSearchParams): Record<string,
7180
const useParamsController = () => {
7281
const [isStoreSynced, setStoreSynced] = useState(false);
7382
const [{ correlationId }, setCorrelationStore] = useCorrelationStore((store) => store);
83+
const [tableOpts] = useCorrelationStore((store) => store.tableOpts);
7484
const [timeRange, setAppStore] = useAppStore((store) => store.timeRange);
7585
const [searchParams, setSearchParams] = useSearchParams();
7686

87+
const { currentOffset, currentPage, targetPage, perPage } = tableOpts;
88+
89+
const pageOffset = Math.ceil(currentOffset / perPage);
90+
7791
useEffect(() => {
78-
const storeAsParams = storeToParamsObj({ correlationId, timeRange });
92+
const storeAsParams = storeToParamsObj({
93+
correlationId,
94+
timeRange,
95+
rows: `${perPage}`,
96+
page: `${targetPage ? targetPage : Math.ceil(currentPage + pageOffset)}`,
97+
});
7998
const presentParams = paramsStringToParamsObj(searchParams);
8099
if (storeAsParams.id !== presentParams.id) {
81100
setCorrelationStore((store) => setCorrelationId(store, presentParams.id));
82101
}
102+
if (storeAsParams.rows !== presentParams.rows && LOG_QUERY_LIMITS.includes(_.toNumber(presentParams.rows))) {
103+
setCorrelationStore((store) => setPerPage(store, _.toNumber(presentParams.rows)));
104+
}
105+
if (storeAsParams.page !== presentParams.page && !_.isEmpty(presentParams.page)) {
106+
setCorrelationStore((store) => setTargetPage(store, _.toNumber(presentParams.page)));
107+
const offset = getOffset(_.toNumber(presentParams.page), _.toNumber(presentParams.rows));
108+
109+
if (offset > 0) {
110+
setCorrelationStore((store) => setCurrentOffset(store, offset));
111+
112+
setCorrelationStore((store) =>
113+
setTargetPage(
114+
store,
115+
Math.abs(_.toNumber(presentParams.page) - Math.ceil(offset / _.toNumber(presentParams.rows))),
116+
),
117+
);
118+
}
119+
}
83120
syncTimeRangeToStore(storeAsParams, presentParams);
84121
setStoreSynced(true);
85122
}, []);
86123

87124
useEffect(() => {
88125
if (isStoreSynced) {
89-
const storeAsParams = storeToParamsObj({ correlationId, timeRange });
126+
const storeAsParams = storeToParamsObj({
127+
correlationId,
128+
timeRange,
129+
rows: `${perPage}`,
130+
page: `${targetPage ? targetPage : Math.ceil(currentPage + pageOffset)}`,
131+
});
90132
const presentParams = paramsStringToParamsObj(searchParams);
91133
if (_.isEqual(storeAsParams, presentParams)) return;
92134

93135
setSearchParams(storeAsParams);
94136
}
95-
}, [correlationId, isStoreSynced, timeRange.startTime.toISOString(), timeRange.endTime.toISOString()]);
137+
}, [
138+
correlationId,
139+
isStoreSynced,
140+
timeRange.startTime.toISOString(),
141+
timeRange.endTime.toISOString(),
142+
targetPage,
143+
tableOpts,
144+
]);
96145

97146
useEffect(() => {
98147
if (!isStoreSynced) return;
99148

100-
const storeAsParams = storeToParamsObj({ correlationId, timeRange });
149+
const storeAsParams = storeToParamsObj({
150+
correlationId,
151+
timeRange,
152+
rows: `${perPage}`,
153+
page: `${targetPage ? targetPage : Math.ceil(currentPage + pageOffset)}`,
154+
});
101155
const presentParams = paramsStringToParamsObj(searchParams);
102156
if (_.isEqual(storeAsParams, presentParams)) return;
103157

104158
if (storeAsParams.id !== presentParams.id) {
105159
setCorrelationStore((store) => setCorrelationId(store, presentParams.id));
106160
}
161+
if (storeAsParams.rows !== presentParams.rows && LOG_QUERY_LIMITS.includes(_.toNumber(presentParams.rows))) {
162+
setCorrelationStore((store) => setPerPage(store, _.toNumber(presentParams.rows)));
163+
}
107164

108165
syncTimeRangeToStore(storeAsParams, presentParams);
109166
}, [searchParams]);

‎src/pages/Correlation/index.tsx‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@ const {
4343
toggleSaveCorrelationModal,
4444
setActiveCorrelation,
4545
setCorrelationId,
46+
setPageAndPageData,
47+
setTargetPage,
4648
} = correlationStoreReducers;
4749

4850
const Correlation = () => {
@@ -76,7 +78,7 @@ const Correlation = () => {
7678
[];
7779
const { isLoading: multipleSchemasLoading } = useGetMultipleStreamSchemas(streamsToFetch);
7880

79-
const { getCorrelationData, loading: logsLoading, error: errorMessage } = useCorrelationQueryLogs();
81+
const { getCorrelationData, loadingState, error: errorMessage } = useCorrelationQueryLogs();
8082
const { getFetchStreamData, loading: streamsLoading } = useFetchStreamData();
8183
const { fetchCorrelations, getCorrelationByIdMutation } = useCorrelationsQuery();
8284
const { refetchCount, countLoading } = useCorrelationFetchCount();
@@ -99,6 +101,7 @@ const Correlation = () => {
99101
value: stream.name,
100102
label: stream.name,
101103
})) ?? [];
104+
const { currentOffset, pageData, targetPage, currentPage } = tableOpts;
102105

103106
// Effects
104107
useEffect(() => {
@@ -149,6 +152,14 @@ const Correlation = () => {
149152
getFetchStreamData();
150153
}, [isCorrelatedData]);
151154

155+
useEffect(() => {
156+
if (isCorrelatedData) {
157+
getCorrelationData();
158+
} else {
159+
getFetchStreamData();
160+
}
161+
}, [currentOffset]);
162+
152163
useEffect(() => {
153164
if (isCorrelatedData) {
154165
refetchCount();
@@ -217,10 +228,21 @@ const Correlation = () => {
217228
}, []);
218229

219230
// View Flags
220-
const hasContentLoaded = !schemaLoading && !logsLoading && !streamsLoading && !multipleSchemasLoading;
221-
const hasNoData = hasContentLoaded && !errorMessage && tableOpts.pageData.length === 0;
231+
const hasContentLoaded = !schemaLoading && !loadingState && !streamsLoading && !multipleSchemasLoading;
232+
const hasNoData = hasContentLoaded && !errorMessage && pageData.length === 0;
222233
const showTable = hasContentLoaded && !hasNoData && !errorMessage;
223234

235+
useEffect(() => {
236+
if (!showTable) return;
237+
238+
if (targetPage) {
239+
setCorrelationData((store) => setPageAndPageData(store, targetPage));
240+
if (currentPage === targetPage) {
241+
setCorrelationData((store) => setTargetPage(store, undefined));
242+
}
243+
}
244+
}, [loadingState, currentPage]);
245+
224246
if (isLoading) return;
225247

226248
return (
@@ -273,7 +295,7 @@ const Correlation = () => {
273295
}}
274296
/>
275297
</div>
276-
{logsLoading || schemaLoading || streamsLoading || multipleSchemasLoading ? (
298+
{loadingState || schemaLoading || streamsLoading || multipleSchemasLoading ? (
277299
<Stack style={{ padding: '0.5rem 0.7rem' }}>
278300
{Array.from({ length: 8 }).map((_, index) => (
279301
<Skeleton key={index} height="24px" />
@@ -339,7 +361,7 @@ const Correlation = () => {
339361
<StreamSelectBox
340362
label="Add Stream 2"
341363
placeholder="Select Stream 2"
342-
disabled={logsLoading}
364+
disabled={loadingState}
343365
onChange={(value) => addStream(value)}
344366
data={streamData.filter((stream) => !streamNames.includes(stream.value))}
345367
isFirst={false}
@@ -498,7 +520,7 @@ const Correlation = () => {
498520
{Object.keys(selectedFields).length > 0 && (
499521
<>
500522
<CorrelationTable
501-
{...{ errorMessage, logsLoading, streamsLoading, showTable, hasNoData }}
523+
{...{ errorMessage, logsLoading: loadingState, streamsLoading, showTable, hasNoData }}
502524
primaryHeaderHeight={primaryHeaderHeight}
503525
/>
504526
<CorrelationFooter loaded={showTable} hasNoData={hasNoData} isFetchingCount={countLoading} />

‎src/pages/Correlation/providers/CorrelationProvider.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ type CorrelationStore = {
5959
displayedCount: number;
6060
currentPage: number;
6161
perPage: number;
62+
targetPage: number | undefined;
6263
currentOffset: number;
6364
headers: string[];
6465
orderedHeaders: string[];
@@ -91,6 +92,8 @@ type CorrelationStoreReducers = {
9192
cleanCorrelationStore: (store: CorrelationStore) => ReducerOutput;
9293
setSavedCorrelationId: (store: CorrelationStore, id: string) => ReducerOutput;
9394
setTotalCount: (store: CorrelationStore, count: number) => ReducerOutput;
95+
setTargetPage: (store: CorrelationStore, target: number | undefined) => ReducerOutput;
96+
setPerPage: (store: CorrelationStore, perPage: number) => ReducerOutput;
9497
};
9598

9699
const initialState: CorrelationStore = {
@@ -112,6 +115,7 @@ const initialState: CorrelationStore = {
112115
pinnedColumns: [],
113116
pageData: [],
114117
perPage: 50,
118+
targetPage: undefined,
115119
totalCount: 0,
116120
displayedCount: 0,
117121
totalPages: 0,
@@ -291,6 +295,15 @@ const setCorrelations = (store: CorrelationStore, correlations: Correlation[]) =
291295
};
292296
};
293297

298+
const setPerPage = (store: CorrelationStore, perPage: number) => {
299+
return {
300+
tableOpts: {
301+
...store.tableOpts,
302+
perPage,
303+
},
304+
};
305+
};
306+
294307
const setActiveCorrelation = (store: CorrelationStore, correlation: Correlation | null) => {
295308
return {
296309
...store,
@@ -485,6 +498,15 @@ const setCurrentOffset = (store: CorrelationStore, currentOffset: number) => {
485498
};
486499
};
487500

501+
const setTargetPage = (store: CorrelationStore, target: number | undefined) => {
502+
return {
503+
tableOpts: {
504+
...store.tableOpts,
505+
targetPage: target ? target : undefined,
506+
},
507+
};
508+
};
509+
488510
const setCurrentPage = (store: CorrelationStore, currentPage: number) => {
489511
return {
490512
tableOpts: {
@@ -610,6 +632,8 @@ const correlationStoreReducers: CorrelationStoreReducers = {
610632
cleanCorrelationStore,
611633
setSavedCorrelationId,
612634
setTotalCount,
635+
setTargetPage,
636+
setPerPage,
613637
};
614638

615639
export { CorrelationProvider, useCorrelationStore, correlationStoreReducers };

0 commit comments

Comments
 (0)