Merge branch '48673-lazy-load-performance-bar-in-frontend' into 'master'

Resolve "Lazy-load performance bar in frontend"

Closes #48673

See merge request gitlab-org/gitlab-ce!20607

app/assets/javascripts/performance_bar/components/performance_bar_app.vue

 <script>
 import $ from 'jquery';
 
-import PerformanceBarService from '../services/performance_bar_service';
 import detailedMetric from './detailed_metric.vue';
 import requestSelector from './request_selector.vue';
 import simpleMetric from './simple_metric.vue';
 
-import Flash from '../../flash';
-
 export default {
   components: {
     detailedMetric,
@@ -69,37 +66,13 @@ export default {
     },
   },
   mounted() {
-    this.interceptor = PerformanceBarService.registerInterceptor(
-      this.peekUrl,
-      this.loadRequestDetails,
-    );
-
-    this.loadRequestDetails(this.requestId, window.location.href);
     this.currentRequest = this.requestId;
 
     if (this.lineProfileModal.length) {
       this.lineProfileModal.modal('toggle');
     }
   },
-  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}`),
-        );
-    },
     changeCurrentRequest(newRequestId) {
       this.currentRequest = newRequestId;
     },

app/assets/javascripts/performance_bar/index.js

 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: {

spec/javascripts/performance_bar/components/performance_bar_app_spec.js

 import Vue from 'vue';
-import axios from '~/lib/utils/axios_utils';
 import performanceBarApp from '~/performance_bar/components/performance_bar_app.vue';
-import PerformanceBarService from '~/performance_bar/services/performance_bar_service';
 import PerformanceBarStore from '~/performance_bar/stores/performance_bar_store';
 
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import MockAdapter from 'axios-mock-adapter';
 
-describe('performance bar', () => {
-  let mock;
+describe('performance bar app', () => {
   let vm;
 
   beforeEach(() => {
     const store = new PerformanceBarStore();
 
-    mock = new MockAdapter(axios);
-
-    mock.onGet('/-/peek/results').reply(
-      200,
-      {
-        data: {
-          gc: {
-            invokes: 0,
-            invoke_time: '0.00',
-            use_size: 0,
-            total_size: 0,
-            total_object: 0,
-            gc_time: '0.00',
-          },
-          host: { hostname: 'web-01' },
-        },
-      },
-      {},
-    );
-
     vm = mountComponent(Vue.extend(performanceBarApp), {
       store,
       env: 'development',
@@ -45,44 +21,9 @@ describe('performance bar', () => {
 
   afterEach(() => {
     vm.$destroy();
-    mock.restore();
   });
 
   it('sets the class to match the environment', () => {
     expect(vm.$el.getAttribute('class')).toContain('development');
   });
-
-  describe('loadRequestDetails', () => {
-    beforeEach(() => {
-      spyOn(vm.store, 'addRequest').and.callThrough();
-    });
-
-    it('does nothing if the request cannot be tracked', () => {
-      spyOn(vm.store, 'canTrackRequest').and.callFake(() => false);
-
-      vm.loadRequestDetails('123', 'https://gitlab.com/');
-
-      expect(vm.store.addRequest).not.toHaveBeenCalled();
-    });
-
-    it('adds the request immediately', () => {
-      vm.loadRequestDetails('123', 'https://gitlab.com/');
-
-      expect(vm.store.addRequest).toHaveBeenCalledWith(
-        '123',
-        'https://gitlab.com/',
-      );
-    });
-
-    it('makes an HTTP request for the request details', () => {
-      spyOn(PerformanceBarService, 'fetchRequestDetails').and.callThrough();
-
-      vm.loadRequestDetails('456', 'https://gitlab.com/');
-
-      expect(PerformanceBarService.fetchRequestDetails).toHaveBeenCalledWith(
-        '/-/peek/results',
-        '456',
-      );
-    });
-  });
 });

spec/javascripts/performance_bar/index_spec.js

+import axios from '~/lib/utils/axios_utils';
+import performanceBar from '~/performance_bar';
+import PerformanceBarService from '~/performance_bar/services/performance_bar_service';
+
+import MockAdapter from 'axios-mock-adapter';
+
+describe('performance bar wrapper', () => {
+  let mock;
+  let vm;
+
+  beforeEach(() => {
+    const peekWrapper = document.createElement('div');
+
+    peekWrapper.setAttribute('id', 'js-peek');
+    peekWrapper.setAttribute('data-env', 'development');
+    peekWrapper.setAttribute('data-request-id', '123');
+    peekWrapper.setAttribute('data-peek-url', '/-/peek/results');
+    peekWrapper.setAttribute('data-profile-url', '?lineprofiler=true');
+
+    document.body.appendChild(peekWrapper);
+
+    mock = new MockAdapter(axios);
+
+    mock.onGet('/-/peek/results').reply(
+      200,
+      {
+        data: {
+          gc: {
+            invokes: 0,
+            invoke_time: '0.00',
+            use_size: 0,
+            total_size: 0,
+            total_object: 0,
+            gc_time: '0.00',
+          },
+          host: { hostname: 'web-01' },
+        },
+      },
+      {},
+    );
+
+    vm = performanceBar({ container: '#js-peek' });
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+    mock.restore();
+  });
+
+  describe('loadRequestDetails', () => {
+    beforeEach(() => {
+      spyOn(vm.store, 'addRequest').and.callThrough();
+    });
+
+    it('does nothing if the request cannot be tracked', () => {
+      spyOn(vm.store, 'canTrackRequest').and.callFake(() => false);
+
+      vm.loadRequestDetails('123', 'https://gitlab.com/');
+
+      expect(vm.store.addRequest).not.toHaveBeenCalled();
+    });
+
+    it('adds the request immediately', () => {
+      vm.loadRequestDetails('123', 'https://gitlab.com/');
+
+      expect(vm.store.addRequest).toHaveBeenCalledWith(
+        '123',
+        'https://gitlab.com/',
+      );
+    });
+
+    it('makes an HTTP request for the request details', () => {
+      spyOn(PerformanceBarService, 'fetchRequestDetails').and.callThrough();
+
+      vm.loadRequestDetails('456', 'https://gitlab.com/');
+
+      expect(PerformanceBarService.fetchRequestDetails).toHaveBeenCalledWith(
+        '/-/peek/results',
+        '456',
+      );
+    });
+  });
+});