Fix Rubocop offenses, improve SQL duration format and changelog entry

Signed-off-by: NRémy Coutable <remy@rymai.me>

app/assets/javascripts/peek.js

 import 'vendor/peek';
 import 'vendor/peek.performance_bar';
 
-(function() {
-  $(document).on('click', '#peek-show-queries', function(e) {
-    var $modal;
-    $('.peek-rblineprof-modal').hide();
-    $modal = $('#modal-peek-pg-queries');
-    if ($modal.length) {
-      $modal.modal('toggle');
-    }
-    return e.preventDefault();
-  });
+$(document).on('click', '#peek-show-queries', function(e) {
+  e.preventDefault();
+  $('.peek-rblineprof-modal').hide();
+  let $modal = $('#modal-peek-pg-queries');
+  if ($modal.length) {
+    $modal.modal('toggle');
+  }
+});
 
-  $(document).on('click', '.js-lineprof-file', function(e) {
-    $(this).parents('.heading').next('div').toggle();
-    return e.preventDefault();
-  });
-}).call(window);
+$(document).on('click', '.js-lineprof-file', function(e) {
+  e.preventDefault();
+  $(this).parents('.heading').next('div').toggle();
+});

app/assets/javascripts/shortcuts.js

@@ -60,11 +60,10 @@ import findAndFollowLink from './shortcuts_dashboard_navigation';
       e.preventDefault();
       if (Cookies.get('perf_bar_enabled') === 'true') {
         Cookies.remove('perf_bar_enabled', { path: '/' });
-      }
-      else {
+      } else {
         Cookies.set('perf_bar_enabled', true, { path: '/' });
       }
