Fetch metrics from API
What does this MR do and why?
Fetch metrics details from Observability API
Backend:
- Add
metrics_search_url
to observability lib - Inject
metrics_search_url
into view model - Add
type
to metrics:show
route - Inject
metricType
into:show
view model
Frontend:
- Pass metric type from list view to the details view as query param
- Implement ObserabilityClient
fetchMetric
API - Call
fetchMetric
API from details view, with required params - Remove mocks
Close gitlab-org/opstrace/opstrace#2545 (closed)
Screenshots or screen recordings
Screen_Recording_2023-11-29_at_15.15.50
How to set up and validate locally
- Enable
observability_metrics
feature flag
Apply patch to load mocks ( 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 aa2fd1f5563e..383ad7d7c9c6 100644
--- a/app/assets/javascripts/observability/client.js
+++ b/app/assets/javascripts/observability/client.js
@@ -1,21 +1,69 @@
+/* eslint-disable @gitlab/require-i18n-strings */
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 } from './constants';
+const MOCK_METRICS = {
+ metrics: [
+ {
+ name: 'app.ads.ad_requests',
+ description: 'Counts ad requests by request and response type',
+ type: 'Sum',
+ },
+ {
+ name: 'app.frontend.requests',
+ description: '',
+ type: 'Sum',
+ },
+ {
+ name: 'app.payment.transactions',
+ description: '',
+ type: 'Sum',
+ },
+ {
+ name: 'app_currency_counter',
+ description: '',
+ type: 'Sum',
+ },
+ {
+ name: 'app_recommendations_counter',
+ description: 'Counts the total number of given recommendations',
+ type: 'Sum',
+ },
+ {
+ name: 'http.client.duration',
+ description: 'measures the duration of the outbound HTTP request',
+ type: 'Histogram',
+ },
+ ],
+};
+
+const MOCK_TRACES = {
+ project_id: 51792562,
+ traces: [],
+ total_traces: 500,
+ next_page_token:
+ 'eyJsYXN0X3NlZW5fdGltZXN0YW1wIjoiMjAyMy0xMS0xMCAxNjoyNzo0Ny4xMDQ0NzcwOTIiLCJzZWVuX3RyYWNlX2lkcyI6WyI2ZTI0NjFjZS04MWVmLTRkYWItN2ZmYS1hMTRlMDRiODhmNWUiXX0=',
+};
+
function reportErrorAndThrow(e) {
logError(e);
Sentry.captureException(e);
throw e;
}
+
+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);
}
@@ -24,11 +72,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) {
@@ -40,19 +89,64 @@ 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',
+ statusCode: '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',
+ statusCode: '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',
+ statusCode: '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',
+ statusCode: 'STATUS_CODE_UNSET',
+ },
+ ],
+ total_spans: 9,
+ totalSpans: 9,
+ statusCode: 'STATUS_CODE_UNSET',
+ });
}
/**
@@ -198,15 +292,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);
}
@@ -214,15 +308,17 @@ async function fetchTraces(tracingUrl, { filters = {}, pageToken, pageSize, sort
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);
}
@@ -237,15 +333,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);
}
@@ -253,13 +355,11 @@ async function fetchOperations(operationsUrl, serviceName) {
async function fetchMetrics(metricsUrl) {
try {
- const { data } = await axios.get(metricsUrl, {
- withCredentials: true,
- });
+ const data = MOCK_METRICS;
if (!Array.isArray(data.metrics)) {
throw new Error('metrics are missing/invalid in the response'); // eslint-disable-line @gitlab/require-i18n-strings
}
- return data;
+ return mockReturnDataWithDelay(data);
} catch (e) {
return reportErrorAndThrow(e);
}
@@ -279,10 +379,62 @@ async function fetchMetric(searchUrl, name, type) {
mtype: type,
});
- const { data } = await axios.get(searchUrl, {
- params,
- withCredentials: true,
- });
+ console.log(`[DEBUG] fetching metric from ${searchUrl} with param: ${params.toString()}`); // eslint-disable-line @gitlab/require-i18n-strings
+
+ const data = {
+ results: [
+ {
+ name: 'container_cpu_usage_seconds_total',
+ description: 'System disk operations',
+ type: 'Gauge',
+ unit: 'gb',
+ attributes: {
+ beta_kubernetes_io_arch: 'amd64',
+ beta_kubernetes_io_instance_type: 'n1-standard-4',
+ beta_kubernetes_io_os: 'linux',
+ env: 'production',
+ },
+ values: [
+ [1700118610000, 0.25595267476015443],
+ [1700118660000, 0.1881374588830907],
+ [1700118720000, 0.28915416028993485],
+ [1700118780000, 0.29304883966696416],
+ [1700118840000, 0.2657727031708884],
+ [1700118900000, 0.24415948639572538],
+ [1700118960000, 0.32778875228243076],
+ [1700119020000, 0.9658100987444416],
+ [1700119080000, 1.0604918827864345],
+ [1700119140000, 1.0205790879854122],
+ [1700119200000, 0.868291210099945],
+ ],
+ },
+ {
+ name: 'container_cpu_usage_seconds_total',
+ description: 'System disk operations',
+ type: 'Gauge',
+ unit: 'gb',
+ attributes: {
+ beta_kubernetes_io_arch: 'amd64',
+ beta_kubernetes_io_instance_type: 'n1-standard-4',
+ beta_kubernetes_io_os: 'linux',
+ env: 'staging',
+ },
+ values: [
+ [1700118600000, 0.3559526747601544],
+ [1700118660000, 0.1881374588830907],
+ [1700118720000, 0.7891541602899349],
+ [1700118780000, 0.6930488396669642],
+ [1700118840000, 0.2959927031708884],
+ [1700118900000, 0.34415948639572536],
+ [1700118960000, 0.39778875228243077],
+ [1700119020000, 1.2658100987444416],
+ [1700119080000, 3.0604918827864345],
+ [1700119140000, 3.0205790879854124],
+ [1700119200000, 0.888291210099945],
+ ],
+ },
+ ],
+ };
if (!Array.isArray(data.results)) {
throw new Error('metrics 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 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/-/metrics
- Select a metric and check from the console that the correct request is being made ( no actual network request as the patch inject local mocks )
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.
Edited by Daniele Rossetti