Add support for service from metrics to trace page

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.getServicesMetrics(servicename, props.globalTime);
-		props.getTopEndpoints(params.servicename, props.globalTime);
+		props.getTopEndpoints(servicename, props.globalTime);
-	}, [props.globalTime, params.servicename]);
+	}, [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">

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)
+				}
 		});
 	}, []);
 

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"
 }