From 0160374caf0efba0e14b8b533b01d63a79023240 Mon Sep 17 00:00:00 2001
From: dakotadux <ddux@gitlab.com>
Date: Tue, 29 Jul 2025 15:10:46 -0600
Subject: [PATCH] Update observability page to login with JWT

This adds the ability to login to the o11y react service in the iframe
from the main vue app.
---
 .../observability/components/app.vue          | 121 +++++++-
 .../javascripts/observability/constants.js    |   3 +-
 app/assets/javascripts/observability/index.js |  11 +
 locale/gitlab.pot                             |   9 +-
 .../observability/components/app_spec.js      | 261 +++++++++++++++---
 spec/frontend/observability/index_spec.js     |  25 ++
 6 files changed, 388 insertions(+), 42 deletions(-)

diff --git a/app/assets/javascripts/observability/components/app.vue b/app/assets/javascripts/observability/components/app.vue
index fab8d5b9523ee5..480b67e9008ca0 100644
--- a/app/assets/javascripts/observability/components/app.vue
+++ b/app/assets/javascripts/observability/components/app.vue
@@ -1,5 +1,11 @@
 <script>
+import { createMessageValidator } from '../utils/message_validator';
+import { MESSAGE_TYPES, TIMEOUTS } from '../constants';
+import { buildIframeUrl, extractTargetPath } from '../utils/url_helpers';
+import { AuthManager } from '../utils/auth_manager';
+
 export default {
+  name: 'ObservabilityApp',
   props: {
     o11yUrl: {
       type: String,
@@ -9,12 +15,108 @@ export default {
       type: String,
       required: true,
     },
+    authTokens: {
+      type: Object,
+      required: true,
+      validator(authTokens) {
+        const requiredProperties = ['userId', 'accessJwt', 'refreshJwt'];
+
+        return requiredProperties.every((prop) => {
+          const value = authTokens[prop];
+          return value && typeof value === 'string' && value.trim().length > 0;
+        });
+      },
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      allowedOrigin: null,
+      messageValidator: null,
+      authManager: null,
+      isLoading: true,
+      isAuthenticated: false,
+    };
   },
 
   computed: {
     iframeUrl() {
-      const urlWithPath = new URL(this.path, this.o11yUrl);
-      return urlWithPath.toString();
+      return buildIframeUrl(this.path, this.o11yUrl);
+    },
+
+    targetPath() {
+      return extractTargetPath(this.path, this.o11yUrl);
+    },
+  },
+
+  mounted() {
+    this.allowedOrigin = new URL(this.o11yUrl).origin;
+    this.messageValidator = createMessageValidator(this.allowedOrigin);
+    this.authManager = new AuthManager(this.allowedOrigin, this.authTokens, this.targetPath);
+    this.authManager.setCallbacks(
+      this.handleAuthSuccess.bind(this),
+      this.handleAuthError.bind(this),
+    );
+    this.setupIframeHandlers();
+  },
+
+  beforeUnmount() {
+    if (this.authManager) {
+      this.authManager.destroy();
+    }
+    window.removeEventListener('message', this.handleMessage);
+  },
+
+  methods: {
+    setupIframeHandlers() {
+      const iframe = this.$refs.o11yFrame;
+
+      iframe.addEventListener('load', () => {
+        setTimeout(() => {
+          this.authManager.sendAuthMessage(iframe, true);
+        }, TIMEOUTS.IFRAME_READY_DELAY);
+      });
+
+      this.handleMessage = this.handleMessage.bind(this);
+      window.addEventListener('message', this.handleMessage);
+    },
+
+    handleAuthSuccess() {
+      this.isLoading = false;
+      this.isAuthenticated = true;
+    },
+
+    handleAuthError() {
+      this.isLoading = false;
+      this.isAuthenticated = false;
+    },
+
+    handleMessage(event) {
+      const validation = this.messageValidator.validateMessage(
+        event,
+        this.authManager.getMessageNonce(),
+        this.authManager.getExpectedResponseCounter(),
+      );
+
+      if (!validation.valid) {
+        return;
+      }
+
+      this.handleValidMessage(event.data);
+    },
+
+    handleValidMessage(data) {
+      if (data.type === MESSAGE_TYPES.AUTH_STATUS) {
+        if (data.authenticated) {
+          this.authManager.handleAuthSuccess();
+        } else {
+          this.authManager.handleAuthenticationError();
+        }
+      }
     },
   },
 };
@@ -24,13 +126,20 @@ export default {
   <div
     class="gl-h-full gl-grow gl-overflow-hidden gl-rounded-base gl-border-1 gl-border-solid gl-border-default"
   >
+    <div v-if="isLoading" class="o11y-status" data-testid="o11y-loading-status">
+      {{ s__('Observability|Loading metrics...') }}
+    </div>
+    <div v-else-if="!isAuthenticated" class="o11y-status" data-testid="o11y-error-status">
+      {{ s__('Observability|Authentication failed. Please refresh the page.') }}
+    </div>
     <iframe
-      ref="signozFrame"
-      :src="iframeUrl"
+      v-show="isAuthenticated"
+      ref="o11yFrame"
       frameborder="0"
+      sandbox="allow-same-origin allow-scripts allow-forms allow-downloads"
       class="gl-h-full gl-w-full"
-      :title="s__('Observability|Observability Dashboard')"
-      sandbox="allow-same-origin allow-scripts allow-forms"
+      :src="iframeUrl"
+      :title="title"
     ></iframe>
   </div>
 </template>
diff --git a/app/assets/javascripts/observability/constants.js b/app/assets/javascripts/observability/constants.js
index 990f1bb5efb5bb..c22ab8faca9089 100644
--- a/app/assets/javascripts/observability/constants.js
+++ b/app/assets/javascripts/observability/constants.js
@@ -63,14 +63,13 @@ export const MESSAGE_TYPES = {
   AUTH_STATUS: 'O11Y_AUTH_STATUS',
   // eslint-disable-next-line @gitlab/require-i18n-strings
   JWT_LOGIN: 'O11Y_JWT_LOGIN',
-  // eslint-disable-next-line @gitlab/require-i18n-strings
-  JWT_LOGIN_ENCRYPTED: 'O11Y_JWT_LOGIN_ENCRYPTED',
 };
 export const TIMEOUTS = {
   MAX_MESSAGE_AGE: 1 * 60 * 1000,
   MAX_CLOCK_SKEW: 30 * 1000,
   BASE_RETRY_DELAY: 2000,
   CLEANUP_INTERVAL: 60 * 1000,
+  IFRAME_READY_DELAY: 100,
 };
 
 export const RETRY_CONFIG = {
diff --git a/app/assets/javascripts/observability/index.js b/app/assets/javascripts/observability/index.js
index 500091cff2ef00..e48b800edb43fe 100644
--- a/app/assets/javascripts/observability/index.js
+++ b/app/assets/javascripts/observability/index.js
@@ -6,6 +6,15 @@ export default () => {
   if (!el) return null;
   const { dataset } = el;
 
+  const authTokens = {};
+  for (const key in dataset) {
+    if (key.startsWith('authTokens')) {
+      const newKey = key.replace(/^authTokens/, '');
+      const formattedKey = newKey.charAt(0).toLowerCase() + newKey.slice(1);
+      authTokens[formattedKey] = dataset[key];
+    }
+  }
+
   return new Vue({
     el,
     render(h) {
@@ -13,6 +22,8 @@ export default () => {
         props: {
           o11yUrl: dataset.o11yUrl,
           path: dataset.path,
+          authTokens,
+          title: dataset.title,
         },
       });
     },
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 80dc4eeeeb8da1..46b3ec05c7283b 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -43747,6 +43747,9 @@ msgstr ""
 msgid "Observability|Authentication failed"
 msgstr ""
 
+msgid "Observability|Authentication failed. Please refresh the page."
+msgstr ""
+
 msgid "Observability|Beta Release"
 msgstr ""
 
@@ -43906,6 +43909,9 @@ msgstr ""
 msgid "Observability|Length must be a positive integer"
 msgstr ""
 
+msgid "Observability|Loading metrics..."
+msgstr ""
+
 msgid "Observability|Message validation failed"
 msgstr ""
 
@@ -43924,9 +43930,6 @@ msgstr ""
 msgid "Observability|Observability Access Requested"
 msgstr ""
 
-msgid "Observability|Observability Dashboard"
-msgstr ""
-
 msgid "Observability|Observability Service Configuration"
 msgstr ""
 
diff --git a/spec/frontend/observability/components/app_spec.js b/spec/frontend/observability/components/app_spec.js
index 48ff99615845d3..925d151fceb8aa 100644
--- a/spec/frontend/observability/components/app_spec.js
+++ b/spec/frontend/observability/components/app_spec.js
@@ -1,58 +1,257 @@
-import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import App from '~/observability/components/app.vue';
+import * as cryptoModule from '~/observability/utils/nonce';
+
+const mockAuthManager = {
+  setCallbacks: jest.fn(),
+  sendAuthMessage: jest.fn(),
+  destroy: jest.fn(),
+  getMessageNonce: jest.fn(() => 'test-nonce'),
+  getExpectedResponseCounter: jest.fn(() => 1),
+};
+
+jest.mock('~/observability/utils/auth_manager', () => ({
+  AuthManager: jest.fn(() => mockAuthManager),
+}));
+
+jest.mock('~/observability/utils/nonce', () => ({
+  encryptPayload: jest.fn().mockResolvedValue({
+    encrypted: [1, 2, 3, 4],
+    salt: [5, 6, 7, 8],
+    iv: [9, 10, 11, 12],
+    algorithm: 'AES-GCM',
+    timestamp: Date.now(),
+  }),
+  generateNonce: jest.fn(() => 'test-nonce-12345678901234567890123456'),
+}));
+
+const DEFAULTS = {
+  O11Y_URL: 'https://o11y.gitlab.com',
+  PATH: 'traces-explorer',
+  TOKENS: { userId: 'user123', accessJwt: 'access-token-123', refreshJwt: 'refresh-token-456' },
+  TITLE: 'Observability',
+};
 
 describe('Observability App Component', () => {
   let wrapper;
+  let authCallbacks;
 
   const createComponent = (props = {}) => {
-    return shallowMount(App, {
+    return shallowMountExtended(App, {
       propsData: {
-        o11yUrl: 'https://o11y.gitlab.com',
-        path: 'traces-explorer',
+        o11yUrl: DEFAULTS.O11Y_URL,
+        path: DEFAULTS.PATH,
+        authTokens: DEFAULTS.TOKENS,
+        title: DEFAULTS.TITLE,
         ...props,
       },
     });
   };
 
-  it('renders the iframe with correct attributes', () => {
-    wrapper = createComponent();
+  const setupComponent = async (props = {}) => {
+    wrapper = createComponent(props);
+    await nextTick();
+
+    authCallbacks = {
+      onAuthSuccess: mockAuthManager.setCallbacks.mock.calls[0]?.[0],
+      onAuthError: mockAuthManager.setCallbacks.mock.calls[0]?.[1],
+    };
 
-    const iframe = wrapper.find('iframe');
-    expect(iframe.exists()).toBe(true);
-    expect(iframe.attributes('title')).toBe('Observability Dashboard');
-    expect(iframe.attributes('frameborder')).toBe('0');
-    expect(iframe.classes()).toContain('gl-h-full');
-    expect(iframe.classes()).toContain('gl-w-full');
+    const iframe = wrapper.find('iframe').element;
+    const contentWindow = { postMessage: jest.fn() };
+    Object.defineProperty(iframe, 'contentWindow', { value: contentWindow });
+
+    return { iframe, contentWindow };
+  };
+
+  beforeEach(() => {
+    jest.useFakeTimers({ legacyFakeTimers: true });
+    jest.clearAllMocks();
+
+    cryptoModule.encryptPayload.mockResolvedValue({
+      encrypted: [1, 2, 3, 4],
+      salt: [5, 6, 7, 8],
+      iv: [9, 10, 11, 12],
+      algorithm: 'AES-GCM',
+      timestamp: Date.now(),
+    });
+
+    global.crypto = {
+      getRandomValues: jest.fn((array) => array.fill(1)),
+      subtle: {
+        encrypt: jest.fn().mockResolvedValue(new Uint8Array([1, 2, 3, 4])),
+        decrypt: jest.fn().mockResolvedValue(new Uint8Array([1, 2, 3, 4])),
+        deriveKey: jest.fn().mockResolvedValue({}),
+        importKey: jest.fn().mockResolvedValue({}),
+      },
+    };
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+    wrapper?.destroy();
   });
 
-  it('computes the correct iframe URL', () => {
-    wrapper = createComponent({
-      o11yUrl: 'https://o11y.gitlab.com',
-      path: 'traces-explorer',
+  describe('Component Rendering', () => {
+    it('renders iframe with correct observability URL', async () => {
+      await setupComponent({
+        o11yUrl: 'https://custom.observability.com',
+        path: 'custom-path/dashboard',
+      });
+
+      expect(wrapper.find('iframe').attributes('src')).toBe(
+        'https://custom.observability.com/custom-path/dashboard',
+      );
     });
 
-    expect(wrapper.find('iframe').attributes('src')).toBe(
-      'https://o11y.gitlab.com/traces-explorer',
-    );
+    it('handles different path formats correctly', async () => {
+      await setupComponent({
+        o11yUrl: 'https://o11y.gitlab.com',
+        path: 'metrics/dashboard',
+      });
+
+      expect(wrapper.find('iframe').attributes('src')).toBe(
+        'https://o11y.gitlab.com/metrics/dashboard',
+      );
+    });
+
+    it('handles edge cases in URL construction', async () => {
+      await setupComponent({
+        o11yUrl: 'https://o11y.gitlab.com',
+        path: 'traces-explorer',
+      });
+
+      expect(wrapper.find('iframe').attributes('src')).toBe(
+        'https://o11y.gitlab.com/traces-explorer',
+      );
+    });
+
+    it('renders iframe with correct title', async () => {
+      await setupComponent({ title: 'Custom Observability' });
+
+      expect(wrapper.find('iframe').attributes('title')).toBe('Custom Observability');
+    });
   });
 
-  it('handles paths with leading slashes correctly', () => {
-    wrapper = createComponent({
-      o11yUrl: 'https://o11y.gitlab.com',
-      path: '/dashboard',
+  describe('Iframe Behavior', () => {
+    it('shows iframe after successful authentication', async () => {
+      await setupComponent();
+
+      authCallbacks.onAuthSuccess();
+      await nextTick();
+
+      expect(wrapper.find('iframe').isVisible()).toBe(true);
     });
 
-    expect(wrapper.find('iframe').attributes('src')).toBe('https://o11y.gitlab.com/dashboard');
+    it('keeps iframe hidden during loading', async () => {
+      await setupComponent();
+
+      expect(wrapper.find('iframe').isVisible()).toBe(false);
+    });
+
+    it('keeps iframe hidden after authentication failure', async () => {
+      await setupComponent();
+
+      authCallbacks.onAuthError();
+      await nextTick();
+
+      expect(wrapper.find('iframe').isVisible()).toBe(false);
+    });
+
+    it('shows iframe after successful authentication following failure', async () => {
+      await setupComponent();
+
+      authCallbacks.onAuthError();
+      await nextTick();
+      expect(wrapper.find('iframe').isVisible()).toBe(false);
+
+      authCallbacks.onAuthSuccess();
+      await nextTick();
+
+      expect(wrapper.find('iframe').isVisible()).toBe(true);
+    });
   });
 
-  it('handles nested paths correctly', () => {
-    wrapper = createComponent({
-      o11yUrl: 'https://o11y.gitlab.com',
-      path: 'logs/logs-explorer',
+  describe('Authentication Flow', () => {
+    it('transitions from loading to authenticated state', async () => {
+      await setupComponent();
+
+      expect(wrapper.findByTestId('o11y-loading-status').exists()).toBe(true);
+
+      authCallbacks.onAuthSuccess();
+      await nextTick();
+
+      expect(wrapper.findByTestId('o11y-loading-status').exists()).toBe(false);
+      expect(wrapper.findByTestId('o11y-error-status').exists()).toBe(false);
+    });
+
+    it('transitions from loading to error state', async () => {
+      await setupComponent();
+
+      expect(wrapper.findByTestId('o11y-loading-status').exists()).toBe(true);
+
+      authCallbacks.onAuthError();
+      await nextTick();
+
+      expect(wrapper.findByTestId('o11y-loading-status').exists()).toBe(false);
+      expect(wrapper.findByTestId('o11y-error-status').exists()).toBe(true);
     });
 
-    expect(wrapper.find('iframe').attributes('src')).toBe(
-      'https://o11y.gitlab.com/logs/logs-explorer',
-    );
+    it('can recover from error state with successful authentication', async () => {
+      await setupComponent();
+
+      authCallbacks.onAuthError();
+      await nextTick();
+      expect(wrapper.findByTestId('o11y-error-status').exists()).toBe(true);
+
+      authCallbacks.onAuthSuccess();
+      await nextTick();
+
+      expect(wrapper.findByTestId('o11y-error-status').exists()).toBe(false);
+    });
+  });
+
+  describe('Props Validation', () => {
+    it('rejects invalid auth token structure', () => {
+      const authTokensValidator = App.props.authTokens.validator;
+
+      expect(authTokensValidator({ accessJwt: 'token' })).toBe(false);
+      expect(authTokensValidator({ userId: 'user', accessJwt: '', refreshJwt: 'refresh' })).toBe(
+        false,
+      );
+      expect(authTokensValidator({ userId: 123, accessJwt: 'access', refreshJwt: 'refresh' })).toBe(
+        false,
+      );
+    });
+
+    it('accepts valid auth token structure', () => {
+      const authTokensValidator = App.props.authTokens.validator;
+
+      expect(
+        authTokensValidator({
+          userId: 'user123',
+          accessJwt: 'access-token',
+          refreshJwt: 'refresh-token',
+        }),
+      ).toBe(true);
+    });
+  });
+
+  describe('Component Lifecycle', () => {
+    it('initializes without errors', () => {
+      expect(() => setupComponent()).not.toThrow();
+    });
+
+    it('destroys without errors', async () => {
+      await setupComponent();
+      expect(() => wrapper.destroy()).not.toThrow();
+    });
+
+    it('handles missing authManager during cleanup gracefully', async () => {
+      await setupComponent();
+      wrapper.vm.authManager = null;
+      expect(() => wrapper.destroy()).not.toThrow();
+    });
   });
 });
diff --git a/spec/frontend/observability/index_spec.js b/spec/frontend/observability/index_spec.js
index 9d0a641a27385d..3c460006450eee 100644
--- a/spec/frontend/observability/index_spec.js
+++ b/spec/frontend/observability/index_spec.js
@@ -4,6 +4,7 @@ import ObservabilityApp from '~/observability/components/app.vue';
 
 jest.mock('~/observability/components/app.vue', () => ({
   name: 'ObservabilityApp',
+  props: ['o11yUrl', 'path', 'authTokens', 'title'],
   data() {
     return {};
   },
@@ -50,4 +51,28 @@ describe('Observability Index', () => {
       expect(findObservabilityApp().exists()).toBe(true);
     });
   });
+
+  describe('authTokens processing', () => {
+    it('transforms authTokens keys and filters non-authTokens keys', () => {
+      const testAppRoot = document.createElement('div');
+      testAppRoot.setAttribute('id', 'js-observability');
+      testAppRoot.dataset.o11yUrl = 'https://o11y.example.com';
+      testAppRoot.dataset.path = 'traces-explorer';
+      testAppRoot.dataset.authTokensUserId = 'user123';
+      testAppRoot.dataset.authTokensAccessJwt = 'access-token';
+      testAppRoot.dataset.otherKey = 'other-value';
+      testAppRoot.dataset.anotherKey = 'another-value';
+      document.body.appendChild(testAppRoot);
+
+      const testWrapper = createWrapper(initObservability());
+      const observabilityApp = testWrapper.findComponent(ObservabilityApp);
+
+      expect(observabilityApp.props('authTokens')).toEqual({
+        userId: 'user123',
+        accessJwt: 'access-token',
+      });
+
+      testAppRoot.remove();
+    });
+  });
 });
-- 
GitLab