Merge branch 'ajax-requests-in-performance-bar' into 'master'

Show Ajax requests in performance bar

Closes #43925

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

5 files changed, 275 insertions, 5 deletions

diff --git a/spec/features/user_can_display_performance_bar_spec.rb b/spec/features/user_can_display_performance_bar_spec.rb
index 975c157bcf5..e069c2fddd1 100644
--- a/spec/features/user_can_display_performance_bar_spec.rb
+++ b/spec/features/user_can_display_performance_bar_spec.rb
@@ -3,7 +3,7 @@ require 'rails_helper'
 describe 'User can display performance bar', :js do
   shared_examples 'performance bar cannot be displayed' do
     it 'does not show the performance bar by default' do
-      expect(page).not_to have_css('#peek')
+      expect(page).not_to have_css('#js-peek')
     end
 
     context 'when user press `pb`' do
@@ -12,14 +12,14 @@ describe 'User can display performance bar', :js do
       end
 
       it 'does not show the performance bar by default' do
-        expect(page).not_to have_css('#peek')
+        expect(page).not_to have_css('#js-peek')
       end
     end
   end
 
   shared_examples 'performance bar can be displayed' do
     it 'does not show the performance bar by default' do
-      expect(page).not_to have_css('#peek')
+      expect(page).not_to have_css('#js-peek')
     end
 
     context 'when user press `pb`' do
@@ -28,7 +28,7 @@ describe 'User can display performance bar', :js do
       end
 
       it 'shows the performance bar' do
-        expect(page).to have_css('#peek')
+        expect(page).to have_css('#js-peek')
       end
     end
   end
@@ -41,7 +41,7 @@ describe 'User can display performance bar', :js do
     it 'shows the performance bar by default' do
       refresh # Because we're stubbing Rails.env after the 1st visit to root_path
 
-      expect(page).to have_css('#peek')
+      expect(page).to have_css('#js-peek')
     end
   end
 
