Make trace list API call non-blocking and load whichever data arrives first
What does this MR do and why?
Decouple tracing list and analytics API calls
- Make trace list API call non-blocking: we used to block the whole UI while the list API call was pending. To make the page more responsive we are decoupling it from other components and API calls
- Make filtered-bar component always visible: we want to make the UI as responsible as possible by letting the user interact with the UI while API requests are in flight
- Add support for cancelling pending requests upon submitting new searches: given the search bar is now always visible ( it used to be replaced by a loading icon before ), the user could potentially kick off a new search while the current one is still pending, so we need to handle this gracefully.
- Fixed an error with a localised string not using
sprint
Closes Make trace list API call non-blocking and load ... (gitlab-org/opstrace/opstrace#2703 - closed) . Part of Performance Improvements pre Summit (gitlab-org/opstrace/opstrace#2699 - closed)
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.
Before:
Screen_Recording_2024-03-05_at_16.52.26
After:
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
)
pbpaste | git apply --allow-empty
)diff --git a/app/assets/javascripts/observability/client.js b/app/assets/javascripts/observability/client.js
index f1f3627c380e..8caf09a9f4c7 100644
--- a/app/assets/javascripts/observability/client.js
+++ b/app/assets/javascripts/observability/client.js
@@ -1,22 +1,237 @@
+/* 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 ANALYTICS_DELAY = 2000;
+const TRACE_DELAY = 4000;
+
+function mockReturnDataWithDelay(data, delay = 500) {
+ return new Promise((resolve) => {
+ setTimeout(() => resolve(data), delay);
+ });
+}
+
+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;
}
+
// 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 +240,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 +257,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,
+ });
}
/**
@@ -241,16 +547,15 @@ async function fetchTraces(
: 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,
- signal: abortController?.signal,
- });
+ 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, TRACE_DELAY);
} catch (e) {
return reportErrorAndThrow(e);
}
@@ -260,12 +565,562 @@ async function fetchTracesAnalytics(tracingAnalyticsUrl, { filters = {}, abortCo
const params = tracingFilterObjToQueryParams(filters);
try {
- const { data } = await axios.get(tracingAnalyticsUrl, {
- withCredentials: true,
- params,
- signal: abortController?.signal,
- });
- 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,
+ },
+ ],
+ ANALYTICS_DELAY,
+ );
} catch (e) {
return reportErrorAndThrow(e);
}
@@ -273,15 +1128,17 @@ async function fetchTracesAnalytics(tracingAnalyticsUrl, { filters = {}, abortCo
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);
}
@@ -296,15 +1153,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);
Edited by Daniele Rossetti