Migrate Group CI/CD Analytics to Vue 3

Migrate the Group CI/CD Analytics page entrypoint(s) to Vue 3 behind a feature flag.

Scope

This issue covers only the flag-gated rollout switch from Option 1 of the Vue 3 migration guide: add a single feature flag, add a vue3_migration.yml per entrypoint, and smoke test the affected pages. Full Vue 3 compliance (fixing compatibility issues, migrating unit tests) is not required here. Capture anything found during smoke testing in follow-up issues instead.

Implementation plan

1. Add the feature flag

Create vue3_migrate_ci_cd_analytics using bin/feature-flag:

  • type: beta, default_enabled: false, group: group::optimize
  • Read the milestone value from the VERSION file
  • Set feature_issue_url to this issue
  • Use user as the feature flag actor during rollout
  • Create a rollout issue from the "Feature Flag Roll Out" template and link it as rollout_issue_url
  • Link the rollout issue to the parent epic gitlab-org&23041

2. Add a vue3_migration.yml per entrypoint

Create this file next to each index.js listed below:

status: rollout
feature_flag: vue3_migrate_ci_cd_analytics
group: group::optimize
migration_issue: https://gitlab.com/gitlab-org/gitlab/-/issues/614009

Entrypoints:

  • ee/app/assets/javascripts/pages/groups/analytics/ci_cd_analytics/index.js (EE, group level, served by Groups::Analytics::CiCdAnalyticsController#show)

Note: The Pipelines tab is also gated by the existing group_ci_cd_analytics_pipelines_ff flag (owned by group::ci platform, default disabled) and the group_ci_cd_analytics_pipelines licensed feature (Premium and Ultimate); its dashboard panels are still empty pending that team's work. The Release statistics tab requires the group_ci_cd_analytics_releases licensed feature (Ultimate only). Smoke test with a group on at least Premium so one tab renders, otherwise the controller returns a 403 for the whole page. This is a separate feature from the project-level CI/CD analytics page (app/assets/javascripts/pages/projects/pipelines/charts/index.js, served by Projects::PipelinesController#charts), which is out of scope here.

3. Document existing test coverage in the MR

  • Add a section to the MR description listing which functionality of the feature is currently tested and where those tests are located, as in this example

4. Smoke test

Enable the flag locally and confirm the browser console logs [gitlab] [V] Using Vue.js 3 on each page, then verify the key workflows:

  • Switching between the Pipelines and Release statistics tabs updates the tab query parameter and the correct tab stays selected after using browser back and forward
  • Selecting a date range on the Pipelines tab updates the URL query parameters
  • Release statistics tab loads and displays the releases count and the percentage of projects with releases
  • For a root group where the current user can admin the group, the "View group pipeline usage quota" link renders and points to the usage quotas page

5. Follow-ups

  • Open follow-up issues for any Vue 3 compatibility problems found during smoke testing and link them here

References

Edited by 🤖 GitLab Bot 🤖