fix: added onDragSelect to DBCall and External metric app (#5694)

* fix: added onDragSelect to DBCall and External metric app

* fix: handled back navigation

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -194,7 +194,7 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
 			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
 			const generatedUrl = `${pathname}?${urlQuery.toString()}`;
-			history.replace(generatedUrl);
+			history.push(generatedUrl);
 
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));

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

@@ -1,6 +1,7 @@
 import { Col } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { ENTITY_VERSION_V4 } from 'constants/app';
+import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import Graph from 'container/GridCardLayout/GridCard';
 import {
@@ -12,8 +13,12 @@ import {
 	convertRawQueriesToTraceSelectedTags,
 	resourceAttributesToTagFilterItems,
 } from 'hooks/useResourceAttribute/utils';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import useUrlQuery from 'hooks/useUrlQuery';
-import { useParams } from 'react-router-dom';
+import history from 'lib/history';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { useLocation, useParams } from 'react-router-dom';
+import { UpdateTimeInterval } from 'store/actions';
 import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { v4 as uuid } from 'uuid';
@@ -37,6 +42,26 @@ function DBCall(): JSX.Element {
 	const servicename = decodeURIComponent(encodedServiceName);
 	const [selectedTimeStamp, setSelectedTimeStamp] = useState<number>(0);
 	const { queries } = useResourceAttribute();
+	const urlQuery = useUrlQuery();
+	const { pathname } = useLocation();
+	const dispatch = useDispatch();
+
+	const onDragSelect = useCallback(
+		(start: number, end: number) => {
+			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.push(generatedUrl);
+
+			if (startTimestamp !== endTimestamp) {
+				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
+			}
+		},
+		[dispatch, pathname, urlQuery],
+	);
 
 	const tagFilterItems: TagFilterItem[] = useMemo(
 		() =>
@@ -150,6 +175,7 @@ function DBCall(): JSX.Element {
 									'database_call_rps',
 								);
 							}}
+							onDragSelect={onDragSelect}
 							version={ENTITY_VERSION_V4}
 						/>
 					</GraphContainer>
@@ -185,6 +211,7 @@ function DBCall(): JSX.Element {
 									'database_call_avg_duration',
 								);
 							}}
+							onDragSelect={onDragSelect}
 							version={ENTITY_VERSION_V4}
 						/>
 					</GraphContainer>

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

@@ -1,6 +1,7 @@
 import { Col } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { ENTITY_VERSION_V4 } from 'constants/app';
+import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import Graph from 'container/GridCardLayout/GridCard';
 import {
@@ -14,8 +15,12 @@ import {
 	convertRawQueriesToTraceSelectedTags,
 	resourceAttributesToTagFilterItems,
 } from 'hooks/useResourceAttribute/utils';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import useUrlQuery from 'hooks/useUrlQuery';
-import { useParams } from 'react-router-dom';
+import history from 'lib/history';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { useLocation, useParams } from 'react-router-dom';
+import { UpdateTimeInterval } from 'store/actions';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { EQueryType } from 'types/common/dashboard';
 import { v4 as uuid } from 'uuid';
@@ -40,6 +45,27 @@ function External(): JSX.Element {
 	const servicename = decodeURIComponent(encodedServiceName);
 	const { queries } = useResourceAttribute();
 
+	const urlQuery = useUrlQuery();
+	const { pathname } = useLocation();
+	const dispatch = useDispatch();
+
+	const onDragSelect = useCallback(
+		(start: number, end: number) => {
+			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.push(generatedUrl);
+
+			if (startTimestamp !== endTimestamp) {
+				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
+			}
+		},
+		[dispatch, pathname, urlQuery],
+	);
+
 	const tagFilterItems = useMemo(
 		() =>
 			handleNonInQueryRange(resourceAttributesToTagFilterItems(queries)) || [],
@@ -214,6 +240,7 @@ function External(): JSX.Element {
 										'external_call_error_percentage',
 									);
 								}}
+								onDragSelect={onDragSelect}
 								version={ENTITY_VERSION_V4}
 							/>
 						</GraphContainer>
@@ -249,6 +276,7 @@ function External(): JSX.Element {
 										'external_call_duration',
 									);
 								}}
+								onDragSelect={onDragSelect}
 								version={ENTITY_VERSION_V4}
 							/>
 						</GraphContainer>
@@ -285,6 +313,7 @@ function External(): JSX.Element {
 										'external_call_rps_by_address',
 									)
 								}
+								onDragSelect={onDragSelect}
 								version={ENTITY_VERSION_V4}
 							/>
 						</GraphContainer>
@@ -320,6 +349,7 @@ function External(): JSX.Element {
 										'external_call_duration_by_address',
 									);
 								}}
+								onDragSelect={onDragSelect}
 								version={ENTITY_VERSION_V4}
 							/>
 						</GraphContainer>

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

@@ -185,7 +185,7 @@ function Application(): JSX.Element {
 			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
 			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
 			const generatedUrl = `${pathname}?${urlQuery.toString()}`;
-			history.replace(generatedUrl);
+			history.push(generatedUrl);
 
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));