6 files changed, 37 insertions, 28 deletions

diff --git a/app/assets/javascripts/performance_bar.js b/app/assets/javascripts/performance_bar.js
index a224a3440b4..c22598ee665 100644
--- a/app/assets/javascripts/performance_bar.js
+++ b/app/assets/javascripts/performance_bar.js
@@ -14,20 +14,14 @@ export default class PerformanceBar {
 
   init(opts) {
     const $container = $(opts.container);
-    this.$sqlProfileLink = $container.find('.js-toggle-modal-peek-sql');
-    this.$sqlProfileModal = $container.find('#modal-peek-pg-queries');
     this.$lineProfileLink = $container.find('.js-toggle-modal-peek-line-profile');
     this.$lineProfileModal = $('#modal-peek-line-profile');
-    this.$gitalyProfileLink = $container.find('.js-toggle-modal-peek-gitaly');
-    this.$gitalyProfileModal = $container.find('#modal-peek-gitaly-details');
     this.initEventListeners();
     this.showModalOnLoad();
   }
 
   initEventListeners() {
-    this.$sqlProfileLink.on('click', () => this.handleSQLProfileLink());
     this.$lineProfileLink.on('click', e => this.handleLineProfileLink(e));
-    this.$gitalyProfileLink.on('click', () => this.handleGitalyProfileLink());
     $(document).on('click', '.js-lineprof-file', PerformanceBar.toggleLineProfileFile);
   }
 
@@ -39,10 +33,6 @@ export default class PerformanceBar {
     }
   }
 
-  handleSQLProfileLink() {
-    PerformanceBar.toggleModal(this.$sqlProfileModal);
-  }
-
   handleLineProfileLink(e) {
     const lineProfilerParameter = getParameterValues('lineprofiler');
     const lineProfilerParameterRegex = new RegExp(`lineprofiler=${lineProfilerParameter[0]}`);
@@ -55,10 +45,6 @@ export default class PerformanceBar {
     }
   }
 
-  handleGitalyProfileLink() {
-    PerformanceBar.toggleModal(this.$gitalyProfileModal);
-  }
-
   static toggleModal($modal) {
     if ($modal.length) {
       $modal.modal('toggle');
diff --git a/app/views/peek/views/_gc.html.haml b/app/views/peek/views/_gc.html.haml
new file mode 100644
index 00000000000..9fc83e56ee7
--- /dev/null
+++ b/app/views/peek/views/_gc.html.haml
@@ -0,0 +1,7 @@
+- local_assigns.fetch(:view)
+
+%span.bold
+  %span{ title: 'Invoke Time', data: { defer_to: "#{view.defer_key}-gc_time" } }...
+  \/
+  %span{ title: 'Invoke Count', data: { defer_to: "#{view.defer_key}-invokes" } }...
+gc
diff --git a/app/views/peek/views/_gitaly.html.haml b/app/views/peek/views/_gitaly.html.haml
index 5e7d1565825..945bb287429 100644
--- a/app/views/peek/views/_gitaly.html.haml
+++ b/app/views/peek/views/_gitaly.html.haml
@@ -1,16 +1,17 @@
 - local_assigns.fetch(:view)
 
-%strong
-  %a.js-toggle-modal-peek-gitaly
-    %span{ data: { defer_to: "#{view.defer_key}-duration" } }...
-    \/
-    %span{ data: { defer_to: "#{view.defer_key}-calls" } }...
-#modal-peek-gitaly-details.modal{ tabindex: -1 }
+%button.btn-blank.btn-link.bold{ type: 'button', data: { toggle: 'modal', target: '#modal-peek-gitaly-details' } }
+  %span{ data: { defer_to: "#{view.defer_key}-duration" } }...
+  \/
+  %span{ data: { defer_to: "#{view.defer_key}-calls" } }...
+#modal-peek-gitaly-details.modal{ tabindex: -1, role: 'dialog' }
   .modal-dialog.modal-full
     .modal-content
       .modal-header
-        %button.close.btn.btn-link.btn-sm{ type: 'button', data: { dismiss: 'modal' } } X
+        %button.close{ type: 'button', data: { dismiss: 'modal' }, 'aria-label' => 'Close' }
+          %span{ 'aria-hidden' => 'true' }
+            ×
         %h4
           Gitaly requests
       .modal-body{ data: { defer_to: "#{view.defer_key}-details" } }...
-Gitaly
+gitaly
diff --git a/app/views/peek/views/_redis.html.haml b/app/views/peek/views/_redis.html.haml
new file mode 100644
index 00000000000..f7fba6c95fc
--- /dev/null
+++ b/app/views/peek/views/_redis.html.haml
@@ -0,0 +1,7 @@
+- local_assigns.fetch(:view)
+
+%span.bold
+  %span{ data: { defer_to: "#{view.defer_key}-duration" } }...
+  \/
+  %span{ data: { defer_to: "#{view.defer_key}-calls" } }...
+redis
diff --git a/app/views/peek/views/_sidekiq.html.haml b/app/views/peek/views/_sidekiq.html.haml
new file mode 100644
index 00000000000..7efbc05890d
--- /dev/null
+++ b/app/views/peek/views/_sidekiq.html.haml
@@ -0,0 +1,7 @@
+- local_assigns.fetch(:view)
+
+%span.bold
+  %span{ data: { defer_to: "#{view.defer_key}-duration" } }...
+  \/
+  %span{ data: { defer_to: "#{view.defer_key}-calls" } }...
+sidekiq
diff --git a/app/views/peek/views/_sql.html.haml b/app/views/peek/views/_sql.html.haml
index dd8b524064f..36583df898a 100644
--- a/app/views/peek/views/_sql.html.haml
+++ b/app/views/peek/views/_sql.html.haml
@@ -1,13 +1,14 @@
-%strong
-  %a.js-toggle-modal-peek-sql
-    %span{ data: { defer_to: "#{view.defer_key}-duration" } }...
-    \/
-    %span{ data: { defer_to: "#{view.defer_key}-calls" } }...
+%button.btn-blank.btn-link.bold{ type: 'button', data: { toggle: 'modal', target: '#modal-peek-pg-queries' } }
+  %span{ data: { defer_to: "#{view.defer_key}-duration" } }...
+  \/
+  %span{ data: { defer_to: "#{view.defer_key}-calls" } }...
 #modal-peek-pg-queries.modal{ tabindex: -1 }
   .modal-dialog.modal-full
     .modal-content
       .modal-header
-        %button.close.btn.btn-link.btn-sm{ type: 'button', data: { dismiss: 'modal' } } X
+        %button.close{ type: 'button', data: { dismiss: 'modal' }, 'aria-label' => 'Close' }
+          %span{ 'aria-hidden' => 'true' }
+            ×
         %h4
           SQL queries
       .modal-body{ data: { defer_to: "#{view.defer_key}-queries" } }...