docs: annotation docs update

This commit is contained in:
Torkel Ödegaard 2017-10-12 12:19:25 +02:00
parent 5895f9dc89
commit a90052dac3
2 changed files with 9 additions and 8 deletions

View File

@ -10,18 +10,18 @@ weight = 2
# Annotations # Annotations
{{< docs-imagebox img="/img/docs/v46/annotations.png" max-width="800px" >}}
Annotations provide a way to mark points on the graph with rich events. When you hover over an annotation Annotations provide a way to mark points on the graph with rich events. When you hover over an annotation
you can get event description and event tags. The text field can include links to other systems with more detail. you can get event description and event tags. The text field can include links to other systems with more detail.
![](/img/docs/annotations/toggles.png)
## Native annotations ## Native annotations
Grafana v4.6+ comes with a native annotation store and the ability to add annotation events directly from the graph panel or via the [HTTP API]({{< relref "http_api/annotations.md" >}}) Grafana v4.6+ comes with a native annotation store and the ability to add annotation events directly from the graph panel or via the [HTTP API]({{< relref "http_api/annotations.md" >}}).
## Adding annotations ## Adding annotations
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.
{{< docs-imagebox img="/img/docs/annotations/annotation-still.png" {{< docs-imagebox img="/img/docs/annotations/annotation-still.png"
max-width="600px" animated-gif="/img/docs/annotations/annotation.gif" >}} max-width="600px" animated-gif="/img/docs/annotations/annotation.gif" >}}
@ -35,12 +35,13 @@ max-width="600px" animated-gif="/img/docs/annotations/region-annotation.gif" >}}
### Built in query ### Built in query
{{< docs-imagebox img="/img/docs/annotations/built-in-annotation-query.png" class="docs-image--right" >}} After you added an annotation they will still be visible. This is due to the built in annotation query that exists on all dashboards. This annotation query will
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)`.
When you copy a dashboard using the **Save As** feature it will get a new dashboard id so annotations created on source dashboard will no longer be visible on the copy. You
can still show them if you add a new **Annotation Query** and filter by tags. But this only works if the annotations on the source dashboard had tags to filter by.
### 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

View File

@ -72,7 +72,7 @@
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button type="submit" class="btn btn-success width-6" ng-show="ctrl.isNew" ng-click="ctrl.saveChanges()">Add</button> <button type="submit" class="btn btn-success width-6" ng-show="ctrl.isNew" ng-click="ctrl.saveChanges()">Add</button>
<button type="submit" class="btn btn-success width-6" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges()">Save &amp; Test</button> <button type="submit" class="btn btn-success width-8" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges()">Save &amp; Test</button>
<button type="submit" class="btn btn-danger width-6" ng-show="!ctrl.isNew" ng-click="ctrl.delete()"> <button type="submit" class="btn btn-danger width-6" ng-show="!ctrl.isNew" ng-click="ctrl.delete()">
Delete Delete
</button> </button>