Enable Vue 3 migration rollout for value stream analytics

Brandon Labuschagnerequested to merge
607821-vue3-migrate-value-stream-analytics into master

What does this MR do and why?

Enables the Vue 3 migration rollout for the value stream analytics pages: project VSA (app/assets/javascripts/pages/projects/cycle_analytics/show), group VSA (ee/app/assets/javascripts/pages/groups/analytics/cycle_analytics/show), and the value stream create and edit forms at group and project level.

This uses the vue3_migration.yml mechanism to opt the pages into Vue 3 behind a feature flag. When vue3_migrate_value_stream_analytics is enabled, Rails serves the Vue 3 (@vue/compat) chunks; otherwise the pages continue to run on Vue 2.

What changed

  • Added config/feature_flags/beta/vue3_migrate_value_stream_analytics.yml
  • Added a vue3_migration.yml with status: rollout next to each of the six entrypoints:
    • app/assets/javascripts/pages/projects/cycle_analytics/show (CE project VSA; loads the ee_else_ce bundle, so it serves both the CE and EE project experiences)
    • ee/app/assets/javascripts/pages/groups/analytics/cycle_analytics/show (EE group VSA)
    • ee/app/assets/javascripts/pages/groups/analytics/cycle_analytics/value_streams/new
    • ee/app/assets/javascripts/pages/groups/analytics/cycle_analytics/value_streams/edit
    • ee/app/assets/javascripts/pages/projects/analytics/cycle_analytics/value_streams/new
    • ee/app/assets/javascripts/pages/projects/analytics/cycle_analytics/value_streams/edit

No JavaScript or controller changes are needed.

How to verify

  1. Enable the feature flag: Feature.enable(:vue3_migrate_value_stream_analytics)
  2. Visit each page (Analyze > Value stream analytics) and confirm the browser console message: [gitlab] [V] Using Vue.js 3
    • Project VSA: /<project>/-/value_stream_analytics (check the unlicensed CE view too, since the entrypoint serves both via ee_else_ce)
    • Group VSA: /groups/<group>/-/analytics/value_stream_analytics
    • Group value stream forms: /groups/<group>/-/analytics/value_stream_analytics/value_streams/new and /groups/<group>/-/analytics/value_stream_analytics/value_streams/<id>/edit
    • Project value stream forms: /<project>/-/analytics/value_stream_analytics/value_streams/new and /<project>/-/analytics/value_stream_analytics/value_streams/<id>/edit
  3. Smoke checks:
    • Project VSA: lifecycle metrics, stage table, and filters
    • Group VSA: overview metrics, stage table, filtered search, and date range
    • Create a value stream with custom stages at group and project level
    • Edit an existing value stream at group and project level

Existing test coverage for the value stream analytics 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)

CE suite, spec/frontend/analytics/cycle_analytics/ (project VSA, the code the ee_else_ce entrypoint serves):

  • components/base_spec.js covers the main project VSA app: path navigation rendering and stage formatting, overview metrics and their request params, the stage table (selected stage count, events, pagination), the filter bar and date range selector, loading/empty/error states, and the value streams dashboard link gated by the groupLevelAnalyticsDashboard license.
  • components/filter_bar_spec.js, components/value_stream_filters_spec.js, components/value_stream_metrics_spec.js, components/stage_table_spec.js, components/path_navigation_spec.js, components/formatted_stage_count_spec.js, components/total_time_spec.js, and components/analytics_dashboards_breadcrumbs_spec.js cover the individual pieces (filtered search tokens, date range and project filters, metric tiles, the stage event table with sorting and pagination, path navigation, stage count formatting, total time display, breadcrumbs).
  • store/actions_spec.js, store/mutations_spec.js, store/getters_spec.js, and utils_spec.js cover the Vuex store (fetching value streams, stages, and stage data, error alerts) and helpers.

