Thanos-Query UI: Use Partial Response enabled by default

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

@@ -20,7 +20,7 @@ const defaultProps: PanelProps = {
     maxSourceResolution: 'auto',
     useDeduplication: true,
     forceTracing: false,
-    usePartialResponse: false,
+    usePartialResponse: true,
     storeMatches: [],
     engine: 'prometheus',
     analyze: false,
@@ -96,7 +96,7 @@ describe('Panel', () => {
       maxSourceResolution: 'auto',
       useDeduplication: true,
       forceTracing: false,
-      usePartialResponse: false,
+      usePartialResponse: true,
       storeMatches: [],
       engine: 'prometheus',
       analyze: false,

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

@@ -58,6 +58,9 @@ interface PanelState {
   exprInputValue: string;
   analysis: QueryTree | null;
   explainOutput: ExplainTree | null;
+  traceId: string | null; //Include traceId in the state.
+  queryStatus: boolean;
+  hoverMessage: string | null;
   isHovered: boolean;
 }
 
@@ -93,7 +96,7 @@ export const PanelDefaultOptions: PanelOptions = {
   maxSourceResolution: '0s',
   useDeduplication: true,
   forceTracing: false,
-  usePartialResponse: false,
+  usePartialResponse: true,
   storeMatches: [],
   engine: '',
   analyze: false,
@@ -116,6 +119,9 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
       exprInputValue: props.options.expr,
       explainOutput: null,
       analysis: null,
+      traceId: null, // Initialize traceId to null.
+      queryStatus: false,
+      hoverMessage: null,
       isHovered: false,
     };
 
@@ -238,7 +244,12 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
       credentials: 'same-origin',
       signal: abortController.signal,
     })
-      .then((resp) => resp.json())
+      .then((resp) => {
+        const traceIdHeader = resp.headers.get('X-Thanos-Trace-Id');
+        this.setState({ traceId: traceIdHeader });
+        return resp.json();
+      })
+
       .then((json) => {
         if (json.status !== 'success') {
           throw new Error(json.error || 'invalid response JSON');
@@ -333,6 +344,14 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
   };
   handleChangeForceTracing = (event: React.ChangeEvent<HTMLInputElement>): void => {
     this.setOptions({ forceTracing: event.target.checked });
+
+    if (this.state.queryStatus && this.state.traceId) {
+      this.setState({ hoverMessage: `TraceID: ${this.state.traceId}` });
+    } else if (this.state.queryStatus) {
+      this.setState({ hoverMessage: 'TraceID is not available' });
+    } else {
+      this.setState({ hoverMessage: '' });
+    }
   };
 
   handleChangePartialResponse = (event: React.ChangeEvent<HTMLInputElement>): void => {
@@ -430,6 +449,7 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
         let result = null;
         if (json.data) {
           result = json.data;
+          this.setState({ queryStatus: true });
         }
         this.setState({ explainOutput: result });
       })
@@ -511,9 +531,20 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
                 id={`force-tracing-checkbox-${id}`}
                 onChange={this.handleChangeForceTracing}
                 defaultchecked={options.forceTracing}
+                onMouseEnter={this.handleMouseEnter}
+                onMouseLeave={this.handleMouseLeave}
               >
                 Force Tracing
               </Checkbox>
+              <div style={{ display: 'inline-block', marginLeft: 10 }}>
+                <span
+                  className="trace-id-tooltip"
+                  onMouseEnter={() => this.state.isHovered && this.setState({ hoverMessage: this.state.hoverMessage })}
+                  onMouseLeave={() => this.setState({ hoverMessage: '' })}
+                >
+                  {this.state.hoverMessage}
+                </span>
+              </div>
               <Label
                 style={{ marginLeft: '10px', display: 'inline-block' }}
                 for={`select-engine=${id}`}