Update usage_overview component

What does this MR do and why?

Relates to #370020 (closed)

In order to enable the pipelines tab vue app (#360785 (closed)) we need to get the app back to feature parity with the current haml view. This is the first of a series of MRs that aims to do that

MR	Description
!95253 (merged)	(👈 you're here) Updates Usage Overview
!95256 (merged)	Updates Usage Graphs
!95259 (merged)	Updates Project List

Screenshots or screen recordings

FF on	FF off

How to set up and validate locally

1. Make sure to enable: ::Gitlab::CurrentSettings.update(check_namespace_plan: true)
2. Make sure you're simulating SaaS
3. Enable the FF: Feature.enable(:usage_quotas_pipelines_vue)
4. Go to any group's usage quotas page
5. Check the usage overview
6. Turn off FF: Feature.disable(:usage_quotas_pipelines_vue)
7. Compare the usage overview
8. To add some data:
   1. Add this to your GitLab settings: ::Gitlab::CurrentSettings.update(shared_runners_minutes: 400)
   2. Project:

      project_usage = Ci::Minutes::ProjectMonthlyUsage.find_or_create_current(project_id: project)
      Ci::Minutes::ProjectMonthlyUsage.update_counters(project_usage, amount_used: 100, shared_runners_duration: 100)

   3. Namespace:

      namespace_usage = Ci::Minutes::NamespaceMonthlyUsage.find_or_create_current(namespace_id: root_namespace)
      Ci::Minutes::NamespaceMonthlyUsage.update_counters(namespace_usage, amount_used: 100, shared_runners_duration: 100)

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.