Frontend: Fetch annotations for monitoring dashboard and display on all charts
Summary
Annotations are created against dashboard Ids and panel Ids. This issue is for the frontend to fetch all annotations based on dashboard Id. If the backend doesn't yet support dashboard Id, annotations should be fetched based on dashboard filename.
Once the annotations are fetched, it should be displayed on all charts in the dashboard.
Proposed designs
Annotation marker on the chart | Annotation details on hover |
---|---|
![]() |
![]() |
Technical details
Query
query {
project(fullPath: "monitoring-group/docker-app-clone") {
id
environment(name: "production") {
id
name
metricsDashboard (id: "custom_dashboard.yml") {
id
annotations {
nodes {
id
description
starting_at
ending_at
panelId
}
}
}
}
}
}
Response:
{
"data": {
"project": {
"id": "gid://gitlab/Project/28",
"environment": {
"id": "gid://gitlab/Environment/34",
"name": "production",
"metricsDashboard": {
"id": "gid://custom_dashboard.yml",
"annotations": {
"nodes": [
{
"id": "gid://gitlab/Annotations/1",
"description": "annotation description",
"starting_at": "2020-03-20 13:50:07",
"ending_at": null,
"panelId": null
},
{
"id": "gid://gitlab/Annotations/2",
"description": "annotation description",
"starting_at": "2020-03-20 13:50:07",
"ending_at": null,
"panelId": "some-panel-id"
}
]
}
}
}
}
}
}
Tasks
-
The GitLab UI markLines and markAreas might need to be updated to support -
Docs might need to be updated if this is not behind a feature flag.
Edited by Dhiraj Bodicherla