Docs: Trace view, jaeger and zipkin (#24297)

* Add docs for trace view, jaeger and zipkin

* Update docs/sources/features/datasources/jaeger.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* Update docs/sources/features/datasources/jaeger.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* Update docs/sources/features/datasources/jaeger.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* Update docs/sources/features/datasources/zipkin.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* Update docs/sources/features/datasources/zipkin.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* Update docs/sources/features/datasources/zipkin.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* Update docs/sources/features/datasources/zipkin.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* Update data source docs

* Update docs/sources/features/explore/index.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* Split trace UI description across multiple sections

* Update docs/sources/features/datasources/jaeger.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* Update docs/sources/features/datasources/jaeger.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* Add screenshots

* Fix image params

* Fix params

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

docs/sources/features/datasources/jaeger.md

++++
+title = "Using Jaeger in Grafana"
+description = "Guide for using Jaeger in Grafana"
+keywords = ["grafana", "jaeger", "guide", "tracing"]
+type = "docs"
+aliases = ["/docs/grafana/latest/datasources/jeager"]
+[menu.docs]
+name = "Jaeger"
+parent = "datasources"
+weight = 2
++++
+
+# Jaeger data source
+Grafana ships with built-in support for Jaeger, which provides open source, end-to-end distributed tracing.
+Just add it as a data source and you are ready to query your traces in [Explore]({{< relref "../explore" >}}).
+
+## Adding the data source
+To access Jaeger settings, click the **Configuration** (gear) icon, then click **Data Sources**, and then click **Jaeger**.
+
+| Name            | Description                                                                                                                                   |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| _Name_          | The data source name. This is how you refer to the data source in panels, queries, and Explore.                                                 |
+| _Default_       | Default data source means that it will be pre-selected for new panels.                                                                         |
+| _URL_           | The URL of the Jaeger instance, e.g., `http://localhost:16686`                                                                                   |
+| _Access_        | Server (default) = URL needs to be accessible from the Grafana backend/server, Browser = URL needs to be accessible from the browser. |
+| _Basic Auth_    | Enable basic authentication to the Prometheus data source.                                                                            |
+| _User_          | User name for basic authentication.                                                                                                   |
+| _Password_      | Password for basic authentication.                                                                                                    |
+
+## Query traces
+
+You can query and display traces from Jaeger via [Explore]({{< relref "../explore" >}}).
+
+{{< docs-imagebox img="/img/docs/v70/jaeger-query-editor.png" class="docs-image--no-shadow" caption="Screenshot of the Jaeger query editor" >}}
+
+The Jaeger query editor allows you to query by trace ID directly or selecting a trace from trace selector. To query by trace ID, insert the ID into the text input.
+
+{{< docs-imagebox img="/img/docs/v70/jaeger-query-editor-open.png" class="docs-image--no-shadow" caption="Screenshot of the Jaeger query editor with trace selector expanded" >}}
+
+Use the trace selector to pick particular trace from all traces logged in the time range you have selected in Explore. The trace selector has three levels of nesting:
+1. The service you are interested in.
+1. Particular operation is part of the selected service
+1. Specific trace in which the selected operation occurred, represented by the root operation name and trace duration.
+
+## Linking Trace ID from logs
+
+You can link to Jaeger trace from logs in Loki by configuring a derived field with internal link. See [Loki documentation]([Explore]({{< relref "./loki#derived-fields" >}})) for details.

docs/sources/features/datasources/zipkin.md

++++
+title = "Using Zipkin in Grafana"
+description = "Guide for using Zipkin in Grafana"
+keywords = ["grafana", "zipkin", "guide", "tracing"]
+type = "docs"
+aliases = ["/docs/grafana/latest/datasources/zipkin"]
+[menu.docs]
+name = "Zipkin"
+parent = "datasources"
+weight = 2
++++
+
+# Zipkin data source
+
+Grafana ships with built-in support for Zipkin, an open source, distributed tracing system.
+Just add it as a data source and you are ready to query your traces in [Explore]({{< relref "../explore" >}}).
+
+## Adding the data source
+To access Zipkin settings, click the **Configuration** (gear) icon, then click **Data Sources**, and then click **Zipkin**.
+
+| Name            | Description                                                                                                                                   |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| _Name_          | The data source name. This is how you refer to the data source in panels, queries, and Explore.                                                 |
+| _Default_       | Default data source means that it will be pre-selected for new panels.                                                                         |
+| _URL_           | The URL of the Zipkin instance, e.g., `http://localhost:9411`                                                                                   |
+| _Access_        | Server (default) = URL needs to be accessible from the Grafana backend/server, Browser = URL needs to be accessible from the browser. |
+| _Basic Auth_    | Enable basic authentication to the Prometheus data source.                                                                            |
+| _User_          | User name for basic authentication.                                                                                                   |
+| _Password_      | Password for basic authentication.                                                                                                    |
+
+## Query traces
+
+Querying and displaying traces from Zipkin is available via [Explore]({{< relref "../explore" >}}).
+
+{{< docs-imagebox img="/img/docs/v70/zipkin-query-editor.png" class="docs-image--no-shadow" caption="Screenshot of the Zipkin query editor" >}}
+
+The Zipkin query editor allows you to query by trace ID directly or selecting a trace from trace selector. To query by trace ID, insert the ID into the text input.
+
+{{< docs-imagebox img="/img/docs/v70/zipkin-query-editor-open.png" class="docs-image--no-shadow" caption="Screenshot of the Zipkin query editor with trace selector expanded" >}} 
+
+Use the trace selector to pick particular trace from all traces logged in the time range you have selected in Explore. The trace selector has three levels of nesting:
+1. The service you are interested in.
+1. Particular operation is part of the selected service
+1. Specific trace in which the selected operation occurred, represented by the root operation name and trace duration.
+
+## Data mapping in the trace UI
+
+Zipkin annotations are shown in the trace view as logs with annotation value shown under annotation key.
+
+## Linking Trace ID from logs
+
+You can link to Zipkin trace from logs in Loki by configuring a derived field with internal link. See [Loki documentation]([Explore]({{< relref "./loki#derived-fields" >}})) for details.

docs/sources/features/explore/index.md

@@ -198,6 +198,53 @@ While in Live tail view new logs will come from the bottom of the screen and wil
 
 {{< docs-imagebox img="/img/docs/v64/explore_live_tailing.gif" class="docs-image--no-shadow" caption="Explore Live tailing in action" >}}
 
+## Tracing integration
+> Only available in Grafana v7.0+.
+
+You can visualize traces from tracing data sources in explore. Data sources currently supported:
+- [Jaeger]({{< relref "../datasources/jaeger" >}})
+- [Zipkin]({{< relref "../datasources/zipkin" >}})
+
+For information about how to use the query editor see documentation for specific data source.
+
+{{< docs-imagebox img="/img/docs/v70/explore-trace-view-full.png" class="docs-image--no-shadow" caption="Screenshot of the trace view" >}}
+
+##### Header
+
+{{< docs-imagebox img="/img/docs/v70/explore-trace-view-header.png" class="docs-image--no-shadow" caption="Screenshot of the trace view header" >}}
+
+- Header title: Shows the name of the root span and trace ID.
+- Search: Highlights spans containing the searched text.
+- Metadata: Various metadata about the trace.
+
+##### Minimap
+
+{{< docs-imagebox img="/img/docs/v70/explore-trace-view-minimap.png" class="docs-image--no-shadow" caption="Screenshot of the trace view minimap" >}}
+
+Shows condensed view or the trace timeline. Drag your mouse over the minimap to zoom into smaller time range. Zooming will also update the main timeline, so it is easy to see shorter spans. Hovering over the minimap, when zoomed, will show Reset Selection button which resets the zoom.
+
+##### Timeline
+
+{{< docs-imagebox img="/img/docs/v70/explore-trace-view-timeline.png" class="docs-image--no-shadow" caption="Screenshot of the trace view timeline" >}}
+
+Shows list of spans within the trace. Each span row consists of these components:
+- Expand children button: Expands or collapses all the children spans of selected span.
+- Service name: Name of the service logged the span.
+- Operation name: Name of the operation that this span represents.
+- Span duration bar: Visual representation of the operation duration within the trace.
+
+Clicking anywhere on the span row will show span details. 
+
+##### Span details
+
+{{< docs-imagebox img="/img/docs/v70/explore-trace-view-span-details.png" class="docs-image--no-shadow" caption="Screenshot of the trace view span details" >}}
+
+- Operation name
+- Span metadata
+- Tags: Any tags associated with this span.
+- Process metadata: Metadata about the process that logged this span.
+- Logs: List of logs logged by this span and associated key values. In case of Zipkin logs section shows Zipkin annotations.
+
 ## Navigating between Explore and a dashboard
 
 To help accelerate workflows that involve regularly switching from Explore to a dashboard and vice-versa, we've added the ability to return to the origin dashboard