From d57aef2edac09263badaadb10d3cb012ff1470c7 Mon Sep 17 00:00:00 2001
From: Joey <90795735+joey-grafana@users.noreply.github.com>
Date: Wed, 27 Sep 2023 09:03:37 +0100
Subject: [PATCH] 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
---
 .../TraceQLSearch.test.tsx                    | 22 ++++++++++
 .../SearchTraceQLEditor/TraceQLSearch.tsx     | 43 ++++++++++---------
 .../tempo/configuration/TraceQLSearchTags.tsx |  5 +++
 3 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.test.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.test.tsx
index 29a32a89c22..97405e906d5 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, 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} />);
diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.tsx
index 5be54f1ba7b..aeaa7a8d166 100644
--- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.tsx
+++ b/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) => (
-            <InlineSearchField
-              key={f.id}
-              label={filterTitle(f)}
-              tooltip={`Filter your search by ${filterScopedTag(
-                f
-              )}. To modify the default filters shown for search visit the Tempo datasource configuration page.`}
-            >
-              <SearchField
-                filter={findFilter(f.id) || f}
-                datasource={datasource}
-                setError={setError}
-                updateFilter={updateFilter}
-                tags={[]}
-                hideScope={true}
-                hideTag={true}
-                query={traceQlQuery}
-              />
-            </InlineSearchField>
-          ))}
+          {datasource.search?.filters?.map(
+            (f) =>
+              f.tag && (
+                <InlineSearchField
+                  key={f.id}
+                  label={filterTitle(f)}
+                  tooltip={`Filter your search by ${filterScopedTag(
+                    f
+                  )}. To modify the default filters shown for search visit the Tempo datasource configuration page.`}
+                >
+                  <SearchField
+                    filter={findFilter(f.id) || f}
+                    datasource={datasource}
+                    setError={setError}
+                    updateFilter={updateFilter}
+                    tags={[]}
+                    hideScope={true}
+                    hideTag={true}
+                    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"
diff --git a/public/app/plugins/datasource/tempo/configuration/TraceQLSearchTags.tsx b/public/app/plugins/datasource/tempo/configuration/TraceQLSearchTags.tsx
index 2c9ca525e31..aa8ce1924bc 100644
--- a/public/app/plugins/datasource/tempo/configuration/TraceQLSearchTags.tsx
+++ b/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>
+      )}
     </>
   );
 }