Add usage billing dashboard API fetching
What does this MR do and why?
Adds API calling to Usage Billing Dashboard app, with loading and error state.
When error occurs we fallback to mock data, that is a placeholder until we have proper BE.
Adds Storybook stories for Commitment, No-commitment, loading and error states.
References
https://gitlab.com/gitlab-org/gitlab/-/issues/566202+
Screenshots or screen recordings
| State | UI |
|---|---|
| Loaded |
|
| Loading |
|
| Error |
|
How to set up and validate locally
To test it on GDK:
- Ensure you're running GitLab as self-managed (e.g. 'export GITLAB_SIMULATE_SAAS=0 gdk restart`)
- Ensure you've a license added to your instance
- Enable
billing_usagefeature flag (e.g. http://gdk.test:3000/rails/features/usage_billing_dev) - Navigate to the
/admin/gitlab_duo/usage - Ensure the page is rendered with the Vue app
To test on storybook:
- Start storybook (e.g. yarn storybook:start)
- Open Storybook on http://localhost:6006/?path=/docs/ee-usage-quotas-usage-billing-app--docs
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Edited by Kos Palchyk


