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

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

Browse Source 
* Improve how tempo search fetches autocomplete values

* Refetch autocomplete options on menu load
This commit is contained in:
Connor Lindsey 2021-09-23 07:00:14 -06:00 committed by GitHub
parent a6c5af19a6
commit 1865689411
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 37 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
public/app/plugins/datasource/tempo/NativeSearch.tsx
View File

@ -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');
const spanNameOptions = await languageProvider.getOptions('name');
await fetchServiceNameOptions();
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>