Skip to content

Add product analytics projects usage chart

What does this MR do and why?

Adds a chart to the new product analytics usage quota page, which shows the previous + current months usage for each project.

Merge request status
create app structure
projects usage table
projects usage visualization <-- you are here
total group usage visualization
feature flag rollout

Screenshots or screen recordings

Before After
image image
image image (loading)
image image (error state unchanged)
image image (empty state unchanged)

Note that this MR uses the stack property, which is not yet available in @gitlab/ui until feat(GlColumnChart): allow setting stack option... (gitlab-ui!3778 - merged) is merged. I have not marked this MR as blocked by that one as it's behind a default-off feature flag, and we can deploy now and get the stacking update when it's ready. Until then, the chart will display stacked, instead of side-by-side.

Without fix With fix
image image

How to set up and validate locally

  1. Requires GitLab Ultimate.
  2. Follow these instructions to set up Product Analytics in your GDK.
  3. Enable product analytics
  4. Enable product_analytics_usage_quota feature flag
  5. Visit a group -> Settings -> Usage Quota (verify empty state)
  6. Onboard a project with product analytics
  7. Visit a group -> Settings -> Usage Quota (verify chart renders as expected)

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #424151 (closed)

Edited by Elwyn Benson

Merge request reports