Move usage quotas transfer data percentage bar to shared Vue component

What does this MR do and why?

Follow-up to !118708 (merged) and preparation for #409155 (closed)

In !118708 (merged) we added a Transfer tab to project Usage quotas that will display data egress used. To learn more about how we will be tracking egress transfer see https://gitlab.com/groups/gitlab-com/-/epics/1664

On that dashboard we are displaying a percentage bar broken down into sections by data types. This is a similar bar to the one shown on the Storage tab. In review it came up that the styling between the two tabs was not consistent. This MR moves the percentage bar to a shared Vue component so we can use it in multiple places and have consistent styling.

Move usage quotas transfer data percentage bar to shared Vue component

So it can be used on the usage quotas storage page and other places.

Screenshots or screen recordings

Project usage quotas

Slight color pallet change to comply with

Before	After

Storybook

How to set up and validate locally

Storybook

1. In the gitlab-development-kit/gitlab directory run yarn storybook:install
2. Run yarn storybook:start
3. If you haven't generated frontend fixtures in the past you probably need to answer y to the first question
4. Choose sectioned_percentage_bar from the sidebar

Project usage quotas

1. Enable the data_transfer_monitoring feature flag.

bin/rails console
Feature.enable(:data_transfer_monitoring)

1. 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
2. Navigate to a project in the group you just seeded.
3. 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.