Add Vue resource interceptor to performance bar

app/assets/javascripts/performance_bar/services/performance_bar_service.js

+import Vue from 'vue';
+import _ from 'underscore';
 import axios from '../../lib/utils/axios_utils';
 
+let vueResourceInterceptor;
+
 export default class PerformanceBarService {
   static fetchRequestDetails(peekUrl, requestId) {
     return axios.get(peekUrl, { params: { request_id: requestId } });
   }
 
   static registerInterceptor(peekUrl, callback) {
+    vueResourceInterceptor = (request, next) => {
+      next(response => {
+        const requestId = response.headers['x-request-id'];
+        const requestUrl = response.url;
+        console.log(requestUrl);
+
+        if (requestUrl !== peekUrl && requestId) {
+          callback(requestId, requestUrl);
+        }
+      });
+    };
+
+    Vue.http.interceptors.push(vueResourceInterceptor);
+
     return axios.interceptors.response.use(response => {
       const requestId = response.headers['x-request-id'];
       const requestUrl = response.config.url;
@@ -20,5 +38,9 @@ export default class PerformanceBarService {
 
   static removeInterceptor(interceptor) {
     axios.interceptors.response.eject(interceptor);
+    Vue.http.interceptors = _.without(
+      Vue.http.interceptors,
+      vueResourceInterceptor,
+    );
   }
 }

app/assets/stylesheets/performance_bar.scss

@@ -15,6 +15,10 @@
   line-height: $performance-bar-height;
   color: $perf-bar-text;
 
+  select {
+    width: 200px;
+  }
+
   &.disabled {
     display: none;
   }