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:104mounts with the rawnew Vue({ el, ... })constructor, notinitVueApp. 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 atspec/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/destroybundles (see the companion merge request). - MR 1: add the
vue3_migrate_clustersfeature flag definition and add avue3_migration.yml(status: rollout) to all 13 surviving entrypoints. - Verify the three
*/clusters/indexpages render the agent tab correctly under Vue 3. - Verify the deprecated
show,editandconnectpages render correctly under Vue 3, withcertificate_based_clustersturned on locally. - Convert or manually check the raw
new Vueapp inclusters_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_clustersflag, per the rollout plan below. - Cleanup MR: move all 13
vue3_migration.ymlfiles tostatus: 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_clustersflag off in feature specs to check rendering. - To see the deprecated pages at all locally, turn on the
certificate_based_clustersops flag.