Backport custom metrics ce components

What does this MR do?

Backport some Code changes from https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/3799 to make merging EE easier.

Is needed to easily port https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/17139 to EE

Are there points in the code the reviewer needs to double check?

Why was this MR needed?

Screenshots (if relevant)

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Documentation created/updated
• API support added
• Tests added for this feature/bug
• Review
  • Has been reviewed by UX
  • Has been reviewed by Frontend
  • Has been reviewed by Backend
  • Has been reviewed by Database
• Conform by the merge request performance guides
• Conform by the style guides
• Squashed related commits together
• Internationalization required/considered
• End-to-end tests pass (package-qa manual pipeline job)

What are the relevant issue numbers?

Related to: https://gitlab.com/gitlab-org/gitlab-ee/issues/2273 & https://gitlab.com/gitlab-org/gitlab-ce/issues/38783