diff --git a/spec/javascripts/performance_bar/components/detailed_metric_spec.js b/spec/javascripts/performance_bar/components/detailed_metric_spec.js
new file mode 100644
index 00000000000..eee0210a2a9
--- /dev/null
+++ b/spec/javascripts/performance_bar/components/detailed_metric_spec.js
@@ -0,0 +1,88 @@
+import Vue from 'vue';
+import detailedMetric from '~/performance_bar/components/detailed_metric.vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+
+describe('detailedMetric', () => {
+  let vm;
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('when the current request has no details', () => {
+    beforeEach(() => {
+      vm = mountComponent(Vue.extend(detailedMetric), {
+        currentRequest: {},
+        metric: 'gitaly',
+        header: 'Gitaly calls',
+        details: 'details',
+        keys: ['feature', 'request'],
+      });
+    });
+
+    it('does not display details', () => {
+      expect(vm.$el.innerText).not.toContain('/');
+    });
+
+    it('does not display the modal', () => {
+      expect(vm.$el.querySelector('.performance-bar-modal')).toBeNull();
+    });
+
+    it('displays the metric name', () => {
+      expect(vm.$el.innerText).toContain('gitaly');
+    });
+  });
+
+  describe('when the current request has details', () => {
+    const requestDetails = [
+      { duration: '100', feature: 'find_commit', request: 'abcdef' },
+      { duration: '23', feature: 'rebase_in_progress', request: '' },
+    ];
+
+    beforeEach(() => {
+      vm = mountComponent(Vue.extend(detailedMetric), {
+        currentRequest: {
+          details: {
+            gitaly: {
+              duration: '123ms',
+              calls: '456',
+              details: requestDetails,
+            },
+          },
+        },
+        metric: 'gitaly',
+        header: 'Gitaly calls',
+        details: 'details',
+        keys: ['feature', 'request'],
+      });
+    });
+
+    it('diplays details', () => {
+      expect(vm.$el.innerText.replace(/\s+/g, ' ')).toContain('123ms / 456');
+    });
+
+    it('adds a modal with a table of the details', () => {
+      vm.$el
+        .querySelectorAll('.performance-bar-modal td strong')
+        .forEach((duration, index) => {
+          expect(duration.innerText).toContain(requestDetails[index].duration);
+        });
+
+      vm.$el
+        .querySelectorAll('.performance-bar-modal td:nth-child(2)')
+        .forEach((feature, index) => {
+          expect(feature.innerText).toContain(requestDetails[index].feature);
+        });
+
+      vm.$el
+        .querySelectorAll('.performance-bar-modal td:nth-child(3)')
+        .forEach((request, index) => {
+          expect(request.innerText).toContain(requestDetails[index].request);
+        });
+    });
+
+    it('displays the metric name', () => {
+      expect(vm.$el.innerText).toContain('gitaly');
+    });
+  });
+});
diff --git a/spec/javascripts/performance_bar/components/performance_bar_app_spec.js b/spec/javascripts/performance_bar/components/performance_bar_app_spec.js
new file mode 100644
index 00000000000..9ab9ab1c9f4
--- /dev/null
+++ b/spec/javascripts/performance_bar/components/performance_bar_app_spec.js
@@ -0,0 +1,88 @@
+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;
+  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',
+      requestId: '123',
+      peekUrl: '/-/peek/results',
+      profileUrl: '?lineprofiler=true',
+    });
+  });
+
+  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/components/request_selector_spec.js b/spec/javascripts/performance_bar/components/request_selector_spec.js
new file mode 100644
index 00000000000..6108a29f8c4
--- /dev/null
+++ b/spec/javascripts/performance_bar/components/request_selector_spec.js
@@ -0,0 +1,47 @@
+import Vue from 'vue';
+import requestSelector from '~/performance_bar/components/request_selector.vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+
+describe('request selector', () => {
+  const requests = [
+    { id: '123', url: 'https://gitlab.com/' },
+    {
+      id: '456',
+      url: 'https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/1',
+    },
+    {
+      id: '789',
+      url:
+        'https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/1.json?serializer=widget',
+    },
+  ];
+
+  let vm;
+
+  beforeEach(() => {
+    vm = mountComponent(Vue.extend(requestSelector), {
+      requests,
+      currentRequest: requests[1],
+    });
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  function optionText(requestId) {
+    return vm.$el.querySelector(`[value='${requestId}']`).innerText.trim();
+  }
+
+  it('displays the last component of the path', () => {
+    expect(optionText(requests[2].id)).toEqual('1.json?serializer=widget');
+  });
+
+  it('keeps the last two components of the path when the last component is numeric', () => {
+    expect(optionText(requests[1].id)).toEqual('merge_requests/1');
+  });
+
+  it('ignores trailing slashes', () => {
+    expect(optionText(requests[0].id)).toEqual('gitlab.com');
+  });
+});
diff --git a/spec/javascripts/performance_bar/components/simple_metric_spec.js b/spec/javascripts/performance_bar/components/simple_metric_spec.js
new file mode 100644
index 00000000000..98b843e9711
--- /dev/null
+++ b/spec/javascripts/performance_bar/components/simple_metric_spec.js
@@ -0,0 +1,47 @@
+import Vue from 'vue';
+import simpleMetric from '~/performance_bar/components/simple_metric.vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+
+describe('simpleMetric', () => {
+  let vm;
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('when the current request has no details', () => {
+    beforeEach(() => {
+      vm = mountComponent(Vue.extend(simpleMetric), {
+        currentRequest: {},
+        metric: 'gitaly',
+      });
+    });
+
+    it('does not display details', () => {
+      expect(vm.$el.innerText).not.toContain('/');
+    });
+
+    it('displays the metric name', () => {
+      expect(vm.$el.innerText).toContain('gitaly');
+    });
+  });
+
+  describe('when the current request has details', () => {
+    beforeEach(() => {
+      vm = mountComponent(Vue.extend(simpleMetric), {
+        currentRequest: {
+          details: { gitaly: { duration: '123ms', calls: '456' } },
+        },
+        metric: 'gitaly',
+      });
+    });
+
+    it('diplays details', () => {
+      expect(vm.$el.innerText.replace(/\s+/g, ' ')).toContain('123ms / 456');
+    });
+
+    it('displays the metric name', () => {
+      expect(vm.$el.innerText).toContain('gitaly');
+    });
+  });
+});