links error to traces

frontend/src/constants/query.ts

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

frontend/src/modules/Metrics/ErrorRateChart.tsx

@@ -37,6 +37,7 @@ const theme = "dark";
 
 interface ErrorRateChartProps extends RouteComponentProps<any> {
 	data: metricItem[];
+	onTracePopupClick: Function;
 }
 
 interface ErrorRateChart {
@@ -54,6 +55,7 @@ class ErrorRateChart extends React.Component<ErrorRateChartProps> {
 		xcoordinate: 0,
 		ycoordinate: 0,
 		showpopUp: false,
+		firstpoint_ts: 0
 		// graphInfo:{}
 	};
 
@@ -65,17 +67,18 @@ class ErrorRateChart extends React.Component<ErrorRateChartProps> {
 
 		if (firstPoint) {
 			// PNOTE - TODO - Is await needed in this expression?
-			await this.setState({
+			this.setState({
 				xcoordinate: e.offsetX + 20,
 				ycoordinate: e.offsetY,
 				showpopUp: true,
+				firstpoint_ts: this.props.data[firstPoint._index].timestamp,
 				// graphInfo:{...event}
 			});
 		}
 	};
 
 	gotoTracesHandler = () => {
-		this.props.history.push(ROUTES.TRACES);
+		this.props.onTracePopupClick(this.state.firstpoint_ts);
 	};
 
 	gotoAlertsHandler = () => {
@@ -216,7 +219,7 @@ class ErrorRateChart extends React.Component<ErrorRateChartProps> {
 		return (
 			<div>
 				{this.GraphTracePopUp()}
-				<div style={{textAlign: "center"}}>Errors per sec</div>
+				<div style={{ textAlign: "center" }}>Errors per sec</div>
 				<ChartJSLine
 					ref={this.chartRef}
 					data={data_chartJS}

frontend/src/modules/Metrics/ServiceMetrics.tsx

@@ -54,6 +54,23 @@ const _ServiceMetrics = (props: ServicesMetricsProps) => {
 		props.history.push(`${ROUTES.TRACES}?${urlParams.toString()}`);
 	};
 
+	const onErrTracePopupClick = (timestamp: number) => {
+		const currentTime = timestamp / 1000000;
+		const tPlusOne = timestamp / 1000000 + 1 * 60 * 1000;
+
+		props.updateTimeInterval("custom", [currentTime, tPlusOne]); // updateTimeInterval takes second range in ms -- give -5 min to selected time,
+
+		const urlParams = new URLSearchParams();
+		urlParams.set(METRICS_PAGE_QUERY_PARAM.startTime, currentTime.toString());
+		urlParams.set(METRICS_PAGE_QUERY_PARAM.endTime, tPlusOne.toString());
+		if (servicename) {
+			urlParams.set(METRICS_PAGE_QUERY_PARAM.service, servicename);
+		}
+		urlParams.set(METRICS_PAGE_QUERY_PARAM.error, "true");
+
+		props.history.push(`${ROUTES.TRACES}?${urlParams.toString()}`);
+	};
+
 	return (
 		<Tabs defaultActiveKey="1">
 			<TabPane tab="Application Metrics" key="1">
@@ -77,7 +94,10 @@ const _ServiceMetrics = (props: ServicesMetricsProps) => {
 				<Row gutter={32} style={{ margin: 20 }}>
 					<Col span={12}>
 						<Card bodyStyle={{ padding: 10 }}>
-							<ErrorRateChart data={props.serviceMetrics} />
+							<ErrorRateChart
+								onTracePopupClick={onErrTracePopupClick}
+								data={props.serviceMetrics}
+							/>
 						</Card>
 					</Col>
 

frontend/src/modules/Traces/TraceFilter.tsx

@@ -63,9 +63,18 @@ const _TraceFilter = (props: TraceFilterProps) => {
 			})
 			.then(() => {
 				const serviceName = urlParams.get(METRICS_PAGE_QUERY_PARAM.service);
+				const errorTag = urlParams.get(METRICS_PAGE_QUERY_PARAM.error);
+
 				if (serviceName) {
 					handleChangeService(serviceName);
 				}
+				if (errorTag) {
+					onTagFormSubmit({
+						tag_key: METRICS_PAGE_QUERY_PARAM.error,
+						tag_value: errorTag,
+						operator: "EQUAL",
+					});
+				}
 			});
 	}, []);