Enable Vue 3 migration rollout for productivity analytics

Brandon Labuschagnerequested to merge
607827-vue3-migrate-productivity-analytics into master

What does this MR do and why?

Enables the Vue 3 migration rollout for the productivity analytics page entrypoints (ee/app/assets/javascripts/pages/groups/analytics/productivity_analytics and ee/app/assets/javascripts/pages/analytics/productivity_analytics).

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

What changed

  • Added config/feature_flags/beta/vue3_migrate_productivity_analytics.yml
  • Added ee/app/assets/javascripts/pages/groups/analytics/productivity_analytics/vue3_migration.yml with status: rollout
  • Added ee/app/assets/javascripts/pages/analytics/productivity_analytics/vue3_migration.yml with status: rollout

No JavaScript or controller changes are needed.

Note: the instance-level entrypoint (ee/app/assets/javascripts/pages/analytics/productivity_analytics) is an orphaned leftover from the removed instance-level analytics workspace; its route and controller were removed in 2020 when productivity analytics moved to the group level, so that bundle never loads at runtime. It is covered here anyway (per the issue plan) so the entrypoint is consistent if it is ever revived or until it is removed.

How to verify

  1. Enable the feature flag: Feature.enable(:vue3_migrate_productivity_analytics)
  2. Navigate to any group's productivity analytics page (Analyze > Productivity analytics, /groups/<group>/-/analytics/productivity_analytics)
  3. Open the browser console and confirm the message: [gitlab] [V] Using Vue.js 3
  4. Verify the time-to-merge histogram and trend charts render, the group, project, and date range filters update the charts, and the scatterplot and merge request table update with the filters

The instance-level page at /-/analytics/productivity_analytics has no active route (see the note above), so only the group-level page can be smoke tested.

Existing test coverage for the productivity 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), ee/spec/frontend/analytics/productivity_analytics/

  • components/app_spec.js covers the main ProductivityApp component: the empty state when no group is selected, the "no access" (403) illustration, loading/loaded/error states for the main days-to-merge column chart, the time-based and commit-based histograms and the scatterplot (metric dropdown changes, axis label updates, chart item selection, the "Clear chart data" button), the merge request table (loading, data, "no data" message, column metric change, pagination, sort field and order controls), and URL parameter syncing.
  • components/filter_dropdowns_spec.js covers the group/project selector: the projects dropdown only renders once a group is selected, and selecting or deselecting a project invokes the setProjectPath store action and emits projectSelected.
  • components/metric_chart_spec.js covers the reusable MetricChart wrapper used by all charts: title, loading indicator, "no data" and "too much data" (500) messages, the metric type dropdown, description text, and chart slot rendering.
  • components/metric_column_spec.js covers the metric column used in table rows: value and unit rendering, a dash for missing values, and the days vs hours unit selection.
  • components/mr_table_row_spec.js covers a merge request table row: author avatar, MR title, metric list, and computed properties (MR id, commit count, LOC per commit, files touched, selected metric).
  • components/mr_table_spec.js covers the merge request table: header and column titles, the column-metric dropdown and its options, one row per merge request, and the columnMetricChange event.
  • store/actions_spec.js, store/mutations_spec.js, and store/store_spec.js cover the root store: setEndpoint and the store initializing with the filters, charts, and table modules.
  • store/modules/charts/ (actions_spec.js, getters_spec.js, mutations_spec.js) covers chart data fetching (API params, histogram vs scatterplot success paths, error path, disabled-chart short circuit), metric type changes, chart item selection and reset, and the getters that shape chart data (selected item colors, scatterplot main and median series, filter params, y-axis labels, the 403 no-access state).
  • store/modules/filters/ (actions_spec.js, getters_spec.js, mutations_spec.js) covers the filter state: initial data, group namespace, project path, filtered-search filters (author, milestone, labels), and date range, each verifying the downstream chart and table refetches, plus the common filter params and scatterplot start date clamping.
  • store/modules/table/ (actions_spec.js, getters_spec.js, mutations_spec.js) covers merge request table fetching (API params, success, error, pagination info), sorting (sort field, sort order, column metric), page changes, and the sort UI getters.
  • utils_spec.js covers the utility functions: labels and milestones endpoints (group vs project), default start date clamping, scatter data transformation, and median line calculation.

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/controllers/groups/analytics/productivity_analytics_controller_spec.rb (#show) covers authorization (403 when unauthorized or unlicensed, group owner and auditor allowed), view_productivity_analytics usage tracking on HTML requests, and the JSON payloads the charts and table are built from: scatterplot data, histogram data, and the paginated merge request list serialized via ProductivityAnalyticsMergeRequestEntity, including invalid parameter handling (422) and sub-group project support.
  • ee/spec/finders/productivity_analytics_finder_spec.rb covers filtering by days_to_merge and merged_at ranges, including clamping merged_after to the productivity analytics start date.
  • ee/spec/lib/analytics/productivity_analytics_request_params_spec.rb covers date parameter validation and defaults.
  • ee/spec/models/productivity_analytics_spec.rb covers the metrics engine: histogram and scatterplot calculations and the extended merge request metric columns with sorting fallback.
  • ee/spec/serializers/productivity_analytics_merge_request_entity_spec.rb covers the serialized metric fields, author avatar URL, and merge request URL.

Feature specs

  • ee/spec/features/groups/analytics/productivity_analytics_spec.rb visits the group-level page and covers valid URL parameters being exposed as data attributes on #js-productivity-analytics, the date range picker rendering the selected dates, and invalid date parameters being dropped. It does not exercise the charts or merge request table end to end.
  • ee/spec/features/groups/active_tabs_spec.rb and ee/spec/features/groups/navbar_spec.rb cover the sidebar link and active tab state for the page.

Not covered

  • No QA/E2E spec covers this page; the only artifact is an unused page-object method (go_to_productivity_analytics in qa/qa/ee/page/group/sub_menus/analyze.rb).
  • The instance-level entrypoint has no route, controller, or tests; it is unreachable dead code (see the note above).

References

Merge request reports