diff --git a/Gemfile b/Gemfile index 71f27e0f6de..f34d801465d 100644 --- a/Gemfile +++ b/Gemfile @@ -283,7 +283,6 @@ gem 'batch-loader', '~> 1.2.1' gem 'peek', '~> 1.0.1' gem 'peek-gc', '~> 0.0.2' gem 'peek-mysql2', '~> 1.1.0', group: :mysql -gem 'peek-performance_bar', '~> 1.3.0' gem 'peek-pg', '~> 1.3.0', group: :postgres gem 'peek-rblineprof', '~> 0.2.0' gem 'peek-redis', '~> 1.2.0' diff --git a/Gemfile.lock b/Gemfile.lock index d5e1c428e25..2e9cb1a956f 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -603,8 +603,6 @@ GEM atomic (>= 1.0.0) mysql2 peek - peek-performance_bar (1.3.1) - peek (>= 0.1.0) peek-pg (1.3.0) concurrent-ruby concurrent-ruby-ext @@ -1130,7 +1128,6 @@ DEPENDENCIES peek (~> 1.0.1) peek-gc (~> 0.0.2) peek-mysql2 (~> 1.1.0) - peek-performance_bar (~> 1.3.0) peek-pg (~> 1.3.0) peek-rblineprof (~> 0.2.0) peek-redis (~> 1.2.0) diff --git a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue index 2fd1715ee79..8ffaa52d9e8 100644 --- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue +++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue @@ -5,7 +5,6 @@ import PerformanceBarService from '../services/performance_bar_service'; import detailedMetric from './detailed_metric.vue'; import requestSelector from './request_selector.vue'; import simpleMetric from './simple_metric.vue'; -import upstreamPerformanceBar from './upstream_performance_bar.vue'; import Flash from '../../flash'; @@ -14,7 +13,6 @@ export default { detailedMetric, requestSelector, simpleMetric, - upstreamPerformanceBar, }, props: { store: { @@ -128,9 +126,6 @@ export default { {{ currentRequest.details.host.hostname }} - -export default { - mounted() { - const upstreamPerformanceBar = document - .getElementById('peek-view-performance-bar') - .cloneNode(true); - - upstreamPerformanceBar.classList.remove('hidden'); - - this.$refs.wrapper.appendChild(upstreamPerformanceBar); - }, -}; - - diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js index a0ddf36a672..4a98aed7679 100644 --- a/app/assets/javascripts/performance_bar/index.js +++ b/app/assets/javascripts/performance_bar/index.js @@ -1,5 +1,3 @@ -import 'vendor/peek.performance_bar'; - import Vue from 'vue'; import performanceBarApp from './components/performance_bar_app.vue'; import PerformanceBarStore from './stores/performance_bar_store'; diff --git a/app/assets/stylesheets/performance_bar.scss b/app/assets/stylesheets/performance_bar.scss index 45ae94abaff..06ef58531d7 100644 --- a/app/assets/stylesheets/performance_bar.scss +++ b/app/assets/stylesheets/performance_bar.scss @@ -1,5 +1,4 @@ @import 'framework/variables'; -@import 'peek/views/performance_bar'; @import 'peek/views/rblineprof'; #js-peek { diff --git a/app/views/peek/_bar.html.haml b/app/views/peek/_bar.html.haml index b4d86e1601c..a911449672b 100644 --- a/app/views/peek/_bar.html.haml +++ b/app/views/peek/_bar.html.haml @@ -5,8 +5,3 @@ peek_url: peek_routes.results_url, profile_url: url_for(params.merge(lineprofiler: 'true')) }, class: Peek.env } - -#peek-view-performance-bar.hidden - = render_server_response_time - %span#serverstats - %ul.performance-bar diff --git a/config/initializers/peek.rb b/config/initializers/peek.rb index ba04a2bf5fa..bc9b52ceef7 100644 --- a/config/initializers/peek.rb +++ b/config/initializers/peek.rb @@ -1,7 +1,6 @@ Rails.application.config.peek.adapter = :redis, { client: ::Redis.new(Gitlab::Redis::Cache.params) } Peek.into Peek::Views::Host -Peek.into Peek::Views::PerformanceBar if Gitlab::Database.mysql? require 'peek-mysql2' diff --git a/vendor/assets/javascripts/peek.performance_bar.js b/vendor/assets/javascripts/peek.performance_bar.js deleted file mode 100644 index 6ed86dce2f2..00000000000 --- a/vendor/assets/javascripts/peek.performance_bar.js +++ /dev/null @@ -1,182 +0,0 @@ -var PerformanceBar, ajaxStart, renderPerformanceBar, updateStatus; - -PerformanceBar = (function() { - PerformanceBar.prototype.appInfo = null; - - PerformanceBar.prototype.width = null; - - PerformanceBar.formatTime = function(value) { - if (value >= 1000) { - return ((value / 1000).toFixed(3)) + "s"; - } else { - return (value.toFixed(0)) + "ms"; - } - }; - - function PerformanceBar(options) { - var k, v; - if (options == null) { - options = {}; - } - this.el = $('#peek-view-performance-bar .performance-bar'); - for (k in options) { - v = options[k]; - this[k] = v; - } - if (this.width == null) { - this.width = this.el.width(); - } - if (this.timing == null) { - this.timing = window.performance.timing; - } - } - - PerformanceBar.prototype.render = function(serverTime) { - var networkTime, perfNetworkTime; - if (serverTime == null) { - serverTime = 0; - } - this.el.empty(); - this.addBar('frontend', '#90d35b', 'domLoading', 'domInteractive'); - perfNetworkTime = this.timing.responseEnd - this.timing.requestStart; - if (serverTime && serverTime <= perfNetworkTime) { - networkTime = perfNetworkTime - serverTime; - this.addBar('latency / receiving', '#f1faff', this.timing.requestStart + serverTime, this.timing.requestStart + serverTime + networkTime); - this.addBar('app', '#90afcf', this.timing.requestStart, this.timing.requestStart + serverTime, this.appInfo); - } else { - this.addBar('backend', '#c1d7ee', 'requestStart', 'responseEnd'); - } - this.addBar('tcp / ssl', '#45688e', 'connectStart', 'connectEnd'); - this.addBar('redirect', '#0c365e', 'redirectStart', 'redirectEnd'); - this.addBar('dns', '#082541', 'domainLookupStart', 'domainLookupEnd'); - return this.el; - }; - - PerformanceBar.prototype.isLoaded = function() { - return this.timing.domInteractive; - }; - - PerformanceBar.prototype.start = function() { - return this.timing.navigationStart; - }; - - PerformanceBar.prototype.end = function() { - return this.timing.domInteractive; - }; - - PerformanceBar.prototype.total = function() { - return this.end() - this.start(); - }; - - PerformanceBar.prototype.addBar = function(name, color, start, end, info) { - var bar, left, offset, time, title, width; - if (typeof start === 'string') { - start = this.timing[start]; - } - if (typeof end === 'string') { - end = this.timing[end]; - } - if (!((start != null) && (end != null))) { - return; - } - time = end - start; - offset = start - this.start(); - left = this.mapH(offset); - width = this.mapH(time); - title = name + ": " + (PerformanceBar.formatTime(time)); - bar = $('
  • ', { - 'data-title': title, - 'data-toggle': 'tooltip', - 'data-container': 'body' - }); - bar.css({ - width: width + "px", - left: left + "px", - background: color - }); - return this.el.append(bar); - }; - - PerformanceBar.prototype.mapH = function(offset) { - return offset * (this.width / this.total()); - }; - - return PerformanceBar; - -})(); - -renderPerformanceBar = function() { - var bar, resp, span, time; - resp = $('#peek-server_response_time'); - time = Math.round(resp.data('time') * 1000); - bar = new PerformanceBar; - bar.render(time); - span = $('', { - 'data-toggle': 'tooltip', - 'data-title': 'Total navigation time for this page.', - 'data-container': 'body' - }).text(PerformanceBar.formatTime(bar.total())); - return updateStatus(span); -}; - -updateStatus = function(html) { - return $('#serverstats').html(html); -}; - -ajaxStart = null; - -$(document).on('pjax:start page:fetch turbolinks:request-start', function(event) { - return ajaxStart = event.timeStamp; -}); - -$(document).on('pjax:end page:load turbolinks:load', function(event, xhr) { - var ajaxEnd, serverTime, total; - if (ajaxStart == null) { - return; - } - ajaxEnd = event.timeStamp; - total = ajaxEnd - ajaxStart; - serverTime = xhr ? parseInt(xhr.getResponseHeader('X-Runtime')) : 0; - return setTimeout(function() { - var bar, now, span, tech; - now = new Date().getTime(); - bar = new PerformanceBar({ - timing: { - requestStart: ajaxStart, - responseEnd: ajaxEnd, - domLoading: ajaxEnd, - domInteractive: now - }, - isLoaded: function() { - return true; - }, - start: function() { - return ajaxStart; - }, - end: function() { - return now; - } - }); - bar.render(serverTime); - if ($.fn.pjax != null) { - tech = 'PJAX'; - } else { - tech = 'Turbolinks'; - } - span = $('', { - 'data-toggle': 'tooltip', - 'data-title': tech + " navigation time", - 'data-container': 'body' - }).text(PerformanceBar.formatTime(total)); - updateStatus(span); - return ajaxStart = null; - }, 0); -}); - -$(function() { - if (window.performance) { - return renderPerformanceBar(); - } else { - return $('#peek-view-performance-bar').remove(); - } -});