IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

OpenTSDB: suggest_tagv receives prefix on input change (#64475)

Browse Source 
replace Select with AsyncSelect on tagv search
This commit is contained in:
João Vieira
2023-03-09 07:45:16 -05:00
committed by GitHub
parent bd0fa79542
commit 9f551400c3
3 changed files with 27 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/plugins/datasource/opentsdb/components/FilterSection.tsx
+17 -17
View File
@@ -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);
public/app/plugins/datasource/opentsdb/components/OpenTsdbQueryEditor.tsx
+2 -2
View File
@@ -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[]> {
public/app/plugins/datasource/opentsdb/components/TagSection.tsx
+8 -26
View File
@@ -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);