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
@@ -13,36 +13,7 @@ title: TempoDataQuery kind
It extends [DataQuery](#dataquery).
| Property | Type | Required | Description |
|-------------------|---------|----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `query` | string | **Yes** | TraceQL query or trace ID |
| `refId` | string | **Yes** | *(Inherited from [DataQuery](#dataquery))*<br/>A - Z |
| `datasource` | | No | *(Inherited from [DataQuery](#dataquery))*<br/>For mixed data sources the selected datasource is on the query level.<br/>For non mixed scenarios this is undefined.<br/>TODO find a better way to do this ^ that's friendly to schema<br/>TODO this shouldn't be unknown but DataSourceRef &#124; null |
| `hide` | boolean | No | *(Inherited from [DataQuery](#dataquery))*<br/>true if query is disabled (ie should not be returned to the dashboard) |
| `key` | string | No | *(Inherited from [DataQuery](#dataquery))*<br/>Unique, guid like, string used in explore mode |
| `limit` | integer | No | Defines the maximum number of traces that are returned from Tempo |
| `maxDuration` | string | No | Define the maximum duration to select traces. Use duration format, for example: 1.2s, 100ms |
| `minDuration` | string | No | Define the minimum duration to select traces. Use duration format, for example: 1.2s, 100ms |
| `queryType` | string | No | *(Inherited from [DataQuery](#dataquery))*<br/>Specify the query flavor<br/>TODO make this required and give it a default |
| `search` | string | No | Logfmt query to filter traces by their tags. Example: http.status_code=200 error=true |
| `serviceMapQuery` | string | No | Filters to be included in a PromQL query to select data for the service graph. Example: {client="app",service="app"} |
| `serviceName` | string | No | Query traces by service name |
| `spanName` | string | No | Query traces by span name |
### DataQuery
These are the common properties available to all queries in all datasources.
Specific implementations will *extend* this interface, adding the required
properties for the given context.
| Property | Type | Required | Description |
|--------------|---------|----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `refId` | string | **Yes** | A - Z |
| `datasource` | | No | For mixed data sources the selected datasource is on the query level.<br/>For non mixed scenarios this is undefined.<br/>TODO find a better way to do this ^ that's friendly to schema<br/>TODO this shouldn't be unknown but DataSourceRef &#124; null |
| `hide` | boolean | No | true if query is disabled (ie should not be returned to the dashboard) |
| `key` | string | No | Unique, guid like, string used in explore mode |
| `queryType` | string | No | Specify the query flavor<br/>TODO make this required and give it a default |
| Property | Type | Required | Description |
|----------|------|----------|-------------|