Improve metrics details UI when no data available (!138934) · Merge requests · GitLab.org / GitLab

Daniele Rossetti requested to merge rossetd/metrics-details-no-data into master Dec 06, 2023

What does this MR do and why?

Improve the UI of the metric details page, when metric data is empty.

To give some context, we currently only fetch the last 24hrs worth of data. So no data means the metric hasn't been reported in the last 24hrs. Note this is probably just a temporary UX, as we will soon add ways of changing the query time range etc.

It just looks a bit broken now, so thought about quickly patch it up, even if we'll end up removing it in the near future.

Discussed at gitlab-org/opstrace/opstrace#2568 (closed)

Screenshots or screen recordings

Before

After

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 3a793c9dc140..d511f4ba9a35 100644
--- a/app/assets/javascripts/observability/client.js
+++ b/app/assets/javascripts/observability/client.js
@@ -1,21 +1,38 @@
+/* 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: [],
+};
+
+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 +41,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 +58,8 @@ 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({});
 }
 
 /**
@@ -198,15 +205,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({ traces: [] });
   } catch (e) {
     return reportErrorAndThrow(e);
   }
@@ -214,15 +221,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 +246,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);
   }
@@ -268,14 +283,12 @@ async function fetchMetrics(metricsUrl, { filters = {}, limit } = {}) {
         }
       }
     }
-    const { data } = await axios.get(metricsUrl, {
-      withCredentials: true,
-      params,
-    });
+    console.log(`[DEBUG] Fetching metrics with params: ${params.toString()}`);
+    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);
   }
@@ -295,14 +308,66 @@ async function fetchMetric(searchUrl, name, type) {
       mtype: type,
     });
 
-    const { data } = await axios.get(searchUrl, {
-      params,
-      withCredentials: true,
-    });
+    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 * 1e6, 0.25595267476015443],
+            [1700118660000 * 1e6, 0.1881374588830907],
+            [1700118720000 * 1e6, 0.28915416028993485],
+            [1700118780000 * 1e6, 0.29304883966696416],
+            [1700118840000 * 1e6, 0.2657727031708884],
+            [1700118900000 * 1e6, 0.24415948639572538],
+            [1700118960000 * 1e6, 0.32778875228243076],
+            [1700119020000 * 1e6, 0.9658100987444416],
+            [1700119080000 * 1e6, 1.0604918827864345],
+            [1700119140000 * 1e6, 1.0205790879854122],
+            [1700119200000 * 1e6, 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 * 1e6, 0.3559526747601544],
+            [1700118660000 * 1e6, 0.1881374588830907],
+            [1700118720000 * 1e6, 0.7891541602899349],
+            [1700118780000 * 1e6, 0.6930488396669642],
+            [1700118840000 * 1e6, 0.2959927031708884],
+            [1700118900000 * 1e6, 0.34415948639572536],
+            [1700118960000 * 1e6, 0.39778875228243077],
+            [1700119020000 * 1e6, 1.2658100987444416],
+            [1700119080000 * 1e6, 3.0604918827864345],
+            [1700119140000 * 1e6, 3.0205790879854124],
+            [1700119200000 * 1e6, 0.888291210099945],
+          ],
+        },
+      ],
+    };
     if (!Array.isArray(data.results)) {
       throw new Error('metrics are missing/invalid in the response'); // eslint-disable-line @gitlab/require-i18n-strings
     }
-    return data.results;
+    return [];
+    // return data.results;
+    // throw new Error('foo');
   } 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/-/metrics/app.ads.ad_requests?type=Sum
You can modify the patched client to switch between returning no data vs throwing an error vs returning data
```
return [];
// return data.results;
// throw new Error('foo');
```

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 Dec 07, 2023 by Daniele Rossetti

Improve metrics details UI when no data available

What does this MR do and why?

Screenshots or screen recordings

How to set up and validate locally

MR acceptance checklist

Merge request reports