Merge branch '29010-perf-bar' into 'master'

Add an optional performance bar to view performance metrics for the current page

Closes #29010

See merge request !11439

10 files changed, 76 insertions, 1 deletions

diff --git a/app/assets/javascripts/peek.js b/app/assets/javascripts/peek.js
new file mode 100644
index 00000000000..de1a99fa3bd
--- /dev/null
+++ b/app/assets/javascripts/peek.js
@@ -0,0 +1,16 @@
+import 'vendor/peek';
+import 'vendor/peek.performance_bar';
+
+$(document).on('click', '#peek-show-queries', (e) => {
+  e.preventDefault();
+  $('.peek-rblineprof-modal').hide();
+  const $modal = $('#modal-peek-pg-queries');
+  if ($modal.length) {
+    $modal.modal('toggle');
+  }
+});
+
+$(document).on('click', '.js-lineprof-file', (e) => {
+  e.preventDefault();
+  $(e.target).parents('.peek-rblineprof-file').find('.data').toggle();
+});
diff --git a/app/assets/javascripts/shortcuts.js b/app/assets/javascripts/shortcuts.js
index 8ac71797c14..a4a7f3fa944 100644
--- a/app/assets/javascripts/shortcuts.js
+++ b/app/assets/javascripts/shortcuts.js
@@ -1,6 +1,8 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, quotes, prefer-arrow-callback, consistent-return, object-shorthand, no-unused-vars, one-var, one-var-declaration-per-line, no-else-return, comma-dangle, max-len */
 /* global Mousetrap */
 /* global findFileURL */
