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) |
|---|---|
![]() |
![]() |
Admin fleet dashboard
| Before (Vue 2) | After (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
- Enable the flag:
Feature.enable(:vue3_migrate_runners_dashboard) - Restart Vite so it picks up the new entrypoints:
gdk restart vite - Visit Admin > CI/CD > Runners > Fleet dashboard, and a group's Build > Runners > Fleet dashboard.
- 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.jsentrypoint. 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/compatloads with the?vue3query. - 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.rbpasses (127 examples).
References
- Feature issue: gitlab-org#20939
- Vue 3 migration epic: &6252