EE suite, ee/spec/frontend/analytics/cycle_analytics/ (group VSA):

  • components/base_spec.js covers the group VSA app: loading/empty/no-access states, aggregation status, the project filter, per-stage visibility of the duration and tasks by type charts, path navigation loading, URL parameter syncing (date range, project ids, stage/sort/direction/page), dashboard links for group and project namespaces, and event tracking.
  • components/duration_charts/* and components/tasks_by_type/* cover the overview and per-stage duration charts and the tasks by type chart, including its filters and loaders.
  • components/value_stream_select_spec.js, components/value_stream_empty_state_spec.js, components/value_stream_aggregation_status_spec.js, components/value_stream_aggregating_warning_spec.js, components/no_data_available_state_spec.js, and components/path_navigation_spec.js cover the surrounding UI.
  • store/actions_spec.js, store/actions/{filters,stages,value_streams}_spec.js, store/getters_spec.js, store/mutations_spec.js, and utils_spec.js cover the group-level Vuex store.

Value stream new/edit form suite, ee/spec/frontend/analytics/cycle_analytics/vsa_settings/:

  • components/app_spec.js covers the new and edit modes: page header, the initial fetch on edit, loading states, and error alerts with Sentry reporting.
  • components/value_stream_form_content_spec.js covers the form itself: preset (blank/default template) toggling, adding custom stages, field validation including duplicate stage names, submit success/error/failure paths with tracking and redirect, and edit-mode specifics (restore defaults, restoring hidden stages).
  • The remaining vsa_settings specs cover the stage field subcomponents (custom and default stage fields, label fields, reorder/hide/restore actions) and form utils.

None of these suites is 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

  • spec/controllers/projects/cycle_analytics_controller_spec.rb covers project VSA #show page-view counting and visit tracking; ee/spec/requests/ee/projects/cycle_analytics_controller_spec.rb covers the request params exposed to the frontend (licensed vs unlicensed).
  • ee/spec/controllers/groups/analytics/cycle_analytics_controller_spec.rb covers group VSA #show: license checks (403), 404s for invalid value streams and groups, the default in-memory value stream, request params, and usage tracking; ee/spec/requests/groups/analytics/cycle_analytics_controller_spec.rb covers the query params exposed in data attributes.
  • spec/controllers/projects/analytics/cycle_analytics/value_streams_controller_spec.rb and ee/spec/requests/projects/analytics/cycle_analytics/value_streams_controller_spec.rb cover the project value streams endpoints (index/default value stream, authorization, delete restrictions); ee/spec/requests/groups/analytics/cycle_analytics/value_streams_controller_spec.rb covers creating and updating value stream settings (project ids filter).

Feature specs (Capybara)

  • spec/features/cycle_analytics_spec.rb visits project VSA (CE view): metrics, stage data, sorting, pagination, date filtering, direct navigation with filters applied, and guest restrictions.
  • ee/spec/features/projects/analytics/cycle_analytics_spec.rb visits project VSA (EE view): unlicensed vs licensed behaviour, creating a custom value stream, overview data, the VSD link, guest/auditor access, and the total time chart.
  • ee/spec/features/groups/analytics/cycle_analytics/filters_and_data_spec.rb visits group VSA: empty state, lifecycle metrics, projects filter, filter bar, predefined date ranges, path navigation, stage table, and query parameter handling.
  • ee/spec/features/groups/analytics/cycle_analytics/multiple_value_streams_spec.rb exercises the group value stream new/edit forms end to end: create (including custom stages and hidden defaults), update, reorder stages, duplicate name validation, delete, and the aggregation banner.
  • ee/spec/features/groups/analytics/cycle_analytics/charts_spec.rb covers the duration chart and the tasks by type chart, including chart filters.

QA/E2E

  • qa/qa/specs/features/ee/browser_ui/14_analytics/value_stream_analytics_spec.rb covers creating a group value stream from the default and custom templates and viewing a pre-existing value stream (staging only).

References

Merge request reports