Draft: Tracing UI - Span Charts

What does this MR do and why?

frontend: Trace Details UI (gitlab-org/opstrace/opstrace#2253 - closed)

Tracing UI opensource alternatives we have been using as reference:

• https://signoz.io/docs/userguide/span-details/
• https://www.jaegertracing.io/docs/1.12/frontend-ui/#trace-page

We aim to implement something similar to box 5 in the screenshot on this page https://signoz.io/docs/userguide/span-details/ (if you look closely the screenshot on the page has blue outlines around each of the major page content zones).

Screenshots or screen recordings

(video)

How to set up and validate locally

• Enable FF Feature.enable(:observability_tracing)
• Apply patch to load local mocks ( as running the whole stack is not trivial )

diff --git a/app/assets/javascripts/observability/client.js b/app/assets/javascripts/observability/client.js
index ce542efe902e..d8274a3aa96e 100644
--- a/app/assets/javascripts/observability/client.js
+++ b/app/assets/javascripts/observability/client.js
@@ -1,5 +1,5 @@
 import axios from '~/lib/utils/axios_utils';
-// import mockData from './mock_traces.json';
+import mockData from './mock_traces.json';
 
 function enableTraces() {
   // TODO remove mocks https://gitlab.com/gitlab-org/opstrace/opstrace/-/issues/2271
@@ -25,15 +25,15 @@ async function fetchTrace(tracingUrl, traceId) {
     throw new Error('traceId is required.');
   }
 
-  const { data } = await axios.get(tracingUrl, {
-    withCredentials: true,
-    params: {
-      trace_id: traceId,
-    },
-  });
+  // const { data } = await axios.get(tracingUrl, {
+  //   withCredentials: true,
+  //   params: {
+  //     trace_id: traceId,
+  //   },
+  // });
 
   // TODO: Improve local GDK dev experience with tracing https://gitlab.com/gitlab-org/opstrace/opstrace/-/issues/2308
-  // const data = { traces: [mockData.traces.find((t) => t.trace_id === traceId)] };
+  const data = { traces: [mockData.traces.find((t) => t.trace_id === traceId)] };
 
   if (!Array.isArray(data.traces) || data.traces.length === 0) {
     throw new Error('traces are missing/invalid in the response.'); // eslint-disable-line @gitlab/require-i18n-strings
diff --git a/app/assets/javascripts/observability/components/observability_container.vue b/app/assets/javascripts/observability/components/observability_container.vue
index b7697cea2996..26f6998d5969 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: Improve local GDK dev experience with tracing https://gitlab.com/gitlab-org/opstrace/opstrace/-/issues/2308
     // Uncomment the lines below to to test this locally
-    // 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/dabb7ae1-2501-8e57-18e1-30ab21a9ab19

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.