Tempo: New Search UI using TraceQL (#63808)

* WIP of creating new components to support the Search tab using TraceQL

* Search fields now require an ID. Added duration fields to new Search UI

* Distinguish static from dynamic fields. Added dynamic tags input

* Moved new search behind traceqlSearch feature flag. Added handling of different types of values to accurately wrap them in quotes when generating query.

* Hold search state in TempoQuery to leverage state in URL. Moved types to schema file

* Use a read only monaco editor to render a syntax highlighted generated query. Added tooltip to duration. Added query options section

* Support multiple values using the regex operator and multi input

* Delete dynamic filters

* Automatically select the regex op when multiple values are selected. Revert to previous operator when only one value is selected

* Added tests for SearchField component

* Added tests for the TraceQLSearch component

* Added tests for function that generates the query

* Fix merge conflicts

* Update test

* Replace Search tab when traceqlSearch feature flag is enabled. Limit operators for both name fields to =,!=,=~

* Disable clear button for values

* Changed delete and add buttons to AccessoryButton. Added descriptions to operators

* Remove duplicate test

* Added a prismjs grammar for traceql. Replaced read only query editor with syntax highlighted query. Removed spaces between tag operator and value when generating query.

* Fix support for custom values when isMulti is enabled in Select

* Use toOption function
This commit is contained in:
Andre Pereira
2023-03-06 16:31:08 +00:00
committed by GitHub
parent 5db0d14606
commit fd37ff29b5
25 changed files with 1171 additions and 74 deletions

View File

@@ -80,4 +80,5 @@ export interface FeatureToggles {
lokiQuerySplitting?: boolean;
individualCookiePreferences?: boolean;
drawerDataSourcePicker?: boolean;
traceqlSearch?: boolean;
}

View File

@@ -4,7 +4,7 @@ import { default as ReactAsyncSelect } from 'react-select/async';
import { default as AsyncCreatable } from 'react-select/async-creatable';
import Creatable from 'react-select/creatable';
import { SelectableValue } from '@grafana/data';
import { SelectableValue, toOption } from '@grafana/data';
import { useTheme2 } from '../../themes';
import { Icon } from '../Icon/Icon';
@@ -190,8 +190,16 @@ export function SelectBase<T>({
// If option is passed as a plain value (value property from SelectableValue property)
// we are selecting the corresponding value from the options
if (isMulti && value && Array.isArray(value) && !loadOptions) {
// @ts-ignore
selectedValue = value.map((v) => findSelectedValue(v.value ?? v, options));
selectedValue = value.map((v) => {
// @ts-ignore
const selectableValue = findSelectedValue(v.value ?? v, options);
// If the select allows custom values there likely won't be a selectableValue in options
// so we must return a new selectableValue
if (!allowCustomValue || selectableValue) {
return selectableValue;
}
return typeof v === 'string' ? toOption(v) : v;
});
} else if (loadOptions) {
const hasValue = defaultValue || value;
selectedValue = hasValue ? [hasValue] : [];