Show Ajax requests in performance bar

But first, rewrite the performance bar in Vue:

1. Remove the peek-host gem and replace it with existing code. This also allows
   us to include the host in the JSON response, rather than in the page HTML.
2. Leave the line profiler parts as here-be-dragons: nicer would be a separate
   endpoint for these, so we could use them on Ajax requests too.
3. The performance bar is too fiddly to rewrite right now, so apply the same
   logic to that.

Then, add features! All requests made through Axios are able to be tracked. To
keep a lid on memory usage, only the first two requests for a given URL are
tracked, though. Each request that's tracked has the same data as the initial
page load, with the exception of the performance bar and the line profiler, as
explained above.

4 files changed, 270 insertions, 0 deletions

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');
+    });
+  });
+});