Adding front-end of last 30 day usage count next to component title

What does this MR do and why?

This MR adds last 30-day usage count display for CI catalog components. Each component now shows a chart icon with its usage count next to the component name, helping users identify popular and actively used components.

Key changes:

  • Display usage metrics with chart icon and tooltip in component details view
  • Add last30DayUsageCount field to component mock data for consistent testing
  • Simplify test setup by using centralized mock data instead of complex manipulation
  • Fix missing GlIcon import that was causing ESLint errors

This improves the catalog experience by providing usage insights that help users make informed decisions when selecting components for their CI/CD pipelines.

References

#443632 (closed)

Screenshots or screen recordings

Before After
Screenshot_2025-05-22_at_15-02-24_CI_CD_Catalog___GitLab Screenshot_2025-05-22_at_15-03-19_CI_CD_Catalog___GitLab

How to set up and validate locally

  1. Add some components and use them on sample projects.
  2. See the usages getting updated.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Rajendra Kadam

Merge request reports

Loading