Enable Vue 3 migration rollout for analytics dashboards

Brandon Labuschagnerequested to merge
607832-vue3-migrate-analytics-dashboards into master

What does this MR do and why?

Enables the Vue 3 migration rollout for the Analytics Dashboards framework pages: group dashboards (ee/app/assets/javascripts/pages/groups/analytics/dashboards), project dashboards (ee/app/assets/javascripts/pages/projects/analytics/dashboards), and the /explore dashboards (app/assets/javascripts/pages/explore/analytics_dashboards).

This uses the vue3_migration.yml mechanism to opt the pages into Vue 3 behind a feature flag. When vue3_migrate_analytics_dashboards is enabled, Rails serves the Vue 3 (@vue/compat) chunk; otherwise the pages continue to run on Vue 2. A single flag covers all three entrypoints.

What changed

  • Added config/feature_flags/beta/vue3_migrate_analytics_dashboards.yml
  • Added ee/app/assets/javascripts/pages/groups/analytics/dashboards/vue3_migration.yml with status: rollout
  • Added ee/app/assets/javascripts/pages/projects/analytics/dashboards/vue3_migration.yml with status: rollout
  • Added app/assets/javascripts/pages/explore/analytics_dashboards/vue3_migration.yml with status: rollout

No JavaScript or controller changes are needed.

How to verify

  1. Enable the feature flag: Feature.enable(:vue3_migrate_analytics_dashboards)
  2. Navigate to each of the three pages:
    • Group dashboards: /groups/<group>/-/analytics/dashboards (Analyze > Analytics dashboards, requires an Ultimate license)
    • Project dashboards: /<group>/<project>/-/analytics/dashboards (Analyze > Analytics dashboards, requires an Ultimate license)
    • Explore dashboards: /explore/analytics_dashboards (this page is independently gated by the default-off explore_analytics_dashboards flag, so also run Feature.enable(:explore_analytics_dashboards))
  3. On each page, open the browser console and confirm the message: [gitlab] [V] Using Vue.js 3
  4. Verify the dashboard list renders at each level, a built-in dashboard (for example the Value Streams Dashboard) renders its panels, and creating and editing a custom dashboard (add a panel, save, reload) works.

Existing test coverage for the analytics dashboards pages

For visibility while this rollout is in flight: what is and is not covered for these pages today, independent of the Vue 3 mechanism.

Frontend unit tests (Jest)

EE dashboards framework app, ee/spec/frontend/analytics/analytics_dashboards/:

  • dashboards_app_spec.js covers the root app component rendering.
  • router_spec.js covers the list and :slug routes, the root meta attribute, and the legacy AI impact dashboard route redirect.
  • components/dashboards_list_spec.js covers the dashboard list page: page title and description, fetching and rendering the custom dashboards list, the loading state, the Value streams dashboard link for groups, the empty response case, list-viewed event tracking, and the error alert when fetching fails.
  • components/analytics_dashboard_spec.js covers the dashboard detail page: loading a dashboard by slug, the loading icon, rendering a panel component per panel with unique panel IDs, error alerts when a dashboard fails to load, the empty state for a missing custom dashboard, invalid-configuration warnings, the built-in dashboard status badge, filter behaviour (anonymous users filter, URL synchronization), and viewed-dashboard event tracking.
  • components/list/, components/filters/, and link_to_dashboards/ cover the list rows, the filtered search and anonymous users filters, and the link-to-dashboards modal.
  • components/data_sources/ covers each data source (value stream, DORA metrics, contributions, usage overview, AI impact, cube analytics, and more) and components/visualizations/ covers each visualization (DORA chart, comparison tables, single metric trend, usage overview, bar/column charts, and more).

Value Streams Dashboard internals, ee/spec/frontend/analytics/dashboards/: the comparison chart/table, DORA performers score, DORA projects comparison, and AI impact panels that render inside the framework, plus their API and util modules.

CE /explore app, spec/frontend/explore/analytics_dashboards/:

  • pages/list_spec.js covers the list page layout, heading, and dashboard scope tabs.
  • pages/details_spec.js covers the detail page: wiring the group/project/date-range filters into the dashboard layout, dashboard view tabs including deep linking via the view query param, and resetting views when navigating between dashboards.
  • router_spec.js covers the base path, the root list route, and detail route breadcrumbs.
  • components/ covers the dashboard filters, dashboard list tab, dashboard loader, date range filter, groups filter, and projects filter.

None of these suites are in scripts/frontend/quarantined_vue3_specs.txt, so they run and must pass in both the jest (Vue 2) and jest vue3 (@vue/compat) CI jobs.

Backend

  • ee/spec/requests/groups/analytics/dashboards_controller_spec.rb covers authentication, license gating, and the data attributes passed to the frontend (ClickHouse availability, explore-projects path, pointer project handling).
  • ee/spec/requests/projects/analytics/dashboards_controller_spec.rb covers 404s for unauthorized users and personal namespace projects, license gating, and internal event tracking for dashboard views.
  • spec/requests/explore/analytics_dashboards_controller_spec.rb covers a 200 with the explore_analytics_dashboards flag enabled, a 404 without it, and the login redirect.
  • ee/spec/requests/api/graphql/analytics/custom_dashboards/ and ee/spec/requests/api/graphql/mutations/analytics/custom_dashboards/ cover the custom dashboard read/create/update/delete GraphQL API the pages use.

Feature (system) specs

  • ee/spec/features/groups/analytics/dashboards_spec.rb covers the group page: the 403 for unauthorized users, the dashboard listing (including custom dashboard links), the Value Streams Dashboard with default, custom, and invalid configurations, unlicensed DORA and security visualizations, and the DORA metrics dashboard with and without data, including filters.
  • ee/spec/features/projects/analytics/dashboards_spec.rb covers the project page: the 404 for unauthorized users, the dashboard listing, the VSD comparison table with ClickHouse enabled and disabled, the usage overview panel, the DORA metrics dashboard, and the Merge request analytics dashboard.
  • ee/spec/features/groups/analytics/visualizations_spec.rb covers the dora_chart, usage_overview, and dora_performers_score visualizations at group level.
  • ee/spec/features/explore/analytics_dashboards_spec.rb covers the /explore page: the 404 with the flag disabled, the list heading, tabs, and system dashboard row, and navigating to a custom dashboard's detail view.
  • ee/spec/features/explore/system_dashboards_spec.rb covers the Merge Request analytics system dashboard on /explore: rendering, routing by slug, and the default date range option.

QA / E2E

  • qa/qa/specs/features/ee/browser_ui/14_analytics/mr_analytics_spec.rb navigates to the project analytics dashboards page and opens the Merge request analytics dashboard, asserting on the throughput chart and stats. There is no QA spec for the group or /explore pages.

References

Merge request reports