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

Design Specs

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.