1 files changed, 61 insertions, 10 deletions

diff --git a/app/assets/javascripts/observability/components/observability_app.vue b/app/assets/javascripts/observability/components/observability_app.vue
index 4f5e27be46f..33d23ea043b 100644
--- a/app/assets/javascripts/observability/components/observability_app.vue
+++ b/app/assets/javascripts/observability/components/observability_app.vue
@@ -1,21 +1,69 @@
 <script>
+import { darkModeEnabled } from '~/lib/utils/color_utils';
+import { setUrlParams } from '~/lib/utils/url_utility';
+
+import { MESSAGE_EVENT_TYPE, OBSERVABILITY_ROUTES, SKELETON_VARIANT } from '../constants';
+import ObservabilitySkeleton from './skeleton/index.vue';
+
 export default {
+  components: {
+    ObservabilitySkeleton,
+  },
   props: {
     observabilityIframeSrc: {
       type: String,
       required: true,
     },
   },
+  computed: {
+    iframeSrcWithParams() {
+      return setUrlParams(
+        { theme: darkModeEnabled() ? 'dark' : 'light', username: gon?.current_username },
+        this.observabilityIframeSrc,
+      );
+    },
+    getSkeletonVariant() {
+      switch (this.$route.path) {
+        case OBSERVABILITY_ROUTES.DASHBOARDS:
+          return SKELETON_VARIANT.DASHBOARDS;
+        case OBSERVABILITY_ROUTES.EXPLORE:
+          return SKELETON_VARIANT.EXPLORE;
+        case OBSERVABILITY_ROUTES.MANAGE:
+          return SKELETON_VARIANT.MANAGE;
+        default:
+          return SKELETON_VARIANT.DASHBOARDS;
+      }
+    },
+  },
   mounted() {
     window.addEventListener('message', this.messageHandler);
   },
+  destroyed() {
+    window.removeEventListener('message', this.messageHandler);
+  },
   methods: {
     messageHandler(e) {
       const isExpectedOrigin = e.origin === new URL(this.observabilityIframeSrc)?.origin;
+      if (!isExpectedOrigin) return;
 
-      const isNewObservabilityPath = this.$route?.query?.observability_path !== e.data?.url;
+      const {
+        data: { type, payload },
+      } = e;
+      switch (type) {
+        case MESSAGE_EVENT_TYPE.GOUI_LOADED:
+          this.$refs.iframeSkeleton.handleSkeleton();
+          break;
+        case MESSAGE_EVENT_TYPE.GOUI_ROUTE_UPDATE:
+          this.routeUpdateHandler(payload);
+          break;
+        default:
+          break;
+      }
+    },
+    routeUpdateHandler(payload) {
+      const isNewObservabilityPath = this.$route?.query?.observability_path !== payload?.url;
 
-      const shouldNotHandleMessage = !isExpectedOrigin || !e.data.url || !isNewObservabilityPath;
+      const shouldNotHandleMessage = !payload.url || !isNewObservabilityPath;
 
       if (shouldNotHandleMessage) {
         return;
@@ -24,7 +72,7 @@ export default {
       // this will update the `observability_path` query param on each route change inside Observability UI
       this.$router.replace({
         name: this.$route.pathname,
-        query: { ...this.$route.query, observability_path: e.data.url },
+        query: { ...this.$route.query, observability_path: payload.url },
       });
     },
   },
@@ -32,11 +80,14 @@ export default {
 </script>
 
 <template>
-  <iframe
-    id="observability-ui-iframe"
-    data-testid="observability-ui-iframe"
-    frameborder="0"
-    height="100%"
-    :src="observabilityIframeSrc"
-  ></iframe>
+  <observability-skeleton ref="iframeSkeleton" :variant="getSkeletonVariant">
+    <iframe
+      id="observability-ui-iframe"
+      data-testid="observability-ui-iframe"
+      frameborder="0"
+      height="100%"
+      :src="iframeSrcWithParams"
+      sandbox="allow-same-origin allow-forms allow-scripts"
+    ></iframe>
+  </observability-skeleton>
 </template>