Improve tracing analytics

What does this MR do and why?

This MR includes a set of small improvements to tracing analytics following some initial testing feedback

• Make analytics API call not blocking. As the analytics API call can take long, we don't want to block the whole UI while waiting, and show the trace list right away.
• Add skeleton loader to analytics component
• Fix error rate data parsing - initially assumed values were between [0,1], while they are actually [0,100]
• Fix error rate label string %
• Move resizing logic to parent, so that both charts and list can resize
• Removed some dead come from TracingList component

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

How to set up and validate locally

• Prerequisites: be logged in and running GDK with Ultimate license
• Enable :observability_tracing feature flag

Apply patch to load mocks ( copy the patch content below and run in your terminal: pbpaste | git apply --allow-empty )

diff --git a/app/assets/javascripts/observability/client.js b/app/assets/javascripts/observability/client.js
index 335c70d220c1..f42eadcbd6a9 100644
--- a/app/assets/javascripts/observability/client.js
+++ b/app/assets/javascripts/observability/client.js
@@ -1,22 +1,234 @@
+/* eslint-disable @gitlab/require-i18n-strings */
 import { isValidDate } from '~/lib/utils/datetime_utility';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import axios from '~/lib/utils/axios_utils';
 import { logError } from '~/lib/logger';
 import { DEFAULT_SORTING_OPTION, SORTING_OPTIONS, CUSTOM_DATE_RANGE_OPTION } from './constants';

