Skip to content

Fetch metrics from API

Daniele Rossetti requested to merge rossetd/fetch-metrics-details-from-api into master

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 )

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

MR acceptance checklist

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

Edited by Daniele Rossetti

Merge request reports