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

6 files changed, 28 insertions, 0 deletions

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" } }...