+const MOCK_TRACES = {
+  project_id: 51792562,
+  traces: [
+    {
+      timestamp: '2023-11-10T20:39:58.981780253Z',
+      timestamp_nano: 1699648798981780253,
+      trace_id: '2b1f08cd-9d10-4ac5-90c3-47fa84ab1c80',
+      service_name: 'featureflagservice',
+      operation: '/',
+      status_code: 'STATUS_CODE_UNSET',
+      duration_nano: 931979,
+      spans: [
+        {
+          timestamp: '2023-11-10T20:39:58.981780253Z',
+          span_id: 'D28D2485217F1874',
+          trace_id: '2b1f08cd-9d10-4ac5-90c3-47fa84ab1c80',
+          service_name: 'featureflagservice',
+          operation: '/',
+          duration_nano: 931979,
+          parent_span_id: '',
+          status_code: 'STATUS_CODE_UNSET',
+        },
+        {
+          timestamp: '2023-11-10T20:39:58.981914178Z',
+          span_id: 'CE64EF2386D5B768',
+          trace_id: '2b1f08cd-9d10-4ac5-90c3-47fa84ab1c80',
+          service_name: 'featureflagservice',
+          operation: 'featureflagservice.repo.query:featureflags',
+          duration_nano: 516542,
+          parent_span_id: 'D28D2485217F1874',
+          status_code: 'STATUS_CODE_UNSET',
+        },
+      ],
+      total_spans: 2,
+      totalSpans: 2,
+    },
+    {
+      timestamp: '2023-11-10T20:39:28.655321683Z',
+      timestamp_nano: 1699648768655321683,
+      trace_id: '68a8cc4d-1403-4561-8721-e42ac8f0ec1b',
+      service_name: 'featureflagservice',
+      operation: '/',
+      status_code: 'STATUS_CODE_UNSET',
+      duration_nano: 806467,
+      spans: [
+        {
+          timestamp: '2023-11-10T20:39:28.655321683Z',
+          span_id: '4AA0BAF116CD904D',
+          trace_id: '68a8cc4d-1403-4561-8721-e42ac8f0ec1b',
+          service_name: 'featureflagservice',
+          operation: '/',
+          duration_nano: 806467,
+          parent_span_id: '',
+          status_code: 'STATUS_CODE_UNSET',
+        },
+        {
+          timestamp: '2023-11-10T20:39:28.655458107Z',
+          span_id: '8716FEC7EF4E8BD9',
+          trace_id: '68a8cc4d-1403-4561-8721-e42ac8f0ec1b',
+          service_name: 'featureflagservice',
+          operation: 'featureflagservice.repo.query:featureflags',
+          duration_nano: 440323,
+          parent_span_id: '4AA0BAF116CD904D',
+          status_code: 'STATUS_CODE_UNSET',
+        },
+      ],
+      total_spans: 2,
+      totalSpans: 2,
+    },
+    {
+      timestamp: '2023-11-10T20:38:58.326464308Z',
+      timestamp_nano: 1699648738326464308,
+      trace_id: '2af9172b-a326-0462-4dac-e7030928f67a',
+      service_name: 'featureflagservice',
+      operation: '/',
+      status_code: 'STATUS_CODE_UNSET',
+      duration_nano: 1199391,
+      spans: [
+        {
+          timestamp: '2023-11-10T20:38:58.326464308Z',
+          span_id: 'C8701AF08593B86B',
+          trace_id: '2af9172b-a326-0462-4dac-e7030928f67a',
+          service_name: 'featureflagservice',
+          operation: '/',
+          duration_nano: 1199391,
+          parent_span_id: '',
+          status_code: 'STATUS_CODE_UNSET',
+        },
+        {
+          timestamp: '2023-11-10T20:38:58.326669557Z',
+          span_id: '5A26A5CDAAFEAAE1',
+          trace_id: '2af9172b-a326-0462-4dac-e7030928f67a',
+          service_name: 'featureflagservice',
+          operation: 'featureflagservice.repo.query:featureflags',
+          duration_nano: 606424,
+          parent_span_id: 'C8701AF08593B86B',
+          status_code: 'STATUS_CODE_UNSET',
+        },
+      ],
+      total_spans: 2,
+      totalSpans: 2,
+    },
+    {
+      timestamp: '2023-11-10T20:38:28.003531546Z',
+      timestamp_nano: 1699648708003531546,
+      trace_id: '8f6293ce-895e-8c23-8966-03b9b6b60625',
+      service_name: 'featureflagservice',
+      operation: '/',
+      status_code: 'STATUS_CODE_UNSET',
+      duration_nano: 830728,
+      spans: [
+        {
+          timestamp: '2023-11-10T20:38:28.003531546Z',
+          span_id: '1F03B387DE6C523B',
+          trace_id: '8f6293ce-895e-8c23-8966-03b9b6b60625',
+          service_name: 'featureflagservice',
+          operation: '/',
+          duration_nano: 830728,
+          parent_span_id: '',
+          status_code: 'STATUS_CODE_UNSET',
+        },
+        {
+          timestamp: '2023-11-10T20:38:28.00366749Z',
+          span_id: 'DD8501683E1D3F89',
+          trace_id: '8f6293ce-895e-8c23-8966-03b9b6b60625',
+          service_name: 'featureflagservice',
+          operation: 'featureflagservice.repo.query:featureflags',
+          duration_nano: 427162,
+          parent_span_id: '1F03B387DE6C523B',
+          status_code: 'STATUS_CODE_UNSET',
+        },
+      ],
+      total_spans: 2,
+      totalSpans: 2,
+    },
+    {
+      timestamp: '2023-11-10T20:37:57.682713952Z',
+      timestamp_nano: 1699648677682713952,
+      trace_id: 'd057c76c-1032-59e0-8a8d-d4cbca420107',
+      service_name: 'featureflagservice',
+      operation: '/',
+      status_code: 'STATUS_CODE_UNSET',
+      duration_nano: 850928,
+      spans: [
+        {
+          timestamp: '2023-11-10T20:37:57.682713952Z',
+          span_id: 'C57FA0DFAD04CCC1',
+          trace_id: 'd057c76c-1032-59e0-8a8d-d4cbca420107',
+          service_name: 'featureflagservice',
+          operation: '/',
+          duration_nano: 850928,
+          parent_span_id: '',
+          status_code: 'STATUS_CODE_UNSET',
+        },
+        {
+          timestamp: '2023-11-10T20:37:57.682852917Z',
+          span_id: 'CFC23BEC4B935D8F',
+          trace_id: 'd057c76c-1032-59e0-8a8d-d4cbca420107',
+          service_name: 'featureflagservice',
+          operation: 'featureflagservice.repo.query:featureflags',
+          duration_nano: 467103,
+          parent_span_id: 'C57FA0DFAD04CCC1',
+          status_code: 'STATUS_CODE_UNSET',
+        },
+      ],
+      total_spans: 2,
+      totalSpans: 2,
+    },
+    {
+      timestamp: '2023-11-10T20:37:27.360383093Z',
+      timestamp_nano: 1699648647360383093,
+      trace_id: 'a6abd9ca-2299-e964-d233-3b782c8f5679',
+      service_name: 'featureflagservice',
+      operation: '/',
+      status_code: 'STATUS_CODE_UNSET',
+      duration_nano: 851823,
+      spans: [
+        {
+          timestamp: '2023-11-10T20:37:27.360383093Z',
+          span_id: 'B39BEA97214DDC03',
+          trace_id: 'a6abd9ca-2299-e964-d233-3b782c8f5679',
+          service_name: 'featureflagservice',
+          operation: '/',
+          duration_nano: 851823,
+          parent_span_id: '',
+          status_code: 'STATUS_CODE_UNSET',
+        },
+        {
+          timestamp: '2023-11-10T20:37:27.360521433Z',
+          span_id: '64C63AB1CC3D1640',
+          trace_id: 'a6abd9ca-2299-e964-d233-3b782c8f5679',
+          service_name: 'featureflagservice',
+          operation: 'featureflagservice.repo.query:featureflags',
+          duration_nano: 455900,
+          parent_span_id: 'B39BEA97214DDC03',
+          status_code: 'STATUS_CODE_UNSET',
+        },
+      ],
+      total_spans: 2,
+      totalSpans: 2,
+    },
+  ],
+  total_traces: 6,
+  next_page_token:
+    'eyJsYXN0X3NlZW5fdGltZXN0YW1wIjoiMjAyMy0xMS0xMCAxNjoyNzo0Ny4xMDQ0NzcwOTIiLCJzZWVuX3RyYWNlX2lkcyI6WyI2ZTI0NjFjZS04MWVmLTRkYWItN2ZmYS1hMTRlMDRiODhmNWUiXX0=',
+};
+
 function reportErrorAndThrow(e) {
   logError(e);
   Sentry.captureException(e);
   throw e;
 }
