[DOC] Fix style issues and add videos to tracing and profiling shared files (#81215)

Co-authored-by: Jack Baldry <jack.baldry@grafana.com>
Co-authored-by: Ryan Perry <Rperry2174@gmail.com>
Co-authored-by: Clayton Cornell <131809008+clayton-cornell@users.noreply.github.com>
This commit is contained in:
Kim Nylander
2024-01-30 10:41:33 +00:00
committed by GitHub
co-authored by Jack Baldry Ryan Perry Clayton Cornell
parent 2a734a9e3f
commit da8eb8faa5
6 changed files with 101 additions and 56 deletions
@@ -25,7 +25,7 @@ To learn more about how to query by TraceQL, refer to the [TraceQL documentation
The TraceQL query editor, located on the **Explore** > **TraceQL** tab in Grafana, lets you search by trace ID and write TraceQL queries using autocomplete.
![The TraceQL query editor](/static/img/docs/tempo/screenshot-traceql-query-editor-v10.png)
![The TraceQL query editor](/media/docs/tempo/traceql/screenshot-traceql-query-editor-v10.png)
## Enable the query editor
@@ -58,7 +58,7 @@ To query a particular trace by its trace ID:
1. Enter the trace ID into the query field. For example: `41928b92edf1cdbe0ba6594baee5ae9`
1. Click **Run query** or use the keyboard shortcut Shift + Enter.
![Search for a trace ID using the TraceQL query editor](/static/img/docs/tempo/screenshot-traceql-editor-traceID.png)
![Search for a trace ID using the TraceQL query editor](/media/docs/tempo/traceql/screenshot-traceql-editor-traceID.png)
## Use autocomplete to write queries
@@ -66,27 +66,29 @@ You can use the query editor’s autocomplete suggestions to write queries.
The editor detects span sets to provide relevant autocomplete options.
It uses regular expressions (regex) to detect where it's inside a spanset and provide attribute names, scopes, intrinsic names, logic operators, or attribute values from Tempo's API, depending on what's expected for the current situation.
![Query editor showing the auto-complete feature](/static/img/docs/tempo/screenshot-traceql-query-editor-auto-complete-v10.png)
![Query editor showing the auto-complete feature](/media/docs/tempo/traceql/screenshot-traceql-query-editor-auto-complete-v10.png)
To create a query using autocomplete, follow these steps:
1. Use the steps above to access the query editor and begin your query.
1. From the menu, choose **Explore**, select the desired Tempo data source, and navigate to the **TraceQL** tab.
1. Enter your query. As you type your query, autocomplete suggestions appear as a drop-down. Each letter you enter refines the autocomplete options to match.
1. Use your mouse or arrow keys to select any option you wish. When the desired option is highlighted, press Tab on your keyboard to add the selection to your query.
1. Once your query is complete, select **Run query** to perform the query.
1. Once your query is complete, select **Run query**.
## View query results
Query results for both the editor and the builder are returned in a table. Selecting the Trace ID or Span ID provides more detailed information.
![Query editor showing span results](/static/img/docs/tempo/screenshot-traceql-query-editor-results-v10.png)
Selecting the trace ID from the returned results opens a trace diagram. Selecting a span from the returned results opens a trace diagram and reveals the relevant span in the trace diagram (the highlighted blue line).
Selecting the trace ID from the returned results opens a trace diagram. Selecting a span from the returned results opens a trace diagram and reveals the relevant span in the trace diagram (above, the highlighted blue line).
In the trace diagram, the bold text on the left side of each span indicates the service name, for example `mythical-requester: requester`, and it is hidden when subsequent spans have the same service name (nested spans).
Each service has a color assigned to it, which is visible to the left of the name and timeline in the graph.
Spans with the same color belong to the same service. The grey text to the right of the service name indicates the span name.
In the trace diagram, the bold text on the left side of each span indicates the service name, for example `mythical-requester: requester`, and it is hidden when subsequent spans have the same service name (nested spans). Each service has a color assigned to it, which is visible to the left of the name and timeline in the graph. Spans with the same color belong to the same service. The grey text to the right of the service name indicates the span name.
![Query editor showing span results](/media/docs/tempo/traceql/screenshot-traceql-query-editor-results-v10.png)
### Streaming results