1 files changed, 86 insertions, 0 deletions
diff --git a/app/assets/javascripts/observability/components/observability_container.vue b/app/assets/javascripts/observability/components/observability_container.vue
new file mode 100644
index 00000000000..7fb352cc171
--- /dev/null
+++ b/app/assets/javascripts/observability/components/observability_container.vue
@@ -0,0 +1,86 @@
+<script>
+import { buildClient } from '../client';
+import ObservabilitySkeleton from './skeleton/index.vue';
+
+export default {
+  components: {
+    ObservabilitySkeleton,
+  },
+  props: {
+    oauthUrl: {
+      type: String,
+      required: true,
+    },
+    tracingUrl: {
+      type: String,
+      required: true,
+    },
+    provisioningUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      observabilityClient: null,
+      authCompleted: false,
+    };
+  },
+  mounted() {
+    window.addEventListener('message', this.messageHandler);
+
+    // TODO Remove once backend work done - just for testing
+    // setTimeout(() => {
+    //   this.messageHandler({
+    //     data: { type: 'AUTH_COMPLETION', status: 'success' },
+    //     origin: new URL(this.oauthUrl).origin,
+    //   });
+    // }, 2000);
+  },
+  destroyed() {
+    window.removeEventListener('message', this.messageHandler);
+  },
+  methods: {
+    messageHandler(e) {
+      const isExpectedOrigin = e.origin === new URL(this.oauthUrl).origin;
+      if (!isExpectedOrigin) return;
+
+      const { data } = e;
+
+      if (data.type === 'AUTH_COMPLETION') {
+        if (this.authCompleted) return;
+
+        const { status, message, statusCode } = data;
+        if (status === 'success') {
+          this.observabilityClient = buildClient({
+            provisioningUrl: this.provisioningUrl,
+            tracingUrl: this.tracingUrl,
+          });
+          this.$refs.observabilitySkeleton?.onContentLoaded();
+        } else if (status === 'error') {
+          // eslint-disable-next-line @gitlab/require-i18n-strings,no-console
+          console.error('GOB auth failed with error:', message, statusCode);
+          this.$refs.observabilitySkeleton?.onError();
+        }
+        this.authCompleted = true;
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <iframe
+      v-if="!authCompleted"
+      sandbox="allow-same-origin allow-forms allow-scripts"
+      hidden
+      :src="oauthUrl"
+      data-testid="observability-oauth-iframe"
+    ></iframe>
+
+    <observability-skeleton ref="observabilitySkeleton">
+      <slot v-if="observabilityClient" :observability-client="observabilityClient"></slot>
+    </observability-skeleton>
+  </div>
+</template>