Skip to content

Draft: Tracing UI - Span Charts

Daniele Rossetti requested to merge rossetd/tracing-details-ui into master

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:

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

image

2023-08-07_19.49.27

(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);

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Daniele Rossetti

Merge request reports