Add usage by type layout to project usage quotas transfer tab

What does this MR do and why?

Related to #387396

We are building a dashboard at the group and project level to track egress data transfer. We started with the group level and now are moving onto the project level. This MR builds the table that shows the breakdown of each egress transfer type. The percentage bar and GraphQL request was previously setup in !118708 (merged)

To learn more about how we will be tracking egress transfer see https://gitlab.com/groups/gitlab-com/-/epics/1664

Screenshots or screen recordings

Before

See !118708 (merged). No changes to the percentage bar. We added the table in this MR.

Loading

Mobile	Desktop

API Success

Mobile	Desktop

How to set up and validate locally

1. Enable the data_transfer_monitoring feature flag.

bin/rails console
Feature.enable(:data_transfer_monitoring)

2. Seed the data
   • Open the console bin/rails console
   • Go to https://gitlab.com/-/snippets/2522604
   • Copy the class and paste it in the console
   • Find a group with some projects in it and make note of the group id (displayed on the overview page)
   • Run PopulateDataTransfer.run(<group_id>) in the console
   • Press q then type exit to get back to the normal command prompt
3. Navigate to a project in the group you just seeded.
4. Navigate to Settings -> Usage quotas -> Transfer

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.