Add a dynamic description to the GLQL single stat

What does this MR do and why?

  • stat display type's displayConfig.description can now reference %{metricName} placeholders, replaced with that metric's value formatted by its own unit (counts get thousands separators, rates render as percentages, durations as 1h 1m 1s); a missing value renders as an em dash.
  • A stat query can now select several metrics, not just one. The first is still the big value; the rest exist only to feed the description, matching how barList already works.
  • A placeholder naming a metric not in the query is a validation error, so the block shows an error instead of rendering.
  • Needed so DAP Impact adoption panels can show captions like "412 of 1,900 users" read from the query response instead of a hardcoded string.
  • Frontend only, stat display type only. table gets the same treatment in https://gitlab.com/gitlab-org/gitlab/-/work_items/628037

References

Screenshots or screen recordings

Three stats, each interpolating a different unit into its description — a count with thousands separators, a rate, and a duration.

dynamic stat descriptions

How to set up and validate locally

  1. Paste a GLQL block into any issue, MR, or Markdown field.

    ```glql
    display: stat
    displayConfig:
      description: "%{acceptedCount} of %{shownCount} suggestions accepted"
    mode: analytics
    query: type = CodeSuggestion and timestamp >= -30d
    metrics: acceptanceRate, acceptedCount, shownCount
    ```
  2. Confirm the big value shows acceptanceRate and the caption reads "X of Y suggestions accepted", both counts with thousands separators.

  3. Reference a metric that is not in metrics: (for example %{notAMetric}) and confirm a validation error shows instead of the rendered block.

  4. Run VUE_VERSION=3 yarn jest spec/frontend/glql/components/presenters/stat_spec.js

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist.

Edited by Ezekiel Kigbo

Merge request reports

Loading
Loading