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

pkg/services/featuremgmt/registry.go

@@ -362,5 +362,11 @@ var (
 			State:        FeatureStateAlpha,
 			FrontendOnly: true,
 		},
+		{
+			Name:         "traceqlSearch",
+			Description:  "Enables the 'TraceQL Search' tab for the Tempo datasource which provides a UI to generate TraceQL queries",
+			State:        FeatureStateAlpha,
+			FrontendOnly: true,
+		},
 	}
 )

pkg/services/featuremgmt/toggles_gen.go

@@ -262,4 +262,8 @@ const (
 	// FlagDrawerDataSourcePicker
 	// Changes the user experience for data source selection to a drawer.
 	FlagDrawerDataSourcePicker = "drawerDataSourcePicker"
+
+	// FlagTraceqlSearch
+	// Enables the 'TraceQL Search' tab for the Tempo datasource which provides a UI to generate TraceQL queries
+	FlagTraceqlSearch = "traceqlSearch"
 )