xObserve

  1. Panel
  2. Annotation

Using annotatin can add marks to your Graph panel chart, like this:

annotation-demo1

The line and range with sky blue color are our annotations. Let’s create an annotation first.

Annotation is only support in Graph panel

Annotation

Create annotation

  1. Add a new panel and open its panel editor, then select Grapn visualization for it, apply and return back to dashboard page.
  2. Click on the Graph chart, you will see a context menu popup:
annotation-context-menu
  1. Click Add annotation button, you will see a annotation editor popup:
annotation-editor
  1. Duration field is the time range of annotation, if you want the annotation to be a vertical line, set it to 0s, otherwise set to the real timerange , let’s set it to 2m here

Fill in other fields and click Submit button, you will see the annotation in the chart.

annotation-hover

View annotation

In above image, we can see an arrow points to a marker, if you hover on the marker, you will see the annotation details popup like the image above.

Edit annotation

Click the edit icon in the top right corner of the popup annotation detail card, you will see the annotation editor appeared.

We can edit annotation infos and timerange here, let’s change the Duration to 1m now, and see what will happen.

Delete annotation

Click the trash icon in the top right corner of the popup annotation detail card to delete the annotation.

Manage panel annotations

Manage annotation through chart is not convenient, so xObserve provides a panel annotation manager to manage all annotations.

  1. Click panel header(click where the arrow points to in below image) and click Panel Debug menu item
debug-panel-menu
  1. Select Panel Annotations tab

Now you will see all the annotations in this panel and current selected time range

Annotation settings

Open dashboard settings modal, select Annotation tab, you will see the annotation settings.

annotation-setting

You can try:

  1. change the color of annotation markers
  2. add tags to some annotations, and set the tags filter setting to only show the annotations which matched the tags

Correlate alert with panels

In previous tutorial, we have learned how to create an alert to Graph panel, these alerts are shown as annotations, but you can’t edit them, because they are automatically created by xObserve, not by user.