pull-65

frontend/src/constants/query.ts

@@ -4,4 +4,5 @@ export enum METRICS_PAGE_QUERY_PARAM {
 	endTime = "endTime",
 	service = "service",
 	error = "error",
+	operation = "operation",
 }

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;

frontend/src/modules/Traces/TraceFilter.tsx

@@ -62,11 +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);
-				const errorTag = urlParams.get(METRICS_PAGE_QUERY_PARAM.error);
-
-				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);
+					}
 				}
 				if (errorTag) {
 					onTagFormSubmit({
@@ -153,15 +164,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',])
@@ -174,7 +181,9 @@ const _TraceFilter = (props: TraceFilterProps) => {
 			.then((response) => {
 				setTagKeyOptions(response.data);
 			});
-
+	}
+	function handleChangeService(value: string) {
+		populateData(value);
 		props.updateTraceFilters({ ...props.traceFilters, service: value });
 	}