peek-performance_bar 1.2.1 → 1.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 857b53ade1e4d64fe7f5ca135a3b3f16596ffc5f
-  data.tar.gz: 85802d7c4c3b219814b3e1d8abe015dcee927dce
+  metadata.gz: 57aac4506b72753e304dd71e6d879103a806c793
+  data.tar.gz: 3b68b08e0a1f4f01044d23678b1aba2a32d58990
 SHA512:
-  metadata.gz: 8f40085f3fc6ec19f00c14355f60ad6507e162aa0b41cfe3fd400df004eeb0428e28a0abec950bc0b2a673167e5734d93e7faa2915802c095dec6bba902cce7d
-  data.tar.gz: 363db21a79d680fc00e1f1b93d903dfc890b6bc7103b04d11382dd32b168520953b8002d46c493008f10addc65f0fec83ba03d4284469f2bcdd372f9953e13a0
+  metadata.gz: 16c23582330e78462677b54481af3d4b3a5f5368aeb45c7244e8271c543b6c33e7e448e44f076db8c49a289be05abaeb49b43b703693202167535a0d15de4b96
+  data.tar.gz: a84688e829e1cfbea5cb8d6f7665586c796887c491445ff7b0b3be7d357e83c2b312ee590cf716e58d1d63562103a0e2d7f1a3821b8f4b1b3e1ff0f04a99ea59

data/CHANGELOG.md

