Vue 3 migration: Kubernetes cluster pages

Part of &23285.

This issue tracks the Vue 3 migration of the Kubernetes cluster page entrypoints, using Option 1 (vue3_migration.yml plus a feature flag).

Reachability

Most of these pages sit behind the certificate_based_clusters ops flag. The flag defaults to off. Admin cluster pages return 404 in all cases. The GitLab agent UI at ~/clusters_list stays live and supported.

Pages Reachable by default? Evidence
groups/projects clusters index (agent tab) Yes. The agent tab always renders. app/controllers/clusters/clusters_controller.rb:11 (index is excepted from ensure_feature_enabled!); app/assets/javascripts/clusters_list/components/clusters_main_view.vue:65 (only the certificate tab is hidden)
groups/projects clusters show, edit, connect No. These 404 unless certificate_based_clusters is on. app/controllers/clusters/clusters_controller.rb:11,141-143
All admin/clusters pages, including index No. These always 404 when the flag is off. app/controllers/admin/clusters_controller.rb:6 (a second before_action with no except:)
destroy action, all three clusterables No. This action never renders HTML. app/controllers/clusters/clusters_controller.rb:70-77 (redirect only)

Entrypoints & apps

This migration covers 13 entrypoints. It excludes the 3 */clusters/destroy pages. A separate cleanup merge request removes those, because they can never execute.

Entrypoint group Vue apps mounted Page-specific components
*/clusters/index (admin, groups, projects — 3 entrypoints) ~/clusters_list, mounted with initVueApp (gets the Vue 3 marker) 16, mostly in clusters_list/components. All three pages share the same set.
*/clusters/show (admin, groups, projects — 3 entrypoints) ~/clusters/clusters_bundle (raw new Vue, no marker) and ~/clusters/forms/show (initVueApp, marker); the projects page also loads ~/clusters/gke_cluster_namespace 6
*/clusters/edit (admin, groups, projects — 3 entrypoints) ~/clusters/clusters_bundle (raw new Vue, no marker) 5
*/clusters/connect (admin, groups, projects — 3 entrypoints) ~/clusters/new_cluster, mounted with initVueApp (marker) 1
groups/clusters/index.js (1 entrypoint) ~/clusters/forms/show/index, mounted with initVueApp (marker) 1, in clusters/forms

Across all 16 original pages, the component union is about 22 page-specific components.

Risks

  • ~/clusters/clusters_bundle.js:104 mounts with the raw new Vue({ el, ... }) constructor, not initVueApp. This root gets no Vue 3 marker. A silent fallback to Vue 2 on this app would be invisible.
  • The cluster feature specs never stub certificate_based_clusters. The flag is not in the ops-flags-disabled-by-default list at spec/spec_helper.rb:289-296. The suite only tests the flag-on path. Production defaults to flag-off. So existing specs do not prove users can reach these pages.
  • Most of the migrated pages get real traffic only through the agent tab on */clusters/index. The rest depend on the deprecated certificate flag, so manual QA with the flag on is the only way to check them before rollout.

Tasks / MRs

  • Cleanup MR: remove the three unreachable */clusters/destroy bundles (see the companion merge request).
  • MR 1: add the vue3_migrate_clusters feature flag definition and add a vue3_migration.yml (status: rollout) to all 13 surviving entrypoints.
  • Verify the three */clusters/index pages render the agent tab correctly under Vue 3.
  • Verify the deprecated show, edit and connect pages render correctly under Vue 3, with certificate_based_clusters turned on locally.
  • Convert or manually check the raw new Vue app in clusters_bundle.js:104, since it mounts without the Vue 3 marker.
  • Write a Sentry query to detect Vue 3 rendering errors on these pages.
  • Ramp the vue3_migrate_clusters flag, per the rollout plan below.
  • Cleanup MR: move all 13 vue3_migration.yml files to status: migrated.

Rollout

1. Enable vue3_migrate_clusters for gitlab-org.
2. Enable for 10% of actors. Soak.
3. Enable for 50% of actors. Soak.
4. Enable for 100% of actors. Soak.
5. Set default_enabled: true.
6. Open the cleanup MR to set status: migrated.

Notes

  • Restart the Vite dev server after you add a vue3_migration.yml. Otherwise the entry map stays stale. The app never mounts, and no console error appears.
  • Local GDK runs Vue 2. Stub the vue3_migrate_clusters flag off in feature specs to check rendering.
  • To see the deprecated pages at all locally, turn on the certificate_based_clusters ops flag.