From ed8ca02e0f4af221ba0848da14dc04ea9724bafd Mon Sep 17 00:00:00 2001
From: Fabrizio <135109076+fabrizio-grafana@users.noreply.github.com>
Date: Thu, 24 Aug 2023 13:06:46 +0200
Subject: [PATCH] Dashboard: Support template variables in Search tab for Tempo
 (#72867)

---
 .../datasource/tempo/SearchTraceQLEditor/DurationInput.tsx  | 3 ++-
 .../tempo/SearchTraceQLEditor/TraceQLSearch.test.tsx        | 3 +++
 .../datasource/tempo/SearchTraceQLEditor/TraceQLSearch.tsx  | 6 ++++--
 public/app/plugins/datasource/tempo/datasource.ts           | 6 +++++-
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/DurationInput.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/DurationInput.tsx
index f636af6dca2..528099ca86c 100644
--- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/DurationInput.tsx
+++ b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/DurationInput.tsx
@@ -14,7 +14,8 @@ interface Props {
   operators: string[];
 }
 
-const validationRegex = /^\d+(?:\.\d)?\d*(?:us|µs|ns|ms|s|m|h)$/;
+// Support template variables (e.g., `$dur`, `$v_1`) and durations (e.g., `300µs`, `1.2ms`)
+const validationRegex = /^(\$\w+)|(\d+(?:\.\d)?\d*(?:us|µs|ns|ms|s|m|h))$/;
 
 const getStyles = () => ({
   noBoxShadow: css`
diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.test.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.test.tsx
index 5803cf472e8..07a11aa88cb 100644
--- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.test.tsx
+++ b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.test.tsx
@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
+import { initTemplateSrv } from 'test/helpers/initTemplateSrv';
 
 import { TraceqlSearchScope } from '../dataquery.gen';
 import { TempoDatasource } from '../datasource';
@@ -39,6 +40,8 @@ jest.mock('../language_provider', () => {
 });
 
 describe('TraceQLSearch', () => {
+  initTemplateSrv('key', []);
+
   let user: ReturnType<typeof userEvent.setup>;
 
   const datasource: TempoDatasource = {
diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.tsx
index b84468cf7a0..0e5e993ffc4 100644
--- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.tsx
+++ b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.tsx
@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { EditorRow } from '@grafana/experimental';
-import { FetchError } from '@grafana/runtime';
+import { FetchError, getTemplateSrv } from '@grafana/runtime';
 import { Alert, HorizontalGroup, useStyles2 } from '@grafana/ui';
 
 import { createErrorNotification } from '../../../../core/copy/appNotification';
@@ -36,6 +36,8 @@ const TraceQLSearch = ({ datasource, query, onChange }: Props) => {
   const [isTagsLoading, setIsTagsLoading] = useState(true);
   const [traceQlQuery, setTraceQlQuery] = useState<string>('');
 
+  const templateSrv = getTemplateSrv();
+
   const updateFilter = useCallback(
     (s: TraceqlFilter) => {
       const copy = { ...query };
@@ -166,7 +168,7 @@ const TraceQLSearch = ({ datasource, query, onChange }: Props) => {
           </InlineSearchField>
         </div>
         <EditorRow>
-          <RawQuery query={traceQlQuery} lang={{ grammar: traceqlGrammar, name: 'traceql' }} />
+          <RawQuery query={templateSrv.replace(traceQlQuery)} lang={{ grammar: traceqlGrammar, name: 'traceql' }} />
         </EditorRow>
         <TempoQueryBuilderOptions onChange={onChange} query={query} />
       </div>
diff --git a/public/app/plugins/datasource/tempo/datasource.ts b/public/app/plugins/datasource/tempo/datasource.ts
index 27e906e0609..961d31327fc 100644
--- a/public/app/plugins/datasource/tempo/datasource.ts
+++ b/public/app/plugins/datasource/tempo/datasource.ts
@@ -255,7 +255,11 @@ export class TempoDatasource extends DataSourceWithBackend<TempoQuery, TempoJson
     }
     if (targets.traceqlSearch?.length) {
       try {
-        const queryValue = generateQueryFromFilters(targets.traceqlSearch[0].filters);
+        const queryValueFromFilters = generateQueryFromFilters(targets.traceqlSearch[0].filters);
+
+        // We want to support template variables also in Search for consistency with other data sources
+        const queryValue = this.templateSrv.replace(queryValueFromFilters, options.scopedVars);
+
         reportInteraction('grafana_traces_traceql_search_queried', {
           datasourceType: 'tempo',
           app: options.app ?? '',