From 9f551400c3d09bfb032f3a770a363d707da63654 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Vieira?= <vieirajlt@gmail.com>
Date: Thu, 9 Mar 2023 12:45:16 +0000
Subject: [PATCH] OpenTSDB: suggest_tagv receives prefix on input change
 (#64475)

replace Select with AsyncSelect on tagv search
---
 .../opentsdb/components/FilterSection.tsx     | 34 +++++++++----------
 .../components/OpenTsdbQueryEditor.tsx        |  4 +--
 .../opentsdb/components/TagSection.tsx        | 34 +++++--------------
 3 files changed, 27 insertions(+), 45 deletions(-)

diff --git a/public/app/plugins/datasource/opentsdb/components/FilterSection.tsx b/public/app/plugins/datasource/opentsdb/components/FilterSection.tsx
index ba255b948ed..c947b0017db 100644
--- a/public/app/plugins/datasource/opentsdb/components/FilterSection.tsx
+++ b/public/app/plugins/datasource/opentsdb/components/FilterSection.tsx
@@ -1,8 +1,18 @@
+import debounce from 'debounce-promise';
 import { size } from 'lodash';
 import React, { useCallback, useState } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
-import { InlineLabel, Select, InlineFormLabel, InlineSwitch, Icon, clearButtonStyles, useStyles2 } from '@grafana/ui';
+import {
+  InlineLabel,
+  Select,
+  InlineFormLabel,
+  InlineSwitch,
+  Icon,
+  clearButtonStyles,
+  useStyles2,
+  AsyncSelect,
+} from '@grafana/ui';
 
 import { OpenTsdbFilter, OpenTsdbQuery } from '../types';
 
@@ -12,7 +22,7 @@ export interface FilterSectionProps {
   onRunQuery: () => void;
   suggestTagKeys: (query: OpenTsdbQuery) => Promise<string[]>;
   filterTypes: string[];
-  suggestTagValues: () => Promise<SelectableValue[]>;
+  suggestTagValues: (value: string) => Promise<SelectableValue[]>;
 }
 
 export function FilterSection({
@@ -28,9 +38,6 @@ export function FilterSection({
   const [tagKeys, updTagKeys] = useState<Array<SelectableValue<string>>>();
   const [keyIsLoading, updKeyIsLoading] = useState<boolean>();
 
-  const [tagValues, updTagValues] = useState<Array<SelectableValue<string>>>();
-  const [valueIsLoading, updValueIsLoading] = useState<boolean>();
-
   const [addFilterMode, updAddFilterMode] = useState<boolean>(false);
 
   const [curFilterType, updCurFilterType] = useState<string>('iliteral_or');
@@ -108,6 +115,8 @@ export function FilterSection({
     return searchWords.reduce((acc, cur) => acc && label.toLowerCase().includes(cur.toLowerCase()), true);
   }, []);
 
+  const tagValueSearch = debounce((query: string) => suggestTagValues(query), 350);
+
   return (
     <div className="gf-form-inline" data-testid={testIds.section}>
       <div className="gf-form">
@@ -185,23 +194,14 @@ export function FilterSection({
           </div>
 
           <div className="gf-form">
-            <Select
+            <AsyncSelect
               inputId="opentsdb-suggested-tagv-select"
               className="gf-form-input"
               value={curFilterValue ? toOption(curFilterValue) : undefined}
               placeholder="filter"
               allowCustomValue
-              filterOption={customFilterOption}
-              onOpenMenu={async () => {
-                if (!tagValues) {
-                  updValueIsLoading(true);
-                  const tVs = await suggestTagValues();
-                  updTagValues(tVs);
-                  updValueIsLoading(false);
-                }
-              }}
-              isLoading={valueIsLoading}
-              options={tagValues}
+              loadOptions={tagValueSearch}
+              defaultOptions={[]}
               onChange={({ value }) => {
                 if (value) {
                   updCurFilterValue(value);
diff --git a/public/app/plugins/datasource/opentsdb/components/OpenTsdbQueryEditor.tsx b/public/app/plugins/datasource/opentsdb/components/OpenTsdbQueryEditor.tsx
index f3336614426..53afa9b4dfe 100644
--- a/public/app/plugins/datasource/opentsdb/components/OpenTsdbQueryEditor.tsx
+++ b/public/app/plugins/datasource/opentsdb/components/OpenTsdbQueryEditor.tsx
@@ -80,8 +80,8 @@ export function OpenTsdbQueryEditor({
 
   // previously called as an autocomplete on every input,
   // in this we call it once on init and filter in the MetricSection component
-  async function suggestTagValues(): Promise<Array<{ value: string; description: string }>> {
-    return datasource.metricFindQuery('suggest_tagv()').then(getTextValues);
+  async function suggestTagValues(value: string): Promise<Array<{ value: string; description: string }>> {
+    return datasource.metricFindQuery(`suggest_tagv(${value})`).then(getTextValues);
   }
 
   async function suggestTagKeys(query: OpenTsdbQuery): Promise<string[]> {
diff --git a/public/app/plugins/datasource/opentsdb/components/TagSection.tsx b/public/app/plugins/datasource/opentsdb/components/TagSection.tsx
index 5345a5e7c74..132fe87271d 100644
--- a/public/app/plugins/datasource/opentsdb/components/TagSection.tsx
+++ b/public/app/plugins/datasource/opentsdb/components/TagSection.tsx
@@ -1,8 +1,9 @@
+import debounce from 'debounce-promise';
 import { has, size } from 'lodash';
-import React, { useCallback, useState } from 'react';
+import React, { useState } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
-import { Select, InlineFormLabel, Icon, clearButtonStyles, useStyles2 } from '@grafana/ui';
+import { Select, InlineFormLabel, Icon, clearButtonStyles, useStyles2, AsyncSelect } from '@grafana/ui';
 
 import { OpenTsdbQuery } from '../types';
 
@@ -11,7 +12,7 @@ export interface TagSectionProps {
   onChange: (query: OpenTsdbQuery) => void;
   onRunQuery: () => void;
   suggestTagKeys: (query: OpenTsdbQuery) => Promise<string[]>;
-  suggestTagValues: () => Promise<SelectableValue[]>;
+  suggestTagValues: (value: string) => Promise<SelectableValue[]>;
   tsdbVersion: number;
 }
 
@@ -28,9 +29,6 @@ export function TagSection({
   const [tagKeys, updTagKeys] = useState<Array<SelectableValue<string>>>();
   const [keyIsLoading, updKeyIsLoading] = useState<boolean>();
 
-  const [tagValues, updTagValues] = useState<Array<SelectableValue<string>>>();
-  const [valueIsLoading, updValueIsLoading] = useState<boolean>();
-
   const [addTagMode, updAddTagMode] = useState<boolean>(false);
 
   const [curTagKey, updCurTagKey] = useState<string | number>('');
@@ -96,14 +94,7 @@ export function TagSection({
     addTag();
   }
 
-  // We are matching words split with space
-  const splitSeparator = ' ';
-  const customTagOption = useCallback((option: SelectableValue<string>, searchQuery: string) => {
-    const label = option.value ?? '';
-
-    const searchWords = searchQuery.split(splitSeparator);
-    return searchWords.reduce((acc, cur) => acc && label.toLowerCase().includes(cur.toLowerCase()), true);
-  }, []);
+  const tagValueSearch = debounce((query: string) => suggestTagValues(query), 350);
 
   return (
     <div className="gf-form-inline" data-testid={testIds.section}>
@@ -167,23 +158,14 @@ export function TagSection({
           </div>
 
           <div className="gf-form">
-            <Select
+            <AsyncSelect
               inputId="opentsdb-suggested-tagv-select"
               className="gf-form-input"
               value={curTagValue ? toOption(curTagValue) : undefined}
               placeholder="value"
               allowCustomValue
-              filterOption={customTagOption}
-              onOpenMenu={async () => {
-                if (!tagValues) {
-                  updValueIsLoading(true);
-                  const tVs = await suggestTagValues();
-                  updTagValues(tVs);
-                  updValueIsLoading(false);
-                }
-              }}
-              isLoading={valueIsLoading}
-              options={tagValues}
+              loadOptions={tagValueSearch}
+              defaultOptions={[]}
               onChange={({ value }) => {
                 if (value) {
                   updCurTagValue(value);