Replace Tracing Period filter with Datepicker component
What does this MR do and why?
Replace Period filter with Datepicker component.
It could help to review this by looking at commits:
Note: this is part of a 3-MRs change (!154103 (merged), !154105 (merged), this). While this change is not that small, I don't think I can split it further without breaking the feature. I could of course release it under a separate feature flag , but the tracing feature is currently only in beta, and I don't think we have the resources to justify the effort of releasing this change under FF. At the same time, we don't want to break it for the few users that use it, hence why I decided to replace the old component with the new one in one go ( and do preliminary refactor separately to keep this change as small as possible)
Closes Tracing - Replace Period filter with separate d... (gitlab-org/opstrace/opstrace#2619 - 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
| Before | After |
|---|---|
|
|
How to set up and validate locally
- Prerequisites: be logged in and running GDK with Ultimate license
- Enable
:observability_tracingfeature flag
Apply patch to load mocks ( copy the patch content below and run in your terminal: pbpaste | git apply )
pbpaste | git apply )diff --git a/app/assets/javascripts/observability/client.js b/app/assets/javascripts/observability/client.js
index 81ca75579c06..f227a5bec510 100644
--- a/app/assets/javascripts/observability/client.js
+++ b/app/assets/javascripts/observability/client.js
@@ -1,9 +1,217 @@
+/* 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);
@@ -15,15 +223,17 @@ function reportErrorAndThrow(e) {
* Provisioning API
*
* ***** */
+function mockReturnDataWithDelay(data) {
+ return new Promise((resolve) => {
+ setTimeout(() => resolve(data), 500);
+ });
+}
// 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);
}
@@ -32,11 +242,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) {
@@ -142,19 +353,109 @@ function addDateRangeFilterToQueryParams(dateRangeFilter, params) {
* ***** */
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,
+ });
}
/**
@@ -278,16 +579,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);
} catch (e) {
return reportErrorAndThrow(e);
}
@@ -296,13 +596,9 @@ async function fetchTraces(
async function fetchTracesAnalytics(tracingAnalyticsUrl, { filters = {}, abortController } = {}) {
const params = tracingFilterObjToQueryParams(filters);
+ console.log(`[DEBUG] Fetching analytics with params: ${params.toString()}`);
try {
- const { data } = await axios.get(tracingAnalyticsUrl, {
- withCredentials: true,
- params,
- signal: abortController?.signal,
- });
- return data.results ?? [];
+ return [];
} catch (e) {
return reportErrorAndThrow(e);
}
@@ -310,15 +606,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);
}
@@ -333,15 +631,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 d0902505ca73..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.apiConfig.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
- Confirm filters still work correctly
- ( Note there is also a dedicated e2e tests that's running in the pipeline )
Edited by Daniele Rossetti