From a59e33d241f2b5a6040d0f1ad42c9b09f603feb0 Mon Sep 17 00:00:00 2001
From: dhrubesh <dhrubesh97@gmail.com>
Date: Sat, 1 May 2021 20:27:46 +0530
Subject: [PATCH] links end points to traces

---
 frontend/src/constants/query.ts               |  1 +
 .../src/modules/Metrics/TopEndpointsTable.tsx | 51 +++++++++++++++++--
 frontend/src/modules/Traces/TraceFilter.tsx   | 27 +++++++---
 3 files changed, 67 insertions(+), 12 deletions(-)

diff --git a/frontend/src/constants/query.ts b/frontend/src/constants/query.ts
index 1f9e72626d..c37213981a 100644
--- a/frontend/src/constants/query.ts
+++ b/frontend/src/constants/query.ts
@@ -3,4 +3,5 @@ export enum METRICS_PAGE_QUERY_PARAM {
 	startTime = "startTime",
 	endTime = "endTime",
 	service = "service",
+	operation = "operation",
 }
diff --git a/frontend/src/modules/Metrics/TopEndpointsTable.tsx b/frontend/src/modules/Metrics/TopEndpointsTable.tsx
index c8e205772b..b4584981cd 100644
--- a/frontend/src/modules/Metrics/TopEndpointsTable.tsx
+++ b/frontend/src/modules/Metrics/TopEndpointsTable.tsx
@@ -1,8 +1,12 @@
 import React from "react";
-import { NavLink } from "react-router-dom";
-import { Table } from "antd";
+import { Table, Button } from "antd";
+import { connect } from "react-redux";
 import styled from "styled-components";
+import { useHistory, useParams } from "react-router-dom";
 import { topEndpointListItem } from "../../store/actions/metrics";
+import { METRICS_PAGE_QUERY_PARAM } from "Src/constants/query";
+import { GlobalTime } from "Src/store/actions";
+import { StoreState } from "Src/store/reducers";
 
 const Wrapper = styled.div`
 	padding-top: 10px;
@@ -22,16 +26,42 @@ const Wrapper = styled.div`
 
 interface TopEndpointsTableProps {
 	data: topEndpointListItem[];
+	globalTime: GlobalTime;
 }
 
-const TopEndpointsTable = (props: TopEndpointsTableProps) => {
+const _TopEndpointsTable = (props: TopEndpointsTableProps) => {
+	const history = useHistory();
+	const params = useParams<{ servicename: string }>();
+	const handleOnClick = (operation: string) => {
+		const urlParams = new URLSearchParams();
+		const { servicename } = params;
+		const { maxTime, minTime } = props.globalTime;
+		urlParams.set(
+			METRICS_PAGE_QUERY_PARAM.startTime,
+			String(Number(minTime) / 1000000),
+		);
+		urlParams.set(
+			METRICS_PAGE_QUERY_PARAM.endTime,
+			String(Number(maxTime) / 1000000),
+		);
+		if (servicename) {
+			urlParams.set(METRICS_PAGE_QUERY_PARAM.service, servicename);
+		}
+		urlParams.set(METRICS_PAGE_QUERY_PARAM.operation, operation);
+		history.push(`/traces?${urlParams.toString()}`);
+	};
+
 	const columns: any = [
 		{
 			title: "Name",
 			dataIndex: "name",
 			key: "name",
 
-			render: (text: string) => <NavLink to={"/" + text}>{text}</NavLink>,
+			render: (text: string) => (
+				<Button type="link" onClick={() => handleOnClick(text)}>
+					{text}
+				</Button>
+			),
 		},
 		{
 			title: "P50  (in ms)",
@@ -73,4 +103,17 @@ const TopEndpointsTable = (props: TopEndpointsTableProps) => {
 	);
 };
 
+const mapStateToProps = (
+	state: StoreState,
+): {
+	globalTime: GlobalTime;
+} => {
+	return { globalTime: state.globalTime };
+};
+
+export const TopEndpointsTable = connect(
+	mapStateToProps,
+	null,
+)(_TopEndpointsTable);
+
 export default TopEndpointsTable;
diff --git a/frontend/src/modules/Traces/TraceFilter.tsx b/frontend/src/modules/Traces/TraceFilter.tsx
index a1c40fdbb8..52b091cbee 100644
--- a/frontend/src/modules/Traces/TraceFilter.tsx
+++ b/frontend/src/modules/Traces/TraceFilter.tsx
@@ -62,9 +62,22 @@ const _TraceFilter = (props: TraceFilterProps) => {
 				setServiceList(response.data);
 			})
 			.then(() => {
+				const operationName = urlParams.get(METRICS_PAGE_QUERY_PARAM.operation);
 				const serviceName = urlParams.get(METRICS_PAGE_QUERY_PARAM.service);
-				if (serviceName) {
-					handleChangeService(serviceName);
+				if (operationName && serviceName) {
+					props.updateTraceFilters({
+						...props.traceFilters,
+						operation: operationName,
+						service: serviceName,
+					});
+					populateData(serviceName);
+				} else {
+					if (operationName) {
+						handleChangeOperation(operationName);
+					}
+					if (serviceName) {
+						handleChangeService(serviceName);
+					}
 				}
 			});
 	}, []);
@@ -144,15 +157,11 @@ const _TraceFilter = (props: TraceFilterProps) => {
 
 	const [form_basefilter] = Form.useForm();
 
-	function handleChange(value: string) {
-		console.log(value);
-	}
-
 	function handleChangeOperation(value: string) {
 		props.updateTraceFilters({ ...props.traceFilters, operation: value });
 	}
 
-	function handleChangeService(value: string) {
+	function populateData(value: string) {
 		let service_request = "/service/" + value + "/operations";
 		api.get<string[]>(apiV1 + service_request).then((response) => {
 			// form_basefilter.resetFields(['operation',])
@@ -165,7 +174,9 @@ const _TraceFilter = (props: TraceFilterProps) => {
 			.then((response) => {
 				setTagKeyOptions(response.data);
 			});
-
+	}
+	function handleChangeService(value: string) {
+		populateData(value);
 		props.updateTraceFilters({ ...props.traceFilters, service: value });
 	}