feat: Tabs selection persist when we refresh

frontend/public/locales/en-GB/routes.json

@@ -2,5 +2,8 @@
 	"general": "General",
 	"alert_channels": "Alert Channels",
 	"organization_settings": "Organization Settings",
-	"my_settings": "My Settings"
+	"my_settings": "My Settings",
+	"overview_metrics": "Overview Metrics",
+	"dbcall_metrics": "Database Calls",
+	"external_metrics": "External Calls"
 }

frontend/public/locales/en/routes.json

@@ -2,5 +2,8 @@
 	"general": "General",
 	"alert_channels": "Alert Channels",
 	"organization_settings": "Organization Settings",
-	"my_settings": "My Settings"
+	"my_settings": "My Settings",
+	"overview_metrics": "Overview Metrics",
+	"dbcall_metrics": "Database Calls",
+	"external_metrics": "External Calls"
 }

frontend/src/components/RouteTab/index.tsx

@@ -27,12 +27,19 @@ function RouteTab({
 			onChange={onChange}
 			destroyInactiveTabPane
 			activeKey={activeKey}
+			animated
 			// eslint-disable-next-line react/jsx-props-no-spreading
 			{...rest}
 		>
 			{routes.map(
-				({ Component, name }): JSX.Element => (
+				({ Component, name, route }): JSX.Element => (
-					<TabPane tab={name} key={name}>
+					<TabPane
+						tabKey={route}
+						animated
+						destroyInactiveTabPane
+						tab={name}
+						key={name}
+					>
 						<Component />
 					</TabPane>
 				),

frontend/src/container/MetricsApplication/index.tsx

@@ -1,54 +1,108 @@
-import { Tabs } from 'antd';
+import RouteTab from 'components/RouteTab';
+import ROUTES from 'constants/routes';
 import React from 'react';
+import { generatePath, useParams } from 'react-router-dom';
+import { useLocation } from 'react-use';
 import { Widgets } from 'types/api/dashboard/getAll';
 
 import ResourceAttributesFilter from './ResourceAttributesFilter';
-import Application from './Tabs/Application';
 import DBCall from './Tabs/DBCall';
 import External from './Tabs/External';
+import Overview from './Tabs/Overview';
 
-const { TabPane } = Tabs;
+const getWidget = (query: Widgets['query']): Widgets => {
+	return {
+		description: '',
+		id: '',
+		isStacked: false,
+		nullZeroValues: '',
+		opacity: '0',
+		panelTypes: 'TIME_SERIES',
+		query,
+		queryData: {
+			data: [],
+			error: false,
+			errorMessage: '',
+			loading: false,
+		},
+		timePreferance: 'GLOBAL_TIME',
+		title: '',
+		stepSize: 60,
+	};
+};
+
+function OverViewTab(): JSX.Element {
+	return <Overview getWidget={getWidget} />;
+}
+
+function DbCallTab(): JSX.Element {
+	return <DBCall getWidget={getWidget} />;
+}
+
+function ExternalTab(): JSX.Element {
+	return <External getWidget={getWidget} />;
+}
 
 function ServiceMetrics(): JSX.Element {
-	const getWidget = (query: Widgets['query']): Widgets => {
+	const { search } = useLocation();
-		return {
+	const { servicename } = useParams<{ servicename: string }>();
-			description: '',
+
-			id: '',
+	const searchParams = new URLSearchParams(search);
-			isStacked: false,
+	const tab = searchParams.get('tab');
-			nullZeroValues: '',
+
-			opacity: '0',
+	const overMetrics = 'Overview Metrics';
-			panelTypes: 'TIME_SERIES',
+	const dbCallMetrics = 'Database Calls';
-			query,
+	const externalMetrics = 'External Calls';
-			queryData: {
+
-				data: [],
+	const getActiveKey = (): string => {
-				error: false,
+		if (tab === null) {
-				errorMessage: '',
+			return overMetrics;
-				loading: false,
+		}
-			},
+
-			timePreferance: 'GLOBAL_TIME',
+		if (tab === dbCallMetrics) {
-			title: '',
+			return dbCallMetrics;
-			stepSize: 60,
+		}
-		};
+
+		if (tab === externalMetrics) {
+			return externalMetrics;
+		}
+
+		return overMetrics;
 	};
 
+	const activeKey = getActiveKey();
+
 	return (
 		<>
 			<ResourceAttributesFilter />
-			<Tabs defaultActiveKey="1">
+			<RouteTab
-				<TabPane animated destroyInactiveTabPane tab="Application Metrics" key="1">
+				routes={[
-					<Application getWidget={getWidget} />
+					{
-				</TabPane>
+						Component: OverViewTab,
-
+						name: overMetrics,
-				<TabPane animated destroyInactiveTabPane tab="External Calls" key="2">
+						route: `${generatePath(ROUTES.SERVICE_METRICS, {
-					<External getWidget={getWidget} />
+							servicename,
-				</TabPane>
+						})}?tab=${overMetrics}`,
-
+					},
-				<TabPane animated destroyInactiveTabPane tab="Database Calls" key="3">
+					{
-					<DBCall getWidget={getWidget} />
+						Component: DbCallTab,
-				</TabPane>
+						name: dbCallMetrics,
-			</Tabs>
+						route: `${generatePath(ROUTES.SERVICE_METRICS, {
+							servicename,
+						})}?tab=${dbCallMetrics}`,
+					},
+					{
+						Component: ExternalTab,
+						name: externalMetrics,
+						route: `${generatePath(ROUTES.SERVICE_METRICS, {
+							servicename,
+						})}?tab=${externalMetrics}`,
+					},
+				]}
+				activeKey={activeKey}
+			/>
 		</>
 	);
 }
 
-export default ServiceMetrics;
+export default React.memo(ServiceMetrics);