feat: [GH-4325]: update the URL time query params when zoom in and zoom out of charts

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -1,10 +1,13 @@
+import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useStepInterval } from 'hooks/queryBuilder/useStepInterval';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
+import useUrlQuery from 'hooks/useUrlQuery';
 import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
+import history from 'lib/history';
 import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import isEmpty from 'lodash-es/isEmpty';
@@ -12,6 +15,7 @@ import _noop from 'lodash-es/noop';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -37,17 +41,24 @@ function GridCardGraph({
 	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
 	const [minTimeScale, setMinTimeScale] = useState<number>();
 	const [maxTimeScale, setMaxTimeScale] = useState<number>();
+	const urlQuery = useUrlQuery();
+	const location = useLocation();
 
 	const onDragSelect = useCallback(
 		(start: number, end: number): void => {
 			const startTimestamp = Math.trunc(start);
 			const endTimestamp = Math.trunc(end);
 
+			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
+			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
+			const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
+			history.replace(generatedUrl);
+
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
 			}
 		},
-		[dispatch],
+		[dispatch, location.pathname, urlQuery],
 	);
 
 	const graphRef = useRef<HTMLDivElement>(null);

frontend/src/container/MetricsApplication/Tabs/Overview.tsx

@@ -13,6 +13,7 @@ import {
 	convertRawQueriesToTraceSelectedTags,
 	resourceAttributesToTagFilterItems,
 } from 'hooks/useResourceAttribute/utils';
+import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import { useCallback, useMemo, useState } from 'react';
@@ -52,8 +53,10 @@ function Application(): JSX.Element {
 	);
 	const { servicename } = useParams<IServiceName>();
 	const [selectedTimeStamp, setSelectedTimeStamp] = useState<number>(0);
-	const { search } = useLocation();
+	const { search, pathname } = useLocation();
 	const { queries } = useResourceAttribute();
+	const urlQuery = useUrlQuery();
+
 	const selectedTags = useMemo(
 		() => (convertRawQueriesToTraceSelectedTags(queries) as Tags[]) || [],
 		[queries],
@@ -157,11 +160,16 @@ function Application(): JSX.Element {
 			const startTimestamp = Math.trunc(start);
 			const endTimestamp = Math.trunc(end);
 
+			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
+			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
+			const generatedUrl = `${pathname}?${urlQuery.toString()}`;
+			history.replace(generatedUrl);
+
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
 			}
 		},
-		[dispatch],
+		[dispatch, pathname, urlQuery],
 	);
 
 	const onErrorTrackHandler = (timestamp: number): (() => void) => (): void => {

frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx

@@ -1,14 +1,17 @@
+import { QueryParams } from 'constants/query';
 import GridPanelSwitch from 'container/GridPanelSwitch';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import useUrlQuery from 'hooks/useUrlQuery';
+import history from 'lib/history';
 import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { UseQueryResult } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { SuccessResponse } from 'types/api';
@@ -35,6 +38,7 @@ function WidgetGraph({
 
 	const [minTimeScale, setMinTimeScale] = useState<number>();
 	const [maxTimeScale, setMaxTimeScale] = useState<number>();
+	const location = useLocation();
 
 	useEffect((): void => {
 		const { startTime, endTime } = getTimeRange(getWidgetQueryRange);
@@ -65,11 +69,16 @@ function WidgetGraph({
 			const startTimestamp = Math.trunc(start);
 			const endTimestamp = Math.trunc(end);
 
+			params.set(QueryParams.startTime, startTimestamp.toString());
+			params.set(QueryParams.endTime, endTimestamp.toString());
+			const generatedUrl = `${location.pathname}?${params.toString()}`;
+			history.replace(generatedUrl);
+
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
 			}
 		},
-		[dispatch],
+		[dispatch, location.pathname, params],
 	);
 
 	const options = useMemo(