Integrating Observability UI (ex Opstrace) with GitLab

What does this MR do and why?

gitlab-org/opstrace/opstrace-ui#10 (closed)

• Add new left sidebar nav item "Observability" at group level (UX discussion: #371061 (closed))
• Button links to new Observability page, under ${groupId}/-/observability
• The Observability page should stick to the standard page layout, i.e. main header, sidebar nav and theme should be maintained.
• Add iframe to new Observability page, sourcing https://observe.gitlab.com/-/<groupId>
• Add appropriate CSP policy to allow iframe to load correctly
• Add feature behind Feature Flag

Note about Testing

As part of this MR I've added unit and integration tests, but ideally we'd like to add e2e tests as well to verify that the iframe content renders correctly and can be navigated. This requires that both GitLab and Observability are setup correctly. Since such an e2e tests relies on two independent systems (i.e. gitlab.com and observe.gitlab.com ) we need to come up with a sensible testing strategy. For instance, one option would be to add such an e2e test within the Observability pipeline rather than Gitlab's, so that we don't risk of breaking the main pipeline with changes that we make on the Observability side. I've created a separate issue for this: gitlab-org/opstrace/opstrace-ui#87 (closed)

Follow-up Tasks

• Adjust sidebar UI if Observability is embedded in an iframe: This includes removing the additional GitLab logo from the Observability sidebar and other minor adjustments to the sidebar UI (to be discussed with UX)
• Keep dark/light mode in sync between GitLab and Observability UI: As you can see from the screenshots below, the dark/light themes of GitLab and Observability UI are not in sync (i.e. you can have a Dark GitLab and a Light Observability UI at the same time) and also do not use the same color palette. We are going to fix this separately.
• Improve dev experience with local env or Review Apps

Previous MRs Iterations

• WIP-pt1
• WIP-pt2

Screenshots and screen recordings

How to set up and validate locally

Because of Content Security Policies related to iframes, testing this MR locally is not straightforward. While we are working on enabling support for Reviews App and improving the local dev experience, the quickest way of running this locally for now is to enable HTTPs on your local GDK, and change the hostname to be a subdomain of .gitlab.com e.g. local.gitlab.com

1. Follow the steps detailed here and set your local GDK hostname to local.gitlab.com
2. Follow the steps detailed here to enable HTTPs
3. You should be able to access your local GDK by accessing https://local.gitlab.com:3443/
4. Enable the feature flag

   Feature.enable(:observability_group_tab)

5. Access https://observe.gitlab.com/9970/?groupId=14485840 on a separate tab and login with your GitLab credentials ( this is only needed when testing it locally )
6. Hardcode the iframe URL to: @observability_iframe_src = "https://observe.gitlab.com/9970/?groupId=14485840" (only needed for local testing)
7. Access https://local.gitlab.com:3443/ and login with your local dev credentials
8. Go to a group page, e.g. https://local.gitlab.com:3443/gitlab-org
9. Access the Observability tab from the left navbar

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.