Display queries duration in performance bar queries modal

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

config/initializers/peek.rb

@@ -4,44 +4,26 @@ Peek.into Peek::Views::Host
 Peek.into Peek::Views::PerformanceBar
 if Gitlab::Database.mysql?
   require 'peek-mysql'
-  Peek.into Peek::Views::Mysql2
+  PEEK_DB_CLIENT = ::Mysql2::Client
+  PEEK_DB_VIEW = Peek::Views::Mysql2
+  Peek.into PEEK_DB_VIEW
 else
   require 'peek-pg'
-  Peek.into Peek::Views::PG
+  PEEK_DB_CLIENT = ::PG::Connection
+  PEEK_DB_VIEW = Peek::Views::PG
+  Peek.into PEEK_DB_VIEW
 end
 Peek.into Peek::Views::Redis
 Peek.into Peek::Views::Sidekiq
 Peek.into Peek::Views::Rblineprof
 Peek.into Peek::Views::GC
 
-if Gitlab::Database.mysql?
-  class Mysql2::Client
-    class << self
-      attr_accessor :query_details
-    end
-    self.query_details = Concurrent::Array.new
-  end
 
-  module Peek
-    module Views
-      class Mysql2 < View
-        prepend ::Gitlab::PerformanceBar::PeekMysqlWithQueries
-      end
-    end
-  end
-else
-  class PG::Connection
+class PEEK_DB_CLIENT
   class << self
     attr_accessor :query_details
   end
   self.query_details = Concurrent::Array.new
-  end
-
-  module Peek
-    module Views
-      class PG < View
-        prepend ::Gitlab::PerformanceBar::PeekPgWithQueries
-      end
-    end
-  end
 end
+
+PEEK_DB_VIEW.prepend ::Gitlab::PerformanceBar::PeekQueryTracker

lib/gitlab/performance_bar/peek_mysql_with_queries.rb

-# Inspired by https://github.com/peek/peek-mysql2/blob/master/lib/peek/views/mysql2.rb
-module Gitlab
-  module PerformanceBar
-    module PeekMysqlWithQueries
-      def queries
-        ::Mysql2::Client.query_details
-      end
-
-      def results
-        super.merge(queries: queries)
-      end
-
-      private
-
-      def setup_subscribers
-        super
-
-        # Reset each counter when a new request starts
-        before_request do
-          ::Mysql2::Client.query_details = []
-        end
-
-        subscribe('sql.active_record') do |_, start, finish, _, data|
-          if RequestStore.active? && RequestStore.store[:peek_enabled]
-            track_query(data[:sql].strip, data[:binds], start, finish)
-          end
-        end
-      end
-
-      def track_query(raw_query, bindings, start, finish)
-        query = Gitlab::Sherlock::Query.new(raw_query, start, finish)
-        ::Mysql2::Client.query_details << query.formatted_query
-      end
-    end
-  end
-end

lib/gitlab/performance_bar/peek_pg_with_queries.rb → lib/gitlab/performance_bar/peek_query_tracker.rb

 # Inspired by https://github.com/peek/peek-pg/blob/master/lib/peek/views/pg.rb
 module Gitlab
   module PerformanceBar
-    module PeekPgWithQueries
-      def queries
-        ::PG::Connection.query_details
+    module PeekQueryTracker
+      def sorted_queries
+        PEEK_DB_CLIENT.query_details.
+          sort { |a, b| b[:duration] <=> a[:duration] }
       end
 
       def results
-        super.merge(queries: queries)
+        super.merge(queries: sorted_queries)
       end
 
       private
@@ -17,7 +18,7 @@ module Gitlab
 
         # Reset each counter when a new request starts
         before_request do
-          ::PG::Connection.query_details = []
+          PEEK_DB_CLIENT.query_details = []
         end
 
         subscribe('sql.active_record') do |_, start, finish, _, data|
@@ -29,7 +30,8 @@ module Gitlab
 
       def track_query(raw_query, bindings, start, finish)
         query = Gitlab::Sherlock::Query.new(raw_query, start, finish)
-        ::PG::Connection.query_details << query.formatted_query
+        query_info  = { duration: query.duration.round(4), sql: query.formatted_query }
+        PEEK_DB_CLIENT.query_details << query_info
       end
     end
   end

vendor/assets/javascripts/peek.js

@@ -15,25 +15,31 @@ requestId = null;
     return $('#peek').length;
   };
   updatePerformanceBar = function(results) {
-    var key, label, data, table, html, tr, td;
+    var key, label, data, table, html, tr, duration_td, sql_td, strong;
     for (key in results.data) {
       for (label in results.data[key]) {
         data = results.data[key][label];
-        console.log(data);
-        if (Array.isArray(data)) {
+        if (label == 'queries') {
           table = document.createElement('table');
 
           for (var i = 0; i < data.length; i += 1) {
             tr = document.createElement('tr');
-            td = document.createElement('td');
+            duration_td = document.createElement('td');
+            sql_td = document.createElement('td');
+            strong = document.createElement('strong');
+
+            strong.append(data[i]['duration'] + 'ms');
+            duration_td.appendChild(strong);
+            tr.appendChild(duration_td);
+
+            sql_td.appendChild(document.createTextNode(data[i]['sql']));
+            tr.appendChild(sql_td);
 
-            td.appendChild(document.createTextNode(data[i]));
-            tr.appendChild(td);
             table.appendChild(tr);
           }
 
-          $table = $(table).addClass('table');
-          $("[data-defer-to=" + key + "-" + label + "]").html($table);
+          table.className = 'table';
+          $("[data-defer-to=" + key + "-" + label + "]").html(table);
         }
         else {
           $("[data-defer-to=" + key + "-" + label + "]").text(results.data[key][label]);