Tempo: Normalize static filter queries (#72794)

* Only show static filter if tag is defined

* Update previosuly left out test

* Add test

* Add warning if tag is missing

public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { initTemplateSrv } from 'test/helpers/initTemplateSrv';
 
 import { config } from '@grafana/runtime';
@@ -121,6 +122,27 @@ describe('TraceQLSearch', () => {
     }
   });
 
+  it('should not render static filter when no tag is configured', async () => {
+    const datasource: TempoDatasource = {
+      search: {
+        filters: [
+          {
+            id: 'service-name',
+            operator: '=',
+            scope: TraceqlSearchScope.Resource,
+          },
+        ],
+      },
+    } as TempoDatasource;
+    datasource.languageProvider = new TempoLanguageProvider(datasource);
+    await act(async () => {
+      const { container } = render(<TraceQLSearch datasource={datasource} query={query} onChange={onChange} />);
+      const serviceNameValue = container.querySelector(`input[aria-label="select service-name value"]`);
+      expect(serviceNameValue).toBeNull();
+      expect(serviceNameValue).not.toBeInTheDocument();
+    });
+  });
+
   it('should not render group by when feature toggle is not enabled', async () => {
     await waitFor(() => {
       render(<TraceQLSearch datasource={datasource} query={query} onChange={onChange} />);

public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.tsx

@@ -104,26 +104,29 @@ const TraceQLSearch = ({ datasource, query, onChange }: Props) => {
     <>
       <div className={styles.container}>
         <div>
-          {datasource.search?.filters?.map((f) => (
+          {datasource.search?.filters?.map(
-            <InlineSearchField
+            (f) =>
-              key={f.id}
+              f.tag && (
-              label={filterTitle(f)}
+                <InlineSearchField
-              tooltip={`Filter your search by ${filterScopedTag(
+                  key={f.id}
-                f
+                  label={filterTitle(f)}
-              )}. To modify the default filters shown for search visit the Tempo datasource configuration page.`}
+                  tooltip={`Filter your search by ${filterScopedTag(
-            >
+                    f
-              <SearchField
+                  )}. To modify the default filters shown for search visit the Tempo datasource configuration page.`}
-                filter={findFilter(f.id) || f}
+                >
-                datasource={datasource}
+                  <SearchField
-                setError={setError}
+                    filter={findFilter(f.id) || f}
-                updateFilter={updateFilter}
+                    datasource={datasource}
-                tags={[]}
+                    setError={setError}
-                hideScope={true}
+                    updateFilter={updateFilter}
-                hideTag={true}
+                    tags={[]}
-                query={traceQlQuery}
+                    hideScope={true}
-              />
+                    hideTag={true}
-            </InlineSearchField>
+                    query={traceQlQuery}
-          ))}
+                  />
+                </InlineSearchField>
+              )
+          )}
           <InlineSearchField
             label={'Duration'}
             tooltip="The span duration, i.e.	end - start time of the span. Accepted units are ns, ms, s, m, h"

public/app/plugins/datasource/tempo/configuration/TraceQLSearchTags.tsx

@@ -77,6 +77,8 @@ export function TraceQLSearchTags({ options, onOptionsChange, datasource }: Prop
   // filter out tags that already exist in TraceQLSearch editor
   const staticTags = ['duration'];
 
+  const missingTag = options.jsonData.search?.filters?.find((f) => !f.tag);
+
   return (
     <>
       {datasource ? (
@@ -99,6 +101,9 @@ export function TraceQLSearchTags({ options, onOptionsChange, datasource }: Prop
           {error.message}
         </Alert>
       )}
+      {missingTag && (
+        <Alert title={'Please ensure each filter has a selected tag'} severity={'warning'} topSpacing={1}></Alert>
+      )}
     </>
   );
 }