Tempo: Improve how Tempo Search fetches autocomplete values (#39371)

* Improve how tempo search fetches autocomplete values

* Refetch autocomplete options on menu load

public/app/plugins/datasource/tempo/NativeSearch.tsx

@@ -4,11 +4,11 @@ import {
   InlineField,
   Input,
   QueryField,
-  Select,
   SlatePrism,
   BracesPlugin,
   TypeaheadInput,
   TypeaheadOutput,
+  Select,
 } from '@grafana/ui';
 import { tokenizer } from './syntax';
 import Prism from 'prismjs';
@@ -17,6 +17,7 @@ import { css } from '@emotion/css';
 import { SelectableValue } from '@grafana/data';
 import TempoLanguageProvider from './language_provider';
 import { TempoDatasource, TempoQuery } from './datasource';
+import { debounce } from 'lodash';
 
 interface Props {
   datasource: TempoDatasource;
@@ -43,22 +44,51 @@ const NativeSearch = ({ datasource, query, onChange, onBlur, onRunQuery }: Props
   const [hasSyntaxLoaded, setHasSyntaxLoaded] = useState(false);
   const [autocomplete, setAutocomplete] = useState<{
     serviceNameOptions: Array<SelectableValue<string>>;
+    selectedServiceName: SelectableValue<string> | undefined;
     spanNameOptions: Array<SelectableValue<string>>;
+    selectedSpanName: SelectableValue<string> | undefined;
   }>({
     serviceNameOptions: [],
+    selectedServiceName: undefined,
     spanNameOptions: [],
+    selectedSpanName: undefined,
   });
 
+  const fetchServiceNameOptions = useMemo(
+    () =>
+      debounce(
+        async () => {
+          const res = await languageProvider.getOptions('service.name');
+          setAutocomplete((prev) => ({ ...prev, serviceNameOptions: res }));
+        },
+        500,
+        { leading: true, trailing: true }
+      ),
+    [languageProvider]
+  );
+
+  const fetchSpanNameOptions = useMemo(
+    () =>
+      debounce(
+        async () => {
+          const res = await languageProvider.getOptions('name');
+          setAutocomplete((prev) => ({ ...prev, spanNameOptions: res }));
+        },
+        500,
+        { leading: true, trailing: true }
+      ),
+    [languageProvider]
+  );
+
   useEffect(() => {
     const fetchAutocomplete = async () => {
       await languageProvider.start();
-      const serviceNameOptions = await languageProvider.getOptions('service.name');
+      await fetchServiceNameOptions();
-      const spanNameOptions = await languageProvider.getOptions('name');
+      await fetchSpanNameOptions();
       setHasSyntaxLoaded(true);
-      setAutocomplete({ serviceNameOptions, spanNameOptions });
     };
     fetchAutocomplete();
-  }, [languageProvider]);
+  }, [languageProvider, fetchServiceNameOptions, fetchSpanNameOptions]);
 
   const onTypeahead = async (typeahead: TypeaheadInput): Promise<TypeaheadOutput> => {
     return await languageProvider.provideCompletionItems(typeahead);
@@ -93,6 +123,7 @@ const NativeSearch = ({ datasource, query, onChange, onBlur, onRunQuery }: Props
               });
             }}
             placeholder="Select a service"
+            onOpenMenu={fetchServiceNameOptions}
             isClearable
           />
         </InlineField>
@@ -110,6 +141,7 @@ const NativeSearch = ({ datasource, query, onChange, onBlur, onRunQuery }: Props
               });
             }}
             placeholder="Select a span"
+            onOpenMenu={fetchSpanNameOptions}
             isClearable
           />
         </InlineField>