From 7cff07333fc1dcbac59d35308a8fe659db7f86b7 Mon Sep 17 00:00:00 2001 From: SagarRajput-7 <162284829+SagarRajput-7@users.noreply.github.com> Date: Tue, 20 Aug 2024 17:45:22 +0530 Subject: [PATCH] fix: added onDragSelect to DBCall and External metric app (#5694) * fix: added onDragSelect to DBCall and External metric app * fix: handled back navigation --- .../GridCardLayout/GridCardLayout.tsx | 2 +- .../MetricsApplication/Tabs/DBCall.tsx | 31 +++++++++++++++-- .../MetricsApplication/Tabs/External.tsx | 34 +++++++++++++++++-- .../MetricsApplication/Tabs/Overview.tsx | 2 +- 4 files changed, 63 insertions(+), 6 deletions(-) diff --git a/frontend/src/container/GridCardLayout/GridCardLayout.tsx b/frontend/src/container/GridCardLayout/GridCardLayout.tsx index 75fde3ce7a..a96599b127 100644 --- a/frontend/src/container/GridCardLayout/GridCardLayout.tsx +++ b/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])); diff --git a/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx b/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx index 3ee49ddc9a..da7bbbfc60 100644 --- a/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx +++ b/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 { useParams } from 'react-router-dom'; +import useUrlQuery from 'hooks/useUrlQuery'; +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(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} /> @@ -185,6 +211,7 @@ function DBCall(): JSX.Element { 'database_call_avg_duration', ); }} + onDragSelect={onDragSelect} version={ENTITY_VERSION_V4} /> diff --git a/frontend/src/container/MetricsApplication/Tabs/External.tsx b/frontend/src/container/MetricsApplication/Tabs/External.tsx index 69abd6696d..5ba3d3df6c 100644 --- a/frontend/src/container/MetricsApplication/Tabs/External.tsx +++ b/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 { useParams } from 'react-router-dom'; +import useUrlQuery from 'hooks/useUrlQuery'; +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} /> @@ -249,6 +276,7 @@ function External(): JSX.Element { 'external_call_duration', ); }} + onDragSelect={onDragSelect} version={ENTITY_VERSION_V4} /> @@ -285,6 +313,7 @@ function External(): JSX.Element { 'external_call_rps_by_address', ) } + onDragSelect={onDragSelect} version={ENTITY_VERSION_V4} /> @@ -320,6 +349,7 @@ function External(): JSX.Element { 'external_call_duration_by_address', ); }} + onDragSelect={onDragSelect} version={ENTITY_VERSION_V4} /> diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx index 916c3435b5..241395b23a 100644 --- a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx +++ b/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]));