Annotation docs (#9506)

* added images to annotation docs

* added gifs and png to annotations, minor code formatting fix in alertlist

docs/sources/features/panels/alertlist.md

@@ -18,7 +18,7 @@ The alert list panel allows you to display your dashbords alerts. The list can b
 
 
 ## Alert List Options
 ## Alert List Options
 
 
-{{< docs-imagebox img="/img/docs/v45/alert-list-options.png" max-width="600px" class="docs-image--no-shadow docs-image--right">}}
+{{< docs-imagebox img="/img/docs/v45/alert-list-options.png" max-width="600px" class="docs-image--no-shadow docs-image--right" >}}
 
 
 1. **Show**: Lets you choose between current state or recent state changes.
 1. **Show**: Lets you choose between current state or recent state changes.
 2. **Max Items**: Max items set the maximum of items in a list.
 2. **Max Items**: Max items set the maximum of items in a list.

docs/sources/reference/annotations.md

@@ -23,22 +23,24 @@ Grafana v4.6+ comes with a native annotation store and the ability to add annota
 
 
 by holding down CTRL/CMD + mouse click. Add tags to the annotation will make it searchable from other dashboards.
 by holding down CTRL/CMD + mouse click. Add tags to the annotation will make it searchable from other dashboards.
 
 
-<!-- adding annoation gif animation -->
+{{< docs-imagebox img="/img/docs/annotations/annotation-still.png"
+max-width="600px" animated-gif="/img/docs/annotations/annotation.gif" >}}
 
 
 ### Adding regions events
 ### Adding regions events
 
 
 You can also hold down CTRL/CMD and select region to create a region annotation.
 You can also hold down CTRL/CMD and select region to create a region annotation.
 
 
-<!-- region image/gif animation -->
+{{< docs-imagebox img="/img/docs/annotations/region-annotation-still.png"
+max-width="600px" animated-gif="/img/docs/annotations/region-annotation.gif" >}}
 
 
 ### Built in query
 ### Built in query
 
 
-After you added an an annotation they will be still be visible. This is due to the built in annotation query that exists on all dashboards. This annotation query will
+{{< docs-imagebox img="/img/docs/annotations/built-in-annotation-query.png" class="docs-image--right" >}}
+
+After you added an annotation they will be still be visible. This is due to the built in annotation query that exists on all dashboards. This annotation query will
 fetch all annotation events that originate from the current dashboard and show them on the panel where they where created. This includes alert state history annotations. You can
 fetch all annotation events that originate from the current dashboard and show them on the panel where they where created. This includes alert state history annotations. You can
 stop annotations from being fetched & drawn by opening the **Annotations** settings (via Dashboard cogs menu) and modifying the query named `Annotations & Alerts (Built-in)`.
 stop annotations from being fetched & drawn by opening the **Annotations** settings (via Dashboard cogs menu) and modifying the query named `Annotations & Alerts (Built-in)`.
 
 
-<!-- image of built in query -->
-
 ### Query by tag
 ### Query by tag
 
 
 You can create new annotation queries that fetch annotations from the native annotation store via the `-- Grafana --` data source and by setting *Filter by* to `Tags`. Specify at least
 You can create new annotation queries that fetch annotations from the native annotation store via the `-- Grafana --` data source and by setting *Filter by* to `Tags`. Specify at least