Tempo: Format tempo search query history text (#39250) (#39743)

* Format tempo search query history text

(cherry picked from commit c57ff8beed)

Co-authored-by: Connor Lindsey <cblindsey3@gmail.com>

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

@@ -168,6 +168,25 @@ describe('Tempo data source', () => {
       'root.http.status_code': '500',
     });
   });
+
+  it('formats native search query history correctly', () => {
+    const ds = new TempoDatasource(defaultSettings);
+    const tempoQuery: TempoQuery = {
+      queryType: 'nativeSearch',
+      refId: 'A',
+      query: '',
+      serviceName: 'frontend',
+      spanName: '/config',
+      search: 'root.http.status_code=500',
+      minDuration: '1ms',
+      maxDuration: '100s',
+      limit: 10,
+    };
+    const result = ds.getQueryDisplayText(tempoQuery);
+    expect(result).toBe(
+      'Service Name: frontend, Span Name: /config, Search: root.http.status_code=500, Min Duration: 1ms, Max Duration: 100s, Limit: 10'
+    );
+  });
 });
 
 const backendSrvWithPrometheus = {

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

@@ -13,7 +13,7 @@ import { TraceToLogsOptions } from 'app/core/components/TraceToLogsSettings';
 import { BackendSrvRequest, DataSourceWithBackend, getBackendSrv } from '@grafana/runtime';
 import { serializeParams } from 'app/core/utils/fetch';
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
-import { identity, pick, pickBy, groupBy } from 'lodash';
+import { identity, pick, pickBy, groupBy, startCase } from 'lodash';
 import Prism from 'prismjs';
 import { LokiOptions, LokiQuery } from '../loki/types';
 import { PrometheusDatasource } from '../prometheus/datasource';
@@ -174,6 +174,15 @@ export class TempoDatasource extends DataSourceWithBackend<TempoQuery, TempoJson
   }
 
   getQueryDisplayText(query: TempoQuery) {
+    if (query.queryType === 'nativeSearch') {
+      let result = [];
+      for (const key of ['serviceName', 'spanName', 'search', 'minDuration', 'maxDuration', 'limit']) {
+        if (query.hasOwnProperty(key) && query[key as keyof TempoQuery]) {
+          result.push(`${startCase(key)}: ${query[key as keyof TempoQuery]}`);
+        }
+      }
+      return result.join(', ');
+    }
     return query.query;
   }