Design issue: Display annotation on the metrics chart

Problem to solve

We would like to display annotation on our metrics charts, this is a design issue for displaying the annotation on the metrics chart.

Further details

When a user configures an annotation (manually or automatically) we should present the annotation on the chart, when hovering over the annotation the user should see additional details, such as annotation name timestamp and additional text, we can look at the Grafana dashboard as an example

Proposal

MVC

We discussed that as an MVC we will allow the user to:

  • Surface in the UI the annotations that's been created automatically. Annotations will include a timestamp and a description.
Annotation indicator on a chart Annotation on hover
Metrics_chart_annotation_triangular_indicator_default Metrics_chart_annotation_triangular_indicator
Annotation with labels
Metrics_chart_annotation_with_labels

Further iterations

Hover over a chart, see the timestamp and value Click to view the menu Add annotation
Add_annotation Add_annotation_menu_pop-up Add_annotation_menu_pop-up_hover

Additionally, the user will be able to edit the annotation by clicking on the "Edit" button.

Annotation with an edit button Annotation with an edit button hover
Metrics_chart_annotation_with_labels_and_edit hover

Permissions and Security

Documentation

Availability & Testing

What does success look like, and how can we measure that?

What is the type of buyer?

Links / references

/cc @nadia_sotnikova

Edited by 🤖 GitLab Bot 🤖