diff --git a/public/app/plugins/datasource/tempo/VariableQueryEditor.tsx b/public/app/plugins/datasource/tempo/VariableQueryEditor.tsx index 5681134baed..e2a2a28373e 100644 --- a/public/app/plugins/datasource/tempo/VariableQueryEditor.tsx +++ b/public/app/plugins/datasource/tempo/VariableQueryEditor.tsx @@ -1,8 +1,9 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import { DataQuery, SelectableValue } from '@grafana/data'; -import { InlineField, InlineFieldRow, Select } from '@grafana/ui'; +import { InlineField, InlineFieldRow, InputActionMeta, Select } from '@grafana/ui'; +import { maxOptions } from './SearchTraceQLEditor/SearchField'; import { TempoDatasource } from './datasource'; export enum TempoVariableQueryType { @@ -33,6 +34,7 @@ export const TempoVariableQueryEditor = ({ onChange, query, datasource }: TempoV const [label, setLabel] = useState(query.label || ''); const [type, setType] = useState(query.type); const [labelOptions, setLabelOptions] = useState>>([]); + const [labelQuery, setLabelQuery] = useState(''); useEffect(() => { if (type === TempoVariableQueryType.LabelValues) { @@ -42,6 +44,22 @@ export const TempoVariableQueryEditor = ({ onChange, query, datasource }: TempoV } }, [datasource, query, type]); + const options = useMemo(() => { + if (labelQuery.length === 0) { + return labelOptions.slice(0, maxOptions); + } + + const queryLowerCase = labelQuery.toLowerCase(); + return labelOptions + .filter((tag) => { + if (tag.value && tag.value.length > 0) { + return tag.value.toLowerCase().includes(queryLowerCase); + } + return false; + }) + .slice(0, maxOptions); + }, [labelQuery, labelOptions]); + const onQueryTypeChange = (newType: SelectableValue) => { setType(newType.value); if (newType.value !== undefined) { @@ -93,10 +111,17 @@ export const TempoVariableQueryEditor = ({ onChange, query, datasource }: TempoV aria-label="Label" onChange={onLabelChange} onBlur={handleBlur} + onInputChange={(value: string, { action }: InputActionMeta) => { + if (action === 'input-change') { + setLabelQuery(value); + } + }} + onCloseMenu={() => setLabelQuery('')} value={{ label, value: label }} - options={labelOptions} + options={options} width={32} allowCustomValue + virtualized />