[DOC] Add APM changes and fix links (#53986)

* Add APM changes and fix links

* Apply suggestions from code review

* Update docs/sources/datasources/tempo.md

Co-authored-by: Eve Meelan <81647476+Eve832@users.noreply.github.com>

* Update docs/sources/explore/trace-integration.md

* Prettier update

Co-authored-by: Eve Meelan <81647476+Eve832@users.noreply.github.com>

docs/sources/datasources/tempo.md

@@ -15,7 +15,7 @@ weight: 1400
 
 # Tempo data source
 
-Grafana ships with built-in support for Tempo a high volume, minimal dependency trace storage, OSS tracing solution from Grafana Labs. Add it as a data source, and you are ready to query your traces in [Explore]({{< relref "../explore/" >}}).
+Grafana ships with built-in support for Tempo, a high volume, minimal dependency trace storage, OSS tracing solution from Grafana Labs. Add it as a data source, and you are ready to query your traces in [Explore]({{< relref "../explore" >}}).
 
 ## Add data source
 
@@ -182,7 +182,7 @@ A service graph is a visual representation of the relationships between services
 
 To display the service graph:
 
-- [Configure the Grafana Agent](https://grafana.com/docs/tempo/next/grafana-agent/service-graphs/#quickstart) or [Tempo/GET](https://grafana.com/docs/tempo/latest/server_side_metrics/service_graphs/#tempo) to generate service graph data
+- [Configure Grafana Agent](https://grafana.com/docs/tempo/latest/grafana-agent/service-graphs/#quickstart) or [Tempo/GET](https://grafana.com/docs/tempo/latest/server_side_metrics/service_graphs/#tempo) to generate service graph data
 - Link a Prometheus data source in the Tempo data source settings.
 - Navigate to [Explore]({{< relref "../explore/" >}}).
 - Select the Tempo data source.
@@ -206,7 +206,7 @@ Click on the service to see a context menu with additional links for quick navig
 
 The Application Performance Management (APM) table lets you view several APM metrics out of the box.
 The APM table is part of the APM dashboard.
-For more information, refer to the [APM dashboard documentation](https://grafana.com/docs/tempo/next/metrics-generator/app-performance-mgmt/).
+For more information, refer to the [APM dashboard documentation](https://grafana.com/docs/tempo/latest/metrics-generator/app-performance-mgmt/).
 
 To display the APM table:
 

docs/sources/explore/trace-integration.md

@@ -22,9 +22,13 @@ Supported data sources are:
 
 For information on how to configure queries for the data sources listed above, refer to the documentation for specific data source.
 
+## Trace View explanation
+
+This section explains the elements of the Trace View dashboard.
+
 {{< figure src="/static/img/docs/explore/explore-trace-view-full-8-0.png" class="docs-image--no-shadow" max-width= "900px" caption="Screenshot of the trace view" >}}
 
-##### Header
+### Header
 
 {{< figure src="/static/img/docs/v70/explore-trace-view-header.png" class="docs-image--no-shadow" max-width= "750px" caption="Screenshot of the trace view header" >}}
 
@@ -32,13 +36,13 @@ For information on how to configure queries for the data sources listed above, r
 - Search: Highlights spans containing the searched text.
 - Metadata: Various metadata about the trace.
 
-##### Minimap
+### Minimap
 
 {{< figure src="/static/img/docs/v70/explore-trace-view-minimap.png" class="docs-image--no-shadow" max-width= "900px" 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
+### Timeline
 
 {{< figure src="/static/img/docs/v70/explore-trace-view-timeline.png" class="docs-image--no-shadow" max-width= "900px"  caption="Screenshot of the trace view timeline" >}}
 
@@ -51,7 +55,7 @@ Shows list of spans within the trace. Each span row consists of these components
 
 Clicking anywhere on the span row shows span details.
 
-##### Span details
+### Span details
 
 {{< figure src="/static/img/docs/v70/explore-trace-view-span-details.png" class="docs-image--no-shadow" max-width= "900px"  caption="Screenshot of the trace view span details" >}}
 
@@ -61,13 +65,13 @@ Clicking anywhere on the span row shows span details.
 - 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.
 
-##### Node graph
+### Node graph
 
 You can optionally expand the node graph for the displayed trace. Depending on the data source, this can show spans of the trace as nodes in the graph, or as some additional context like service graph based on the current trace.
 
 ![Node graph](/static/img/docs/explore/explore-trace-view-node-graph-8-0.png 'Node graph')
 
-##### Trace to logs
+### Trace to logs
 
 > **Note:** Available in Grafana 7.4 and later versions.
 
@@ -77,6 +81,17 @@ You can navigate from a span in a trace view directly to logs relevant for that
 
 Click the document icon to open a split view in Explore with the configured data source and query relevant logs for the span.
 
+## APM dashboard
+
+Application performance management (APM) uses data gathered from services, agents, systems, and microservices to visualize and identify areas of concern.
+
+The Grafana APM dashboard visualizes the span metrics (traces data for rates, error rates, and durations (RED)) and service graphs.
+Once the requirements are set up, this pre-configured dashboard is immediately available.
+
+For more information, refer to the [APM table section](https://grafana.com/docs/grafana/latest/datasources/tempo/#apm-table) of the Tempo data source page and the [APM dashboard page](https://grafana.com/docs/tempo/latest/metrics-generator/app-performance-mgmt/) in the Tempo documentation.
+
+{{< figure src="/static/img/docs/grafana-cloud/apm-overview.png" class="docs-image--no-shadow" max-width= "900px" caption="Screenshot of the APM dashboard" >}}
+
 ## Data API
 
 This visualization needs a specific shape of the data to be returned from the data source in order to correctly display it.