From 18326c20805df1fb392ea55599626b3f19de1322 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20Coutable?= Date: Thu, 6 Jul 2017 19:37:31 +0000 Subject: Improve & fix the performance bar UI and behavior --- app/assets/javascripts/dispatcher.js | 5 ++ app/assets/javascripts/peek.js | 16 ---- app/assets/javascripts/performance_bar.js | 62 ++++++++++++++ app/assets/stylesheets/framework/modal.scss | 6 ++ app/assets/stylesheets/framework/variables.scss | 12 +++ app/assets/stylesheets/performance_bar.scss | 103 +++++++++++++++++++++++ app/helpers/nav_helper.rb | 1 - app/helpers/performance_bar_helper.rb | 7 ++ app/views/help/_shortcuts.html.haml | 9 +- app/views/layouts/_head.html.haml | 4 +- app/views/layouts/application.html.haml | 3 +- app/views/peek/views/_rblineprof.html.haml | 7 ++ app/views/peek/views/_sql.html.haml | 8 +- config/application.rb | 2 +- config/webpack.config.js | 2 +- lib/gitlab/performance_bar.rb | 2 +- lib/peek/rblineprof/custom_controller_helpers.rb | 32 ++++++- vendor/assets/stylesheets/peek.scss | 94 --------------------- 18 files changed, 247 insertions(+), 128 deletions(-) delete mode 100644 app/assets/javascripts/peek.js create mode 100644 app/assets/javascripts/performance_bar.js create mode 100644 app/assets/stylesheets/performance_bar.scss create mode 100644 app/helpers/performance_bar_helper.rb create mode 100644 app/views/peek/views/_rblineprof.html.haml delete mode 100644 vendor/assets/stylesheets/peek.scss diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js index e924fde60bf..ffd8d494a40 100644 --- a/app/assets/javascripts/dispatcher.js +++ b/app/assets/javascripts/dispatcher.js @@ -57,6 +57,7 @@ import ShortcutsBlob from './shortcuts_blob'; import initSettingsPanels from './settings_panels'; import initExperimentalFlags from './experimental_flags'; import OAuthRememberMe from './oauth_remember_me'; +import PerformanceBar from './performance_bar'; (function() { var Dispatcher; @@ -515,6 +516,10 @@ import OAuthRememberMe from './oauth_remember_me'; if (!shortcut_handler) { new Shortcuts(); } + + if (document.querySelector('#peek')) { + new PerformanceBar({ container: '#peek' }); + } }; Dispatcher.prototype.initSearch = function() { diff --git a/app/assets/javascripts/peek.js b/app/assets/javascripts/peek.js deleted file mode 100644 index de1a99fa3bd..00000000000 --- a/app/assets/javascripts/peek.js +++ /dev/null @@ -1,16 +0,0 @@ -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/performance_bar.js b/app/assets/javascripts/performance_bar.js new file mode 100644 index 00000000000..9bbdf7f513c --- /dev/null +++ b/app/assets/javascripts/performance_bar.js @@ -0,0 +1,62 @@ +import 'vendor/peek'; +import 'vendor/peek.performance_bar'; + +export default class PerformanceBar { + constructor(opts) { + if (!PerformanceBar.singleton) { + this.init(opts); + PerformanceBar.singleton = this; + } + return PerformanceBar.singleton; + } + + init(opts) { + const $container = $(opts.container); + this.$sqlProfileLink = $container.find('.js-toggle-modal-peek-sql'); + this.$sqlProfileModal = $container.find('#modal-peek-pg-queries'); + this.$lineProfileLink = $container.find('.js-toggle-modal-peek-line-profile'); + this.$lineProfileModal = $('#modal-peek-line-profile'); + this.initEventListeners(); + this.showModalOnLoad(); + } + + initEventListeners() { + this.$sqlProfileLink.on('click', () => this.handleSQLProfileLink()); + this.$lineProfileLink.on('click', e => this.handleLineProfileLink(e)); + $(document).on('click', '.js-lineprof-file', PerformanceBar.toggleLineProfileFile); + } + + showModalOnLoad() { + // When a lineprofiler query-string param is present, we show the line + // profiler modal upon page load + if (/lineprofiler/.test(window.location.search)) { + PerformanceBar.toggleModal(this.$lineProfileModal); + } + } + + handleSQLProfileLink() { + PerformanceBar.toggleModal(this.$sqlProfileModal); + } + + handleLineProfileLink(e) { + const lineProfilerParameter = gl.utils.getParameterValues('lineprofiler'); + const lineProfilerParameterRegex = new RegExp(`lineprofiler=${lineProfilerParameter[0]}`); + const shouldToggleModal = lineProfilerParameter.length > 0 && + lineProfilerParameterRegex.test(e.currentTarget.href); + + if (shouldToggleModal) { + e.preventDefault(); + PerformanceBar.toggleModal(this.$lineProfileModal); + } + } + + static toggleModal($modal) { + if ($modal.length) { + $modal.modal('toggle'); + } + } + + static toggleLineProfileFile(e) { + $(e.currentTarget).parents('.peek-rblineprof-file').find('.data').toggle(); + } +} diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss index 7098203321d..a28f54936be 100644 --- a/app/assets/stylesheets/framework/modal.scss +++ b/app/assets/stylesheets/framework/modal.scss @@ -21,3 +21,9 @@ body.modal-open { width: 860px; } } + +@media (min-width: $screen-lg-min) { + .modal-full { + width: 98%; + } +} diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index da4d91511e0..2e4b1280a97 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -594,3 +594,15 @@ Convdev Index $color-high-score: $green-400; $color-average-score: $orange-400; $color-low-score: $red-400; + +/* +Performance Bar +*/ +$perf-bar-text: #999; +$perf-bar-production: #222; +$perf-bar-staging: #291430; +$perf-bar-development: #4c1210; +$perf-bar-bucket-bg: #111; +$perf-bar-bucket-color: #ccc; +$perf-bar-bucket-box-shadow-from: rgba($white-light, .2); +$perf-bar-bucket-box-shadow-to: rgba($black, .25); diff --git a/app/assets/stylesheets/performance_bar.scss b/app/assets/stylesheets/performance_bar.scss new file mode 100644 index 00000000000..2890b6b1e49 --- /dev/null +++ b/app/assets/stylesheets/performance_bar.scss @@ -0,0 +1,103 @@ +@import "framework/variables"; +@import "peek/views/performance_bar"; +@import "peek/views/rblineprof"; + +#peek { + height: 35px; + background: $black; + line-height: 35px; + color: $perf-bar-text; + + &.disabled { + display: none; + } + + &.production { + background-color: $perf-bar-production; + } + + &.staging { + background-color: $perf-bar-staging; + } + + &.development { + background-color: $perf-bar-development; + } + + .wrapper { + width: 1000px; + margin: 0 auto; + } + + // UI Elements + .bucket { + background: $perf-bar-bucket-bg; + display: inline-block; + padding: 4px 6px; + font-family: Consolas, "Liberation Mono", Courier, monospace; + line-height: 1; + color: $perf-bar-bucket-color; + border-radius: 3px; + box-shadow: 0 1px 0 $perf-bar-bucket-box-shadow-from, inset 0 1px 2px $perf-bar-bucket-box-shadow-to; + + .hidden { + display: none; + } + + &:hover .hidden { + display: inline; + } + } + + strong { + color: $white-light; + } + + table { + color: $black; + + strong { + color: $black; + } + } + + .view { + margin-right: 15px; + float: left; + + &:last-child { + margin-right: 0; + } + } + + .css-truncate { + &.css-truncate-target, + .css-truncate-target { + display: inline-block; + max-width: 125px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + vertical-align: top; + } + + &.expandable:hover .css-truncate-target, + &.expandable:hover.css-truncate-target { + max-width: 10000px !important; + } + } +} + +#modal-peek-pg-queries-content { + color: $black; +} + +.peek-rblineprof-file { + pre.duration { + width: 280px; + } + + .data { + overflow: visible; + } +} diff --git a/app/helpers/nav_helper.rb b/app/helpers/nav_helper.rb index e589ed4e56d..b769462abc2 100644 --- a/app/helpers/nav_helper.rb +++ b/app/helpers/nav_helper.rb @@ -23,7 +23,6 @@ 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/helpers/performance_bar_helper.rb b/app/helpers/performance_bar_helper.rb new file mode 100644 index 00000000000..d24efe37f5f --- /dev/null +++ b/app/helpers/performance_bar_helper.rb @@ -0,0 +1,7 @@ +module PerformanceBarHelper + # This is a hack since using `alias_method :performance_bar_enabled?, :peek_enabled?` + # in WithPerformanceBar breaks tests (but works in the browser). + def performance_bar_enabled? + peek_enabled? + end +end diff --git a/app/views/help/_shortcuts.html.haml b/app/views/help/_shortcuts.html.haml index 331d1181220..56e628a2b74 100644 --- a/app/views/help/_shortcuts.html.haml +++ b/app/views/help/_shortcuts.html.haml @@ -27,10 +27,11 @@ %td.shortcut .key f %td Focus Filter - %tr - %td.shortcut - .key p b - %td Show/hide the Performance Bar + - if performance_bar_enabled? + %tr + %td.shortcut + .key p b + %td Show/hide the Performance Bar %tr %td.shortcut .key ? diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml index abb6dc2e9f3..6ad22958df3 100644 --- a/app/views/layouts/_head.html.haml +++ b/app/views/layouts/_head.html.haml @@ -30,7 +30,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? + = stylesheet_link_tag 'performance_bar' if performance_bar_enabled? - if show_new_nav? = stylesheet_link_tag "new_nav", media: "all" @@ -44,7 +44,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? + = webpack_bundle_tag 'performance_bar' if performance_bar_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 d879df8fc82..81f83b74826 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -3,7 +3,6 @@ = 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' - if show_new_nav? = render "layouts/header/new" - else @@ -11,3 +10,5 @@ = render 'layouts/page', sidebar: sidebar, nav: nav = yield :scripts_body + + = render 'peek/bar' diff --git a/app/views/peek/views/_rblineprof.html.haml b/app/views/peek/views/_rblineprof.html.haml new file mode 100644 index 00000000000..6c037930ca9 --- /dev/null +++ b/app/views/peek/views/_rblineprof.html.haml @@ -0,0 +1,7 @@ +Profile: + += link_to 'all', url_for(lineprofiler: 'true'), class: 'js-toggle-modal-peek-line-profile' +\/ += link_to 'app & lib', url_for(lineprofiler: 'app'), class: 'js-toggle-modal-peek-line-profile' +\/ += link_to 'views', url_for(lineprofiler: 'views'), class: 'js-toggle-modal-peek-line-profile' diff --git a/app/views/peek/views/_sql.html.haml b/app/views/peek/views/_sql.html.haml index 16fc010f66f..dd8b524064f 100644 --- a/app/views/peek/views/_sql.html.haml +++ b/app/views/peek/views/_sql.html.haml @@ -1,13 +1,13 @@ %strong - %a#peek-show-queries{ href: '#' } + %a.js-toggle-modal-peek-sql %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-dialog.modal-full + .modal-content .modal-header - %a.close{ href: "#", "data-dismiss" => "modal" } × + %button.close.btn.btn-link.btn-sm{ type: 'button', data: { dismiss: 'modal' } } X %h4 SQL queries .modal-body{ data: { defer_to: "#{view.defer_key}-queries" } }... diff --git a/config/application.rb b/config/application.rb index a9a961d7520..0d82938979a 100644 --- a/config/application.rb +++ b/config/application.rb @@ -105,7 +105,7 @@ module Gitlab config.assets.precompile << "katex.css" config.assets.precompile << "katex.js" config.assets.precompile << "xterm/xterm.css" - config.assets.precompile << "peek.css" + config.assets.precompile << "performance_bar.css" config.assets.precompile << "lib/ace.js" config.assets.precompile << "vendor/assets/fonts/*" config.assets.precompile << "test.css" diff --git a/config/webpack.config.js b/config/webpack.config.js index cbb0a899638..c3fdca59a86 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -70,7 +70,7 @@ var config = { raven: './raven/index.js', vue_merge_request_widget: './vue_merge_request_widget/index.js', test: './test.js', - peek: './peek.js', + performance_bar: './performance_bar.js', webpack_runtime: './webpack.js', }, diff --git a/lib/gitlab/performance_bar.rb b/lib/gitlab/performance_bar.rb index 163a40ad306..a4c8a77129e 100644 --- a/lib/gitlab/performance_bar.rb +++ b/lib/gitlab/performance_bar.rb @@ -1,7 +1,7 @@ module Gitlab module PerformanceBar def self.enabled? - Feature.enabled?('gitlab_performance_bar') + Rails.env.development? || Feature.enabled?('gitlab_performance_bar') end end end diff --git a/lib/peek/rblineprof/custom_controller_helpers.rb b/lib/peek/rblineprof/custom_controller_helpers.rb index 99f9c2c9b04..7cfe76b7b71 100644 --- a/lib/peek/rblineprof/custom_controller_helpers.rb +++ b/lib/peek/rblineprof/custom_controller_helpers.rb @@ -41,9 +41,14 @@ module Peek ] end.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 = "
" + output << "
" + output << "" + output << "

Line profiling: #{human_description(params[:lineprofiler])}

" + output << "
" + output << "
" + per_file.each do |file_name, lines, file_wall, file_cpu, file_idle, file_sort| output << "
" show_src = file_sort > min @@ -86,11 +91,32 @@ module Peek output << "
" # .data then .peek-rblineprof-file end - response.body += "
#{output}
".html_safe + output << "
" + + response.body += "".html_safe end ret end + + private + + def human_description(lineprofiler_param) + case lineprofiler_param + when 'app' + 'app/ & lib/' + when 'views' + 'app/view/' + when 'gems' + 'vendor/gems' + when 'all' + 'everything in Rails.root' + when 'stdlib' + 'everything in the Ruby standard library' + else + 'app/, config/, lib/, vendor/ & plugin/' + end + end end end end diff --git a/vendor/assets/stylesheets/peek.scss b/vendor/assets/stylesheets/peek.scss deleted file mode 100644 index f1845fb9044..00000000000 --- a/vendor/assets/stylesheets/peek.scss +++ /dev/null @@ -1,94 +0,0 @@ -//= require peek/views/performance_bar -//= require peek/views/rblineprof - -header.navbar-gitlab.with-peek { - top: 35px; -} - -#peek { - height: 35px; - background: #000; - line-height: 35px; - color: #999; - - &.disabled { - display: none; - } - - &.production { - background-color: #222; - } - - &.staging { - background-color: #291430; - } - - &.development { - background-color: #4c1210; - } - - .wrapper { - width: 800px; - margin: 0 auto; - } - - // UI Elements - .bucket { - background: #111; - display: inline-block; - padding: 4px 6px; - font-family: Consolas, "Liberation Mono", Courier, monospace; - line-height: 1; - color: #ccc; - border-radius: 3px; - box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 1px 2px rgba(0,0,0,.25); - - .hidden { - display: none; - } - - &:hover .hidden { - display: inline; - } - } - - strong { - color: #fff; - } - - table { - strong { - color: #000; - } - } - - .view { - margin-right: 15px; - float: left; - - &:last-child { - margin-right: 0; - } - } - - .css-truncate { - &.css-truncate-target, - .css-truncate-target { - display: inline-block; - max-width: 125px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - vertical-align: top; - } - - &.expandable:hover .css-truncate-target, - &.expandable:hover.css-truncate-target { - max-width: 10000px !important; - } - } -} - -#modal-peek-pg-queries-content { - color: #000; -} -- cgit v1.2.1