[v11.3.x] Docs: alert list visualization refactor (#97670)

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

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

@@ -24,13 +24,23 @@ refs:
       destination: /docs/grafana/<GRAFANA_VERSION>/alerting/
     - pattern: /docs/grafana-cloud/
       destination: /docs/grafana-cloud/alerting-and-irm/alerting/
+  create-dashboard:
+    - pattern: /docs/grafana/
+      destination: /docs/grafana/<GRAFANA_VERSION>/dashboards/build-dashboards/create-dashboard/
+    - pattern: /docs/grafana-cloud/
+      destination: /docs/grafana-cloud/visualizations/dashboards/build-dashboards/create-dashboard/
+  alert-label:
+    - pattern: /docs/grafana/
+      destination: /docs/grafana/<GRAFANA_VERSION>/alerting/fundamentals/alert-rules/annotation-label/
+    - pattern: /docs/grafana-cloud/
+      destination: /docs/grafana-cloud/alerting-and-irm/alerting/fundamentals/alert-rules/annotation-label/
 ---
 
 # 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](ref:grafana-alerting-overview).
 
-{{< figure src="/static/img/docs/alert-list-panel/alert-list-panel.png" max-width="850px" alt="An alert list visualization" >}}
+![An alert list visualization](/media/docs/grafana/panels-visualizations/screenshot-alert-list-v11.3.png)
 
 On each dashboard load, this visualization queries the alert list, always providing the most up-to-date results.
 
@@ -38,37 +48,41 @@ On each dashboard load, this visualization queries the alert list, always provid
 
 ## 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:
+Once you’ve [created a dashboard](ref:create-dashboard), the following video shows you how to configure an alert list visualization:
 
 {{< youtube id="o4rK7_AXZ9Y" >}}
 
-## Panel options
+## Configuration options
 
-{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
+{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
 
-## Options
+### Panel options
 
-Use the following options to refine your alert list visualization.
-
-### View mode
+{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
 
-Choose between **List** to display alerts in a detailed list format with comprehensive information, or **Stat** to show alerts as a summarized single-value statistic.
+### Options
 
-### Group mode
+Use the following options to refine your alert list visualization.
 
-Choose between **Default grouping** to show alert instances grouped by their alert rule, or **Custom grouping** to show alert instances grouped by a custom set of labels.
+<!-- prettier-ignore-start -->
 
-### Max items
+| Option     | Description                                                                                               |
+| ---------- | --------------------------------------------------------------------------------------------------------- |
+| View mode  | Choose between **List** to display alerts in a detailed list format with comprehensive information, or **Stat** to show alerts as a summarized single-value statistic.  |
+| Group mode | Choose between **Default grouping** to show alert instances grouped by their alert rule, or **Custom grouping** to show alert instances grouped by a custom set of labels. |
+| Max items | Sets the maximum number of alerts to list. By default, Grafana sets this value to 10. |
+| [Sort order](#sort-order) | Select how to order the alerts displayed. |
+| Alerts linked to this dashboard | Toggle the switch on to only show alerts from the dashboard the alert list is in. |
 
-Sets the maximum number of alerts to list. By default, Grafana sets this value to 10.
+<!-- prettier-ignore-end -->
 
-### Sort order
+#### Sort order
 
 Select how to order the alerts displayed. Choose from:
 
-- **Alphabetical (asc) -** Alphabetical order.
-- **Alphabetical (desc) -** Reverse alphabetical order.
-- **Importance -** By importance according to the following values, with 1 being the highest:
+- **Alphabetical (asc)** - Alphabetical order.
+- **Alphabetical (desc)** - Reverse alphabetical order.
+- **Importance** - By importance according to the following values, with 1 being the highest:
   - alerting: 1
   - firing: 1
   - no_data: 2
@@ -76,39 +90,34 @@ Select how to order the alerts displayed. Choose from:
   - ok: 4
   - paused: 5
   - inactive: 5
-- **Time (asc) -** Newest active alert instances first.
-- **Time (desc) -** Oldest active alert instances first.
+- **Time (asc)** - Newest active alert instances first.
+- **Time (desc)** - Oldest active alert instances first.
 
-### Alerts linked to this dashboard
-
-Toggle the switch on to only show alerts from the dashboard the alert list is in.
-
-## Filter
+### Filter options
 
 These options allow you to limit alerts shown to only those that match the query, folder, or tags you choose.
 
-### Alert name
-
-Filter alerts by name.
-
-### Alert instance label
+<!-- prettier-ignore-start -->
 
-Filter alert instances using [label](https://grafana.com/docs/grafana/latest/alerting/fundamentals/alert-rules/annotation-label/) querying. For example,`{severity="critical", instance=~"cluster-us-.+"}`.
+| Option     | Description                                                                                               |
+| ---------- | --------------------------------------------------------------------------------------------------------- |
+| Alert name | Filter alerts by name. |
+| Alert instance label | Filter alert instances using [label](ref:alert-label) querying. For example,`{severity="critical", instance=~"cluster-us-.+"}`. |
+| Datasource | Filter alerts from the selected data source. |
+| Folder | Filter alerts by the selected folder. Only alerts from dashboards in this folder are displayed. |
 
-### Datasource
+### Alert state filter options
 
-Filter alerts from the selected data source.
-
-### Folder
-
-Filter alerts by the selected folder. Only alerts from dashboards in this folder are displayed.
+Choose which alert states to display in this visualization.
 
-## Alert state filter
+<!-- prettier-ignore-start -->
 
-Choose which alert states to display in this visualization.
+| Option     | Description                                                                                               |
+| ---------- | --------------------------------------------------------------------------------------------------------- |
+| Alerting / Firing | Shows alerts that are currently active and triggering an alert condition. |
+| Pending | Shows alerts that are in a transitional state, waiting for conditions to be met before triggering. |
+| No Data | Shows alerts where the data source is not returning any data, which could indicate an issue with data collection. |
+| Normal | Shows alerts that are in a normal or resolved state, where no alert condition is currently met. |
+| Error | Shows alerts where an error has occurred, typically related to an issue in the alerting process. |
 
-- **Alerting / Firing -** Shows alerts that are currently active and triggering an alert condition.
-- **Pending -** Shows alerts that are in a transitional state, waiting for conditions to be met before triggering.
-- **No Data -** Shows alerts where the data source is not returning any data, which could indicate an issue with data collection.
-- **Normal -** Shows alerts that are in a normal or resolved state, where no alert condition is currently met.
-- **Error -** Shows alerts where an error has occurred, typically related to an issue in the alerting process.
+<!-- prettier-ignore-end -->