Chronograf: Annotations - Make it possible to mark events on timeline

[agrrh]

Hello!

At first, thank you for the great software.

I'd like to propose you to add some kind of "events" mechanism:

So, executing something like this:

curl \
  -X POST\
  --data '{"title": "#commit deployed", "tags": ["project-3"]}' \
  http://{chronograf|influxdb}/some/path

Should result in:

• Vertical line, titled with "#commit deployed"
• Drawn on each visualization which is tagged as "project-3" - related

This should make it easier to read the graphs, to compare it with real world, user would be able to understand:

• How different components of the system are dependent to each other
• Which consequences some actions in the past led to in present

Thank you for your time.

[goller]

@agrrh I really like this idea. We plan to do this for sure. I think it is really important to be able to correlate events with trends in the data.

Our rendering of events will not only support your use case, but, also render when alerts have been created by kapacitor.

[alexpaxton]

This sounds awesome

[nhaugo]

See Grafana annotations: http://docs.grafana.org/reference/annotations/ for reference

[alexpaxton]

Here's a rough idea:

Goal is to take a more visual/gestural approach by keeping the UI and experience within the context of the graph, and avoiding tables/lists. Aiming to break flow as little as possible

Right click to annotate

Popover for creating a new annotation
Has an option to add to all graphs at the same timestamp

Existing Annotations
On hover the label appears in the legend. Might want to limit the length of label user input for aesthetic purposes. Right click an annotation to edit it

Edit Mode
Delete instead of cancel

Other considerations

• Do users want to change the timestamp of a market retroactively?
• How valuable is it to offer different annotation colors (or types)?
• Would it be valuable to see all annotations at once in table or list view?
• Language "Annotation" vs "Marker" vs "Event" etc

[DaveMSchmitz]

This would be a really useful feature! Any updates?

[nhaugo]

Proposal
Each cell will append a query to the chronograf.autogen.annotations db, the cell should use its time range to search for annotations that might fall in the graph.

The annotation scheme should be
annotation,type=,id=,cell=,start_time=,end_time= deleted=,name= influx_time_stamp

• Type: free form, we will probably support various types in the future but will have no effect initially
• Id: a guid
• cell: The cell the annotation is tied to, if it is tied to multiple cells then there should be one entry per cell
• duration: by default this is zero, but can be a length of time
• deleted: to remove annotations an entry should be added with annotation_id, the cell id and deleted=true, when queried if there are more than one entry for an annotation chronograf should check for the oldest entry, if it has the deleted flag it should not be displayed.
• name the name of the annotation

[121watts]

To start CRUDy operations:

{
    type: <string>,
    name: <string> req,
    time: <unix nano string>,
    duration: <unix nano string>,
    text: <string>, 
}

[alexpaxton]

Almost done with the UI for this feature, dropping a checklist here to keep track of the remaining items

• [x] Prevent annotation tooltip from appearing beneath the page header
• [ ] Style the Delete annotation button
• [ ] Fix the issue in which you can create two legends at the same time
• [x] Prevent legend from appearing when editing annotations
• [ ] User can mouse over the window between endpoints and see a tooltip
• [ ] Render a window when the start and endpoints are outside the time range
• [x] Delete a range and associated endpoints from endpoint
• [x] Remove secondary comment field on Annotations

[nhaugo]

@goller todo, add a cell tag to the backend

[alexpaxton]

Got some feedback that warrants some more design

• How to display multiple annotations at the same timestamp?

• How to handle annotation tooltips when items are stacked? AKA what if there are multiple overlapping windows?

• Snap new timestamps to existing timestamps?

[hauleth]

Ideally there also would be HTTP API that would allow adding events dynamically, like new deployment added on each application startup or integration with other tools like Sentry (annotation on each error).

[goller]

@hauleth YES!! Here is my work around the annotations store:

https://github.com/influxdata/chronograf/tree/feature/annotation-store

Basically, through chronograf's API you'll be able to create/read/update/delete the annotations.

Additionally, you can add annotations to influxdb itself using the schema we have come up with. So, adding events dynamically is _exactly_ a use case we want to support.

I need to add more documentation around both the REST API and the InfluxDB schema.

[russorat]

awesome!