Enable Vue 3 migration rollout for admin usage trends

Brandon Labuschagnerequested to merge
607831-vue3-migrate-usage-trends into master

What does this MR do and why?

Enables the Vue 3 migration rollout for the admin Usage Trends page (app/assets/javascripts/pages/admin/usage_trends).

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

What changed

  • Added config/feature_flags/beta/vue3_migrate_usage_trends.yml
  • Added app/assets/javascripts/pages/admin/usage_trends/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_usage_trends)
  2. Navigate to the admin Usage Trends page (Admin > Analytics > Usage trends, /admin/usage_trends)
  3. Open the browser console and confirm the message: [gitlab] [V] Using Vue.js 3
  4. Verify the total counts tiles render, the projects and groups chart renders, and the pipelines and issues/merge requests charts render

Existing test coverage for the usage trends page

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

Frontend unit tests (Jest), spec/frontend/analytics/usage_trends/

  • components/app_spec.js covers the main app: rendering the usage counts component, the users chart, and a UsageTrendsCountChart for each of "Total projects & groups", "Pipelines", and "Issues & merge requests".
  • components/usage_counts_spec.js covers the counts tiles: the skeleton loader while loading, and rendering a GlSingleStat per measurement (Projects, Groups) from the GraphQL response.
  • components/usage_trends_count_chart_spec.js covers the paginated line charts: issuing one usageTrendsMeasurements query per identifier, the skeleton loader, error alerts when all queries or a single query fail (both on the first page and while fetching more pages), the "no data" info alert, passing fetched data to the line chart (snapshot), and fetching additional pages until hasNextPage is false.
  • components/users_chart_spec.js covers the total users area chart: loading state, the "no data" alert, the error alert, requesting data (including fetchMore pagination), and passing the monthly averaged user counts to the chart.
  • utils_spec.js covers getAverageByMonth (grouping daily counts into monthly averages, optional rounding, edge cases), getEarliestDate, and generateDataKeys.

This suite is not in scripts/frontend/quarantined_vue3_specs.txt, so it runs and must pass in both the jest (Vue 2) and jest vue3 (@vue/compat) CI jobs.

Backend

  • spec/controllers/admin/usage_trends_controller_spec.rb covers the page controller (Admin::UsageTrendsController#index): unique visit tracking and Snowplow event tracking with RedisHLL context.
  • spec/requests/api/graphql/usage_trends_measurements_spec.rb covers the usageTrendsMeasurements GraphQL query the tiles and charts are built from: returning measurements latest first and filtering by recordedAfter/recordedBefore.
  • spec/graphql/resolvers/admin/analytics/usage_trends/measurements_resolver_spec.rb covers the resolver: admin-only authorization (non-admin and unauthenticated users get ResourceNotAvailable), date range filtering, and per-identifier filtering (for example, pipeline counts by pipeline status).

Not covered

  • No feature/system spec visits this page (nothing under spec/features/ references usage trends or the legacy "instance statistics" naming).
  • No QA/E2E spec covers this page.

References

Merge request reports