Migrate runner fleet dashboards to Vue 3

What does this MR do and why?

Migrates the admin and group runner fleet dashboards to Vue 3 using Option 1, behind a new vue3_migrate_runners_dashboard flag. These were the last runner pages still building only a Vue 2 bundle.

Both pages are EE only and mount sibling apps from ee/ci/runner, so one flag covers them:

  • ee/app/assets/javascripts/pages/admin/runners/dashboard/ (initAdminRunnersDashboard)
  • ee/app/assets/javascripts/pages/groups/runners/dashboard/ (initGroupRunnersDashboard)

Why a new flag instead of reusing vue3_migrate_admin_runners

The dashboards are a ClickHouse backed charting app. The existing flag has only been exercised against the runner list and form apps, so folding these in would widen its blast radius past what has been tested. A separate flag lets them roll out independently.

Screenshots

Captured from the two feature specs below, with the flag stubbed off and on, on the same seeded data (three online and two offline runners). Both captures wait for every panel to settle, so they are directly comparable.

Group fleet dashboard

Before (Vue 2) After (Vue 3)
Group fleet dashboard on Vue 2 Group fleet dashboard on Vue 3

Admin fleet dashboard

Before (Vue 2) After (Vue 3)
Admin fleet dashboard on Vue 2 Admin fleet dashboard on Vue 3

The wait time percentiles read - because ClickHouse is not configured locally. That panel renders in both versions, so it is covered for layout but not for chart data.

How to verify

  1. Enable the flag: Feature.enable(:vue3_migrate_runners_dashboard)
  2. Restart Vite so it picks up the new entrypoints: gdk restart vite
  3. Visit Admin > CI/CD > Runners > Fleet dashboard, and a group's Build > Runners > Fleet dashboard.
  4. Confirm the console shows [V] Using Vue.js 3 (with @vue/compat) for {Admin,Group}RunnersDashboardAppRoot.

Verified locally with temporary assertions in ee/spec/features/groups/runners/maintainer_visits_group_runners_dashboard_spec.rb and ee/spec/features/admin/runners/admin_manages_runners_spec.rb:

  • The page loads the pages.{admin,groups}.runners.dashboard.vue3.js entrypoint.
  • document.querySelectorAll('[data-gitlab-vue3-app]') returns exactly one element per page with the flag on (AdminRunnersDashboardAppRoot, GroupRunnersDashboardAppRoot) and none with the flag off.
  • The console logs [V] Using Vue.js 3 (with @vue/compat) for ... for each, and @vue/compat loads with the ?vue3 query.
  • Both spec files pass in full: 12 examples for admin, 3 for group, 0 failures. Feature flags default to enabled in the test environment, so every example in them already exercises the Vue 3 build.
  • spec/lib/gitlab/vue3_migration_files_spec.rb passes (127 examples).

References

Edited by Miguel Rincon

Merge request reports

Loading