diff options
-rw-r--r-- | app/assets/javascripts/peek.js | 27 | ||||
-rw-r--r-- | app/assets/javascripts/shortcuts.js | 5 | ||||
-rw-r--r-- | changelogs/unreleased/29010-perf-bar.yml | 2 | ||||
-rw-r--r-- | config/initializers/peek.rb | 6 | ||||
-rw-r--r-- | lib/gitlab/performance_bar/peek_query_tracker.rb | 3 | ||||
-rw-r--r-- | lib/peek/rblineprof/custom_controller_helpers.rb | 30 | ||||
-rw-r--r-- | vendor/assets/javascripts/peek.js | 30 | ||||
-rw-r--r-- | vendor/assets/stylesheets/peek.scss | 13 |
8 files changed, 53 insertions, 63 deletions
diff --git a/app/assets/javascripts/peek.js b/app/assets/javascripts/peek.js index 06a07c19e09..60f8bdd14c0 100644 --- a/app/assets/javascripts/peek.js +++ b/app/assets/javascripts/peek.js @@ -1,19 +1,16 @@ 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(); +}); diff --git a/app/assets/javascripts/shortcuts.js b/app/assets/javascripts/shortcuts.js index 2c7698eb174..09cb914e884 100644 --- a/app/assets/javascripts/shortcuts.js +++ b/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) { diff --git a/changelogs/unreleased/29010-perf-bar.yml b/changelogs/unreleased/29010-perf-bar.yml index 920b57ed130..f4167e5562f 100644 --- a/changelogs/unreleased/29010-perf-bar.yml +++ b/changelogs/unreleased/29010-perf-bar.yml @@ -1,4 +1,4 @@ --- -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: diff --git a/config/initializers/peek.rb b/config/initializers/peek.rb index 429960b7c3e..c88ae4b62d2 100644 --- a/config/initializers/peek.rb +++ b/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 diff --git a/lib/gitlab/performance_bar/peek_query_tracker.rb b/lib/gitlab/performance_bar/peek_query_tracker.rb index 479396f6664..7ab80f5ee0f 100644 --- a/lib/gitlab/performance_bar/peek_query_tracker.rb +++ b/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 diff --git a/lib/peek/rblineprof/custom_controller_helpers.rb b/lib/peek/rblineprof/custom_controller_helpers.rb index 796420971b5..2ecda58c669 100644 --- a/lib/peek/rblineprof/custom_controller_helpers.rb +++ b/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 diff --git a/vendor/assets/javascripts/peek.js b/vendor/assets/javascripts/peek.js index 0aec31ee2cb..4db076d259a 100644 --- a/vendor/assets/javascripts/peek.js +++ b/vendor/assets/javascripts/peek.js @@ -1,6 +1,4 @@ -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'); diff --git a/vendor/assets/stylesheets/peek.scss b/vendor/assets/stylesheets/peek.scss index 224ecc4245e..4977487d3ae 100644 --- a/vendor/assets/stylesheets/peek.scss +++ b/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; } |