Add Tracing Details UI base Vue components

What does this MR do and why?

On selecting a trace from the traces list, the user is taken to the trace details UI

• Created new Tracing Details base components
• On selecting a trace from the trace list, redirects to the trace details URL

Related BE changes: !126991 (merged)

Closes gitlab-org/opstrace/opstrace#2291 (closed)

(Note this is an Experimental feature. No real customers yet)

Screenshots or screen recordings

How to set up and validate locally

• Enable FF Feature.enable(:observability_tracing)

As running the whole stack is not trivial, apply this diff to just use mock data:

diff --git a/app/assets/javascripts/observability/client.js b/app/assets/javascripts/observability/client.js
index 667bbc107dcc..f6950dc560d0 100644
--- a/app/assets/javascripts/observability/client.js
+++ b/app/assets/javascripts/observability/client.js
@@ -31,10 +31,13 @@ async function fetchTrace(tracingUrl, traceId) {
 }
 
 async function fetchTraces(tracingUrl) {
-  const { data } = await axios.get(tracingUrl, { withCredentials: true });
-  if (!Array.isArray(data.traces)) {
-    throw new Error('traces are missing/invalid in the response.'); // eslint-disable-line @gitlab/require-i18n-strings
-  }
+  // const { data } = await axios.get(tracingUrl, { withCredentials: true });
+  // if (!Array.isArray(data.traces)) {
+  //   throw new Error('traces are missing/invalid in the response.'); // eslint-disable-line @gitlab/require-i18n-strings
+  // }
+
+  const data = mockData;
+
   return data.traces.map((t) => {
     // aggregating duration on the client for now, but expecting to be coming from the backend
     const duration = t.spans.reduce((acc, cur) => acc + cur.duration_nano, 0);
diff --git a/app/assets/javascripts/observability/components/observability_container.vue b/app/assets/javascripts/observability/components/observability_container.vue
index 4306f531ab5e..2ded41463b87 100644
--- a/app/assets/javascripts/observability/components/observability_container.vue
+++ b/app/assets/javascripts/observability/components/observability_container.vue
@@ -33,12 +33,12 @@ export default {
 
     // TODO Remove once backend work done - just for testing
     // https://gitlab.com/gitlab-org/opstrace/opstrace/-/issues/2270
-    // setTimeout(() => {
-    //   this.messageHandler({
-    //     data: { type: 'AUTH_COMPLETION', status: 'success' },
-    //     origin: new URL(this.oauthUrl).origin,
-    //   });
-    // }, 2000);
+    setTimeout(() => {
+      this.messageHandler({
+        data: { type: 'AUTH_COMPLETION', status: 'success' },
+        origin: new URL(this.oauthUrl).origin,
+      });
+    }, 2000);
   },
   destroyed() {
     window.removeEventListener('message', this.messageHandler);

• Go to https://local.gitlab.com:3443/flightjs/Flight/-/tracing
• Select a trace

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.