VSD - [FE] adding "Usage overview" panel

Problem to solve:

Software delivery with GitLab is a black-box for the executive. With the heavy investment they made in GitLab, they want to understand what happened so far and what was the platform usage. This becomes more and more important as remote work grows.

Related to Exec Dashboard: Add overview and summary widgets (#382447 - closed)

Proposal

1. Adding a new batch processing, for counting metrics for a given top-level namespace. Monthly metrics aggregation, no need for real-time. backend issue.
2. Adding a new widget - "Usage overview".
3. Permission Developer and above.
4. GitLab Ultimate only.
5. The widget display the Top group name with counts for: Users, Projects, Groups, Issues, MRs and Pipelines.
6. For this MVC, this new panel won't be displayed with the default VSD configuration, only via the VSD config file.
7. The position of the new panel should be above the comparison panel.

Design	Tooltip	Small screen layout

🖌 Figma specs

Comments:

• On large screens each metrics takes 1/6 of the width
• The margin between the metrics is 24px which helps the spacing and alignment look more correct
• On small screen devices we wrap the metrics into a 2-column layout

Future iterations:

Adding trend charts with schema-driven customizable UI., to vizualzie the total_usage progress over time.

Old tasks

Tasks

• Design
• PoC to verify the efficient approach for the counting.
• Define the database structure where we store the counts
• Implement the counter logic
• Implement the background worker
• Implement the GraphQL API
• FE/Docs