Url params

src/pages/Stream/Views/Explore/Footer.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback } from 'react';
+import { FC, useCallback, useEffect } from 'react';
 import { useLogsStore, logsStoreReducers, LOAD_LIMIT, LOG_QUERY_LIMITS } from '../../providers/LogsProvider';
 import { usePagination } from '@mantine/hooks';
 import { Box, Center, Group, Loader, Menu, Pagination, Stack, Tooltip } from '@mantine/core';
@@ -90,13 +90,23 @@ const LimitControl: FC = () => {
 
 const Footer = (props: { loaded: boolean; hasNoData: boolean; isFetchingCount: boolean }) => {
 	const [tableOpts, setLogsStore] = useLogsStore((store) => store.tableOpts);
-	const { totalPages, currentOffset, currentPage, perPage, totalCount } = tableOpts;
+	const { totalPages, currentOffset, currentPage, perPage, totalCount, targetPage } = tableOpts;
 
 	const onPageChange = useCallback((page: number) => {
 		setLogsStore((store) => setPageAndPageData(store, page));
 	}, []);
 
-	const pagination = usePagination({ total: totalPages ?? 1, initialPage: 1, onChange: onPageChange });
+	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') => {
 			if (key === 'prev') {
@@ -131,7 +141,7 @@ const Footer = (props: { loaded: boolean; hasNoData: boolean; isFetchingCount: b
 						total={totalPages}
 						value={currentPage}
 						onChange={(page) => {
-							pagination.setPage(page);
+							pagination && pagination.setPage(page);
 						}}
 						size="sm">
 						<Group gap={5} justify="center">
@@ -171,23 +181,6 @@ const Footer = (props: { loaded: boolean; hasNoData: boolean; isFetchingCount: b
 				) : null}
 			</Stack>
 			<Stack w="100%" align="flex-end" style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
-				{/* {props.loaded && (
-					<Menu position="top">
-						<Menu.Target>
-							<div>
-								<IconButton renderIcon={renderExportIcon} />
-							</div>
-						</Menu.Target>
-						<Menu.Dropdown>
-							<Menu.Item onClick={() => exportHandler('CSV')} style={{ padding: '0.5rem 2.25rem 0.5rem 0.75rem' }}>
-								CSV
-							</Menu.Item>
-							<Menu.Item onClick={() => exportHandler('JSON')} style={{ padding: '0.5rem 2.25rem 0.5rem 0.75rem' }}>
-								JSON
-							</Menu.Item>
-						</Menu.Dropdown>
-					</Menu>
-				)} */}
 				<LimitControl />
 			</Stack>
 		</Stack>

src/pages/Stream/Views/Explore/LogsView.tsx

@@ -1,19 +1,25 @@
 import { Box } from '@mantine/core';
-import { useLogsStore } from '../../providers/LogsProvider';
+import { useLogsStore, logsStoreReducers } from '../../providers/LogsProvider';
 import JsonView from './JSONView';
 import LogTable from './StaticLogTable';
 import useLogsFetcher from './useLogsFetcher';
 import LogsViewConfig from './LogsViewConfig';
 import _ from 'lodash';
 
+import { useEffect } from 'react';
+
+const { setPageAndPageData, setTargetPage, setTargetColumns, setDisabledColumns } = logsStoreReducers;
+
 const LogsView = (props: { schemaLoading: boolean; infoLoading: boolean }) => {
 	const { schemaLoading, infoLoading } = props;
 	const { errorMessage, hasNoData, showTable, isFetchingCount, logsLoading } = useLogsFetcher({
 		schemaLoading,
 		infoLoading,
 	});
 
-	const [viewMode] = useLogsStore((store) => store.viewMode);
+	const [tableOpts] = useLogsStore((store) => store.tableOpts);
+	const { currentPage, targetPage, headers, targetColumns } = tableOpts;
+	const [viewMode, setLogsStore] = useLogsStore((store) => store.viewMode);
 	const viewOpts = {
 		errorMessage,
 		hasNoData,
@@ -22,6 +28,29 @@ const LogsView = (props: { schemaLoading: boolean; infoLoading: boolean }) => {
 		logsLoading,
 	};
 
+	useEffect(() => {
+		if (!showTable) return;
+		if (targetPage) {
+			setLogsStore((store) => setPageAndPageData(store, targetPage));
+			if (currentPage === targetPage) {
+				setLogsStore((store) => setTargetPage(store, undefined));
+			}
+		}
+	}, [showTable, currentPage]);
+
+	useEffect(() => {
+		if (!showTable) return;
+		if (!_.isEmpty(targetColumns)) {
+			setLogsStore((store) =>
+				setDisabledColumns(
+					store,
+					headers.filter((el) => !targetColumns.includes(el)),
+				),
+			);
+			setLogsStore((store) => setTargetColumns(store, []));
+		}
+	}, [headers]);
+
 	return (
 		<Box style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
 			{viewMode === 'table' && (

src/pages/Stream/Views/Explore/useLogsFetcher.ts

@@ -28,7 +28,7 @@ const useLogsFetcher = (props: { schemaLoading: boolean; infoLoading: boolean })
 	useEffect(() => {
 		if (infoLoading || !firstEventAt) return;
 
-		if (currentPage === 0 && currentOffset === 0) {
+		if (currentPage === 0) {
 			getQueryData();
 			refetchCount();
 		}

src/pages/Stream/hooks/useParamsController.ts

@@ -3,18 +3,27 @@ import { TimeRange, useLogsStore, logsStoreReducers } from '@/pages/Stream/provi
 import { useSearchParams } from 'react-router-dom';
 import _ from 'lodash';
 import { FIXED_DURATIONS } from '@/constants/timeConstants';
-import { LOG_QUERY_LIMITS } from '@/pages/Stream/providers/LogsProvider';
+import { LOG_QUERY_LIMITS, columnsToSkip } from '@/pages/Stream/providers/LogsProvider';
 import dayjs from 'dayjs';
 import timeRangeUtils from '@/utils/timeRangeUtils';
 import moment from 'moment-timezone';
 import { filterStoreReducers, QueryType, useFilterStore } from '../providers/FilterProvider';
 import { generateQueryBuilderASTFromSQL } from '../utils';
+import { getOffset, joinOrSplit } from '@/utils';
 
 const { getRelativeStartAndEndDate, formatDateWithTimezone, getLocalTimezone } = timeRangeUtils;
-const { setTimeRange, onToggleView, setPerPage, setCustQuerySearchState } = logsStoreReducers;
+const {
+	setTimeRange,
+	onToggleView,
+	setPerPage,
+	setCustQuerySearchState,
+	setTargetPage,
+	setCurrentOffset,
+	setTargetColumns,
+} = logsStoreReducers;
 const { applySavedFilters } = filterStoreReducers;
 const timeRangeFormat = 'DD-MMM-YYYY_HH-mmz';
-const keys = ['view', 'rows', 'interval', 'from', 'to', 'query', 'filterType'];
+const keys = ['view', 'rows', 'page', 'interval', 'from', 'to', 'query', 'filterType', 'fields'];
 
 const dateToParamString = (date: Date) => {
 	return formatDateWithTimezone(date, timeRangeFormat);
@@ -53,21 +62,22 @@ const deriveTimeRangeParams = (timerange: TimeRange): { interval: string } | { f
 const storeToParamsObj = (opts: {
 	timeRange: TimeRange;
 	view: string;
-	offset: string;
 	page: string;
 	rows: string;
 	query: string;
 	filterType: string;
+	fields: string;
 }): Record<string, string> => {
-	const { timeRange, offset, page, view, rows, query, filterType } = opts;
+	const { timeRange, page, view, rows, query, filterType, fields } = opts;
+
 	const params: Record<string, string> = {
 		...deriveTimeRangeParams(timeRange),
 		view,
-		offset,
 		rows,
 		page,
 		query,
 		filterType: query ? filterType : '',
+		fields,
 	};
 	return _.pickBy(params, (val, key) => !_.isEmpty(val) && _.includes(keys, key));
 };
@@ -91,21 +101,26 @@ const useParamsController = () => {
 	const [timeRange, setLogsStore] = useLogsStore((store) => store.timeRange);
 	const [, setFilterStore] = useFilterStore((store) => store);
 
-	const { currentOffset, currentPage, perPage } = tableOpts;
+	const { currentOffset, currentPage, targetPage, perPage, headers, disabledColumns, targetColumns } = tableOpts;
+
+	const visibleHeaders = headers.filter((el) => !columnsToSkip.includes(el));
 
+	const activeHeaders = visibleHeaders.filter((el) => !disabledColumns.includes(el));
 	const [searchParams, setSearchParams] = useSearchParams();
+	const pageOffset = Math.ceil(currentOffset / perPage);
 
 	useEffect(() => {
 		const storeAsParams = storeToParamsObj({
 			timeRange,
-			offset: `${currentOffset}`,
-			page: `${currentPage}`,
+			page: `${targetPage ? targetPage : Math.ceil(currentPage + pageOffset)}`,
 			view: viewMode,
 			rows: `${perPage}`,
 			query: custQuerySearchState.custSearchQuery,
 			filterType: custQuerySearchState.viewMode,
+			fields: `${joinOrSplit(!_.isEmpty(targetColumns) ? targetColumns : activeHeaders)}`,
 		});
 		const presentParams = paramsStringToParamsObj(searchParams);
+		syncTimeRangeToStore(storeAsParams, presentParams);
 		if (['table', 'json'].includes(presentParams.view) && presentParams.view !== storeAsParams.view) {
 			setLogsStore((store) => onToggleView(store, presentParams.view as 'table' | 'json'));
 		}
@@ -120,38 +135,67 @@ const useParamsController = () => {
 					applySavedFilters(store, generateQueryBuilderASTFromSQL(presentParams.query) as QueryType),
 				);
 		}
-		syncTimeRangeToStore(storeAsParams, presentParams);
+
+		if (storeAsParams.fields !== presentParams.fields) {
+			setLogsStore((store) => setTargetColumns(store, joinOrSplit(presentParams.fields) as string[]));
+		}
+
+		if (storeAsParams.page !== presentParams.page && !_.isEmpty(presentParams.page)) {
+			setLogsStore((store) => setTargetPage(store, _.toNumber(presentParams.page)));
+
+			const offset = getOffset(_.toNumber(presentParams.page), _.toNumber(presentParams.rows));
+
+			if (offset > 0) {
+				setLogsStore((store) => setCurrentOffset(store, offset));
+
+				setLogsStore((store) =>
+					setTargetPage(
+						store,
+						Math.abs(_.toNumber(presentParams.page) - Math.ceil(offset / _.toNumber(presentParams.rows))),
+					),
+				);
+			}
+		}
+
 		setStoreSynced(true);
 	}, []);
 
 	useEffect(() => {
 		if (isStoreSynced) {
 			const storeAsParams = storeToParamsObj({
 				timeRange,
-				offset: `${currentOffset}`,
-				page: `${currentPage}`,
+				page: `${targetPage ? targetPage : Math.ceil(currentPage + pageOffset)}`,
 				view: viewMode,
 				rows: `${perPage}`,
 				query: custQuerySearchState.custSearchQuery,
 				filterType: custQuerySearchState.viewMode,
+				fields: `${joinOrSplit(!_.isEmpty(targetColumns) ? targetColumns : activeHeaders)}`,
 			});
+
 			const presentParams = paramsStringToParamsObj(searchParams);
 			if (_.isEqual(storeAsParams, presentParams)) return;
 			setSearchParams(storeAsParams);
 		}
-	}, [tableOpts, viewMode, timeRange.startTime.toISOString(), timeRange.endTime.toISOString(), custQuerySearchState]);
+	}, [
+		tableOpts,
+		targetPage,
+		viewMode,
+		timeRange.startTime.toISOString(),
+		timeRange.endTime.toISOString(),
+		custQuerySearchState,
+	]);
 
 	useEffect(() => {
 		if (!isStoreSynced) return;
 
 		const storeAsParams = storeToParamsObj({
 			timeRange,
-			offset: `${currentOffset}`,
-			page: `${currentPage}`,
+			page: `${targetPage ? targetPage : Math.ceil(currentPage + pageOffset)}`,
 			view: viewMode,
 			rows: `${perPage}`,
 			query: custQuerySearchState.custSearchQuery,
 			filterType: custQuerySearchState.viewMode,
+			fields: `${joinOrSplit(!_.isEmpty(targetColumns) ? targetColumns : activeHeaders)}`,
 		});
 		const presentParams = paramsStringToParamsObj(searchParams);
 

src/pages/Stream/providers/LogsProvider.tsx

@@ -203,12 +203,14 @@ type LogsStore = {
 	tableOpts: {
 		disabledColumns: string[];
 		wrapDisabledColumns: string[];
+		targetColumns: string[];
 		pinnedColumns: string[];
 		pageData: Log[];
 		totalPages: number;
 		totalCount: number;
 		displayedCount: number;
 		currentPage: number;
+		targetPage: number | undefined;
 		perPage: number;
 		currentOffset: number;
 		headers: string[];
@@ -265,6 +267,7 @@ type LogsStoreReducers = {
 	setCurrentOffset: (store: LogsStore, offset: number) => ReducerOutput;
 	setPerPage: (store: LogsStore, perPage: number) => ReducerOutput;
 	setCurrentPage: (store: LogsStore, page: number) => ReducerOutput;
+	setTargetPage: (store: LogsStore, target: number | undefined) => ReducerOutput;
 	setTotalCount: (store: LogsStore, totalCount: number) => ReducerOutput;
 	setPageAndPageData: (store: LogsStore, pageNo: number, perPage?: number) => ReducerOutput;
 	setAndSortData: (store: LogsStore, sortKey: string, sortOrder: 'asc' | 'desc') => ReducerOutput;
@@ -293,6 +296,7 @@ type LogsStoreReducers = {
 	onToggleView: (store: LogsStore, viewMode: 'json' | 'table') => ReducerOutput;
 	toggleConfigViewType: (store: LogsStore) => ReducerOutput;
 	setDisabledColumns: (store: LogsStore, columns: string[]) => ReducerOutput;
+	setTargetColumns: (store: LogsStore, columms: string[]) => ReducerOutput;
 	setOrderedHeaders: (store: LogsStore, columns: string[]) => ReducerOutput;
 	toggleWordWrap: (store: LogsStore) => ReducerOutput;
 };
@@ -317,6 +321,7 @@ const initialState: LogsStore = {
 	},
 
 	tableOpts: {
+		targetColumns: [],
 		disabledColumns: [],
 		wrapDisabledColumns: [],
 		pinnedColumns: [],
@@ -326,6 +331,7 @@ const initialState: LogsStore = {
 		displayedCount: 0,
 		totalPages: 0,
 		currentPage: 0,
+		targetPage: undefined,
 		currentOffset: 0,
 		headers: [],
 		orderedHeaders: [],
@@ -532,6 +538,15 @@ const setDisabledColumns = (store: LogsStore, columns: string[]) => {
 	};
 };
 
+const setTargetColumns = (store: LogsStore, columns: string[]) => {
+	return {
+		tableOpts: {
+			...store.tableOpts,
+			targetColumns: columns,
+		},
+	};
+};
+
 const togglePinnedColumns = (store: LogsStore, columnName: string) => {
 	const { tableOpts } = store;
 	return {
@@ -634,6 +649,15 @@ const setPerPage = (store: LogsStore, perPage: number) => {
 	};
 };
 
+const setTargetPage = (store: LogsStore, target: number | undefined) => {
+	return {
+		tableOpts: {
+			...store.tableOpts,
+			targetPage: target ? target : undefined,
+		},
+	};
+};
+
 const setCurrentPage = (store: LogsStore, currentPage: number) => {
 	return {
 		tableOpts: {
@@ -993,6 +1017,7 @@ const logsStoreReducers: LogsStoreReducers = {
 	setStreamSchema,
 	setPerPage,
 	setCurrentPage,
+	setTargetPage,
 	setCurrentOffset,
 	setTotalCount,
 	setPageAndPageData,
@@ -1014,6 +1039,7 @@ const logsStoreReducers: LogsStoreReducers = {
 	onToggleView,
 	toggleConfigViewType,
 	setDisabledColumns,
+	setTargetColumns,
 	setOrderedHeaders,
 	toggleWordWrap,
 	toggleWrapDisabledColumns,