fix: [GH-3790]: timerange not working for different users (#4192)

frontend/src/container/TopNav/DateTimeSelection/index.tsx

@@ -3,12 +3,16 @@ import { Button, Select as DefaultSelect } from 'antd';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { QueryParams } from 'constants/query';
+import ROUTES from 'constants/routes';
 import dayjs, { Dayjs } from 'dayjs';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { updateStepInterval } from 'hooks/queryBuilder/useStepInterval';
+import useUrlQuery from 'hooks/useUrlQuery';
 import GetMinMax from 'lib/getMinMax';
 import getTimeString from 'lib/getTimeString';
-import { useCallback, useEffect, useState } from 'react';
+import history from 'lib/history';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { connect, useSelector } from 'react-redux';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 import { bindActionCreators, Dispatch } from 'redux';
@@ -34,9 +38,9 @@ function DateTimeSelection({
 }: Props): JSX.Element {
 	const [formSelector] = Form.useForm();
 
-	const params = new URLSearchParams(location.search);
+	const urlQuery = useUrlQuery();
-	const searchStartTime = params.get('startTime');
+	const searchStartTime = urlQuery.get('startTime');
-	const searchEndTime = params.get('endTime');
+	const searchEndTime = urlQuery.get('endTime');
 
 	const localstorageStartTime = getLocalStorageKey('startTime');
 	const localstorageEndTime = getLocalStorageKey('endTime');
@@ -169,6 +173,11 @@ function DateTimeSelection({
 		return `Last refresh - ${secondsDiff} sec ago`;
 	}, [maxTime, minTime, selectedTime]);
 
+	const isLogsExplorerPage = useMemo(
+		() => location.pathname === ROUTES.LOGS_EXPLORER,
+		[location.pathname],
+	);
+
 	const onSelectHandler = (value: Time): void => {
 		if (value !== 'custom') {
 			updateTimeInterval(value);
@@ -181,12 +190,18 @@ function DateTimeSelection({
 			setCustomDTPickerVisible(true);
 		}
 
+		const { maxTime, minTime } = GetMinMax(value, getTime());
+
+		if (!isLogsExplorerPage) {
+			urlQuery.set(QueryParams.startTime, minTime.toString());
+			urlQuery.set(QueryParams.endTime, maxTime.toString());
+			const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
+			history.replace(generatedUrl);
+		}
+
 		if (!stagedQuery) {
 			return;
 		}
-
-		const { maxTime, minTime } = GetMinMax(value, getTime());
-
 		initQueryBuilderData(updateStepInterval(stagedQuery, maxTime, minTime));
 	};
 
@@ -207,6 +222,12 @@ function DateTimeSelection({
 				setLocalStorageKey('startTime', startTimeMoment.toString());
 				setLocalStorageKey('endTime', endTimeMoment.toString());
 				updateLocalStorageForRoutes('custom');
+				if (!isLogsExplorerPage) {
+					urlQuery.set(QueryParams.startTime, startTimeMoment.toString());
+					urlQuery.set(QueryParams.endTime, endTimeMoment.toString());
+					const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
+					history.replace(generatedUrl);
+				}
 			}
 		}
 	};
@@ -234,7 +255,6 @@ function DateTimeSelection({
 			if (searchEndTime !== null && searchStartTime !== null) {
 				return 'custom';
 			}
-
 			if (
 				(localstorageEndTime === null || localstorageStartTime === null) &&
 				time === 'custom'
@@ -252,16 +272,8 @@ function DateTimeSelection({
 		setRefreshButtonHidden(updatedTime === 'custom');
 
 		updateTimeInterval(updatedTime, [preStartTime, preEndTime]);
-	}, [
+		// eslint-disable-next-line react-hooks/exhaustive-deps
-		location.pathname,
+	}, [location.pathname, updateTimeInterval, globalTimeLoading]);
-		getTime,
-		localstorageEndTime,
-		localstorageStartTime,
-		searchEndTime,
-		searchStartTime,
-		updateTimeInterval,
-		globalTimeLoading,
-	]);
 
 	return (
 		<>

frontend/src/hooks/logs/useCopyLogLink.ts

@@ -3,6 +3,7 @@ import ROUTES from 'constants/routes';
 import { useNotifications } from 'hooks/useNotifications';
 import useUrlQuery from 'hooks/useUrlQuery';
 import useUrlQueryData from 'hooks/useUrlQueryData';
+import history from 'lib/history';
 import {
 	MouseEventHandler,
 	useCallback,
@@ -28,16 +29,27 @@ export const useCopyLogLink = (logId?: string): UseCopyLogLink => {
 		(state) => state.globalTime,
 	);
 
-	const {
+	const { queryData: timeRange } = useUrlQueryData<LogTimeRange | null>(
-		queryData: timeRange,
+		QueryParams.timeRange,
-		redirectWithQuery: onTimeRangeChange,
+		null,
-	} = useUrlQueryData<LogTimeRange | null>(QueryParams.timeRange, null);
+	);
 
 	const { queryData: activeLogId } = useUrlQueryData<string | null>(
 		QueryParams.activeLogId,
 		null,
 	);
 
+	const onTimeRangeChange = useCallback(
+		(newTimeRange: LogTimeRange | null): void => {
+			urlQuery.set(QueryParams.timeRange, JSON.stringify(newTimeRange));
+			urlQuery.set(QueryParams.startTime, newTimeRange?.start.toString() || '');
+			urlQuery.set(QueryParams.endTime, newTimeRange?.end.toString() || '');
+			const generatedUrl = `${pathname}?${urlQuery.toString()}`;
+			history.replace(generatedUrl);
+		},
+		[pathname, urlQuery],
+	);
+
 	const isActiveLog = useMemo(() => activeLogId === logId, [activeLogId, logId]);
 	const [isHighlighted, setIsHighlighted] = useState<boolean>(isActiveLog);