Improve the frontend code for the performance bar

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

app/views/peek/views/_gc.html.haml

+- 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

app/views/peek/views/_gitaly.html.haml

 - local_assigns.fetch(:view)
 
-%strong
-  %a.js-toggle-modal-peek-gitaly
+%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 }
+#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

app/views/peek/views/_redis.html.haml

+- local_assigns.fetch(:view)
+
+%span.bold
+  %span{ data: { defer_to: "#{view.defer_key}-duration" } }...
+  \/
+  %span{ data: { defer_to: "#{view.defer_key}-calls" } }...
+redis

app/views/peek/views/_sidekiq.html.haml

+- local_assigns.fetch(:view)
+
+%span.bold
+  %span{ data: { defer_to: "#{view.defer_key}-duration" } }...
+  \/
+  %span{ data: { defer_to: "#{view.defer_key}-calls" } }...
+sidekiq

app/views/peek/views/_sql.html.haml

-%strong
-  %a.js-toggle-modal-peek-sql
+%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" } }...
@@ -7,7 +6,9 @@
   .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" } }...

vendor/assets/javascripts/peek.js

 /*
- * This is a modified version of https://github.com/peek/peek/blob/master/app/assets/javascripts/peek.js
+ * this is a modified version of https://github.com/peek/peek/blob/master/app/assets/javascripts/peek.js
  *
  * - Removed the dependency on jquery.tipsy
  * - Removed the initializeTipsy and toggleBar functions
@@ -18,11 +18,9 @@
   updatePerformanceBar = function(results) {
     Object.keys(results.data).forEach(function(key) {
       Object.keys(results.data[key]).forEach(function(label) {
-        var data, table, target;
-
-        data = results.data[key][label];
-        table = createTable(key, label, data);
-        target = $("[data-defer-to=" + key + "-" + label + "]");
+        var data = results.data[key][label];
+        var table = createTable(key, label, data);
+        var target = $('[data-defer-to="' + key + '-' + label + '"]');
 
         if (table) {
           target.html(table);
@@ -34,11 +32,11 @@
     return $(document).trigger('peek:render', [getRequestId(), results]);
   };
   createTable = function(key, label, data) {
-    var table;
-
-    if (label != 'queries' && label != 'details') { return; }
+    if (label !== 'queries' && label !== 'details') {
+      return;
+    }
 
-    table = document.createElement('table');
+    var table = document.createElement('table');
 
     for (var i = 0; i < data.length; i += 1) {
       table.appendChild(createTableRow(data[i]));
@@ -49,24 +47,20 @@
     return table;
   };
   createTableRow = function(row) {
-    var tr, duration_td, strong;
-
-    tr = document.createElement('tr');
-    duration_td = document.createElement('td');
-    strong = document.createElement('strong');
+    var tr = document.createElement('tr');
+    var durationTd = document.createElement('td');
+    var strong = document.createElement('strong');
 
     strong.append(row['duration'] + 'ms');
-    duration_td.appendChild(strong);
-    tr.appendChild(duration_td);
+    durationTd.appendChild(strong);
+    tr.appendChild(durationTd);
 
     ['sql', 'feature', 'enabled', 'request'].forEach(function(key) {
-      var td;
-
       if (!row[key]) { return; }
 
-      td = document.createElement('td');
-      td.appendChild(document.createTextNode(row[key]));
+      var td = document.createElement('td');
 
+      td.appendChild(document.createTextNode(row[key]));
       tr.appendChild(td);
     });