@@ -38,3 +38,8 @@
 # 1.2.1
 
 - Listen to Turbolinks v5 `turbolinks:request-start` and `turbolinks:load` JS events to trigger peek-performance_bar updates. - [#26](https://github.com/peek/peek-performance_bar/pull/26) [@lucasmazza](https://github.com/lucasmazza)
+
+# 1.3.0
+
+- Remove CoffeeScript support in favor of plain JavaScript. - [#28](https://github.com/peek/peek-performance_bar/pull/28) [@gfx](https://github.com/gfx)
+- Use Rack::BodyProxy to fix X-Sendfile header being incorrectly set. - [#27](https://github.com/peek/peek-performance_bar/pull/27) [@rymai](https://github.com/rymai)

data/app/assets/javascripts/peek/views/performance_bar.js

@@ -0,0 +1,192 @@
+// The mission control window.performance.timing display area.
+//
+// Breaks the window.performance.timing numbers down into these groups:
+//
+// dns         - Time looking up domain. Usually zero.
+// tcp and ssl - Time used establishing tcp and ssl connections.
+// redirect    - Time spent redirecting since navigation began.
+// app         - Real server time as recorded in the app.
+// latency     - Extra backend and network time where browser was waiting.
+// frontend    - Time spent loading and rendering the DOM until interactive.
+//
+// Not all frontend time is counted. The page is considered ready when the
+// domInteractive ready state is reached. This is before DOMContentLoaded and
+// onload javascript handlers.
+class PerformanceBar {
+  static initClass() {
+    // Additional app info to show with the app timing.
+    this.prototype.appInfo = null;
+  
+    // The pixel width we're rendering the timing graph into.
+    this.prototype.width = null;
+  }
+
+  // Format a time as ms or s based on how big it is.
+  static formatTime(value) {
+    if (value >= 1000) {
+      return `${(value / 1000).toFixed(3)}s`;
+    } else {
+      return `${value.toFixed(0)}ms`;
+    }
+  }
+
+  // Create a new PerformanceBar view bound to a given element. The el and width
+  // options should be provided here.
+  constructor(options) {
+    if (options == null) { options = {}; }
+    this.el = $('#peek-view-performance-bar .performance-bar');
+    for (let k in options) { let v = options[k]; this[k] = v; }
+    if (this.width == null) {  this.width = this.el.width(); }
+    if (this.timing == null) { this.timing = window.performance.timing; }
+  }
+
+  // Render the performance bar in the associated element. This is a little weird
+  // because it includes the server-side rendering time reported with the
+  // response document which may not line up when using the back/forward button
+  // and loading from cache.
+  render(serverTime) {
+    if (serverTime == null) { serverTime = 0; }
+    this.el.empty();
+    this.addBar('frontend', '#90d35b', 'domLoading', 'domInteractive');
+
+    // time spent talking with the app according to performance.timing
+    let perfNetworkTime = (this.timing.responseEnd - this.timing.requestStart);
+
+    // only include serverTime if it's less than than the browser reported
+    // talking-to-the-app time; otherwise, assume we're loading from cache.
+    if (serverTime && (serverTime <= perfNetworkTime)) {
+      let 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;
+  }
+
+  // Determine if the page has reached the interactive state yet.
+  isLoaded() {
+    return this.timing.domInteractive;
+  }
+
+  // Integer unix timestamp representing the very beginning of the graph.
+  start() {
+    return this.timing.navigationStart;
+  }
+
+  // Integer unix timestamp representing the very end of the graph.
+  end() {
+    return this.timing.domInteractive;
+  }
+
+  // Total number of milliseconds between the start and end times.
+  total() {
+    return this.end() - this.start();
+  }
+
+  // Helper used to add a bar to the graph.
+  addBar(name, color, start, end, info) {
+    if (typeof start === 'string') { start = this.timing[start]; }
+    if (typeof end === 'string') { end   = this.timing[end]; }
+
+    // Skip missing stats
+    if ((start == null) || (end == null)) { return; }
+
+    let time   = end - start;
+    let offset = start - this.start();
+    let left = this.mapH(offset);
+    let width = this.mapH(time);
+
+    let title = `${name}: ${PerformanceBar.formatTime(time)}`;
+    let bar = $('<li></li>', {title, class: 'peek-tooltip'});
+    bar.css({
+      width: `${width}px`,
+      left:  `${left}px`,
+      background: color
+    });
+    bar.tipsy({gravity: $.fn.tipsy.autoNS});
+    return this.el.append(bar);
+  }
+
+  // Map a time offset value to a horizontal pixel offset.
+  mapH(offset) {
+    return offset * (this.width / this.total());
+  }
+}
+PerformanceBar.initClass();
+
+let renderPerformanceBar = function() {
+  let resp = $('#peek-server_response_time');
+  let time = Math.round(resp.data('time') * 1000);
+
+  let bar = new PerformanceBar;
+  bar.render(time);
+
+  let span = $('<span>', {'class': 'peek-tooltip', title: 'Total navigation time for this page.'})
+    .text(PerformanceBar.formatTime(bar.total()));
+  span.tipsy({gravity: $.fn.tipsy.autoNS});
+  return updateStatus(span);
+};
+
+var updateStatus = html => $('#serverstats').html(html);
+
+let ajaxStart = null;
+$(document).on('pjax:start page:fetch turbolinks:request-start', event => ajaxStart = event.timeStamp);
+
+$(document).on('pjax:end page:load turbolinks:load', function(event, xhr) {
+  if (ajaxStart == null) { return; }
+  let ajaxEnd    = event.timeStamp;
+  let total      = ajaxEnd - ajaxStart;
+  let serverTime = xhr ? parseInt(xhr.getResponseHeader('X-Runtime')) : 0;
+
+  // Defer to include the timing of pjax hook evaluation
+  return setTimeout(function() {
+    let tech;
+    let now = new Date().getTime();
+    let bar = new PerformanceBar({
+      timing: {
+        requestStart: ajaxStart,
+        responseEnd: ajaxEnd,
+        domLoading: ajaxEnd,
+        domInteractive: now
+      },
+      isLoaded() { return true; },
+      start() { return ajaxStart; },
+      end() { return now; }
+    });
+
+    bar.render(serverTime);
+
+    if ($.fn.pjax != null) {
+      tech = 'PJAX';
+    } else {
+      tech = 'Turbolinks';
+    }
+
+    let span = $('<span>', {'class': 'peek-tooltip', title: `${tech} navigation time`})
+      .text(PerformanceBar.formatTime(total));
+    span.tipsy({gravity: $.fn.tipsy.autoNS});
+    updateStatus(span);
+
+    return ajaxStart = null;
+  }
+  , 0);
+});
+
+$(function() {
+  if (window.performance) {
+    return renderPerformanceBar();
+  } else {
+    return $('#peek-view-performance-bar').remove();
+  }
+});

data/lib/peek-performance_bar/version.rb

@@ -1,5 +1,5 @@
 module Peek
   module PerformanceBar
-    VERSION = '1.2.1'
+    VERSION = '1.3.0'
   end
 end

data/lib/peek/views/performance_bar/process_utilization.rb

@@ -1,3 +1,5 @@
+require "rack/body_proxy"
+
 module Peek
   module Views
     class PerformanceBar
@@ -104,32 +106,6 @@ module Peek
           warn "ProcessUtilization#record_request failed: #{boom.inspect}"
         end
 
-        # Body wrapper. Yields to the block when body is closed. This is used to
-        # signal when a response is fully finished processing.
-        class Body
-          def initialize(body, &block)
-            @body = body
-            @block = block
-          end
-
-          def each(&block)
-            @body.each(&block)
-          end
-
-          def close
-            @body.close if @body.respond_to?(:close)
-            @block.call
-            nil
-          end
-          
-          # Delegate calls to @body to be compatible with other middlewares
-          def method_missing(name, *args, &block)
-            super unless @body.respond_to?(name)
-            
-            @body.send(name, *args, &block)
-          end
-        end
-
         # Rack entry point.
         def call(env)
           @env = env
@@ -142,7 +118,7 @@ module Peek
           env['process.total_requests'] = total_requests
 
           status, headers, body = @app.call(env)
-          body = Body.new(body) { record_request }
+          body = Rack::BodyProxy.new(body) { record_request }
           [status, headers, body]
         end
       end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: peek-performance_bar
 version: !ruby/object:Gem::Version
-  version: 1.2.1
+  version: 1.3.0
 platform: ruby
 authors:
 - Garrett Bjerkhoel
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-03-04 00:00:00.000000000 Z
+date: 2017-07-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: peek
@@ -37,7 +37,7 @@ files:
 - LICENSE.txt
 - README.md
 - Rakefile
-- app/assets/javascripts/peek/views/performance_bar.coffee
+- app/assets/javascripts/peek/views/performance_bar.js
 - app/assets/stylesheets/peek/views/performance_bar.scss
 - app/helpers/peek/performance_bar_helper.rb
 - app/views/peek/results/_performance_bar.html.erb
@@ -67,7 +67,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.5.1
+rubygems_version: 2.6.11
 signing_key: 
 specification_version: 4
 summary: Take a peek into the MySQL queries made during your application's requests.

data/app/assets/javascripts/peek/views/performance_bar.coffee

@@ -1,167 +0,0 @@
-# The mission control window.performance.timing display area.
-#
-# Breaks the window.performance.timing numbers down into these groups:
-#
-# dns         - Time looking up domain. Usually zero.
-# tcp and ssl - Time used establishing tcp and ssl connections.
-# redirect    - Time spent redirecting since navigation began.
-# app         - Real server time as recorded in the app.
-# latency     - Extra backend and network time where browser was waiting.
-# frontend    - Time spent loading and rendering the DOM until interactive.
-#
-# Not all frontend time is counted. The page is considered ready when the
-# domInteractive ready state is reached. This is before DOMContentLoaded and
-# onload javascript handlers.
-class PerformanceBar
-  # Additional app info to show with the app timing.
-  appInfo: null
-
-  # The pixel width we're rendering the timing graph into.
-  width: null
-
-  # Format a time as ms or s based on how big it is.
-  @formatTime: (value) ->
-    if value >= 1000
-      "#{(value / 1000).toFixed(3)}s"
-    else
-      "#{value.toFixed(0)}ms"
-
-  # Create a new PerformanceBar view bound to a given element. The el and width
-  # options should be provided here.
-  constructor: (options={}) ->
-    @el = $('#peek-view-performance-bar .performance-bar')
-    @[k] = v for k, v of options
-    @width  ?= @el.width()
-    @timing ?= window.performance.timing
-
-  # Render the performance bar in the associated element. This is a little weird
-  # because it includes the server-side rendering time reported with the
-  # response document which may not line up when using the back/forward button
-  # and loading from cache.
-  render: (serverTime=0) ->
-    @el.empty()
-    @addBar 'frontend', '#90d35b', 'domLoading', 'domInteractive'
-
-    # time spent talking with the app according to performance.timing
-    perfNetworkTime = (@timing.responseEnd - @timing.requestStart)
-
-    # only include serverTime if it's less than than the browser reported
-    # talking-to-the-app time; otherwise, assume we're loading from cache.
-    if serverTime and serverTime <= perfNetworkTime
-      networkTime = perfNetworkTime - serverTime
-      @addBar 'latency / receiving', '#f1faff',
-        @timing.requestStart + serverTime,
-        @timing.requestStart + serverTime + networkTime
-      @addBar 'app', '#90afcf',
-        @timing.requestStart,
-        @timing.requestStart + serverTime,
-        @appInfo
-    else
-      @addBar 'backend', '#c1d7ee', 'requestStart', 'responseEnd'
-
-    @addBar 'tcp / ssl', '#45688e', 'connectStart', 'connectEnd'
-    @addBar 'redirect', '#0c365e', 'redirectStart', 'redirectEnd'
-    @addBar 'dns', '#082541', 'domainLookupStart', 'domainLookupEnd'
-
-    @el
-
-  # Determine if the page has reached the interactive state yet.
-  isLoaded: ->
-    @timing.domInteractive
-
-  # Integer unix timestamp representing the very beginning of the graph.
-  start: ->
-    @timing.navigationStart
-
-  # Integer unix timestamp representing the very end of the graph.
-  end: ->
-    @timing.domInteractive
-
-  # Total number of milliseconds between the start and end times.
-  total: ->
-    @end() - @start()
-
-  # Helper used to add a bar to the graph.
-  addBar: (name, color, start, end, info) ->
-    start = @timing[start] if typeof start is 'string'
-    end   = @timing[end]   if typeof end is 'string'
-
-    # Skip missing stats
-    return unless start? and end?
-
-    time   = end - start
-    offset = start - @start()
-    left = @mapH(offset)
-    width = @mapH(time)
-
-    title = "#{name}: #{PerformanceBar.formatTime(time)}"
-    bar = $ '<li></li>', title: title, class: 'peek-tooltip'
-    bar.css
-      width: "#{width}px"
-      left:  "#{left}px"
-      background: color
-    bar.tipsy gravity: $.fn.tipsy.autoNS
-    @el.append bar
-
-  # Map a time offset value to a horizontal pixel offset.
-  mapH: (offset) ->
-    offset * (@width / @total())
-
-renderPerformanceBar = ->
-  resp = $('#peek-server_response_time')
-  time = Math.round(resp.data('time') * 1000)
-
-  bar = new PerformanceBar
-  bar.render time
-
-  span = $('<span>', {'class': 'peek-tooltip', title: 'Total navigation time for this page.'})
-    .text(PerformanceBar.formatTime(bar.total()))
-  span.tipsy gravity: $.fn.tipsy.autoNS
-  updateStatus span
-
-updateStatus = (html) ->
-  $('#serverstats').html html
-
-ajaxStart = null
-$(document).on 'pjax:start page:fetch turbolinks:request-start', (event) ->
-  ajaxStart = event.timeStamp
-
-$(document).on 'pjax:end page:load turbolinks:load', (event, xhr) ->
-  return unless ajaxStart?
-  ajaxEnd    = event.timeStamp
-  total      = ajaxEnd - ajaxStart
-  serverTime = if xhr then parseInt(xhr.getResponseHeader('X-Runtime')) else 0
-
-  # Defer to include the timing of pjax hook evaluation
-  setTimeout ->
-    now = new Date().getTime()
-    bar = new PerformanceBar
-      timing:
-        requestStart: ajaxStart,
-        responseEnd: ajaxEnd,
-        domLoading: ajaxEnd,
-        domInteractive: now
-      isLoaded: -> true
-      start: -> ajaxStart
-      end: -> now
-
-    bar.render serverTime
-
-    if $.fn.pjax?
-      tech = 'PJAX'
-    else
-      tech = 'Turbolinks'
-
-    span = $('<span>', {'class': 'peek-tooltip', title: "#{tech} navigation time"})
-      .text(PerformanceBar.formatTime(total))
-    span.tipsy gravity: $.fn.tipsy.autoNS
-    updateStatus span
-
-    ajaxStart = null
-  , 0
-
-$ ->
-  if window.performance
-    renderPerformanceBar()
-  else
-    $('#peek-view-performance-bar').remove()