+import Cookies from 'js-cookie';
+
 import findAndFollowLink from './shortcuts_dashboard_navigation';
 
 (function() {
@@ -14,6 +16,7 @@ import findAndFollowLink from './shortcuts_dashboard_navigation';
       Mousetrap.bind('?', this.onToggleHelp);
       Mousetrap.bind('s', Shortcuts.focusSearch);
       Mousetrap.bind('f', (e => this.focusFilter(e)));
+      Mousetrap.bind('p b', this.onTogglePerfBar);
 
       const $globalDropdownMenu = $('.global-dropdown-menu');
       const $globalDropdownToggle = $('.global-dropdown-toggle');
@@ -53,6 +56,17 @@ import findAndFollowLink from './shortcuts_dashboard_navigation';
       return Shortcuts.toggleHelp(this.enabledHelp);
     };
 
+    Shortcuts.prototype.onTogglePerfBar = function(e) {
+      e.preventDefault();
+      const performanceBarCookieName = 'perf_bar_enabled';
+      if (Cookies.get(performanceBarCookieName) === 'true') {
+        Cookies.remove(performanceBarCookieName, { path: '/' });
+      } else {
+        Cookies.set(performanceBarCookieName, true, { path: '/' });
+      }
+      gl.utils.refreshCurrentPage();
+    };
+
     Shortcuts.prototype.toggleMarkdownPreview = function(e) {
       // Check if short-cut was triggered while in Write Mode
       const $target = $(e.target);
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index 47ce21d238b..91694ebcd1d 100644
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -9,6 +9,7 @@ class ApplicationController < ActionController::Base
   include SentryHelper
   include WorkhorseHelper
   include EnforcesTwoFactorAuthentication
+  include Peek::Rblineprof::CustomControllerHelpers
 
   before_action :authenticate_user_from_private_token!
   before_action :authenticate_user_from_rss_token!
@@ -18,7 +19,7 @@ class ApplicationController < ActionController::Base
   before_action :ldap_security_check
   before_action :sentry_context
   before_action :default_headers
-  before_action :add_gon_variables
+  before_action :add_gon_variables, unless: -> { request.path.start_with?('/-/peek') }
   before_action :configure_permitted_parameters, if: :devise_controller?
   before_action :require_email, unless: :devise_controller?
 
@@ -63,6 +64,21 @@ class ApplicationController < ActionController::Base
     end
   end
 
+  def peek_enabled?
+    return false unless Gitlab::PerformanceBar.enabled?
+    return false unless current_user
+
+    if RequestStore.active?
+      if RequestStore.store.key?(:peek_enabled)
+        RequestStore.store[:peek_enabled]
+      else
+        RequestStore.store[:peek_enabled] = cookies[:perf_bar_enabled].present?
+      end
+    else
+      cookies[:perf_bar_enabled].present?
+    end
+  end
+
   protected
 
   # This filter handles both private tokens and personal access tokens
diff --git a/app/helpers/nav_helper.rb b/app/helpers/nav_helper.rb
index 88dfe78c90c..833d3c36b28 100644
--- a/app/helpers/nav_helper.rb
+++ b/app/helpers/nav_helper.rb
@@ -27,6 +27,7 @@ module NavHelper
   def nav_header_class
     class_name = ''
     class_name << " with-horizontal-nav" if defined?(nav) && nav
+    class_name << " with-peek" if peek_enabled?
 
     class_name
   end
diff --git a/app/views/help/_shortcuts.html.haml b/app/views/help/_shortcuts.html.haml
index ea8bbe92d86..331d1181220 100644
--- a/app/views/help/_shortcuts.html.haml
+++ b/app/views/help/_shortcuts.html.haml
@@ -29,6 +29,10 @@
                   %td Focus Filter
                 %tr
                   %td.shortcut
+                    .key p b
+                  %td Show/hide the Performance Bar
+                %tr
+                  %td.shortcut
                     .key ?
                   %td Show/hide this dialog
                 %tr
diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml
index 1ef0d524dbb..eea33b5966f 100644
--- a/app/views/layouts/_head.html.haml
+++ b/app/views/layouts/_head.html.haml
@@ -28,6 +28,7 @@
   = stylesheet_link_tag "application", media: "all"
   = stylesheet_link_tag "print",       media: "print"
   = stylesheet_link_tag "test",        media: "all" if Rails.env.test?
+  = stylesheet_link_tag 'peek' if peek_enabled?
 
   = Gon::Base.render_data
 
@@ -37,6 +38,7 @@
   = webpack_bundle_tag "main"
   = webpack_bundle_tag "raven" if current_application_settings.clientside_sentry_enabled
   = webpack_bundle_tag "test" if Rails.env.test?
+  = webpack_bundle_tag 'peek' if peek_enabled?
 
   - if content_for?(:page_specific_javascripts)
     = yield :page_specific_javascripts
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 03688e9ff21..2b07273a0a8 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -3,6 +3,7 @@
   = render "layouts/head"
   %body{ class: @body_class, data: { page: body_data_page, project: "#{@project.path if @project}", group: "#{@group.path if @group}" } }
     = render "layouts/init_auto_complete" if @gfm_form
+    = render 'peek/bar'
     = render "layouts/header/default", title: header_title
     = render 'layouts/page', sidebar: sidebar, nav: nav
 
diff --git a/app/views/peek/views/_mysql2.html.haml b/app/views/peek/views/_mysql2.html.haml
new file mode 100644
index 00000000000..ac811a10ef5
--- /dev/null
+++ b/app/views/peek/views/_mysql2.html.haml
@@ -0,0 +1,4 @@
+- local_assigns.fetch(:view)
+
+= render 'peek/views/sql', view: view
+mysql
diff --git a/app/views/peek/views/_pg.html.haml b/app/views/peek/views/_pg.html.haml
new file mode 100644
index 00000000000..ee94c2f3274
--- /dev/null
+++ b/app/views/peek/views/_pg.html.haml
@@ -0,0 +1,4 @@
+- local_assigns.fetch(:view)
+
+= render 'peek/views/sql', view: view
+pg
diff --git a/app/views/peek/views/_sql.html.haml b/app/views/peek/views/_sql.html.haml
new file mode 100644
index 00000000000..16fc010f66f
--- /dev/null
+++ b/app/views/peek/views/_sql.html.haml
@@ -0,0 +1,13 @@
+%strong
+  %a#peek-show-queries{ href: '#' }
+    %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-peek-pg-queries-content.modal-content
+      .modal-header
+        %a.close{ href: "#", "data-dismiss" => "modal" } ×
+        %h4
+          SQL queries
+      .modal-body{ data: { defer_to: "#{view.defer_key}-queries" } }...