From 07b98a7a86a78b9e1f284b49b45c5965b9239b3d Mon Sep 17 00:00:00 2001
From: Vanshika <102902652+Vanshikav123@users.noreply.github.com>
Date: Wed, 4 Oct 2023 12:34:25 +0530
Subject: [PATCH] Force Tracing : checkbox in query frontend to force a trace
 to be collected (#6770)

* force tracing

Signed-off-by: Vanshika <vanshikav928@gmail.com>

* force tracing

Signed-off-by: Vanshika <vanshikav928@gmail.com>

* Rebuild

Signed-off-by: Vanshika <vanshikav928@gmail.com>

* changes force Tracing

Signed-off-by: Vanshika <vanshikav928@gmail.com>

---------

Signed-off-by: Vanshika <vanshikav928@gmail.com>
---
 .../react-app/src/pages/graph/Panel.test.tsx  |  2 ++
 pkg/ui/react-app/src/pages/graph/Panel.tsx    | 22 +++++++++++++++++++
 pkg/ui/react-app/src/utils/utils.test.ts      |  1 +
 3 files changed, 25 insertions(+)

diff --git a/pkg/ui/react-app/src/pages/graph/Panel.test.tsx b/pkg/ui/react-app/src/pages/graph/Panel.test.tsx
index d723ed974c4..2447b671071 100644
--- a/pkg/ui/react-app/src/pages/graph/Panel.test.tsx
+++ b/pkg/ui/react-app/src/pages/graph/Panel.test.tsx
@@ -19,6 +19,7 @@ const defaultProps: PanelProps = {
     stacked: false,
     maxSourceResolution: 'auto',
     useDeduplication: true,
+    forceTracing: false,
     usePartialResponse: false,
     storeMatches: [],
     engine: 'prometheus',
@@ -94,6 +95,7 @@ describe('Panel', () => {
       stacked: false,
       maxSourceResolution: 'auto',
       useDeduplication: true,
+      forceTracing: false,
       usePartialResponse: false,
       storeMatches: [],
       engine: 'prometheus',
diff --git a/pkg/ui/react-app/src/pages/graph/Panel.tsx b/pkg/ui/react-app/src/pages/graph/Panel.tsx
index d5bbb546339..d63315db479 100644
--- a/pkg/ui/react-app/src/pages/graph/Panel.tsx
+++ b/pkg/ui/react-app/src/pages/graph/Panel.tsx
@@ -68,6 +68,7 @@ export interface PanelOptions {
   stacked: boolean;
   maxSourceResolution: string;
   useDeduplication: boolean;
+  forceTracing: boolean;
   usePartialResponse: boolean;
   storeMatches: Store[];
   engine: string;
@@ -89,6 +90,7 @@ export const PanelDefaultOptions: PanelOptions = {
   stacked: false,
   maxSourceResolution: '0s',
   useDeduplication: true,
+  forceTracing: false,
   usePartialResponse: false,
   storeMatches: [],
   engine: '',
@@ -119,6 +121,7 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
     this.handleEngine(this.props.options.engine);
 
     this.handleChangeDeduplication = this.handleChangeDeduplication.bind(this);
+    this.handleChangeForceTracing = this.handleChangeForceTracing.bind(this); //forceTracing
     this.handleChangePartialResponse = this.handleChangePartialResponse.bind(this);
     this.handleStoreMatchChange = this.handleStoreMatchChange.bind(this);
     this.handleChangeEngine = this.handleChangeEngine.bind(this);
@@ -133,6 +136,7 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
       type,
       maxSourceResolution,
       useDeduplication,
+      forceTracing,
       usePartialResponse,
       engine,
       explain,
@@ -146,6 +150,7 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
       prevOpts.maxSourceResolution !== maxSourceResolution ||
       prevOpts.useDeduplication !== useDeduplication ||
       prevOpts.usePartialResponse !== usePartialResponse ||
+      prevOpts.forceTracing !== forceTracing ||
       prevOpts.engine !== engine ||
       prevOpts.explain !== explain
       // Check store matches
@@ -218,6 +223,12 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
     }
 
     fetch(`${this.props.pathPrefix}${path}?${params}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        // 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,
@@ -315,6 +326,9 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
   handleChangeDeduplication = (event: React.ChangeEvent<HTMLInputElement>): void => {
     this.setOptions({ useDeduplication: event.target.checked });
   };
+  handleChangeForceTracing = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    this.setOptions({ forceTracing: event.target.checked });
+  };
 
   handleChangePartialResponse = (event: React.ChangeEvent<HTMLInputElement>): void => {
     this.setOptions({ usePartialResponse: event.target.checked });
@@ -406,6 +420,14 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
               >
                 Use Partial Response
               </Checkbox>
+              <Checkbox
+                wrapperStyles={{ marginLeft: 20, display: 'inline-block' }}
+                id={`force-tracing-checkbox-${id}`}
+                onChange={this.handleChangeForceTracing}
+                defaultchecked={options.forceTracing}
+              >
+                Force Tracing
+              </Checkbox>
               <Label
                 style={{ marginLeft: '10px', display: 'inline-block' }}
                 for={`select-engine=${id}`}
diff --git a/pkg/ui/react-app/src/utils/utils.test.ts b/pkg/ui/react-app/src/utils/utils.test.ts
index 125bf7a4bfa..646e149a537 100644
--- a/pkg/ui/react-app/src/utils/utils.test.ts
+++ b/pkg/ui/react-app/src/utils/utils.test.ts
@@ -332,6 +332,7 @@ describe('Utils', () => {
               resolution: 1,
               maxSourceResolution: 'raw',
               useDeduplication: true,
+              forceTracing: false,
               usePartialResponse: false,
               storeMatches: [],
               engine: 'prometheus',