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/tsdb/tempo/kinds/dataquery/types_dataquery_gen.go

@@ -9,23 +9,64 @@
 
 package dataquery
 
+// Defines values for TempoQueryFiltersType.
+const (
+	TempoQueryFiltersTypeDynamic TempoQueryFiltersType = "dynamic"
+	TempoQueryFiltersTypeStatic  TempoQueryFiltersType = "static"
+)
+
 // Defines values for TempoQueryType.
 const (
-	TempoQueryTypeClear        TempoQueryType = "clear"
-	TempoQueryTypeNativeSearch TempoQueryType = "nativeSearch"
-	TempoQueryTypeSearch       TempoQueryType = "search"
-	TempoQueryTypeServiceMap   TempoQueryType = "serviceMap"
-	TempoQueryTypeTraceql      TempoQueryType = "traceql"
-	TempoQueryTypeUpload       TempoQueryType = "upload"
+	TempoQueryTypeClear         TempoQueryType = "clear"
+	TempoQueryTypeNativeSearch  TempoQueryType = "nativeSearch"
+	TempoQueryTypeSearch        TempoQueryType = "search"
+	TempoQueryTypeServiceMap    TempoQueryType = "serviceMap"
+	TempoQueryTypeTraceql       TempoQueryType = "traceql"
+	TempoQueryTypeTraceqlSearch TempoQueryType = "traceqlSearch"
+	TempoQueryTypeUpload        TempoQueryType = "upload"
+)
+
+// Defines values for TraceqlFilterType.
+const (
+	TraceqlFilterTypeDynamic TraceqlFilterType = "dynamic"
+	TraceqlFilterTypeStatic  TraceqlFilterType = "static"
+)
+
+// Defines values for TraceqlSearchFilterType.
+const (
+	TraceqlSearchFilterTypeDynamic TraceqlSearchFilterType = "dynamic"
+	TraceqlSearchFilterTypeStatic  TraceqlSearchFilterType = "static"
 )
 
 // TempoDataQuery defines model for TempoDataQuery.
-type TempoDataQuery struct {
+type TempoDataQuery = map[string]interface{}
+
+// TempoQuery defines model for TempoQuery.
+type TempoQuery struct {
 	// For mixed data sources the selected datasource is on the query level.
 	// For non mixed scenarios this is undefined.
 	// TODO find a better way to do this ^ that's friendly to schema
 	// TODO this shouldn't be unknown but DataSourceRef | null
 	Datasource *interface{} `json:"datasource,omitempty"`
+	Filters    []struct {
+		// Uniquely identify the filter, will not be used in the query generation
+		Id string `json:"id"`
+
+		// The operator that connects the tag to the value, for example: =, >, !=, =~
+		Operator *string `json:"operator,omitempty"`
+
+		// The tag for the search filter, for example: .http.status_code, .service.name, status
+		Tag *string `json:"tag,omitempty"`
+
+		// The type of the filter, can either be static (pre defined in the UI) or dynamic
+		Type TempoQueryFiltersType `json:"type"`
+
+		// The value for the search filter
+		Value *interface{} `json:"value,omitempty"`
+
+		// The type of the value, used for example to check whether we need to wrap the value in quotes when generating the query
+		ValueType *string `json:"valueType,omitempty"`
+	} `json:"filters"`
 
 	// Hide true if query is disabled (ie should not be returned to the dashboard)
 	Hide *bool `json:"hide,omitempty"`
@@ -65,5 +106,35 @@ type TempoDataQuery struct {
 	SpanName *string `json:"spanName,omitempty"`
 }
 
+// The type of the filter, can either be static (pre defined in the UI) or dynamic
+type TempoQueryFiltersType string
+
 // TempoQueryType search = Loki search, nativeSearch = Tempo search for backwards compatibility
 type TempoQueryType string
+
+// TraceqlFilter defines model for TraceqlFilter.
+type TraceqlFilter struct {
+	// Uniquely identify the filter, will not be used in the query generation
+	Id string `json:"id"`
+
+	// The operator that connects the tag to the value, for example: =, >, !=, =~
+	Operator *string `json:"operator,omitempty"`
+
+	// The tag for the search filter, for example: .http.status_code, .service.name, status
+	Tag *string `json:"tag,omitempty"`
+
+	// The type of the filter, can either be static (pre defined in the UI) or dynamic
+	Type TraceqlFilterType `json:"type"`
+
+	// The value for the search filter
+	Value *interface{} `json:"value,omitempty"`
+
+	// The type of the value, used for example to check whether we need to wrap the value in quotes when generating the query
+	ValueType *string `json:"valueType,omitempty"`
+}
+
+// The type of the filter, can either be static (pre defined in the UI) or dynamic
+type TraceqlFilterType string
+
+// TraceqlSearchFilterType static fields are pre-set in the UI, dynamic fields are added by the user
+type TraceqlSearchFilterType string

pkg/tsdb/tempo/tempo.go

@@ -61,7 +61,7 @@ func (s *Service) QueryData(ctx context.Context, req *backend.QueryDataRequest)
 	queryRes := backend.DataResponse{}
 	refID := req.Queries[0].RefID
 
-	model := &dataquery.TempoDataQuery{}
+	model := &dataquery.TempoQuery{}
 	err := json.Unmarshal(req.Queries[0].JSON, model)
 	if err != nil {
 		return result, err