Tempo: Improve performance of drop down in variable query editor (#92010)

Improve performance of drop down
pull/92019/head
Joey 11 months ago committed by GitHub
parent b0031c0781
commit ca56f16615
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 31
      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 { 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'; import { TempoDatasource } from './datasource';
export enum TempoVariableQueryType { export enum TempoVariableQueryType {
@ -33,6 +34,7 @@ export const TempoVariableQueryEditor = ({ onChange, query, datasource }: TempoV
const [label, setLabel] = useState(query.label || ''); const [label, setLabel] = useState(query.label || '');
const [type, setType] = useState<number | undefined>(query.type); const [type, setType] = useState<number | undefined>(query.type);
const [labelOptions, setLabelOptions] = useState<Array<SelectableValue<string>>>([]); const [labelOptions, setLabelOptions] = useState<Array<SelectableValue<string>>>([]);
const [labelQuery, setLabelQuery] = useState<string>('');
useEffect(() => { useEffect(() => {
if (type === TempoVariableQueryType.LabelValues) { if (type === TempoVariableQueryType.LabelValues) {
@ -42,6 +44,22 @@ export const TempoVariableQueryEditor = ({ onChange, query, datasource }: TempoV
} }
}, [datasource, query, type]); }, [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<TempoVariableQueryType>) => { const onQueryTypeChange = (newType: SelectableValue<TempoVariableQueryType>) => {
setType(newType.value); setType(newType.value);
if (newType.value !== undefined) { if (newType.value !== undefined) {
@ -93,10 +111,17 @@ export const TempoVariableQueryEditor = ({ onChange, query, datasource }: TempoV
aria-label="Label" aria-label="Label"
onChange={onLabelChange} onChange={onLabelChange}
onBlur={handleBlur} onBlur={handleBlur}
onInputChange={(value: string, { action }: InputActionMeta) => {
if (action === 'input-change') {
setLabelQuery(value);
}
}}
onCloseMenu={() => setLabelQuery('')}
value={{ label, value: label }} value={{ label, value: label }}
options={labelOptions} options={options}
width={32} width={32}
allowCustomValue allowCustomValue
virtualized
/> />
</InlineField> </InlineField>
</InlineFieldRow> </InlineFieldRow>

Loading…
Cancel
Save