-      return gl.utils.refreshCurrentPage();
+      gl.utils.refreshCurrentPage();
     };
 
     Shortcuts.prototype.toggleMarkdownPreview = function(e) {

changelogs/unreleased/29010-perf-bar.yml

 ---
-title: Allow to enable a performance bar with the keyboard shortcut
+title: Add an optional performance bar to view performance metrics for the current page
 merge_request: 11439
 author:

config/initializers/peek.rb

@@ -3,16 +3,15 @@ Rails.application.config.peek.adapter = :redis, { client: ::Redis.new(Gitlab::Re
 Peek.into Peek::Views::Host
 Peek.into Peek::Views::PerformanceBar
 if Gitlab::Database.mysql?
-  require 'peek-mysql'
+  require 'peek-mysql2'
   PEEK_DB_CLIENT = ::Mysql2::Client
   PEEK_DB_VIEW = Peek::Views::Mysql2
-  Peek.into PEEK_DB_VIEW
 else
   require 'peek-pg'
   PEEK_DB_CLIENT = ::PG::Connection
   PEEK_DB_VIEW = Peek::Views::PG
-  Peek.into PEEK_DB_VIEW
 end
+Peek.into PEEK_DB_VIEW
 Peek.into Peek::Views::Redis
 Peek.into Peek::Views::Sidekiq
 Peek.into Peek::Views::Rblineprof
@@ -25,4 +24,5 @@ class PEEK_DB_CLIENT
   self.query_details = Concurrent::Array.new
 end
 
+# rubocop:disable Style/ClassAndModuleCamelCase
 PEEK_DB_VIEW.prepend ::Gitlab::PerformanceBar::PeekQueryTracker

lib/gitlab/performance_bar/peek_query_tracker.rb

@@ -30,7 +30,8 @@ module Gitlab
 
       def track_query(raw_query, bindings, start, finish)
         query = Gitlab::Sherlock::Query.new(raw_query, start, finish)
-        query_info  = { duration: query.duration.round(4), sql: query.formatted_query }
+        query_info = { duration: '%.3f' % query.duration, sql: query.formatted_query }
+
         PEEK_DB_CLIENT.query_details << query_info
       end
     end

lib/peek/rblineprof/custom_controller_helpers.rb

@@ -11,6 +11,7 @@ module Peek
         end
       end
 
+      # rubocop:disable Metrics/AbcSize
       def inject_rblineprof
         ret = nil
         profile = lineprof(rblineprof_profiler_regex) do
@@ -25,32 +26,43 @@ module Peek
 
           # Sort each file by the longest calculated time
           per_file = profile.map do |file, lines|
-            total, child, excl, total_cpu, child_cpu, excl_cpu = lines[0]
+            total, _child, excl, total_cpu, _child_cpu, excl_cpu = lines[0]
 
             wall = summary == 'exclusive' ? excl : total
             cpu  = summary == 'exclusive' ? excl_cpu : total_cpu
             idle = summary == 'exclusive' ? (excl - excl_cpu) : (total - total_cpu)
 
+            sort_method =
+              case sort
+              when 'idle'
+                idle
+              when 'cpu'
+                cpu
+              else
+                wall
+              end
+
             [
               file, lines,
               wall, cpu, idle,
-              sort == 'idle' ? idle : sort == 'cpu' ? cpu : wall
+              sort_method
             ]
-          end.sort_by{ |a,b,c,d,e,f| -f }
+          end
+          per_file = per_file.sort_by { |_a, _b, _c, _d, _e, f| -f }
 
           output = ''
           per_file.each do |file_name, lines, file_wall, file_cpu, file_idle, file_sort|
-
             output << "<div class='peek-rblineprof-file'><div class='heading'>"
 
             show_src = file_sort > min
             tmpl = show_src ? "<a href='#' class='js-lineprof-file'>%s</a>" : "%s"
 
-            if mode == 'cpu'
-              output << sprintf("<span class='duration'>% 8.1fms + % 8.1fms</span> #{tmpl}", file_cpu / 1000.0, file_idle / 1000.0, file_name.sub(Rails.root.to_s + '/', ''))
-            else
-              output << sprintf("<span class='duration'>% 8.1fms</span> #{tmpl}", file_wall/1000.0, file_name.sub(Rails.root.to_s + '/', ''))
-            end
+            output <<
+              if mode == 'cpu'
+                sprintf("<span class='duration'>% 8.1fms + % 8.1fms</span> #{tmpl}", file_cpu / 1000.0, file_idle / 1000.0, file_name.sub(Rails.root.to_s + '/', ''))
+              else
+                sprintf("<span class='duration'>% 8.1fms</span> #{tmpl}", file_wall / 1000.0, file_name.sub(Rails.root.to_s + '/', ''))
+              end
 
             output << "</div>" # .heading
 

vendor/assets/javascripts/peek.js

-var requestId;
-
-requestId = null;
+let requestId = null;
 
 (function($) {
   var fetchRequestResults, getRequestId, peekEnabled, toggleBar, updatePerformanceBar;
@@ -16,9 +14,11 @@ requestId = null;
   };
   updatePerformanceBar = function(results) {
     var key, label, data, table, html, tr, duration_td, sql_td, strong;
-    for (key in results.data) {
-      for (label in results.data[key]) {
+
+    Object.keys(results.data).forEach((key) => {
+      Object.keys(results.data[key]).forEach((label) => {
         data = results.data[key][label];
+
         if (label == 'queries') {
           table = document.createElement('table');
 
@@ -40,12 +40,11 @@ requestId = null;
 
           table.className = 'table';
           $("[data-defer-to=" + key + "-" + label + "]").html(table);
-        }
-        else {
+        } else {
           $("[data-defer-to=" + key + "-" + label + "]").text(results.data[key][label]);
         }
-      }
-    }
+      });
+    });
     return $(document).trigger('peek:render', [getRequestId(), results]);
   };
   toggleBar = function(event) {
@@ -77,19 +76,6 @@ requestId = null;
   };
   $(document).on('keypress', toggleBar);
   $(document).on('peek:update', fetchRequestResults);
-  $(document).on('pjax:end', function(event, xhr, options) {
-    if (xhr != null) {
-      requestId = xhr.getResponseHeader('X-Request-Id');
-    }
-    if (peekEnabled()) {
-      return $(this).trigger('peek:update');
-    }
-  });
-  $(document).on('page:change turbolinks:load', function() {
-    if (peekEnabled()) {
-      return $(this).trigger('peek:update');
-    }
-  });
   return $(function() {
     if (peekEnabled()) {
       return $(this).trigger('peek:update');

vendor/assets/stylesheets/peek.scss

@@ -6,16 +6,11 @@ header.navbar-gitlab.with-peek {
 }
 
 #peek {
-  background: #000;
+  background: $black;
   height: 35px;
   line-height: 35px;
   color: #999;
 
-  .hidden {
-    display: none;
-    visibility: visible;
-  }
-
   &.disabled {
     display: none;
   }
@@ -58,12 +53,12 @@ header.navbar-gitlab.with-peek {
   }
 
   strong {
-    color: #fff;
+    color: $white-light;
   }
 
   table {
     strong {
-      color: #000;
+      color: $black;
     }
   }
 
@@ -95,5 +90,5 @@ header.navbar-gitlab.with-peek {
 }
 
 #modal-peek-pg-queries-content {
-  color: #000;
+  color: $black;
 }