TraceID : Fetching TraceID

pkg/ui/react-app/src/pages/graph/Panel.tsx

@@ -231,15 +231,23 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
       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' } : {}),
       },
       cache: 'no-store',
       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,20 +262,22 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
           }
           analysis = json.data.analysis;
         }
-
+        const traceID = headers.get('X-Thanos-Trace-ID');
         this.setState({
           error: null,
           data: json.data,
           lastQueryParams: {
             startTime,
             endTime,
             resolution,
+            traceID: traceID ? traceID : '',
           },
           warnings: json.warnings,
           stats: {
             loadTime: Date.now() - queryStart,
             resolution,
             resultSeries,
+            traceID,
           },
           loading: false,
           analysis: analysis,

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', () => {
@@ -8,10 +8,13 @@ describe('QueryStatsView', () => {
       loadTime: 100,
       resolution: 5,
       resultSeries: 10000,
+      traceID: 'e575f9d4eab63a90cdc3dc4ef1b8dda0',
     };
-    const queryStatsView = shallow(<QueryStatsView {...queryStatsProps} />);
-    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');
+    const queryStatsView = mount(<QueryStatsView {...queryStatsProps} />);
+    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(
+      `<span class="float-right">Load time: ${queryStatsProps.loadTime}ms   Resolution: ${queryStatsProps.resolution}s   Result series: ${queryStatsProps.resultSeries}   Trace ID: ${queryStatsProps.traceID}</span>`
+    );
   });
 });

pkg/ui/react-app/src/pages/graph/QueryStatsView.tsx

@@ -4,16 +4,17 @@ export interface QueryStats {
   loadTime: number;
   resolution: number;
   resultSeries: number;
+  traceID: string | null;
 }
 
 const QueryStatsView: FC<QueryStats> = (props) => {
-  const { loadTime, resolution, resultSeries } = props;
+  const { loadTime, resolution, resultSeries, traceID } = props;
+  const prev = `Load time: ${loadTime}ms &ensp; Resolution: ${resolution}s &ensp; Result series: ${resultSeries}`;
+  const str = traceID ? prev + ` &ensp; Trace ID: ${traceID}` : prev;
 
   return (
     <div className="query-stats">
-      <span className="float-right">
-        Load time: {loadTime}ms &ensp; Resolution: {resolution}s &ensp; Result series: {resultSeries}
-      </span>
+      <span className="float-right" dangerouslySetInnerHTML={{ __html: str }}></span>
     </div>
   );
 };

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 = {