Force Tracing : checkbox in query frontend to force a trace to be col…

…lected (thanos-io#6770) * force tracing Signed-off-by: Vanshika <[email protected]> * force tracing Signed-off-by: Vanshika <[email protected]> * Rebuild Signed-off-by: Vanshika <[email protected]> * changes force Tracing Signed-off-by: Vanshika <[email protected]> --------- Signed-off-by: Vanshika <[email protected]>
coleenquadros · Oct 6, 2023 · 07b98a7 · 07b98a7
1 parent 9e08c28
commit 07b98a7
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 0 deletions.
diff --git 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
@@ -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
@@ -332,6 +332,7 @@ describe('Utils', () => {
               resolution: 1,
               maxSourceResolution: 'raw',
               useDeduplication: true,
+              forceTracing: false,
               usePartialResponse: false,
               storeMatches: [],
               engine: 'prometheus',