Skip to content

Move CI minutes usage charts inside `PipelineUsageApp`

What does this MR do and why?

Relates to: https://gitlab.com/gitlab-org/gitlab/-/issues/345373

As part of the bigger effort to have a common layout for Usage Quotas we need to migrate the pipelines tab to vue.

This MR migrates the CI minutes usage charts (added in !80321 (merged)) inside PipelineUsageApp.

MR Description
!83021 (merged) Creation of the component and Buy Additional Minutes button
!84711 (merged) Add project list and their CI usage
!85917 (merged) Add namespace usage overview
!86112 (merged) 👈 You're here
!86122 (merged) Add PipelineUsageApp behind feature flag

Screenshots or screen recordings

Group Usage Quotas

Before After
usage_quotas_graphs_group_before usage_quotas_graphs_group_after

Profile Usage Quotas

Before After
usage_quotas_graphs_profile_before usage_quotas_graphs_profile_after

How to set up and validate locally

  1. Apply this patch to inject PipelinesUsageApp in the Usage Quotas page: pipelines-vue-patch-86112.patch
    1. Download the file then git apply ~/path/to/file/pipelines-vue-patch-86112.patch
  2. Visit Usage Quotas page:
    1. Group: http://gdk.test:3000/groups/<group-id>/-/usage_quotas#pipelines-quota-tab
    2. Profile: http://gdk.test:3000/-/profile/usage_quotas#pipelines-quota-tab
  3. To add some data:
    1. Project:
      1. Create data: Ci::Minutes::ProjectMonthlyUsage.new(project_id: 123, date: Date.new(2022, 05, 01), amount_used: 70).save
      2. Update data: Ci::Minutes::ProjectMonthlyUsage.where(project_id: 123, date: Date.new(2022, 05, 01)).update(amount_used: 70)
    2. Namespace:
      1. Create data: Ci::Minutes::NamespaceMonthlyUsage.new(namespace_id: 321, date: Date.new(2022, 05, 01), amount_used: 70).save
      2. Update data: Ci::Minutes::NamespaceMonthlyUsage.where(namespace_id: 321, date: Date.new(2022, 05, 01)).update(amount_used: 70)
  4. Verify that the data is showing correctly

MR acceptance checklist

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

Edited by Sheldon Led

Merge request reports

Loading