Frontend: Show usage statistics and sort option for popularity in CI Catalog index page

Summary

It is important to measure the number of time each component had been used on a monthly basis. This metrics will allow us to:

1. Measure component popularity
2. Allow users to sort by popularity

This will be behind a disabled FF, ci_catalog_popularity until the BE issue is completed. The final rollout issue is: #464593 (closed)

Competitor analysis

Circle CI allows users to filter by popularity

Click to expand

Proposal

Design spec

Add this metric to the index page, and allow users to sort the catalog projects by usage. This sorting option is not a default option.

• 🔗 Figma
• 👉 Design tab
• We want to show the metric on the index page. The tooltip describes what this metric means if users hover over the element.
  • ⚠ Currently, we don't have any pages to lead on click.
• The icon used here is the chart: https://gitlab-org.gitlab.io/gitlab-svgs/?q=~chart

Implementation Table

Group	Issue Link
backend	Spike: Evaluate how to calculate number of time... (#438409 - closed)
backend	Backend: Component usage instrumentation (#440382 - closed)
backend	Backend: Implement daily worker to aggregate la... (#452545 - closed)
backend	Backend: Add option to sort CI catalog resource... (#452620 - closed)
frontend	👈 You are here
frontend	Frontend: Present the number of times a single ... (#443632 - closed)
backend	Backend: Reduce data retention period and store... (#443681 - closed)
backend	Backend: Implement individual component sorting... (#453975 - closed)