+
+function mockReturnDataWithDelay(data, delay = 500) {
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(data), delay);
+  });
+}
+
 // Provisioning API spec: https://gitlab.com/gitlab-org/opstrace/opstrace/-/blob/main/provisioning-api/pkg/provisioningapi/routes.go#L59
 async function enableObservability(provisioningUrl) {
   try {
-    // Note: axios.put(url, undefined, {withCredentials: true}) does not send cookies properly, so need to use the API below for the correct behaviour
-    return await axios(provisioningUrl, {
-      method: 'put',
-      withCredentials: true,
-    });
+    console.log('[DEBUG] Enabling Observability');
+    return mockReturnDataWithDelay();
   } catch (e) {
     return reportErrorAndThrow(e);
   }
@@ -25,11 +237,12 @@ async function enableObservability(provisioningUrl) {
 // Provisioning API spec: https://gitlab.com/gitlab-org/opstrace/opstrace/-/blob/main/provisioning-api/pkg/provisioningapi/routes.go#L37
 async function isObservabilityEnabled(provisioningUrl) {
   try {
-    const { data } = await axios.get(provisioningUrl, { withCredentials: true });
+    console.log('[DEBUG] Checking Observability Enabled');
+    const data = { status: 'ready' };
     if (data && data.status) {
       // we currently ignore the 'status' payload and just check if the request was successful
       // We might improve this as part of https://gitlab.com/gitlab-org/opstrace/opstrace/-/issues/2315
-      return true;
+      return mockReturnDataWithDelay(true);
     }
   } catch (e) {
     if (e.response.status === 404) {
@@ -41,19 +254,109 @@ async function isObservabilityEnabled(provisioningUrl) {
 }

 async function fetchTrace(tracingUrl, traceId) {
-  try {
-    if (!traceId) {
-      throw new Error('traceId is required.');
-    }
-
-    const { data } = await axios.get(`${tracingUrl}/${traceId}`, {
-      withCredentials: true,
-    });
-
-    return data;
-  } catch (e) {
-    return reportErrorAndThrow(e);
-  }
+  console.log(`[DEBUG] Fetch trace ${traceId} from ${tracingUrl}`);
+  return mockReturnDataWithDelay({
+    timestamp: '2023-11-06T14:58:38.892999936Z',
+    trace_id: 'cfa0e008-002f-5505-0d05-31855d493ea0',
+    service_name: 'frontend',
+    operation: 'HTTP POST',
+    status_code: 'STATUS_CODE_UNSET',
+    duration_nano: 6870528,
+    spans: [
+      {
+        timestamp: '2023-11-06T14:58:38.892999936Z',
+        span_id: '86C2CAF54D03A839',
+        trace_id: 'cfa0e008-002f-5505-0d05-31855d493ea0',
+        service_name: 'frontend',
+        operation: 'HTTP POST',
+        duration_nano: 6870528,
+        parent_span_id: '',
+        status_code: 'STATUS_CODE_UNSET',
+      },
+      {
+        timestamp: '2023-11-06T14:58:38.792999900Z',
+        span_id: '5E95BA1D4DCA629C',
+        trace_id: 'cfa0e008-002f-5505-0d05-31855d493ea0',
+        service_name: 'frontend',
+        operation: 'grpc.oteldemo.CartService/AddItem',
+        duration_nano: 4674123,
+        parent_span_id: '86C2CAF54D03A839',
+        status_code: 'STATUS_CODE_UNSET',
+      },
+      {
+        timestamp: '2023-11-06T14:58:38.897313Z',
+        span_id: '79A1A33CCC36DC44',
+        trace_id: 'cfa0e008-002f-5505-0d05-31855d493ea0',
+        service_name: 'cartservice',
+        operation: 'oteldemo.CartService/AddItem',
+        duration_nano: 1138200,
+        parent_span_id: '5E95BA1D4DCA629C',
+        status_code: 'STATUS_CODE_UNSET',
+      },
+      {
+        timestamp: '2023-11-06T14:58:38.8974467Z',
+        span_id: 'B43E6CFFD9AF4A68',
+        trace_id: 'cfa0e008-002f-5505-0d05-31855d493ea0',
+        service_name: 'cartservice',
+        operation: 'HGET',
+        duration_nano: 360700,
+        parent_span_id: '79A1A33CCC36DC44',
+        status_code: 'STATUS_CODE_UNSET',
+      },
+      {
+        timestamp: '2023-11-06T14:58:38.8978547Z',
+        span_id: '80169B2C61AF41EF',
+        trace_id: 'cfa0e008-002f-5505-0d05-31855d493ea0',
+        service_name: 'cartservice',
+        operation: 'HMSET',
+        duration_nano: 249500,
+        parent_span_id: '79A1A33CCC36DC44',
+        status_code: 'STATUS_CODE_UNSET',
+      },
+      {
+        timestamp: '2023-11-06T14:58:38.897999872Z',
+        span_id: '6C4E28FE982F2F73',
+        trace_id: 'cfa0e008-002f-5505-0d05-31855d493ea0',
+        service_name: 'frontend',
+        operation: 'grpc.oteldemo.CartService/GetCart',
+        duration_nano: 1346816,
+        parent_span_id: '86C2CAF54D03A839',
+        status_code: 'STATUS_CODE_UNSET',
+      },
+      {
+        timestamp: '2023-11-06T14:58:38.8981128Z',
+        span_id: '427F06B0B498A482',
+        trace_id: 'cfa0e008-002f-5505-0d05-31855d493ea0',
+        service_name: 'cartservice',
+        operation: 'EXPIRE',
+        duration_nano: 252200,
+        parent_span_id: '79A1A33CCC36DC44',
+        status_code: 'STATUS_CODE_UNSET',
+      },
+      {
+        timestamp: '2023-11-06T14:58:38.8995004Z',
+        span_id: 'FF45FE0F8C45FD68',
+        trace_id: 'cfa0e008-002f-5505-0d05-31855d493ea0',
+        service_name: 'cartservice',
+        operation: 'oteldemo.CartService/GetCart',
+        duration_nano: 512400,
+        parent_span_id: '6C4E28FE982F2F73',
+        status_code: 'STATUS_CODE_UNSET',
+      },
+      {
+        timestamp: '2023-11-06T14:58:38.8996313Z',
+        span_id: 'F6D0D268E8A84A38',
+        trace_id: 'cfa0e008-002f-5505-0d05-31855d493ea0',
+        service_name: 'cartservice',
+        operation: 'HGET',
+        duration_nano: 290700,
+        parent_span_id: 'FF45FE0F8C45FD68',
+        status_code: 'STATUS_CODE_UNSET',
+      },
+    ],
+    total_spans: 9,
+    totalSpans: 9,
+  });
 }

 /**
@@ -238,15 +541,15 @@ async function fetchTraces(tracingUrl, { filters = {}, pageToken, pageSize, sort
     : DEFAULT_SORTING_OPTION;
   params.append('sort', sortOrder);

+  console.log(`[DEBUG] Fetching traces with params: ${params.toString()}`);
+
   try {
-    const { data } = await axios.get(tracingUrl, {
-      withCredentials: true,
-      params,
-    });
+    const data = MOCK_TRACES;
+
     if (!Array.isArray(data.traces)) {
       throw new Error('traces are missing/invalid in the response'); // eslint-disable-line @gitlab/require-i18n-strings
     }
-    return data;
+    return mockReturnDataWithDelay(data);
   } catch (e) {
     return reportErrorAndThrow(e);
   }
@@ -255,12 +558,565 @@ async function fetchTraces(tracingUrl, { filters = {}, pageToken, pageSize, sort
 async function fetchTracesAnalytics(tracingAnalyticsUrl, { filters = {} } = {}) {
   const params = tracingFilterObjToQueryParams(filters);

+  console.log(`[DEBUG] Fetching analytics with params: ${params.toString()}`);
+
   try {
-    const { data } = await axios.get(tracingAnalyticsUrl, {
-      withCredentials: true,
-      params,
-    });
-    return data.results ?? [];
+    return mockReturnDataWithDelay(
+      [
+        {
+          interval: 1706456580,
+          count: 272,
+          p90_duration_nano: 79431434,
+          p95_duration_nano: 172512624,
+          p75_duration_nano: 33666014,
+          p50_duration_nano: 13540992,
+          trace_rate: 4.533333333333333,
+        },
+        {
+          interval: 1706456640,
+          count: 322,
+          p90_duration_nano: 245701137,
+          p95_duration_nano: 410402110,
+          p75_duration_nano: 126097516,
+          p50_duration_nano: 26955796,
+          trace_rate: 5.366666666666666,
+        },
+        {
+          interval: 1706456700,
+          count: 317,
+          p90_duration_nano: 57725645,
+          p95_duration_nano: 108238301,
+          p75_duration_nano: 22083152,
+          p50_duration_nano: 9805219,
+          trace_rate: 5.283333333333333,
+        },
+        {
+          interval: 1706456760,
+          count: 305,
+          p90_duration_nano: 41273392,
+          p95_duration_nano: 59172159,
+          p75_duration_nano: 13839742,
+          p50_duration_nano: 7781631,
+          trace_rate: 5.083333333333333,
+        },
+        {
+          interval: 1706456820,
+          count: 265,
+          p90_duration_nano: 22710314,
+          p95_duration_nano: 48594102,
+          p75_duration_nano: 12042993,
+          p50_duration_nano: 7631276,
+          trace_rate: 4.416666666666667,
+        },
+        {
+          interval: 1706456880,
+          count: 325,
+          p90_duration_nano: 36954214,
+          p95_duration_nano: 68456357,
+          p75_duration_nano: 15495574,
+          p50_duration_nano: 8469740,
+          trace_rate: 5.416666666666667,
+        },
+        {
+          interval: 1706456940,
+          count: 318,
+          p90_duration_nano: 44410888,
+          p95_duration_nano: 65699400,
+          p75_duration_nano: 16393502,
+          p50_duration_nano: 7961675,
+          trace_rate: 5.3,
+        },
+        {
+          interval: 1706457000,
+          count: 337,
+          p90_duration_nano: 34717561,
+          p95_duration_nano: 59336335,
+          p75_duration_nano: 13571795,
+          p50_duration_nano: 7733784,
+          trace_rate: 5.616666666666666,
+        },
+        {
+          interval: 1706457060,
+          count: 387,
+          p90_duration_nano: 32907588,
+          p95_duration_nano: 60445860,
+          p75_duration_nano: 13641362,
+          p50_duration_nano: 7798726,
+          trace_rate: 6.45,
+        },
+        {
+          interval: 1706457120,
+          count: 301,
+          p90_duration_nano: 27987584,
+          p95_duration_nano: 67325297,
+          p75_duration_nano: 12790384,
+          p50_duration_nano: 7757298,
+          trace_rate: 5.016666666666667,
+        },
+        {
+          interval: 1706457180,
+          count: 333,
+          p90_duration_nano: 31476253,
+          p95_duration_nano: 55323485,
+          p75_duration_nano: 13947276,
+          p50_duration_nano: 8006820,
+          trace_rate: 5.55,
+        },
+        {
+          interval: 1706457240,
+          count: 352,
+          p90_duration_nano: 21262407,
+          p95_duration_nano: 54958789,
+          p75_duration_nano: 11896249,
+          p50_duration_nano: 7312890,
+          trace_rate: 5.866666666666666,
+        },
+        {
+          interval: 1706457300,
+          count: 281,
+          p90_duration_nano: 21512699,
+          p95_duration_nano: 29312319,
+          p75_duration_nano: 12753142,
+          p50_duration_nano: 7513485,
+          trace_rate: 4.683333333333334,
+        },
+        {
+          interval: 1706457360,
+          count: 376,
+          p90_duration_nano: 27093433,
+          p95_duration_nano: 56742286,
+          p75_duration_nano: 14058002,
+          p50_duration_nano: 8110594,
+          trace_rate: 6.266666666666667,
+        },
+        {
+          interval: 1706457420,
+          count: 332,
+          p90_duration_nano: 21081844,
+          p95_duration_nano: 55775376,
+          p75_duration_nano: 12217809,
+          p50_duration_nano: 7679078,
+          trace_rate: 5.533333333333333,
+        },
+        {
+          interval: 1706457480,
+          count: 304,
+          p90_duration_nano: 39703897,
+          p95_duration_nano: 53297967,
+          p75_duration_nano: 13717898,
+          p50_duration_nano: 7994348,
+          trace_rate: 5.066666666666666,
+        },
+        {
+          interval: 1706457540,
+          count: 254,
+          p90_duration_nano: 23036019,
+          p95_duration_nano: 40939144,
+          p75_duration_nano: 15023150,
+          p50_duration_nano: 8124892,
+          trace_rate: 4.233333333333333,
+        },
+        {
+          interval: 1706457600,
+          count: 253,
+          p90_duration_nano: 27045480,
+          p95_duration_nano: 48833417,
+          p75_duration_nano: 13829965,
+          p50_duration_nano: 7333832,
+          trace_rate: 4.216666666666667,
+        },
+        {
+          interval: 1706457660,
+          count: 289,
+          p90_duration_nano: 23766179,
+          p95_duration_nano: 52720179,
+          p75_duration_nano: 13620996,
+          p50_duration_nano: 7135943,
+          trace_rate: 4.816666666666666,
+        },
+        {
+          interval: 1706457720,
+          count: 315,
+          p90_duration_nano: 38767674,
+          p95_duration_nano: 60896167,
+          p75_duration_nano: 13728748,
+          p50_duration_nano: 8062914,
+          trace_rate: 5.25,
+        },
+        {
+          interval: 1706457780,
+          count: 375,
+          p90_duration_nano: 36013005,
+          p95_duration_nano: 58635150,
+          p75_duration_nano: 13773369,
+          p50_duration_nano: 8222391,
+          trace_rate: 6.25,
+        },
+        {
+          interval: 1706457840,
+          count: 308,
+          p90_duration_nano: 35323907,
+          p95_duration_nano: 58595063,
+          p75_duration_nano: 14814055,
+          p50_duration_nano: 8134352,
+          error_count: 1,
+          trace_rate: 5.133333333333334,
+          error_rate: 0.016666666666666666,
+        },
+        {
+          interval: 1706457900,
+          count: 333,
+          p90_duration_nano: 44315056,
+          p95_duration_nano: 72226313,
+          p75_duration_nano: 13889160,
+          p50_duration_nano: 7923700,
+          trace_rate: 5.55,
+        },
+        {
+          interval: 1706457960,
+          count: 317,
+          p90_duration_nano: 28259103,
+          p95_duration_nano: 52709872,
+          p75_duration_nano: 14465300,
+          p50_duration_nano: 8458325,
+          trace_rate: 5.283333333333333,
+        },
+        {
+          interval: 1706458020,
+          count: 295,
+          p90_duration_nano: 65575771,
+          p95_duration_nano: 105888062,
+          p75_duration_nano: 21958893,
+          p50_duration_nano: 9598912,
+          trace_rate: 4.916666666666667,
+        },
+        {
+          interval: 1706458080,
+          count: 295,
+          p90_duration_nano: 24436118,
+          p95_duration_nano: 51572675,
+          p75_duration_nano: 15173781,
+          p50_duration_nano: 8715377,
+          trace_rate: 4.916666666666667,
+        },
+        {
+          interval: 1706458140,
+          count: 306,
+          p90_duration_nano: 23505445,
+          p95_duration_nano: 43799164,
+          p75_duration_nano: 11844148,
+          p50_duration_nano: 7564427,
+          trace_rate: 5.1,
+        },
+        {
+          interval: 1706458200,
+          count: 309,
+          p90_duration_nano: 19308303,
+          p95_duration_nano: 49772529,
+          p75_duration_nano: 11456016,
+          p50_duration_nano: 7182270,
+          trace_rate: 5.15,
+        },
+        {
+          interval: 1706458260,
+          count: 300,
+          p90_duration_nano: 52210503,
+          p95_duration_nano: 88646000,
+          p75_duration_nano: 16802765,
+          p50_duration_nano: 8720694,
+          trace_rate: 5,
+        },
+        {
+          interval: 1706458320,
+          count: 302,
+          p90_duration_nano: 24741420,
+          p95_duration_nano: 70086661,
+          p75_duration_nano: 14095069,
+          p50_duration_nano: 7729995,
+          trace_rate: 5.033333333333333,
+        },
+        {
+          interval: 1706458380,
+          count: 239,
+          p90_duration_nano: 23741328,
+          p95_duration_nano: 43663022,
+          p75_duration_nano: 13789931,
+          p50_duration_nano: 7691321,
+          trace_rate: 3.9833333333333334,
+        },
+        {
+          interval: 1706458440,
+          count: 274,
+          p90_duration_nano: 43050389,
+          p95_duration_nano: 75748560,
+          p75_duration_nano: 19640043,
+          p50_duration_nano: 9362896,
+          trace_rate: 4.566666666666666,
+        },
+        {
+          interval: 1706458500,
+          count: 284,
+          p90_duration_nano: 38022093,
+          p95_duration_nano: 76537140,
+          p75_duration_nano: 17754634,
+          p50_duration_nano: 9713191,
+          trace_rate: 4.733333333333333,
+        },
+        {
+          interval: 1706458560,
+          count: 337,
+          p90_duration_nano: 52097324,
+          p95_duration_nano: 92626247,
+          p75_duration_nano: 23782307,
+          p50_duration_nano: 10728151,
+          trace_rate: 5.616666666666666,
+        },
+        {
+          interval: 1706458620,
+          count: 314,
+          p90_duration_nano: 48091564,
+          p95_duration_nano: 74307337,
+          p75_duration_nano: 16835916,
+          p50_duration_nano: 8808724,
+          trace_rate: 5.233333333333333,
+        },
+        {
+          interval: 1706458680,
+          count: 339,
+          p90_duration_nano: 41366871,
+          p95_duration_nano: 80304569,
+          p75_duration_nano: 18038716,
+          p50_duration_nano: 9224320,
+          trace_rate: 5.65,
+        },
+        {
+          interval: 1706458740,
+          count: 357,
+          p90_duration_nano: 29929149,
+          p95_duration_nano: 78307518,
+          p75_duration_nano: 14780702,
+          p50_duration_nano: 8427422,
+          trace_rate: 5.95,
+        },
+        {
+          interval: 1706458800,
+          count: 324,
+          p90_duration_nano: 31840009,
+          p95_duration_nano: 55491486,
+          p75_duration_nano: 14861251,
+          p50_duration_nano: 8223113,
+          trace_rate: 5.4,
+        },
+        {
+          interval: 1706458860,
+          count: 333,
+          p90_duration_nano: 39294045,
+          p95_duration_nano: 69730899,
+          p75_duration_nano: 15199295,
+          p50_duration_nano: 8041218,
+          trace_rate: 5.55,
+        },
+        {
+          interval: 1706458920,
+          count: 294,
+          p90_duration_nano: 48568979,
+          p95_duration_nano: 66760311,
+          p75_duration_nano: 18509137,
+          p50_duration_nano: 8499614,
+          trace_rate: 4.9,
+        },
+        {
+          interval: 1706458980,
+          count: 322,
+          p90_duration_nano: 34160095,
+          p95_duration_nano: 73983061,
+          p75_duration_nano: 16050561,
+          p50_duration_nano: 8516281,
+          trace_rate: 5.366666666666666,
+        },
+        {
+          interval: 1706459040,
+          count: 313,
+          p90_duration_nano: 32734476,
+          p95_duration_nano: 58744260,
+          p75_duration_nano: 16117332,
+          p50_duration_nano: 8559912,
+          trace_rate: 5.216666666666667,
+        },
+        {
+          interval: 1706459100,
+          count: 276,
+          p90_duration_nano: 37665643,
+          p95_duration_nano: 62453984,
+          p75_duration_nano: 17482104,
+          p50_duration_nano: 8980269,
+          trace_rate: 4.6,
+        },
+        {
+          interval: 1706459160,
+          count: 290,
+          p90_duration_nano: 28988900,
+          p95_duration_nano: 60153241,
+          p75_duration_nano: 15246382,
+          p50_duration_nano: 9369509,
+          trace_rate: 4.833333333333333,
+        },
+        {
+          interval: 1706459220,
+          count: 344,
+          p90_duration_nano: 32009664,
+          p95_duration_nano: 60140125,
+          p75_duration_nano: 13938408,
+          p50_duration_nano: 8126050,
+          trace_rate: 5.733333333333333,
+        },
+        {
+          interval: 1706459280,
+          count: 316,
+          p90_duration_nano: 52721520,
+          p95_duration_nano: 84303627,
+          p75_duration_nano: 15076925,
+          p50_duration_nano: 8778278,
+          trace_rate: 5.266666666666667,
+        },
+        {
+          interval: 1706459340,
+          count: 295,
+          p90_duration_nano: 24832023,
+          p95_duration_nano: 62248214,
+          p75_duration_nano: 15355056,
+          p50_duration_nano: 8533624,
+          trace_rate: 4.916666666666667,
+        },
+        {
+          interval: 1706459400,
+          count: 262,
+          p90_duration_nano: 27520722,
+          p95_duration_nano: 37179599,
+          p75_duration_nano: 11981362,
+          p50_duration_nano: 7617786,
+          trace_rate: 4.366666666666666,
+        },
+        {
+          interval: 1706459460,
+          count: 417,
+          p90_duration_nano: 53926059,
+          p95_duration_nano: 85566298,
+          p75_duration_nano: 21019065,
+          p50_duration_nano: 9890689,
+          trace_rate: 6.95,
+        },
+        {
+          interval: 1706459520,
+          count: 334,
+          p90_duration_nano: 34375886,
+          p95_duration_nano: 74525278,
+          p75_duration_nano: 15708046,
+          p50_duration_nano: 8980976,
+          trace_rate: 5.566666666666666,
+        },
+        {
+          interval: 1706459580,
+          count: 263,
+          p90_duration_nano: 54832011,
+          p95_duration_nano: 67796652,
+          p75_duration_nano: 21589090,
+          p50_duration_nano: 9274608,
+          trace_rate: 4.383333333333334,
+        },
+        {
+          interval: 1706459640,
+          count: 316,
+          p90_duration_nano: 46634902,
+          p95_duration_nano: 69433245,
+          p75_duration_nano: 20396987,
+          p50_duration_nano: 10372056,
+          trace_rate: 5.266666666666667,
+        },
+        {
+          interval: 1706459700,
+          count: 308,
+          p90_duration_nano: 66665032,
+          p95_duration_nano: 95091833,
+          p75_duration_nano: 28659709,
+          p50_duration_nano: 12735573,
+          trace_rate: 5.133333333333334,
+        },
+        {
+          interval: 1706459760,
+          count: 326,
+          p90_duration_nano: 96225070,
+          p95_duration_nano: 209633183,
+          p75_duration_nano: 27851595,
+          p50_duration_nano: 12716064,
+          trace_rate: 5.433333333333334,
+        },
+        {
+          interval: 1706459820,
+          count: 310,
+          p90_duration_nano: 84154378,
+          p95_duration_nano: 117682796,
+          p75_duration_nano: 34703061,
+          p50_duration_nano: 13423725,
+          trace_rate: 5.166666666666667,
+        },
+        {
+          interval: 1706459880,
+          count: 353,
+          p90_duration_nano: 47483129,
+          p95_duration_nano: 74255470,
+          p75_duration_nano: 19082901,
+          p50_duration_nano: 9235607,
+          trace_rate: 5.883333333333334,
+        },
+        {
+          interval: 1706459940,
+          count: 297,
+          p90_duration_nano: 107179972,
+          p95_duration_nano: 208361541,
+          p75_duration_nano: 38709056,
+          p50_duration_nano: 13218117,
+          trace_rate: 4.95,
+        },
+        {
+          interval: 1706460000,
+          count: 300,
+          p90_duration_nano: 38830199,
+          p95_duration_nano: 68655804,
+          p75_duration_nano: 18297327,
+          p50_duration_nano: 9839759,
+          trace_rate: 5,
+        },
+        {
+          interval: 1706460060,
+          count: 336,
+          p90_duration_nano: 55658849,
+          p95_duration_nano: 83612862,
+          p75_duration_nano: 22518070,
+          p50_duration_nano: 10190903,
+          trace_rate: 5.6,
+        },
+        {
+          interval: 1706460120,
+          count: 278,
+          p90_duration_nano: 41078106,
+          p95_duration_nano: 69527419,
+          p75_duration_nano: 17581239,
+          p50_duration_nano: 9156243,
+          trace_rate: 4.633333333333334,
+        },
+        {
+          interval: 1706460180,
+          count: 156,
+          p90_duration_nano: 273579241,
+          p95_duration_nano: 420841263,
+          p75_duration_nano: 108696560,
+          p50_duration_nano: 32458663,
+          trace_rate: 2.6,
+        },
+      ],
+      2000,
+    );
   } catch (e) {
     return reportErrorAndThrow(e);
   }
@@ -268,15 +1124,17 @@ async function fetchTracesAnalytics(tracingAnalyticsUrl, { filters = {} } = {})

 async function fetchServices(servicesUrl) {
   try {
-    const { data } = await axios.get(servicesUrl, {
-      withCredentials: true,
-    });
+    console.log(`[DEBUG] Fetching services from ${servicesUrl}`);
+    const uniqueServices = new Set(
+      MOCK_TRACES.traces.map((t) => t.spans.map((s) => s.service_name)).flat(),
+    );
+    const data = { services: Array.from(uniqueServices).map((s) => ({ name: s })) };

     if (!Array.isArray(data.services)) {
       throw new Error('failed to fetch services. invalid response'); // eslint-disable-line @gitlab/require-i18n-strings
     }

-    return data.services;
+    return mockReturnDataWithDelay(data.services);
   } catch (e) {
     return reportErrorAndThrow(e);
   }
@@ -291,15 +1149,21 @@ async function fetchOperations(operationsUrl, serviceName) {
       throw new Error('fetchOperations() - operationsUrl must contain $SERVICE_NAME$');
     }
     const url = operationsUrl.replace('$SERVICE_NAME$', serviceName);
-    const { data } = await axios.get(url, {
-      withCredentials: true,
-    });
+
+    console.log('[DEBUG] fetching operations suggestions from', url); // eslint-disable-line @gitlab/require-i18n-strings
+    const uniqOps = new Set(
+      MOCK_TRACES.traces
+        .map((t) => t.spans.filter((s) => s.service_name === serviceName))
+        .flat()
+        .map((s) => s.operation),
+    );
+    const data = { operations: Array.from(uniqOps).map((s) => ({ name: s })) };

     if (!Array.isArray(data.operations)) {
       throw new Error('failed to fetch operations. invalid response'); // eslint-disable-line @gitlab/require-i18n-strings
     }

-    return data.operations;
+    return mockReturnDataWithDelay(data.operations);
   } catch (e) {
     return reportErrorAndThrow(e);
   }
diff --git a/app/assets/javascripts/observability/components/observability_container.vue b/app/assets/javascripts/observability/components/observability_container.vue
index b89c2624f81c..f6cbf7ee771f 100644
--- a/app/assets/javascripts/observability/components/observability_container.vue
+++ b/app/assets/javascripts/observability/components/observability_container.vue
@@ -27,12 +27,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.apiConfig.oauthUrl).origin,
+      });
+    }, 2000);
   },
   destroyed() {
     window.removeEventListener('message', this.messageHandler);

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

assigned to @drosse

added frontend label

	1 Warning
	featureaddition and featureenhancement merge requests normally have a documentation change. Consider adding a documentation update or confirming the documentation plan with the Technical Writer counterpart. For more information, see: The Handbook page on merge request types. The definition of done documentation.

	1 Message
	CHANGELOG missing: If this merge request needs a changelog entry, add the Changelog trailer to the commit message you want to add to the changelog. If this merge request doesn't need a CHANGELOG entry, feel free to ignore this message.

Reviewer roulette

Category	Reviewer	Maintainer
frontend	@leetickett-gitlab (UTC+0, 1 hour behind author)	@vitallium (UTC+1, same timezone as author)

Please check reviewer's status!

• Reviewer is available!
• Reviewer is unavailable!

Please refer to documentation page for guidance on how you can benefit from the Reviewer Roulette, or use the GitLab Review Workload Dashboard to find other available reviewers.

If needed, you can retry the danger-review job that generated this comment.

Generated by Danger

Proper labels assigned to this merge request. Please ignore me.

@drosse - please see the following guidance and update this merge request.

	1 Error
	Please add typebug typefeature, or typemaintenance label to this merge request.

Bundle size analysis [beta]

This compares changes in bundle size for entry points between the commits e51b756f and 4b42e410

Special assets

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
average	4.13 MB	4.13 MB	-	0.0 %
mainChunk	3.13 MB	3.13 MB	-	0.0 %

---

Note: We do not have exact data for e51b756f. So we have used data from: 4e802f7e.
The intended commit has no webpack pipeline, so we chose the last commit with one before it.

Please look at the full report for more details

---

Read more about how this report works.

Generated by Danger

E2E Test Result Summary

allure-report-publisher generated test report!

e2e-test-on-gdk: test report for 4b42e410

expand test summary

+------------------------------------------------------------------+
|                          suites summary                          |
+-------------+--------+--------+---------+-------+-------+--------+
|             | passed | failed | skipped | flaky | total | result |
+-------------+--------+--------+---------+-------+-------+--------+
| Monitor     | 7      | 0      | 0       | 0     | 7     | ✅     |
| Plan        | 4      | 0      | 0       | 0     | 4     | ✅     |
| Create      | 8      | 0      | 3       | 0     | 11    | ✅     |
| Data Stores | 0      | 0      | 2       | 0     | 2     | ➖     |
| Govern      | 3      | 0      | 0       | 0     | 3     | ✅     |
| Package     | 0      | 0      | 1       | 0     | 1     | ➖     |
+-------------+--------+--------+---------+-------+-------+--------+
| Total       | 22     | 0      | 6       | 0     | 28    | ✅     |
+-------------+--------+--------+---------+-------+-------+--------+

e2e-package-and-test: test report for 4b42e410

expand test summary

+---------------------------------------------------------------------+
|                           suites summary                            |
+----------------+--------+--------+---------+-------+-------+--------+
|                | passed | failed | skipped | flaky | total | result |
+----------------+--------+--------+---------+-------+-------+--------+
| GitLab Metrics | 2      | 0      | 1       | 0     | 3     | ✅     |
| Monitor        | 36     | 0      | 13      | 0     | 49    | ✅     |
| Create         | 148    | 0      | 24      | 4     | 172   | ✅     |
| Plan           | 8      | 0      | 0       | 0     | 8     | ✅     |
| Govern         | 6      | 0      | 0       | 0     | 6     | ✅     |
| Data Stores    | 0      | 0      | 4       | 0     | 4     | ➖     |
| Package        | 0      | 0      | 2       | 0     | 2     | ➖     |
+----------------+--------+--------+---------+-------+-------+--------+
| Total          | 200    | 0      | 44      | 4     | 244   | ✅     |
+----------------+--------+--------+---------+-------+-------+--------+

changed title from Draft: Fetch traces analytics from analytics component to Draft: Improve tracing analytics

added 1 commit

• 89d06c7a - Improve tracing analytics

Compare with previous version

changed milestone to %16.10

added Category:Tracing feature flag featureaddition labels

added typefeature label

added devopsmonitor groupobservability sectionanalytics labels

removed devopsmonitor sectionanalytics labels

added devopsmonitor sectionanalytics labels

resolved all threads

changed the description