From bb0432b968521f93b379c3cb4fd73790fc4e2ef7 Mon Sep 17 00:00:00 2001 From: Vanshika Date: Mon, 11 Dec 2023 16:14:27 +0530 Subject: [PATCH 1/3] panel element Signed-off-by: Vanshika --- pkg/ui/react-app/src/pages/graph/Panel.tsx | 16 +++++++++++++--- .../src/pages/graph/QueryStatsView.test.tsx | 5 ++++- .../react-app/src/pages/graph/QueryStatsView.tsx | 10 +++++----- pkg/ui/react-app/src/types/types.ts | 1 + 4 files changed, 23 insertions(+), 9 deletions(-) diff --git a/pkg/ui/react-app/src/pages/graph/Panel.tsx b/pkg/ui/react-app/src/pages/graph/Panel.tsx index fb2bd59b75..2ea4d1051f 100644 --- a/pkg/ui/react-app/src/pages/graph/Panel.tsx +++ b/pkg/ui/react-app/src/pages/graph/Panel.tsx @@ -231,6 +231,7 @@ class Panel extends Component { method: 'GET', headers: { 'Content-Type': 'application/json', + 'X-Thanos-Force-Tracing': 'true', // Conditionally add the header if the checkbox is enabled ...(this.props.options.forceTracing ? { 'X-Thanos-Force-Tracing': 'true' } : {}), }, @@ -238,8 +239,15 @@ class Panel extends Component { credentials: 'same-origin', signal: abortController.signal, }) - .then((resp) => resp.json()) - .then((json) => { + .then((resp) => { + return resp.json().then((json) => { + return { + json, + headers: resp.headers, + }; + }); + }) + .then(({ json, headers }) => { if (json.status !== 'success') { throw new Error(json.error || 'invalid response JSON'); } @@ -254,7 +262,7 @@ class Panel extends Component { } analysis = json.data.analysis; } - + const traceID = headers.get('X-Thanos-Trace-ID'); this.setState({ error: null, data: json.data, @@ -262,12 +270,14 @@ class Panel extends Component { startTime, endTime, resolution, + traceID: traceID ? traceID : '', }, warnings: json.warnings, stats: { loadTime: Date.now() - queryStart, resolution, resultSeries, + traceID, }, loading: false, analysis: analysis, diff --git a/pkg/ui/react-app/src/pages/graph/QueryStatsView.test.tsx b/pkg/ui/react-app/src/pages/graph/QueryStatsView.test.tsx index e04c914e1a..63297dd509 100755 --- a/pkg/ui/react-app/src/pages/graph/QueryStatsView.test.tsx +++ b/pkg/ui/react-app/src/pages/graph/QueryStatsView.test.tsx @@ -8,10 +8,13 @@ describe('QueryStatsView', () => { loadTime: 100, resolution: 5, resultSeries: 10000, + traceID: 'e575f9d4eab63a90cdc3dc4ef1b8dda0', }; const queryStatsView = shallow(); expect(queryStatsView.prop('className')).toEqual('query-stats'); expect(queryStatsView.children().prop('className')).toEqual('float-right'); - expect(queryStatsView.children().text()).toEqual('Load time: 100ms   Resolution: 5s   Result series: 10000'); + expect(queryStatsView.children().text()).toEqual( + 'Load time: 100ms   Resolution: 5s   Result series: 10000   Trace ID: e575f9d4eab63a90cdc3dc4ef1b8dda0' + ); }); }); diff --git a/pkg/ui/react-app/src/pages/graph/QueryStatsView.tsx b/pkg/ui/react-app/src/pages/graph/QueryStatsView.tsx index 8bfd91c74b..b64cf2f330 100644 --- a/pkg/ui/react-app/src/pages/graph/QueryStatsView.tsx +++ b/pkg/ui/react-app/src/pages/graph/QueryStatsView.tsx @@ -4,16 +4,16 @@ export interface QueryStats { loadTime: number; resolution: number; resultSeries: number; + traceID: string | null; } const QueryStatsView: FC = (props) => { - const { loadTime, resolution, resultSeries } = props; - + const { loadTime, resolution, resultSeries, traceID } = props; + const prev = `Load time: ${loadTime}ms   Resolution: ${resolution}s   Result series: ${resultSeries}`; + const str = traceID ? prev + `   TraceID: ${traceID}` : prev; return (
- - Load time: {loadTime}ms   Resolution: {resolution}s   Result series: {resultSeries} - +
); }; diff --git a/pkg/ui/react-app/src/types/types.ts b/pkg/ui/react-app/src/types/types.ts index ca31bc6cc4..08054fa1ac 100644 --- a/pkg/ui/react-app/src/types/types.ts +++ b/pkg/ui/react-app/src/types/types.ts @@ -17,6 +17,7 @@ export interface QueryParams { startTime: number; endTime: number; resolution: number; + traceID: string; } export type Rule = { From cc17c8f5cc41b2c676763cf8e5905464dde02f34 Mon Sep 17 00:00:00 2001 From: Vanshika Date: Fri, 22 Dec 2023 16:32:22 +0530 Subject: [PATCH 2/3] QueryStatsView.test.tsx Signed-off-by: Vanshika --- pkg/ui/react-app/src/pages/graph/QueryStatsView.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pkg/ui/react-app/src/pages/graph/QueryStatsView.test.tsx b/pkg/ui/react-app/src/pages/graph/QueryStatsView.test.tsx index 63297dd509..3077687ecc 100755 --- a/pkg/ui/react-app/src/pages/graph/QueryStatsView.test.tsx +++ b/pkg/ui/react-app/src/pages/graph/QueryStatsView.test.tsx @@ -14,7 +14,7 @@ describe('QueryStatsView', () => { expect(queryStatsView.prop('className')).toEqual('query-stats'); expect(queryStatsView.children().prop('className')).toEqual('float-right'); expect(queryStatsView.children().text()).toEqual( - 'Load time: 100ms   Resolution: 5s   Result series: 10000   Trace ID: e575f9d4eab63a90cdc3dc4ef1b8dda0' + `Load time: ${queryStatsProps.loadTime}ms   Resolution: ${queryStatsProps.resolution}s   Result series: ${queryStatsProps.resultSeries}   Trace ID: ${queryStatsProps.traceID}` ); }); }); From 5c1b280b27e085c0e285e24b8c42f112814993f1 Mon Sep 17 00:00:00 2001 From: Vanshika Date: Fri, 22 Dec 2023 17:46:10 +0530 Subject: [PATCH 3/3] test Signed-off-by: Vanshika --- .../src/pages/graph/QueryStatsView.test.tsx | 12 ++++++------ pkg/ui/react-app/src/pages/graph/QueryStatsView.tsx | 3 ++- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/pkg/ui/react-app/src/pages/graph/QueryStatsView.test.tsx b/pkg/ui/react-app/src/pages/graph/QueryStatsView.test.tsx index 3077687ecc..4df5fc37c3 100755 --- a/pkg/ui/react-app/src/pages/graph/QueryStatsView.test.tsx +++ b/pkg/ui/react-app/src/pages/graph/QueryStatsView.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { shallow } from 'enzyme'; +import { mount } from 'enzyme'; import QueryStatsView from './QueryStatsView'; describe('QueryStatsView', () => { @@ -10,11 +10,11 @@ describe('QueryStatsView', () => { resultSeries: 10000, traceID: 'e575f9d4eab63a90cdc3dc4ef1b8dda0', }; - const queryStatsView = shallow(); - expect(queryStatsView.prop('className')).toEqual('query-stats'); - expect(queryStatsView.children().prop('className')).toEqual('float-right'); - expect(queryStatsView.children().text()).toEqual( - `Load time: ${queryStatsProps.loadTime}ms   Resolution: ${queryStatsProps.resolution}s   Result series: ${queryStatsProps.resultSeries}   Trace ID: ${queryStatsProps.traceID}` + const queryStatsView = mount(); + expect(queryStatsView.find('.query-stats').prop('className')).toEqual('query-stats'); + expect(queryStatsView.find('.float-right').prop('className')).toEqual('float-right'); + expect(queryStatsView.find('.float-right').html()).toEqual( + `Load time: ${queryStatsProps.loadTime}ms   Resolution: ${queryStatsProps.resolution}s   Result series: ${queryStatsProps.resultSeries}   Trace ID: ${queryStatsProps.traceID}` ); }); }); diff --git a/pkg/ui/react-app/src/pages/graph/QueryStatsView.tsx b/pkg/ui/react-app/src/pages/graph/QueryStatsView.tsx index b64cf2f330..d3e9a7a5c4 100644 --- a/pkg/ui/react-app/src/pages/graph/QueryStatsView.tsx +++ b/pkg/ui/react-app/src/pages/graph/QueryStatsView.tsx @@ -10,7 +10,8 @@ export interface QueryStats { const QueryStatsView: FC = (props) => { const { loadTime, resolution, resultSeries, traceID } = props; const prev = `Load time: ${loadTime}ms   Resolution: ${resolution}s   Result series: ${resultSeries}`; - const str = traceID ? prev + `   TraceID: ${traceID}` : prev; + const str = traceID ? prev + `   Trace ID: ${traceID}` : prev; + return (