Dashboard: Support template variables in Search tab for Tempo (#72867)

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`

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

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>

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 ?? '',