Skip to content

Automatically open drawer when a log is shared

Daniele Rossetti requested to merge drosse/logs-details-drawer-open into master

What does this MR do and why?

Closes Log details drawer should be open when sharing ... (gitlab-org/opstrace/opstrace#2816 - closed)

  • Add drawerOpen query param when drawer is open
  • If drawerOpen is set on page load, automatically open the drawer

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

Screen_Recording_2024-05-13_at_13.49.16

How to set up and validate locally

  • Prerequisites: be logged in and running GDK with Ultimate license
  • Enable :observability_logs feature flag

Apply patch to load mocks ( copy the patch content below and run in your terminal: pbpaste | git apply )

diff --git a/app/assets/javascripts/observability/client.js b/app/assets/javascripts/observability/client.js
index 81ca75579c06..7ebddde58257 100644
--- a/app/assets/javascripts/observability/client.js
+++ b/app/assets/javascripts/observability/client.js
@@ -1,3 +1,4 @@
+/* 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';
@@ -15,15 +16,17 @@ function reportErrorAndThrow(e) {
  * Provisioning API
  *
  * ***** */
+function mockReturnDataWithDelay(data) {
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(data), 1000);
+  });
+}

 // 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,19 +35,14 @@ 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 });
-    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;
-    }
+    console.log('[DEBUG] Checking Observability provisioning');
+    return mockReturnDataWithDelay(true);
   } catch (e) {
     if (e.response.status === 404) {
       return false;
     }
     return reportErrorAndThrow(e);
   }
