Tempo: Update tempo search to use tags query param (#42849)

* Update tempo search to use tags query param

* Remove unnecessary test

public/app/plugins/datasource/tempo/QueryEditor/QueryField.tsx

@@ -132,15 +132,14 @@ class TempoQueryFieldComponent extends React.PureComponent<Props, State> {
               size="md"
             />
           </InlineField>
-
-          {query.queryType === 'nativeSearch' && (
-            <p>
-              <Badge icon="rocket" text="Beta" color="blue" />
-              &nbsp;Tempo search is currently in beta and is designed to return recent traces only. It ignores the time
-              range picker. We are actively working on full backend search. Look for improvements in the near future!
-            </p>
-          )}
         </InlineFieldRow>
+        {query.queryType === 'nativeSearch' && (
+          <p style={{ maxWidth: '65ch' }}>
+            <Badge icon="rocket" text="Beta" color="blue" />
+            &nbsp;Tempo search is currently in beta and is designed to return recent traces only. It ignores the time
+            range picker. We are actively working on full backend search. Look for improvements in the near future!
+          </p>
+        )}
         {query.queryType === 'search' && (
           <SearchSection
             linkedDatasourceUid={logsDatasourceUid}

public/app/plugins/datasource/tempo/datasource.test.ts

@@ -147,9 +147,7 @@ describe('Tempo data source', () => {
     };
     const builtQuery = ds.buildSearchQuery(tempoQuery);
     expect(builtQuery).toStrictEqual({
-      'service.name': 'frontend',
-      name: '/config',
-      'root.http.status_code': '500',
+      tags: 'root.http.status_code=500 service.name="frontend" name="/config"',
       minDuration: '1ms',
       maxDuration: '100s',
       limit: 10,
@@ -166,25 +164,11 @@ describe('Tempo data source', () => {
     };
     const builtQuery = ds.buildSearchQuery(tempoQuery);
     expect(builtQuery).toStrictEqual({
+      tags: '',
       limit: DEFAULT_LIMIT,
     });
   });
 
-  it('should ignore incomplete tag queries', () => {
-    const ds = new TempoDatasource(defaultSettings);
-    const tempoQuery: TempoQuery = {
-      queryType: 'search',
-      refId: 'A',
-      query: '',
-      search: 'root.ip root.http.status_code=500',
-    };
-    const builtQuery = ds.buildSearchQuery(tempoQuery);
-    expect(builtQuery).toStrictEqual({
-      limit: DEFAULT_LIMIT,
-      'root.http.status_code': '500',
-    });
-  });
-
   it('formats native search query history correctly', () => {
     const ds = new TempoDatasource(defaultSettings);
     const tempoQuery: TempoQuery = {

public/app/plugins/datasource/tempo/datasource.ts

@@ -15,7 +15,6 @@ import { BackendSrvRequest, DataSourceWithBackend, getBackendSrv } from '@grafan
 import { serializeParams } from 'app/core/utils/fetch';
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 import { identity, pick, pickBy, groupBy, startCase } from 'lodash';
-import Prism from 'prismjs';
 import { LokiOptions, LokiQuery } from '../loki/types';
 import { PrometheusDatasource } from '../prometheus/datasource';
 import { PromQuery } from '../prometheus/types';
@@ -26,7 +25,6 @@ import {
   transformFromOTLP as transformFromOTEL,
   createTableFrameFromSearch,
 } from './resultTransformer';
-import { tokenizer } from './syntax';
 import { NodeGraphOptions } from 'app/core/components/NodeGraphSettings';
 
 // search = Loki search, nativeSearch = Tempo search for backwards compatibility
@@ -209,38 +207,17 @@ export class TempoDatasource extends DataSourceWithBackend<TempoQuery, TempoJson
   }
 
   buildSearchQuery(query: TempoQuery) {
-    const tokens = query.search ? Prism.tokenize(query.search, tokenizer) : [];
-
-    // Build key value pairs
-    let tagsQuery: Array<{ [key: string]: string }> = [];
-    for (let i = 0; i < tokens.length - 1; i++) {
-      const token = tokens[i];
-      const lookupToken = tokens[i + 2];
-
-      // Ensure there is a valid key value pair with accurate types
-      if (
-        token &&
-        lookupToken &&
-        typeof token !== 'string' &&
-        token.type === 'key' &&
-        typeof token.content === 'string' &&
-        typeof lookupToken !== 'string' &&
-        lookupToken.type === 'value' &&
-        typeof lookupToken.content === 'string'
-      ) {
-        tagsQuery.push({ [token.content]: lookupToken.content });
-      }
-    }
+    let tags = query.search ?? '';
 
     let tempoQuery = pick(query, ['minDuration', 'maxDuration', 'limit']);
     // Remove empty properties
     tempoQuery = pickBy(tempoQuery, identity);
 
     if (query.serviceName) {
-      tagsQuery.push({ ['service.name']: query.serviceName });
+      tags += ` service.name="${query.serviceName}"`;
     }
     if (query.spanName) {
-      tagsQuery.push({ ['name']: query.spanName });
+      tags += ` name="${query.spanName}"`;
     }
 
     // Set default limit
@@ -266,8 +243,7 @@ export class TempoDatasource extends DataSourceWithBackend<TempoQuery, TempoJson
       throw new Error('Please enter a valid limit.');
     }
 
-    const tagsQueryObject = tagsQuery.reduce((tagQuery, item) => ({ ...tagQuery, ...item }), {});
-    return { ...tagsQueryObject, ...tempoQuery };
+    return { tags, ...tempoQuery };
   }
 
   async getServiceGraphLabels() {