Add InfiniteScrolling and pagination to Observability Logs

What does this MR do and why?

Add InfiniteScrolling and pagination to Observability Logs

Closes Add pagination to Logs UI (gitlab-org/opstrace/opstrace#2665 - 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

Screen_Recording_2024-02-22_at_12.39.49

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 --allow-empty )

diff --git a/app/assets/javascripts/observability/client.js b/app/assets/javascripts/observability/client.js
index 10613a48ea56..1d158c346f18 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';
@@ -9,14 +10,18 @@ function reportErrorAndThrow(e) {
   Sentry.captureException(e);
   throw e;
 }
+
+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);
   }
@@ -25,11 +30,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) {
@@ -456,16 +462,157 @@ export async function fetchLogs(logsSearchUrl, { pageToken, pageSize } = {}) {
       params.append('page_size', pageSize);
     }
 
-    const { data } = await axios.get(logsSearchUrl, {
-      withCredentials: true,
-      params,
-    });
-    if (!Array.isArray(data.results)) {
-      throw new Error('logs are missing/invalid in the response'); // eslint-disable-line @gitlab/require-i18n-strings
-    }
+    console.log(`[DEBUG] Fetching logs with params: ${params.toString()}`);
+
+    const data = [
+      {
+        timestamp: '2024-02-19T16:10:15.4433398Z',
+        trace_id: ']?4ft^T\u0011\ufffd\u0013\ufffd6\ufffdbj\ufffd',
+        span_id: "'\u0013\ufffd\ufffd_\ufffd\ufffd\ufffd",
+        trace_flags: 1,
+        severity_text: 'Information',
+        severity_number: 9,
+        service_name: 'cartservice',
+        body:
+          'AddItemAsync called with userId={userId}, productId={productId}, quantity={quantity} AddItemAsync called with userId={userId}, productId={productId}, quantity={quantity} AddItemAsync called with userId={userId}, productId={productId}, quantity={quantity} AddItemAsync called with userId={userId}, productId={productId}, quantity={quantity} AddItemAsync called with userId={userId}, productId={productId}, quantity={quantity} AddItemAsync called with userId={userId}, productId={productId}, quantity={quantity} ',
+        resource_attributes: {
+          'container.id': 'ae165f3300bf7da7cc83b360e955683f31f959268241895747f23ad165014005',
+          'k8s.deployment.name': 'otel-demo-cartservice',
+          'k8s.namespace.name': 'otel-demo-app',
+          'k8s.node.name': 'opstrace-worker2',
+          'k8s.pod.ip': '192.168.62.215',
+          'k8s.pod.name': 'otel-demo-cartservice-6dcc867f5f-pcm68',
+          'k8s.pod.start_time': '2024-02-12T13:32:12Z',
+          'k8s.pod.uid': 'bb0991d5-d2f9-486d-aed6-fb431da28bcb',
+          'service.name': 'cartservice',
+          'service.namespace': 'opentelemetry-demo',
+          'telemetry.sdk.language': 'dotnet',
+          'telemetry.sdk.name': 'opentelemetry',
+          'telemetry.sdk.version': '1.6.0',
+        },
+        log_attributes: {
+          productId: 'LS4PSXUNUM',
+          quantity: '5',
+          userId: '5e22f0f6-cf41-11ee-a97f-768346730ebf',
+        },
+      },
+      {
+        timestamp: '2024-02-19T16:10:15.4488072Z',
+        trace_id: ']?4ft^T\u0011\ufffd\u0013\ufffd6\ufffdbj\ufffd',
+        span_id: '\u0015_\ufffd z\ufffd\ufffd\ufffd',
+        trace_flags: 1,
+        severity_text: 'Information',
+        severity_number: 9,
+        service_name: 'cartservice',
+        body: 'GetCartAsync called with userId={userId}',
+        resource_attributes: {
+          'container.id': 'ae165f3300bf7da7cc83b360e955683f31f959268241895747f23ad165014005',
+          'k8s.deployment.name': 'otel-demo-cartservice',
+          'k8s.namespace.name': 'otel-demo-app',
+          'k8s.node.name': 'opstrace-worker2',
+          'k8s.pod.ip': '192.168.62.215',
+          'k8s.pod.name': 'otel-demo-cartservice-6dcc867f5f-pcm68',
+          'k8s.pod.start_time': '2024-02-12T13:32:12Z',
+          'k8s.pod.uid': 'bb0991d5-d2f9-486d-aed6-fb431da28bcb',
+          'service.name': 'cartservice',
+          'service.namespace': 'opentelemetry-demo',
+          'telemetry.sdk.language': 'dotnet',
+          'telemetry.sdk.name': 'opentelemetry',
+          'telemetry.sdk.version': '1.6.0',
+        },
+        log_attributes: { userId: '5e22f0f6-cf41-11ee-a97f-768346730ebf' },
+      },
+      {
+        timestamp: '2024-02-19T16:10:18.9380111Z',
+        trace_id: '\ufffd\u000cbi\ufffd\u001c\ufffd\ufffd,4f\ufffd!\ufffd\ufffd\ufffd',
+        span_id: '\ufffdv\ufffd(\ufffdyD\ufffd',
+        trace_flags: 1,
+        severity_text: 'Information',
+        severity_number: 9,
+        service_name: 'cartservice',
+        body: 'GetCartAsync called with userId={userId}',
+        resource_attributes: {
+          'container.id': 'ae165f3300bf7da7cc83b360e955683f31f959268241895747f23ad165014005',
+          'k8s.deployment.name': 'otel-demo-cartservice',
+          'k8s.namespace.name': 'otel-demo-app',
+          'k8s.node.name': 'opstrace-worker2',
+          'k8s.pod.ip': '192.168.62.215',
+          'k8s.pod.name': 'otel-demo-cartservice-6dcc867f5f-pcm68',
+          'k8s.pod.start_time': '2024-02-12T13:32:12Z',
+          'k8s.pod.uid': 'bb0991d5-d2f9-486d-aed6-fb431da28bcb',
+          'service.name': 'cartservice',
+          'service.namespace': 'opentelemetry-demo',
+          'telemetry.sdk.language': 'dotnet',
+          'telemetry.sdk.name': 'opentelemetry',
+          'telemetry.sdk.version': '1.6.0',
+        },
+        log_attributes: { userId: '' },
+      },
+      {
+        timestamp: '2024-02-19T16:10:19.7969402Z',
+        trace_id: '\ufffdq\ufffd7\ufffd\ufffd\ufffd\ufffd ]2M~7{\ufffd',
+        span_id: '\u0018H\ufffd\ufffd\ufffd.L\ufffd',
+        trace_flags: 1,
+        severity_text: 'Information',
+        severity_number: 9,
+        service_name: 'cartservice',
+        body:
+          'AddItemAsync called with userId={userId}, productId={productId}, quantity={quantity}',
+        resource_attributes: {
+          'container.id': 'ae165f3300bf7da7cc83b360e955683f31f959268241895747f23ad165014005',
+          'k8s.deployment.name': 'otel-demo-cartservice',
+          'k8s.namespace.name': 'otel-demo-app',
+          'k8s.node.name': 'opstrace-worker2',
+          'k8s.pod.ip': '192.168.62.215',
+          'k8s.pod.name': 'otel-demo-cartservice-6dcc867f5f-pcm68',
+          'k8s.pod.start_time': '2024-02-12T13:32:12Z',
+          'k8s.pod.uid': 'bb0991d5-d2f9-486d-aed6-fb431da28bcb',
+          'service.name': 'cartservice',
+          'service.namespace': 'opentelemetry-demo',
+          'telemetry.sdk.language': 'dotnet',
+          'telemetry.sdk.name': 'opentelemetry',
+          'telemetry.sdk.version': '1.6.0',
+        },
+        log_attributes: {
+          productId: '66VCHSJNUP',
+          quantity: '1',
+          userId: '60bc5708-cf41-11ee-a97f-768346730ebf',
+        },
+      },
+      {
+        timestamp: '2024-02-19T16:10:19.8003226Z',
+        trace_id: '\ufffdq\ufffd7\ufffd\ufffd\ufffd\ufffd ]2M~7{\ufffd',
+        span_id: 'G\u0006\ufffd`B\r\ufffd\ufffd',
+        trace_flags: 1,
+        severity_text: 'Information',
+        severity_number: 9,
+        service_name: 'cartservice',
+        body: 'GetCartAsync called with userId={userId}',
+        resource_attributes: {
+          'container.id': 'ae165f3300bf7da7cc83b360e955683f31f959268241895747f23ad165014005',
+          'k8s.deployment.name': 'otel-demo-cartservice',
+          'k8s.namespace.name': 'otel-demo-app',
+          'k8s.node.name': 'opstrace-worker2',
+          'k8s.pod.ip': '192.168.62.215',
+          'k8s.pod.name': 'otel-demo-cartservice-6dcc867f5f-pcm68',
+          'k8s.pod.start_time': '2024-02-12T13:32:12Z',
+          'k8s.pod.uid': 'bb0991d5-d2f9-486d-aed6-fb431da28bcb',
+          'service.name': 'cartservice',
+          'service.namespace': 'opentelemetry-demo',
+          'telemetry.sdk.language': 'dotnet',
+          'telemetry.sdk.name': 'opentelemetry',
+          'telemetry.sdk.version': '1.6.0',
+        },
+        log_attributes: { userId: '60bc5708-cf41-11ee-a97f-768346730ebf' },
+      },
+    ].map((l) => ({
+      ...l,
+      fingerprint: crypto.randomUUID(),
+    }));
+
     return {
-      logs: data.results,
-      nextPageToken: data.next_page_token,
+      logs: data,
+      nextPageToken: 'test-token',
     };
   } 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/-/logs