-  return reportErrorAndThrow(new Error('Failed to check provisioning')); // eslint-disable-line @gitlab/require-i18n-strings
 }

 /** ****
@@ -597,17 +595,282 @@ export async function fetchLogs(logsSearchUrl, { pageToken, pageSize, filters =
     if (pageSize) {
       params.append('page_size', pageSize);
     }
-    const { data } = await axios.get(logsSearchUrl, {
-      withCredentials: true,
-      params,
+
+    console.log(`[DEBUG] Fetching logs with params: ${params.toString()}`);
+
+    return mockReturnDataWithDelay({
+      logs: [
+        {
+          timestamp: '2024-05-13T06:35:57.633633328Z',
+          trace_id: '4ac0431a-b519-c52f-9e2d-d2c309756444',
+          span_id: 'F1168BD2973124B3',
+          trace_flags: 1,
+          severity_text: 'INFO',
+          severity_number: 9,
+          service_name: 'frauddetectionservice',
+          body:
+            'Consumed record with orderId: 0e57642f-10f3-11ef-b822-0242ac120016, and updated total count to: 105457',
+          resource_attributes: {
+            'container.id': 'b9d090c6f2f7c3c083562141f2d40b3e1cbcac13aa59129f099be038265c6cf5',
+            'host.arch': 'amd64',
+            'host.name': 'b9d090c6f2f7',
+            'os.description': 'Linux 6.1.75+',
+            'os.type': 'linux',
+            'process.command_args':
+              '["/usr/lib/jvm/java-17-openjdk-amd64/bin/java","-jar","frauddetectionservice-1.0-all.jar"]',
+            'process.executable.path': '/usr/lib/jvm/java-17-openjdk-amd64/bin/java',
+            'process.pid': '1',
+            'process.runtime.description':
+              'Debian OpenJDK 64-Bit Server VM 17.0.10+7-Debian-1deb11u1',
+            'process.runtime.name': 'OpenJDK Runtime Environment',
+            'process.runtime.version': '17.0.10+7-Debian-1deb11u1',
+            'service.name': 'frauddetectionservice',
+            'service.namespace': 'opentelemetry-demo',
+            'telemetry.distro.name': 'opentelemetry-java-instrumentation',
+            'telemetry.distro.version': '2.0.0',
+            'telemetry.sdk.language': 'java',
+            'telemetry.sdk.name': 'opentelemetry',
+            'telemetry.sdk.version': '1.34.1',
+          },
+          log_attributes: {},
+          fingerprint: '8c2a71e53cbc1be5',
+        },
+        {
+          timestamp: '2024-05-13T06:35:57.169823Z',
+          trace_id: '00000000-0000-0000-0000-000000000000',
+          span_id: '0000000000000000',
+          trace_flags: 0,
+          severity_text: 'INFO',
+          severity_number: 9,
+          service_name: 'kafka',
+          body:
+            '[SnapshotEmitter id=1] Successfully wrote snapshot 00000000000003418823-0000000002',
+          resource_attributes: {
+            'container.id': '4ca9faea250d7acf4daa32de95469ad751fff92202138674abc2f53b6bbb58b2',
+            'host.arch': 'amd64',
+            'host.name': '4ca9faea250d',
+            'os.description': 'Linux 6.1.75+',
+            'os.type': 'linux',
+            'process.command_args':
+              '["/usr/lib/jvm/java-11-zulu-openjdk-ca/bin/java","-Xmx200m","-Xms200m","-server","-XX:+UseG1GC","-XX:MaxGCPauseMillis=20","-XX:InitiatingHeapOccupancyPercent=35","-XX:+ExplicitGCInvokesConcurrent","-XX:MaxInlineLevel=15","-Djava.awt.headless=true","-Xlog:gc*:file=/var/log/kafka/kafkaServer-gc.log:time,tags:filecount=10,filesize=100M","-Dcom.sun.management.jmxremote=true","-Dcom.sun.management.jmxremote.authenticate=false","-Dcom.sun.management.jmxremote.ssl=false","-Dkafka.logs.dir=/var/log/kafka","-Dlog4j.configuration=file:/etc/kafka/log4j.properties","-cp","/usr/bin/../share/java/kafka/*:/usr/bin/../share/java/confluent-telemetry/*","-javaagent:/tmp/opentelemetry-javaagent.jar","-Dotel.jmx.target.system=kafka-broker","kafka.Kafka","/etc/kafka/kafka.properties"]',
+            'process.executable.path': '/usr/lib/jvm/java-11-zulu-openjdk-ca/bin/java',
+            'process.pid': '1',
+            'process.runtime.description':
+              'Azul Systems, Inc. OpenJDK 64-Bit Server VM 11.0.21+9-LTS',
+            'process.runtime.name': 'OpenJDK Runtime Environment',
+            'process.runtime.version': '11.0.21+9-LTS',
+            'service.name': 'kafka',
+            'service.namespace': 'opentelemetry-demo',
+            'telemetry.distro.name': 'opentelemetry-java-instrumentation',
+            'telemetry.distro.version': '2.0.0',
+            'telemetry.sdk.language': 'java',
+            'telemetry.sdk.name': 'opentelemetry',
+            'telemetry.sdk.version': '1.34.1',
+          },
+          log_attributes: {},
+          fingerprint: 'bf34f2962547df76',
+        },
+        {
+          timestamp: '2024-05-13T06:35:57.166866Z',
+          trace_id: '00000000-0000-0000-0000-000000000000',
+          span_id: '0000000000000000',
+          trace_flags: 0,
+          severity_text: 'INFO',
+          severity_number: 9,
+          service_name: 'kafka',
+          body:
+            '[SnapshotGenerator id=1] Creating new KRaft snapshot file snapshot 00000000000003418823-0000000002 because we have replayed at least 2800 bytes.',
+          resource_attributes: {
+            'container.id': '4ca9faea250d7acf4daa32de95469ad751fff92202138674abc2f53b6bbb58b2',
+            'host.arch': 'amd64',
+            'host.name': '4ca9faea250d',
+            'os.description': 'Linux 6.1.75+',
+            'os.type': 'linux',
+            'process.command_args':
+              '["/usr/lib/jvm/java-11-zulu-openjdk-ca/bin/java","-Xmx200m","-Xms200m","-server","-XX:+UseG1GC","-XX:MaxGCPauseMillis=20","-XX:InitiatingHeapOccupancyPercent=35","-XX:+ExplicitGCInvokesConcurrent","-XX:MaxInlineLevel=15","-Djava.awt.headless=true","-Xlog:gc*:file=/var/log/kafka/kafkaServer-gc.log:time,tags:filecount=10,filesize=100M","-Dcom.sun.management.jmxremote=true","-Dcom.sun.management.jmxremote.authenticate=false","-Dcom.sun.management.jmxremote.ssl=false","-Dkafka.logs.dir=/var/log/kafka","-Dlog4j.configuration=file:/etc/kafka/log4j.properties","-cp","/usr/bin/../share/java/kafka/*:/usr/bin/../share/java/confluent-telemetry/*","-javaagent:/tmp/opentelemetry-javaagent.jar","-Dotel.jmx.target.system=kafka-broker","kafka.Kafka","/etc/kafka/kafka.properties"]',
+            'process.executable.path': '/usr/lib/jvm/java-11-zulu-openjdk-ca/bin/java',
+            'process.pid': '1',
+            'process.runtime.description':
+              'Azul Systems, Inc. OpenJDK 64-Bit Server VM 11.0.21+9-LTS',
+            'process.runtime.name': 'OpenJDK Runtime Environment',
+            'process.runtime.version': '11.0.21+9-LTS',
+            'service.name': 'kafka',
+            'service.namespace': 'opentelemetry-demo',
+            'telemetry.distro.name': 'opentelemetry-java-instrumentation',
+            'telemetry.distro.version': '2.0.0',
+            'telemetry.sdk.language': 'java',
+            'telemetry.sdk.name': 'opentelemetry',
+            'telemetry.sdk.version': '1.34.1',
+          },
+          log_attributes: {},
+          fingerprint: '10b8a0bb5e3bbccf',
+        },
+        {
+          timestamp: '2024-05-13T06:35:57.149291296Z',
+          trace_id: '7539ca3a-fc22-a446-7229-5df60c185504',
+          span_id: '6D3C6367DAD7DC04',
+          trace_flags: 1,
+          severity_text: 'INFO',
+          severity_number: 9,
+          service_name: 'frauddetectionservice',
+          body:
+            'Consumed record with orderId: 0e13e3af-10f3-11ef-b822-0242ac120016, and updated total count to: 105456',
+          resource_attributes: {
+            'container.id': 'b9d090c6f2f7c3c083562141f2d40b3e1cbcac13aa59129f099be038265c6cf5',
+            'host.arch': 'amd64',
+            'host.name': 'b9d090c6f2f7',
+            'os.description': 'Linux 6.1.75+',
+            'os.type': 'linux',
+            'process.command_args':
+              '["/usr/lib/jvm/java-17-openjdk-amd64/bin/java","-jar","frauddetectionservice-1.0-all.jar"]',
+            'process.executable.path': '/usr/lib/jvm/java-17-openjdk-amd64/bin/java',
+            'process.pid': '1',
+            'process.runtime.description':
+              'Debian OpenJDK 64-Bit Server VM 17.0.10+7-Debian-1deb11u1',
+            'process.runtime.name': 'OpenJDK Runtime Environment',
+            'process.runtime.version': '17.0.10+7-Debian-1deb11u1',
+            'service.name': 'frauddetectionservice',
+            'service.namespace': 'opentelemetry-demo',
+            'telemetry.distro.name': 'opentelemetry-java-instrumentation',
+            'telemetry.distro.version': '2.0.0',
+            'telemetry.sdk.language': 'java',
+            'telemetry.sdk.name': 'opentelemetry',
+            'telemetry.sdk.version': '1.34.1',
+          },
+          log_attributes: {},
+          fingerprint: 'e2758ea63941191f',
+        },
+        {
+          timestamp: '2024-05-13T06:35:56.62377984Z',
+          trace_id: 'ef35f268-afbe-daf4-36a3-b4ec084ddb22',
+          span_id: 'F09C6874F7D02811',
+          trace_flags: 1,
+          severity_text: 'INFO',
+          severity_number: 9,
+          service_name: 'recommendationservice',
+          body:
+            "Receive ListRecommendations for product ids:['2ZYFJ3GM2N', '1YMWWN1N4O', '9SIQT8TOJO', '6E92ZMYYFZ', '0PUK6V6EV0']",
+          resource_attributes: {
+            'service.name': 'recommendationservice',
+            'service.namespace': 'opentelemetry-demo',
+            'telemetry.sdk.language': 'python',
+            'telemetry.sdk.name': 'opentelemetry',
+            'telemetry.sdk.version': '1.22.0',
+          },
+          log_attributes: {
+            otelServiceName: 'recommendationservice',
+            otelSpanID: 'f09c6874f7d02811',
+            otelTraceID: 'ef35f268afbedaf436a3b4ec084ddb22',
+            otelTraceSampled: 'true',
+          },
+          fingerprint: 'f80b78665d12e0c4',
+        },
+        {
+          timestamp: '2024-05-13T06:35:56.1040439Z',
+          trace_id: 'b90ac827-2915-f792-6e6c-43fcd4c83d27',
+          span_id: '1425684ACB66C52D',
+          trace_flags: 1,
+          severity_text: 'Information',
+          severity_number: 9,
+          service_name: 'cartservice',
+          body: 'GetCartAsync called with userId={userId}',
+          resource_attributes: {
+            'container.id': '7ee7700f23a4c7c5abfc732801243ff2f6a5d81f220f67b448c7c8f53d1c7319',
+            'service.name': 'cartservice',
+            'service.namespace': 'opentelemetry-demo',
+            'telemetry.sdk.language': 'dotnet',
+            'telemetry.sdk.name': 'opentelemetry',
+            'telemetry.sdk.version': '1.7.0',
+          },
+          log_attributes: {
+            userId: '',
+          },
+          fingerprint: 'a19d94de875ad497',
+        },
+        {
+          timestamp: '2024-05-13T06:35:54.135118336Z',
+          trace_id: '8dfc270a-5ffe-3a17-c740-682a82f51834',
+          span_id: '9E443C5261666D25',
+          trace_flags: 1,
+          severity_text: 'INFO',
+          severity_number: 9,
+          service_name: 'recommendationservice',
+          body:
+            "Receive ListRecommendations for product ids:['HQTGWGPNH4', 'LS4PSXUNUM', '2ZYFJ3GM2N', 'OLJCESPC7Z', '6E92ZMYYFZ']",
+          resource_attributes: {
+            'service.name': 'recommendationservice',
+            'service.namespace': 'opentelemetry-demo',
+            'telemetry.sdk.language': 'python',
+            'telemetry.sdk.name': 'opentelemetry',
+            'telemetry.sdk.version': '1.22.0',
+          },
+          log_attributes: {
+            otelServiceName: 'recommendationservice',
+            otelSpanID: '9e443c5261666d25',
+            otelTraceID: '8dfc270a5ffe3a17c740682a82f51834',
+            otelTraceSampled: 'true',
+          },
+          fingerprint: 'ad266030f7801135',
+        },
+        {
+          timestamp: '2024-05-13T06:35:52.9907173Z',
+          trace_id: '12563c1e-2867-5748-8a9b-df6181924846',
+          span_id: '6BDC5E846B2DC34E',
+          trace_flags: 1,
+          severity_text: 'Information',
+          severity_number: 9,
+          service_name: 'cartservice',
+          body: 'GetCartAsync called with userId={userId}',
+          resource_attributes: {
+            'container.id': '7ee7700f23a4c7c5abfc732801243ff2f6a5d81f220f67b448c7c8f53d1c7319',
+            'service.name': 'cartservice',
+            'service.namespace': 'opentelemetry-demo',
+            'telemetry.sdk.language': 'dotnet',
+            'telemetry.sdk.name': 'opentelemetry',
+            'telemetry.sdk.version': '1.7.0',
+          },
+          log_attributes: {
+            userId: '',
+          },
+          fingerprint: '44e81cb42bc42465',
+        },
+        {
+          timestamp: '2024-05-13T06:35:50.668122Z',
+          trace_id: '00000000-0000-0000-0000-000000000000',
+          span_id: '0000000000000000',
+          trace_flags: 0,
+          severity_text: 'INFO',
+          severity_number: 9,
+          service_name: 'kafka',
+          body:
+            '[ProducerStateManager partition=__cluster_metadata-0]Wrote producer snapshot at offset 3418809 with 0 producer ids in 3 ms.',
+          resource_attributes: {
+            'container.id': '4ca9faea250d7acf4daa32de95469ad751fff92202138674abc2f53b6bbb58b2',
+            'host.arch': 'amd64',
+            'host.name': '4ca9faea250d',
+            'os.description': 'Linux 6.1.75+',
+            'os.type': 'linux',
+            'process.command_args':
+              '["/usr/lib/jvm/java-11-zulu-openjdk-ca/bin/java","-Xmx200m","-Xms200m","-server","-XX:+UseG1GC","-XX:MaxGCPauseMillis=20","-XX:InitiatingHeapOccupancyPercent=35","-XX:+ExplicitGCInvokesConcurrent","-XX:MaxInlineLevel=15","-Djava.awt.headless=true","-Xlog:gc*:file=/var/log/kafka/kafkaServer-gc.log:time,tags:filecount=10,filesize=100M","-Dcom.sun.management.jmxremote=true","-Dcom.sun.management.jmxremote.authenticate=false","-Dcom.sun.management.jmxremote.ssl=false","-Dkafka.logs.dir=/var/log/kafka","-Dlog4j.configuration=file:/etc/kafka/log4j.properties","-cp","/usr/bin/../share/java/kafka/*:/usr/bin/../share/java/confluent-telemetry/*","-javaagent:/tmp/opentelemetry-javaagent.jar","-Dotel.jmx.target.system=kafka-broker","kafka.Kafka","/etc/kafka/kafka.properties"]',
+            'process.executable.path': '/usr/lib/jvm/java-11-zulu-openjdk-ca/bin/java',
+            'process.pid': '1',
+            'process.runtime.description':
+              'Azul Systems, Inc. OpenJDK 64-Bit Server VM 11.0.21+9-LTS',
+            'process.runtime.name': 'OpenJDK Runtime Environment',
+            'process.runtime.version': '11.0.21+9-LTS',
+            'service.name': 'kafka',
+            'service.namespace': 'opentelemetry-demo',
+            'telemetry.distro.name': 'opentelemetry-java-instrumentation',
+            'telemetry.distro.version': '2.0.0',
+            'telemetry.sdk.language': 'java',
+            'telemetry.sdk.name': 'opentelemetry',
+            'telemetry.sdk.version': '1.34.1',
+          },
+          log_attributes: {},
+          fingerprint: '54c07cd44bba7a2f',
+        },
+      ],
     });
-    if (!Array.isArray(data.results)) {
-      throw new Error('logs are missing/invalid in the response'); // eslint-disable-line @gitlab/require-i18n-strings
-    }
-    return {
-      logs: data.results,
-      nextPageToken: data.next_page_token,
-    };
   } catch (e) {
     return reportErrorAndThrow(e);
   }
@@ -633,7 +896,7 @@ export async function fetchLogsSearchMetadata(_logsSearchMetadataUrl, { filters
     // });
     // return data;

-    return {
+    return mockReturnDataWithDelay({
       start_ts: 1713513680617331200,
       end_ts: 1714723280617331200,
       summary: {
@@ -973,7 +1236,7 @@ export async function fetchLogsSearchMetadata(_logsSearchMetadataUrl, { filters
           },
         },
       ],
-    };
+    });
   } 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);
Edited by Daniele Rossetti

Merge request reports