Added Grafana Play Links to Panel visualization docs (#88995)

* Update index.md on Node panels to Grafana Play link

* Update index.md add Traces docs link to Grafana Play

* Update index.md News documentation link to Grafana Play

* Update index.md Alert list documentation link to Grafana Play

* Update index.md Alert list fixed missing link

* Update index.md Fixed title

* Update index.md Trying code fix

* Ran prettier command

* Matched link text to dashboard titles

* Replaced URL with ref URI key

---------

Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>
Co-authored-by: Isabel Matwawana <isabel.matwawana@grafana.com>

docs/sources/panels-visualizations/visualizations/alert-list/index.md

@@ -28,12 +28,14 @@ refs:
 
 # Alert list
 
-Alert lists allow you to display a list of important alerts that you want to track. You can configure the alert list to show the current state of your alert, such as firing, pending, or normal. Learn more about alerts in [Grafana Alerting overview][].
+Alert lists allow you to display a list of important alerts that you want to track. You can configure the alert list to show the current state of your alert, such as firing, pending, or normal. Learn more about alerts in [Grafana Alerting overview](ref:grafana-alerting-overview).
 
 {{< figure src="/static/img/docs/alert-list-panel/alert-list-panel.png" max-width="850px" alt="An alert list visualization" >}}
 
 On each dashboard load, this visualization queries the alert list, always providing the most up-to-date results.
 
+{{< docs/play title="Alert List" url="https://play.grafana.org/d/bdodlcyou483ke/" >}}
+
 ## Configure an alert list
 
 Once you’ve created a [dashboard](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/dashboards/build-dashboards/create-dashboard/), the following video shows you how to configure an alert list visualization:

docs/sources/panels-visualizations/visualizations/news/index.md

@@ -30,6 +30,8 @@ In version 8.5, we discontinued the "Use Proxy" option for Grafana news visualiz
 
 You can use the news visualization to provide regular news and updates to your users.
 
+{{< docs/play title="News Panel" url="https://play.grafana.org/d/cdodkwspaaa68b/" >}}
+
 ## Configure a news visualization
 
 Once you’ve created a [dashboard](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/dashboards/build-dashboards/create-dashboard/), enter the URL of an RSS in the [URL](#url) field in the **News** section. This visualization type doesn't accept any other queries, and you shouldn't expect to be able to filter or query the RSS feed data in any way using this visualization.

docs/sources/panels-visualizations/visualizations/node-graph/index.md

@@ -29,6 +29,8 @@ The following video provides beginner steps for creating node panel visualizatio
 
 {{< youtube id="VrvsMkRwoKw" >}}
 
+{{< docs/play title="Node graph panel" url="https://play.grafana.org/d/bdodfbi3d57uoe/" >}}
+
 ## Data requirements
 
 A node graph requires a specific shape of the data to be able to display its nodes and edges. This means not every data source or query can be visualized with this graph. If you want to use this as a data source developer see the section about data API.

docs/sources/panels-visualizations/visualizations/traces/index.md

@@ -65,6 +65,8 @@ For more information about traces and how to use them, refer to the following do
 
 {{< figure src="/static/img/docs/explore/trace-view-9-4.png" class="docs-image--no-shadow" max-width= "900px" caption="Screenshot of the trace view" >}}
 
+{{< docs/play title="Traces Panel" url="https://play.grafana.org/d/edodkfmj0tce8f/" >}}
+
 ## Add a panel with tracing visualizations
 
 Once you have tracing data available in your Grafana stack, you can add tracing panels to your Grafana dashboards.