assigned to @drosse

changed milestone to %16.10

added Category:Logging featureaddition frontend labels

added typefeature label

added devopsmonitor groupobservability sectionanalytics labels

added feature flag label and removed devopsmonitor groupobservability sectionanalytics labels

added devopsmonitor groupobservability sectionanalytics labels

changed the description

	2 Warnings
	featureaddition and featureenhancement merge requests normally have a documentation change. Consider adding a documentation update or confirming the documentation plan with the Technical Writer counterpart. For more information, see: The Handbook page on merge request types. The definition of done documentation.
	This merge request contains lines with testid selectors. Please ensure e2e:package-and-test job is run.

	1 Message
	CHANGELOG missing: If this merge request needs a changelog entry, add the Changelog trailer to the commit message you want to add to the changelog. If this merge request doesn't need a CHANGELOG entry, feel free to ignore this message.

testid selectors

The following changed lines in this MR contain testid selectors:

ee/app/assets/javascripts/logs/list/logs_list.vue

+          <span v-else data-testid="logs-infinite-scrolling-legend">

If the e2e:package-and-test job in the qa stage has run automatically, please ensure the tests are passing. If the job has not run, please start the trigger-omnibus-and-follow-up-e2e job in the qa stage and ensure the tests in follow-up-e2e:package-and-test-ee pipeline are passing.

