Url params

src/hooks/useQueryLogs.ts

@@ -57,6 +57,7 @@ export const useQueryLogs = () => {
 		setLogsStore,
 	] = useLogsStore((store) => store);
 	const [appliedQuery] = useFilterStore((store) => store.appliedQuery);
+	const [isQueryFromParams] = useFilterStore((store) => store.isQueryFromParams);
 	const { isQuerySearchActive, custSearchQuery, activeMode } = custQuerySearchState;
 
 	const getColumnFilters = useCallback(
@@ -99,14 +100,17 @@ export const useQueryLogs = () => {
 		() => {
 			refetchSchema();
 			if (isQuerySearchActive) {
-				if (activeMode === 'filters') {
+				if (activeMode === 'filters' && isQueryFromParams === false) {
 					const { parsedQuery } = parseQuery(queryEngine, appliedQuery, currentStream || '', {
 						startTime: timeRange.startTime,
 						endTime: timeRange.endTime,
 						timePartitionColumn,
 					});
 					const queryStrWithOffset = appendOffsetToQuery(parsedQuery, defaultQueryOpts.pageOffset);
 					return getQueryResultWithHeaders({ ...defaultQueryOpts, access: [] }, queryStrWithOffset);
+				} else if (activeMode === 'filters' && isQueryFromParams === true) {
+					const queryStrWithOffset = appendOffsetToQuery(custSearchQuery, defaultQueryOpts.pageOffset);
+					return getQueryResultWithHeaders({ ...defaultQueryOpts, access: [] }, queryStrWithOffset);
 				} else {
 					const queryStrWithOffset = appendOffsetToQuery(custSearchQuery, defaultQueryOpts.pageOffset);
 					return getQueryResultWithHeaders({ ...defaultQueryOpts, access: [] }, queryStrWithOffset);

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,14 +90,24 @@ 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) => setRowNumber(store, ''));
 		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') {
@@ -132,7 +142,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">
@@ -172,23 +182,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,18 +1,28 @@
 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 { useFilterStore, filterStoreReducers } from '../../providers/FilterProvider';
+
+import { useEffect } from 'react';
+import _ from 'lodash';
+
+const { setPageAndPageData, setTargetPage, setTargetColumns, setDisabledColumns } = logsStoreReducers;
+const { toogleQueryParamsFlag } = filterStoreReducers;
 
 const LogsView = (props: { schemaLoading: boolean; infoLoading: boolean }) => {
+	const [, setFilterStore] = useFilterStore((store) => store);
 	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,
@@ -21,6 +31,30 @@ 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));
+			}
+		}
+		if (showTable) setFilterStore((store) => toogleQueryParamsFlag(store, false));
+	}, [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

@@ -31,7 +31,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/components/Querier/index.tsx

@@ -133,7 +133,7 @@ const Querier = () => {
 	}, []);
 	const [schema] = useStreamStore((store) => store.schema);
 	const [streamInfo] = useStreamStore((store) => store.info);
