diff options
author | Mike Greiling <mike@pixelcog.com> | 2018-07-14 00:04:41 +0300 |
---|---|---|
committer | Mike Greiling <mike@pixelcog.com> | 2018-07-14 00:04:41 +0300 |
commit | 77f501bcd20a04289d073b0a328466316ec46bd2 (patch) | |
tree | 6dfd1b95aa0d5159fa59f48af4a669bc7d5e3454 | |
parent | 6717643c30541a95eeb99202861c43eca7ffd9b4 (diff) | |
parent | 8e1a8deee39fae94f43ef0c974e56abf23e5b4b3 (diff) |
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
4 files changed, 115 insertions, 89 deletions
diff --git a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue index b76965f280b..0fdb0a080cf 100644 --- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue +++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue @@ -1,13 +1,10 @@ <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; }, 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: { diff --git a/spec/javascripts/performance_bar/components/performance_bar_app_spec.js b/spec/javascripts/performance_bar/components/performance_bar_app_spec.js index 9ab9ab1c9f4..7926db44429 100644 --- a/spec/javascripts/performance_bar/components/performance_bar_app_spec.js +++ b/spec/javascripts/performance_bar/components/performance_bar_app_spec.js @@ -1,39 +1,15 @@ 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', - ); - }); - }); }); diff --git a/spec/javascripts/performance_bar/index_spec.js b/spec/javascripts/performance_bar/index_spec.js new file mode 100644 index 00000000000..1784bd64adb --- /dev/null +++ b/spec/javascripts/performance_bar/index_spec.js @@ -0,0 +1,83 @@ +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', + ); + }); + }); +}); |