diff --git a/frontend/src/constants/query.ts b/frontend/src/constants/query.ts index 1f9e72626d..745877ff1d 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", + error = "error", } diff --git a/frontend/src/modules/Metrics/ErrorRateChart.tsx b/frontend/src/modules/Metrics/ErrorRateChart.tsx index 12d381b8a5..c91c21b4a4 100644 --- a/frontend/src/modules/Metrics/ErrorRateChart.tsx +++ b/frontend/src/modules/Metrics/ErrorRateChart.tsx @@ -37,6 +37,7 @@ const theme = "dark"; interface ErrorRateChartProps extends RouteComponentProps { data: metricItem[]; + onTracePopupClick: Function; } interface ErrorRateChart { @@ -54,6 +55,7 @@ class ErrorRateChart extends React.Component { xcoordinate: 0, ycoordinate: 0, showpopUp: false, + firstpoint_ts: 0 // graphInfo:{} }; @@ -65,17 +67,18 @@ class ErrorRateChart extends React.Component { 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 { return (
{this.GraphTracePopUp()} -
Errors per sec
+
Errors per sec
{ 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 ( @@ -92,7 +109,10 @@ const _ServiceMetrics = (props: ServicesMetricsProps) => { - + diff --git a/frontend/src/modules/Traces/TraceFilter.tsx b/frontend/src/modules/Traces/TraceFilter.tsx index a1c40fdbb8..ed1086d36f 100644 --- a/frontend/src/modules/Traces/TraceFilter.tsx +++ b/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", + }); + } }); }, []);