mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
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:
@@ -80,4 +80,5 @@ export interface FeatureToggles {
|
||||
lokiQuerySplitting?: boolean;
|
||||
individualCookiePreferences?: boolean;
|
||||
drawerDataSourcePicker?: boolean;
|
||||
traceqlSearch?: boolean;
|
||||
}
|
||||
|
||||
@@ -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] : [];
|
||||
|
||||
Reference in New Issue
Block a user