1 files changed, 32 insertions, 0 deletions
diff --git a/app/assets/javascripts/observability/index.js b/app/assets/javascripts/observability/index.js
index cd342ebee3e..72ff1357551 100644
--- a/app/assets/javascripts/observability/index.js
+++ b/app/assets/javascripts/observability/index.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 
 import ObservabilityApp from './components/observability_app.vue';
+import { SKELETON_VARIANTS_BY_ROUTE } from './constants';
 
 Vue.use(VueRouter);
 
@@ -17,10 +18,41 @@ export default () => {
   return new Vue({
     el,
     router,
+    computed: {
+      skeletonVariant() {
+        const [, variant] =
+          Object.entries(SKELETON_VARIANTS_BY_ROUTE).find(([path]) =>
+            this.$route.path.endsWith(path),
+          ) || [];
+
+        return variant;
+      },
+    },
+    methods: {
+      routeUpdateHandler(payload) {
+        const isNewObservabilityPath = this.$route?.query?.observability_path !== payload?.url;
+
+        const shouldNotHandleMessage = !payload.url || !isNewObservabilityPath;
+
+        if (shouldNotHandleMessage) {
+          return;
+        }
+
+        // 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: payload.url },
+        });
+      },
+    },
     render(h) {
       return h(ObservabilityApp, {
         props: {
           observabilityIframeSrc: el.dataset.observabilityIframeSrc,
+          skeletonVariant: this.skeletonVariant,
+        },
+        on: {
+          'route-update': (payload) => this.routeUpdateHandler(payload),
         },
       });
     },