-	const [{ query, isSumbitDisabled }, setFilterStore] = useFilterStore((store) => store);
+	const [{ query, isSumbitDisabled, isQueryFromParams }, setFilterStore] = useFilterStore((store) => store);
 	const timePartitionColumn = _.get(streamInfo, 'time_partition', 'p_timestamp');
 
 	useEffect(() => {
@@ -202,7 +202,7 @@ const Querier = () => {
 
 		// trigger query fetch if the rules were updated by the remove btn on pills
 		// -----------------------------------
-		if (!showQueryBuilder && (activeMode === 'filters' || savedFilterId)) {
+		if (!showQueryBuilder && (activeMode === 'filters' || savedFilterId) && !isQueryFromParams) {
 			if (!shouldSumbitDisabled) {
 				onFiltersApply({ isUncontrolled: true });
 			} else {

src/pages/Stream/hooks/useParamsController.ts

@@ -3,20 +3,32 @@ import { useLogsStore, logsStoreReducers } from '@/pages/Stream/providers/LogsPr
 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 { appStoreReducers, TimeRange, useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
+import { getOffset, joinOrSplit } from '@/utils';
 
 const { getRelativeStartAndEndDate, formatDateWithTimezone, getLocalTimezone } = timeRangeUtils;
-const { onToggleView, setPerPage, setCustQuerySearchState, setRowNumber } = logsStoreReducers;
+
 const { setTimeRange, syncTimeRange } = appStoreReducers;
-const { applySavedFilters } = filterStoreReducers;
+const {
+	onToggleView,
+	setPerPage,
+	setCustQuerySearchState,
+	setTargetPage,
+	setCurrentOffset,
+	setTargetColumns,
+	setRowNumber,
+} = logsStoreReducers;
+const { toogleQueryParamsFlag, setAppliedFilterQuery, applySavedFilters, updateQuery, updateAppliedQuery } =
+	filterStoreReducers;
+
 const timeRangeFormat = 'DD-MMM-YYYY_HH-mmz';
-const keys = ['view', 'rows', 'interval', 'from', 'to', 'query', 'filterType', 'rowNumber'];
+const keys = ['view', 'rows', 'page', 'interval', 'from', 'to', 'query', 'filterType', 'fields', 'rowNumber'];
 
 const dateToParamString = (date: Date) => {
 	return formatDateWithTimezone(date, timeRangeFormat);
@@ -63,23 +75,24 @@ const deriveRowNumber = (rowNumber: string) => {
 const storeToParamsObj = (opts: {
 	timeRange: TimeRange;
 	view: string;
-	offset: string;
 	page: string;
 	rows: string;
 	query: string;
 	filterType: string;
+	fields: string;
 	rowNumber: string;
 }): Record<string, string> => {
-	const { timeRange, offset, page, view, rows, query, filterType, rowNumber } = opts;
+	const { timeRange, page, view, rows, query, filterType, fields, rowNumber } = opts;
+
 	const params: Record<string, string> = {
 		...deriveTimeRangeParams(timeRange),
 		...deriveRowNumber(rowNumber),
 		view,
-		offset,
 		rows,
 		page,
 		query,
 		filterType: query ? filterType : '',
+		fields,
 	};
 	return _.pickBy(params, (val, key) => !_.isEmpty(val) && _.includes(keys, key));
 };
@@ -104,8 +117,12 @@ const useParamsController = () => {
 	const [, setLogsStore] = useLogsStore(() => null);
 	const [, setFilterStore] = useFilterStore((store) => store);
 
-	const { currentOffset, currentPage, perPage, rowNumber } = tableOpts;
+	const { currentOffset, currentPage, targetPage, perPage, headers, disabledColumns, targetColumns, rowNumber } =
+		tableOpts;
+
+	const visibleHeaders = headers.filter((el) => !columnsToSkip.includes(el));
 
+	const activeHeaders = visibleHeaders.filter((el) => !disabledColumns.includes(el));
 	const [searchParams, setSearchParams] = useSearchParams();
 
 	const syncRowNumber = useCallback((storeAsParams: Record<string, string>, presentParams: Record<string, string>) => {
@@ -115,35 +132,62 @@ const useParamsController = () => {
 			}
 		}
 	}, []);
+	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)}`,
 			rowNumber,
 		});
 		const presentParams = paramsStringToParamsObj(searchParams);
+		if (storeAsParams.query !== presentParams.query) {
+			if (presentParams.filterType === 'filters') {
+				setFilterStore((store) => updateQuery(store, generateQueryBuilderASTFromSQL(presentParams.query) as QueryType));
+				setFilterStore((store) => updateAppliedQuery(store, store.query));
+
+				setFilterStore((store) => setAppliedFilterQuery(store, presentParams.query));
+				setFilterStore((store) => toogleQueryParamsFlag(store, true));
+			}
+			setAppStore((store) => syncTimeRange(store));
+			setLogsStore((store) => setCustQuerySearchState(store, presentParams.query, presentParams.filterType));
+		}
+
+		syncTimeRangeToStore(storeAsParams, presentParams);
+
 		if (['table', 'json'].includes(presentParams.view) && presentParams.view !== storeAsParams.view) {
 			setLogsStore((store) => onToggleView(store, presentParams.view as 'table' | 'json'));
 		}
 		if (storeAsParams.rows !== presentParams.rows && LOG_QUERY_LIMITS.includes(_.toNumber(presentParams.rows))) {
 			setLogsStore((store) => setPerPage(store, _.toNumber(presentParams.rows)));
 		}
 
-		if (storeAsParams.query !== presentParams.query) {
-			setAppStore((store) => syncTimeRange(store));
-			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[]));
+		}
+
+		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))),
+					),
 				);
+			}
 		}
-		syncTimeRangeToStore(storeAsParams, presentParams);
+
 		syncRowNumber(storeAsParams, presentParams);
 		setStoreSynced(true);
 	}, []);
@@ -152,31 +196,39 @@ const useParamsController = () => {
 		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)}`,
 				rowNumber,
 			});
+
 			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)}`,
 			rowNumber,
 		});
 		const presentParams = paramsStringToParamsObj(searchParams);