[Frontend] Support the ability to know why a group of charts have no data

Frontend Issue for #30134

Problem to solve

In https://gitlab.com/gitlab-org/gitlab-ce/issues/64611, we will allow for more granular error information, which will help users better understand why the charts on their metrics dashboard aren't displaying. When we are able to receive more granular information, we'll need to figure out how to display the error states for each error type.

Intended users

Further details

Proposal

Potential error states needing UX (please add more to the list below as needed):

  • Error connecting to prometheus
  • Invalid query
    • 400 error { "error": "parse error at char 55: range specification must be preceded by a metric selector, but follows a \*promql.Call instead", "errorType": "bad_data", "status": "error" }
  • No data available for any of the queries in the group could be due to:
    • service not configured (e.g. nginx ingress)
    • there truly is no data to report
  • Timeout/max retries hit when connecting to Prometheus (#30354 (closed))

Permissions and Security

Documentation

Testing

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

Links / references

Edited by Miguel Rincon