Adding front-end of last 30 day usage count next to component title
-
Please check this box if this contribution uses AI-generated content (including content generated by GitLab Duo features) as outlined in the GitLab DCO & CLA. As a benefit of being a GitLab Community Contributor, you receive complimentary access to GitLab Duo.
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
Screenshots or screen recordings
| Before | After |
|---|---|
![]() |
![]() |
How to set up and validate locally
- Add some components and use them on sample projects.
- 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

