fix: retain the resource attributes in query params on tab change

SigNoz · May 22, 2024 · 3dc5ff5 · 3dc5ff5
1 parent 3c02d3a
commit 3dc5ff5
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 12 deletions.
diff --git a/frontend/src/AppRoutes/pageComponents.ts b/frontend/src/AppRoutes/pageComponents.ts
@@ -7,7 +7,7 @@ export const ServicesTablePage = Loadable(
 export const ServiceMetricsPage = Loadable(
 	() =>
 		import(
-			/* webpackChunkName: "ServiceMetricsPage" */ 'pages/MetricsApplication'
+			/* webpackChunkName: "ServiceMetricsPage" */ 'pages/MetricsApplication/MetricsApplication'
 		),
 );
 

diff --git a/...nd/src/pages/MetricsApplication/index.tsx → ...MetricsApplication/MetricsApplication.tsx b/...nd/src/pages/MetricsApplication/index.tsx → ...MetricsApplication/MetricsApplication.tsx
@@ -4,8 +4,9 @@ import DBCall from 'container/MetricsApplication/Tabs/DBCall';
 import External from 'container/MetricsApplication/Tabs/External';
 import Overview from 'container/MetricsApplication/Tabs/Overview';
 import ResourceAttributesFilter from 'container/ResourceAttributesFilter';
+import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { generatePath, useParams } from 'react-router-dom';
 
 import ApDexApplication from './ApDex/ApDexApplication';
@@ -21,34 +22,40 @@ function MetricsApplication(): JSX.Element {
 
 	const activeKey = useMetricsApplicationTabKey();
 
+	const urlQuery = useUrlQuery();
+
+	const getRouteUrl = useCallback(
+		(tab: MetricsApplicationTab): string => {
+			urlQuery.set('tab', tab);
+			return `${generatePath(ROUTES.SERVICE_METRICS, {
+				servicename,
+			})}?${urlQuery.toString()}`;
+		},
+		[servicename, urlQuery],
+	);
+
 	const routes = useMemo(
 		() => [
 			{
 				Component: Overview,
 				name: TAB_KEY_VS_LABEL[MetricsApplicationTab.OVER_METRICS],
-				route: `${generatePath(ROUTES.SERVICE_METRICS, {
-					servicename,
-				})}?tab=${MetricsApplicationTab.OVER_METRICS}`,
+				route: getRouteUrl(MetricsApplicationTab.OVER_METRICS),
 				key: MetricsApplicationTab.OVER_METRICS,
 			},
 			{
 				Component: DBCall,
 				name: TAB_KEY_VS_LABEL[MetricsApplicationTab.DB_CALL_METRICS],
-				route: `${generatePath(ROUTES.SERVICE_METRICS, {
-					servicename,
-				})}?tab=${MetricsApplicationTab.DB_CALL_METRICS}`,
+				route: getRouteUrl(MetricsApplicationTab.DB_CALL_METRICS),
 				key: MetricsApplicationTab.DB_CALL_METRICS,
 			},
 			{
 				Component: External,
 				name: TAB_KEY_VS_LABEL[MetricsApplicationTab.EXTERNAL_METRICS],
-				route: `${generatePath(ROUTES.SERVICE_METRICS, {
-					servicename,
-				})}?tab=${MetricsApplicationTab.EXTERNAL_METRICS}`,
+				route: getRouteUrl(MetricsApplicationTab.EXTERNAL_METRICS),
 				key: MetricsApplicationTab.EXTERNAL_METRICS,
 			},
 		],
-		[servicename],
+		[getRouteUrl],
 	);
 
 	return (