1 files changed, 31 insertions, 2 deletions
diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js
index 4a98aed7679..41880d27516 100644
--- a/app/assets/javascripts/performance_bar/index.js
+++ b/app/assets/javascripts/performance_bar/index.js
@@ -1,12 +1,13 @@
 import Vue from 'vue';
-import performanceBarApp from './components/performance_bar_app.vue';
+import Flash from '../flash';
+import PerformanceBarService from './services/performance_bar_service';
 import PerformanceBarStore from './stores/performance_bar_store';
 
 export default ({ container }) =>
   new Vue({
     el: container,
     components: {
-      performanceBarApp,
+      performanceBarApp: () => import('./components/performance_bar_app.vue'),
     },
     data() {
       const performanceBarData = document.querySelector(this.$options.el)
@@ -21,6 +22,34 @@ export default ({ container }) =>
         profileUrl: performanceBarData.profileUrl,
       };
     },
+    mounted() {
+      this.interceptor = PerformanceBarService.registerInterceptor(
+        this.peekUrl,
+        this.loadRequestDetails,
+      );
+
+      this.loadRequestDetails(this.requestId, window.location.href);
+    },
+    beforeDestroy() {
+      PerformanceBarService.removeInterceptor(this.interceptor);
+    },
+    methods: {
+      loadRequestDetails(requestId, requestUrl) {
+        if (!this.store.canTrackRequest(requestUrl)) {
+          return;
+        }
+
+        this.store.addRequest(requestId, requestUrl);
+
+        PerformanceBarService.fetchRequestDetails(this.peekUrl, requestId)
+          .then(res => {
+            this.store.addRequestDetails(requestId, res.data.data);
+          })
+          .catch(() =>
+            Flash(`Error getting performance bar results for ${requestId}`),
+          );
+      },
+    },
     render(createElement) {
       return createElement('performance-bar-app', {
         props: {