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';
@@ -96,7 +96,19 @@ const Footer = (props: { loaded: boolean; hasNoData: boolean; isFetchingCount: b
 		setLogsStore((store) => setPageAndPageData(store, page));
 	}, []);
 
-	const pagination = usePagination({ total: totalPages ?? 1, initialPage: 1, onChange: onPageChange });
+	useEffect(() => {
+		const initialPageFromUrl = currentPage % Math.ceil(currentOffset / perPage);
+		if (!initialPageFromUrl) return;
+
+		pagination.setPage(currentPage % Math.ceil(currentOffset / perPage));
+	}, [currentOffset, perPage]);
+
+	const pagination = usePagination({
+		total: totalPages ?? 1,
+		initialPage: 1,
+		onChange: onPageChange,
+	});
+
 	const onChangeOffset = useCallback(
 		(key: 'prev' | 'next') => {
 			if (key === 'prev') {
@@ -131,7 +143,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 +183,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,10 +1,15 @@
 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 { getOffset } from '@/utils';
+
+import { useEffect } from 'react';
+
+const { setPageAndPageData, setTargetPage, setTargetColumns, setDisabledColumns, setCurrentOffset } = logsStoreReducers;
 
 const LogsView = (props: { schemaLoading: boolean; infoLoading: boolean }) => {
 	const { schemaLoading, infoLoading } = props;
@@ -13,7 +18,9 @@ const LogsView = (props: { schemaLoading: boolean; infoLoading: boolean }) => {
 		infoLoading,
 	});
 
-	const [viewMode] = useLogsStore((store) => store.viewMode);
+	const [tableOpts] = useLogsStore((store) => store.tableOpts);
+	const { currentPage, targetPage, headers, targetColumns, perPage } = tableOpts;
+	const [viewMode, setLogsStore] = useLogsStore((store) => store.viewMode);
 	const viewOpts = {
 		errorMessage,
 		hasNoData,
@@ -22,6 +29,34 @@ const LogsView = (props: { schemaLoading: boolean; infoLoading: boolean }) => {
 		logsLoading,
 	};
 
+	useEffect(() => {
+		if (!showTable) return;
+		if (targetPage) {
+			const offset = getOffset(targetPage, perPage);
+			if (offset > 0) {
+				setLogsStore((store) => setCurrentOffset(store, offset));
+				setLogsStore((store) => setTargetPage(store, targetPage - Math.ceil(offset / perPage)));
+			}
+			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/hooks/useParamsController.ts

@@ -3,18 +3,19 @@ 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';
 
 const { getRelativeStartAndEndDate, formatDateWithTimezone, getLocalTimezone } = timeRangeUtils;
-const { setTimeRange, onToggleView, setPerPage, setCustQuerySearchState } = logsStoreReducers;
+const { setTimeRange, onToggleView, setPerPage, setCustQuerySearchState, setTargetPage, 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);
@@ -58,8 +59,10 @@ const storeToParamsObj = (opts: {
 	rows: string;
 	query: string;
 	filterType: string;
+	fields: string;
 }): Record<string, string> => {
-	const { timeRange, offset, page, view, rows, query, filterType } = opts;
+	const { timeRange, offset, page, view, rows, query, filterType, fields } = opts;
+
 	const params: Record<string, string> = {
 		...deriveTimeRangeParams(timeRange),
 		view,
@@ -68,6 +71,7 @@ const storeToParamsObj = (opts: {
 		page,
 		query,
 		filterType: query ? filterType : '',
+		fields,
 	};
 	return _.pickBy(params, (val, key) => !_.isEmpty(val) && _.includes(keys, key));
 };
@@ -83,6 +87,15 @@ const paramsStringToParamsObj = (searchParams: URLSearchParams): Record<string,
 	);
 };
 
+const joinOrSplit = (value: string[] | string): string | string[] => {
+	const joinOperator = ',';
+	if (Array.isArray(value)) {
+		return value.join(joinOperator);
+	} else {
+		return value.split(joinOperator);
+	}
+};
+
 const useParamsController = () => {
 	const [isStoreSynced, setStoreSynced] = useState(false);
 	const [tableOpts] = useLogsStore((store) => store.tableOpts);
@@ -91,19 +104,24 @@ 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);
 		if (['table', 'json'].includes(presentParams.view) && presentParams.view !== storeAsParams.view) {
@@ -113,13 +131,21 @@ const useParamsController = () => {
 			setLogsStore((store) => setPerPage(store, _.toNumber(presentParams.rows)));
 		}
 
+		if (storeAsParams.page !== presentParams.page) {
+			setLogsStore((store) => setTargetPage(store, _.toNumber(presentParams.page)));
+		}
+
 		if (storeAsParams.query !== presentParams.query) {
 			setLogsStore((store) => setCustQuerySearchState(store, presentParams.query, presentParams.filterType));
 			if (presentParams.filterType === 'filters')
 				setFilterStore((store) =>
 					applySavedFilters(store, generateQueryBuilderASTFromSQL(presentParams.query) as QueryType),
 				);
 		}
+
+		if (storeAsParams.fields !== presentParams.fields) {
+			setLogsStore((store) => setTargetColumns(store, joinOrSplit(presentParams.fields) as string[]));
+		}
 		syncTimeRangeToStore(storeAsParams, presentParams);
 		setStoreSynced(true);
 	}, []);
@@ -129,11 +155,12 @@ const useParamsController = () => {
 			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;
@@ -147,11 +174,12 @@ const useParamsController = () => {
 		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,
+		},
+	};
+};
+
 const setCurrentPage = (store: LogsStore, currentPage: number) => {
 	return {
 		tableOpts: {
@@ -994,6 +1018,7 @@ const logsStoreReducers: LogsStoreReducers = {
 	setStreamSchema,
 	setPerPage,
 	setCurrentPage,
+	setTargetPage,
 	setCurrentOffset,
 	setTotalCount,
 	setPageAndPageData,
@@ -1015,6 +1040,7 @@ const logsStoreReducers: LogsStoreReducers = {
 	onToggleView,
 	toggleConfigViewType,
 	setDisabledColumns,
+	setTargetColumns,
 	setOrderedHeaders,
 	toggleWordWrap,
 	toggleWrapDisabledColumns,

src/utils/index.ts

@@ -105,3 +105,8 @@ export const copyTextToClipboard = async (value: any) => {
 		return await navigator.clipboard.writeText(JSON.stringify(value, null, 2));
 	}
 };
+
+export const getOffset = (page: number, rowSize: number) => {
+	const product = page * rowSize;
+	return Math.floor(product / 1000) * 1000;
+};