From 1ebfa0679e58cbbd9e8acbffdeb1f37eb71d28b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Chimanshu=E2=80=9D?= <himanshu@signoz.io>
Date: Sat, 23 Jan 2021 09:25:35 +0530
Subject: [PATCH] Add support for service from metrics to trace page

---
 .../src/components/metrics/ServiceMetrics.tsx | 21 ++++++++++++-------
 .../src/components/traces/TraceFilter.tsx     | 10 +++++++++
 frontend/src/constants/query.ts               |  3 ++-
 3 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/metrics/ServiceMetrics.tsx b/frontend/src/components/metrics/ServiceMetrics.tsx
index b71862c4d9..2c6acccad3 100644
--- a/frontend/src/components/metrics/ServiceMetrics.tsx
+++ b/frontend/src/components/metrics/ServiceMetrics.tsx
@@ -31,24 +31,29 @@ interface ServicesMetricsProps extends RouteComponentProps<any> {
 }
 
 const _ServiceMetrics = (props: ServicesMetricsProps) => {
-	const params = useParams<{ servicename?: string }>();
-
+	const {servicename} = useParams<{ servicename?: string }>();
 	useEffect(() => {
-		props.getServicesMetrics(params.servicename, props.globalTime);
-		props.getTopEndpoints(params.servicename, props.globalTime);
-	}, [props.globalTime, params.servicename]);
+		props.getServicesMetrics(servicename, props.globalTime);
+		props.getTopEndpoints(servicename, props.globalTime);
+	}, [props.globalTime, servicename]);
 
 	const onTracePopupClick = (timestamp: number) => {
-		const tMinus5Min = timestamp / 1000000 - 5 * 60 * 1000;
+		const tMinus15Min = timestamp / 1000000 - 15 * 60 * 1000;
 		const currentTime = timestamp / 1000000;
 
 		props.updateTimeInterval("custom", [
-			tMinus5Min,
+			tMinus15Min,
 			currentTime,
 		]); // updateTimeInterval takes second range in ms -- give -5 min to selected time,
 
+		const urlParams = new URLSearchParams();
+			urlParams.set(METRICS_PAGE_QUERY_PARAM.startTime,tMinus15Min.toString())
+		urlParams.set(METRICS_PAGE_QUERY_PARAM.endTime,currentTime.toString())
+		if(servicename){
+			urlParams.set(METRICS_PAGE_QUERY_PARAM.service,servicename)
+		}
 
-		props.history.push(`/traces?${METRICS_PAGE_QUERY_PARAM.startTime}=${tMinus5Min}&${METRICS_PAGE_QUERY_PARAM.endTime}=${currentTime}`);
+		props.history.push(`/traces?${urlParams.toString()}`);
 	};
 	return (
 		<Tabs defaultActiveKey="1">
diff --git a/frontend/src/components/traces/TraceFilter.tsx b/frontend/src/components/traces/TraceFilter.tsx
index 2866a979e6..4e770b02b8 100644
--- a/frontend/src/components/traces/TraceFilter.tsx
+++ b/frontend/src/components/traces/TraceFilter.tsx
@@ -16,6 +16,8 @@ import { FilterStateDisplay } from "./FilterStateDisplay";
 
 import FormItem from "antd/lib/form/FormItem";
 import metricsAPI from "../../api/metricsAPI";
+import { useLocation } from "react-router-dom";
+import { METRICS_PAGE_QUERY_PARAM } from "../../constants/query";
 
 const { Option } = Select;
 
@@ -39,12 +41,20 @@ interface TagKeyOptionItem {
 
 const _TraceFilter = (props: TraceFilterProps) => {
 	const [serviceList, setServiceList] = useState<string[]>([]);
+	const [service, setSelectedService] = useState<string|null>(null);
 	const [operationList, setOperationsList] = useState<string[]>([]);
 	const [tagKeyOptions, setTagKeyOptions] = useState<TagKeyOptionItem[]>([]);
+	const location = useLocation()
+	const urlParams = new URLSearchParams(location.search.split("?")[1]);
 
 	useEffect(() => {
 		metricsAPI.get<string[]>("services/list").then((response) => {
 			setServiceList(response.data);
+		}).then(()=>{
+				const serviceName =urlParams.get(METRICS_PAGE_QUERY_PARAM.service);
+				if(serviceName){
+					handleChangeService(serviceName)
+				}
 		});
 	}, []);
 
diff --git a/frontend/src/constants/query.ts b/frontend/src/constants/query.ts
index efc9065b7d..f7736736e9 100644
--- a/frontend/src/constants/query.ts
+++ b/frontend/src/constants/query.ts
@@ -1,6 +1,7 @@
 export enum METRICS_PAGE_QUERY_PARAM {
 	interval = "interval",
 	startTime = "startTime",
-	endTime = "endTime"
+	endTime = "endTime",
+	service = "service"
 }