feat: support zoom in for bar chart logs explorer (#4542)

* feat: support zoom in for bar chart logs explorer

* feat: add back navigation support for bar chart zoom in

frontend/src/container/LogsExplorerChart/index.tsx

@@ -1,9 +1,17 @@
 import Graph from 'components/Graph';
 import Spinner from 'components/Spinner';
+import { QueryParams } from 'constants/query';
 import { themeColors } from 'constants/theme';
+import useUrlQuery from 'hooks/useUrlQuery';
 import getChartData, { GetChartDataProps } from 'lib/getChartData';
+import GetMinMax from 'lib/getMinMax';
 import { colors } from 'lib/getRandomColor';
-import { memo, useCallback, useMemo } from 'react';
+import getTimeString from 'lib/getTimeString';
+import history from 'lib/history';
+import { memo, useCallback, useEffect, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+import { UpdateTimeInterval } from 'store/actions';
 
 import { LogsExplorerChartProps } from './LogsExplorerChart.interfaces';
 import { CardStyled } from './LogsExplorerChart.styled';
@@ -14,6 +22,9 @@ function LogsExplorerChart({
 	isLabelEnabled = true,
 	className,
 }: LogsExplorerChartProps): JSX.Element {
+	const dispatch = useDispatch();
+	const urlQuery = useUrlQuery();
+	const location = useLocation();
 	const handleCreateDatasets: Required<GetChartDataProps>['createDataset'] = useCallback(
 		(element, index, allLabels) => ({
 			data: element,
@@ -28,6 +39,52 @@ function LogsExplorerChart({
 		[isLabelEnabled],
 	);
 
+	const onDragSelect = useCallback(
+		(start: number, end: number): void => {
+			const startTimestamp = Math.trunc(start);
+			const endTimestamp = Math.trunc(end);
+
+			if (startTimestamp !== endTimestamp) {
+				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
+			}
+
+			const { maxTime, minTime } = GetMinMax('custom', [
+				startTimestamp,
+				endTimestamp,
+			]);
+
+			urlQuery.set(QueryParams.startTime, minTime.toString());
+			urlQuery.set(QueryParams.endTime, maxTime.toString());
+			const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
+			history.push(generatedUrl);
+		},
+		[dispatch, location.pathname, urlQuery],
+	);
+
+	const handleBackNavigation = (): void => {
+		const searchParams = new URLSearchParams(window.location.search);
+		const startTime = searchParams.get(QueryParams.startTime);
+		const endTime = searchParams.get(QueryParams.endTime);
+
+		if (startTime && endTime && startTime !== endTime) {
+			dispatch(
+				UpdateTimeInterval('custom', [
+					parseInt(getTimeString(startTime), 10),
+					parseInt(getTimeString(endTime), 10),
+				]),
+			);
+		}
+	};
+
+	useEffect(() => {
+		window.addEventListener('popstate', handleBackNavigation);
+
+		return (): void => {
+			window.removeEventListener('popstate', handleBackNavigation);
+		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
 	const graphData = useMemo(
 		() =>
 			getChartData({
@@ -46,7 +103,13 @@ function LogsExplorerChart({
 			{isLoading ? (
 				<Spinner size="default" height="100%" />
 			) : (
-				<Graph name="logsExplorerChart" data={graphData.data} type="bar" animate />
+				<Graph
+					name="logsExplorerChart"
+					data={graphData.data}
+					type="bar"
+					animate
+					onDragSelect={onDragSelect}
+				/>
 			)}
 		</CardStyled>
 	);