For the list of known failures please refer to the latest pipeline triage issue.

If your changes are under a feature flag, please check our Testing with feature flags documentation for instructions.

Reviewer roulette

Category	Reviewer	Maintainer
frontend	@rhardarson (UTC+1, 1 hour ahead of author)	@vitallium (UTC+1, 1 hour ahead of author)

Please check reviewer's status!

• Reviewer is available!
• Reviewer is unavailable!

Please refer to documentation page for guidance on how you can benefit from the Reviewer Roulette, or use the GitLab Review Workload Dashboard to find other available reviewers.

If needed, you can retry the danger-review job that generated this comment.

Generated by Danger

Bundle size analysis [beta]

This compares changes in bundle size for entry points between the commits 85ce7f8a and ea1f962d

Special assets

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
average	4.21 MB	4.21 MB	-	0.0 %
mainChunk	3.21 MB	3.21 MB	-	0.0 %

Significant Growth: 1

Expand

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
pages.projects.logs.index	279.94 KB	287.55 KB	+7.61 KB	2.7 %

---

Your MR has at least one entrypoint growing significantly (more > 1 KB or 2%). If you write new or extend existing features, this is expected and there is nothing to worry about.

Please consider pinging someone from the FE Foundations (@leipert, @markrian, @pgascouvaillancourt, @sdejonge or @thutterer) for review, if you are unsure about the size increase.

Note: We do not have exact data for 85ce7f8a. So we have used data from: 62ab71b9.
The target commit was too new, so we used the latest commit from master we have info on.
It might help to rerun the bundle-size-review job
This might mean that you have a few false positives in this report. If something unrelated to your code changes is reported, you can check this comparison in order to see if they caused this change.

Please look at the full report for more details

---

Read more about how this report works.

Generated by Danger

changed title from Draft: Drosse/logs pagination to Draft: Add InfiniteScrolling and pagination to Observability Logs

changed the description

Hi @nradina! Got some time for a frontend review?

requested review from @nradina

marked this merge request as ready

approved this merge request

@nradina, thanks for approving this merge request.

This is the first time the merge request has been approved. To ensure we don't only run predictive pipelines, and we don't break master, a new pipeline will be started shortly.

Please wait for the pipeline to start before resolving this discussion and set auto-merge for the new pipeline. See merging a merge request for more details.

added pipeline:mr-approved label

E2E Test Result Summary

allure-report-publisher generated test report!

e2e-test-on-gdk: test report for ea1f962d

expand test summary

+------------------------------------------------------------------+
|                          suites summary                          |
+-------------+--------+--------+---------+-------+-------+--------+
|             | passed | failed | skipped | flaky | total | result |
+-------------+--------+--------+---------+-------+-------+--------+
| Package     | 0      | 0      | 1       | 0     | 1     | ➖     |
| Create      | 8      | 0      | 3       | 0     | 11    | ✅     |
| Monitor     | 7      | 0      | 0       | 0     | 7     | ✅     |
| Govern      | 3      | 0      | 0       | 0     | 3     | ✅     |
| Data Stores | 2      | 0      | 0       | 0     | 2     | ✅     |
| Plan        | 4      | 0      | 0       | 0     | 4     | ✅     |
+-------------+--------+--------+---------+-------+-------+--------+
| Total       | 24     | 0      | 4       | 0     | 28    | ✅     |
+-------------+--------+--------+---------+-------+-------+--------+

e2e-package-and-test: test report for ea1f962d

expand test summary

+---------------------------------------------------------------------+
|                           suites summary                            |
+----------------+--------+--------+---------+-------+-------+--------+
|                | passed | failed | skipped | flaky | total | result |
+----------------+--------+--------+---------+-------+-------+--------+
| GitLab Metrics | 2      | 0      | 1       | 0     | 3     | ✅     |
| Monitor        | 36     | 0      | 13      | 0     | 49    | ✅     |
| Create         | 153    | 0      | 19      | 4     | 172   | ✅     |
| Data Stores    | 4      | 0      | 0       | 0     | 4     | ✅     |
| Plan           | 8      | 0      | 0       | 0     | 8     | ✅     |
| Govern         | 6      | 0      | 0       | 0     | 6     | ✅     |
| Package        | 0      | 0      | 2       | 0     | 2     | ➖     |
+----------------+--------+--------+---------+-------+-------+--------+
| Total          | 209    | 0      | 35      | 4     | 244   | ✅     |
+----------------+--------+--------+---------+-------+-------+--------+

requested review from @zcuddy and removed review request for @nradina

changed the description

added 749 commits

• 1778330d...3ed20a0d - 747 commits from branch master
• 82f8e7a7 - Add support for logs pagination to observability client
• bf044e75 - Add infinity-scrolling and pagination to LogsList

Compare with previous version

removed review request for @zcuddy

requested review from @zcuddy

added 1 commit

• 3d0dd1f1 - Fix localisation for infinite-scroll legend

Compare with previous version

added 236 commits

• 3d0dd1f1...13a64258 - 232 commits from branch master
• 032383f9 - Add support for logs pagination to observability client
• 919a678f - Add infinity-scrolling and pagination to LogsList
• 438123d4 - Fix localisation for infinite-scroll legend
• 0aae43e8 - Fix list horizontal margin

Compare with previous version

Rebased to fix merging conflicts

removed review request for @zcuddy

added 1 commit

• ea1f962d - Improve tests structure

Compare with previous version

requested review from @zcuddy

mentioned in merge request !145839 (merged)

resolved all threads

approved this merge request

enabled an automatic merge when the pipeline for eebe2b17 succeeds

canceled the automatic merge

enabled an automatic merge when the pipeline for 8e27ba85 succeeds

merged

mentioned in commit cdd7f37f

added workflowstaging-canary label

added workflowcanary label and removed workflowstaging-canary label

added workflowstaging label and removed workflowcanary label

added workflowproduction label and removed workflowstaging label

added workflowpost-deploy-db-production label and removed workflowproduction label

added releasedpublished label

added pipelinetier-3 label