lib/clientperf_data_builder.rb lib/clientperf_helper.rb @@ -1,3 +1,3 @@ -* Thanks to Howard Rauscher for providing much of the javascript measurement code. +* Thanks to Howard Rauscher for providing the javascript measurement code. * Thanks to the FiveRuns team, especially Bruce Williams for helping me to understand how to write rails plugins and hook into ActionController CONTRIBUTORS @@ -1,3 +1,4 @@ = History +* v0.1.0. This version is decent for consumption. decent graphs, layout, stable installation and compressed javascript. * v0.0.2. First time releasing a gem and my manifest was bad. this version fixes that * v0.0.1. Just in time for Austin on Rails \ No newline at end of file History.rdoc @@ -5,6 +5,8 @@ init.rb lib/clientperf.rb lib/clientperf_config.rb lib/clientperf_controller.rb +lib/clientperf_data_builder.rb +lib/clientperf_helper.rb lib/clientperf_migrations.rb lib/clientperf_result.rb lib/clientperf_uri.rb Manifest @@ -6,9 +6,17 @@ Measures the time it takes a user's browser to get from the top of a web page to == Installation +Most cases: + sudo gem install clientperf clientperf /path/to/rails/app + cd /path/to/rails/app rake db:migrate + +For clientperf developers, follow the above steps to generate the clientperf tables for a rails app, then: + cd /path/to/rails/app + rm -rf vendor/plugins/clientperf + git clone git://github.com/efalcao/clientperf.git vendor/plugins/clientperf == Usage README.rdoc @@ -1,5 +1,4 @@ = TODO -* charts -* make it pretty * tests (how to test a plugin?) -* indexes? other small optimizations? \ No newline at end of file +* indexes? other small optimizations? +* rake-based installation rather than a gem binary? how to behave as a rail 2.1 gem when it comes to the migration? \ No newline at end of file TODO.rdoc @@ -27,7 +27,7 @@ module Clientperf end def version - "0.0.3" + "0.1.0" end private lib/clientperf.rb @@ -1,5 +1,6 @@ class ClientperfController < ActionController::Base def index + ClientperfUri.destroy_all ["updated_at < ?", 1.year.ago] @uris = ClientperfUri.find(:all, :include => :clientperf_results) end @@ -8,17 +9,6 @@ class ClientperfController < ActionController::Base @page_title = @uri.uri end - def reset - if request.post? - if params[:id] - ClientperfUri.destroy(params[:id]) - else - ClientperfUri.destroy_all - end - end - redirect_to :action => 'index' - end - def measure milliseconds = params[:e].to_i - params[:b].to_i rescue nil if milliseconds && params[:u] lib/clientperf_controller.rb @@ -2,6 +2,26 @@ class ClientperfResult < ActiveRecord::Base belongs_to :clientperf_uri after_create :update_uri + class << self + include ClientperfDataBuilder + + def last_24_hours + start_time = (Time.now + 1.hour - 1.day).change(:min => 0) + results = average(:milliseconds, :conditions => ['created_at > ?', start_time], + :group => "date_format(created_at,'%Y-%m-%d %H')") + + build_data_for_chart(results, start_time, 23, :hours) + end + + def last_30_days + start_time = (Time.now + 1.day - 30.days).change(:hour => 0) + results = average(:milliseconds, :conditions => ['created_at > ?', start_time], + :group => "date_format(created_at,'%Y-%m-%d')") + + build_data_for_chart(results, start_time, 29, :days) + end + end + private def update_uri lib/clientperf_result.rb @@ -1,86 +1,20 @@ class ClientperfUri < ActiveRecord::Base + include ClientperfDataBuilder + has_many :clientperf_results, :dependent => :delete_all - has_many :clientperf_results, :dependent => :delete_all do - def last_hour - end_time = (Time.now + 1.minute).change(:sec => 0) - start_time = end_time - 1.hour - results = average(:milliseconds, :conditions => ['created_at between ? and ?', start_time, end_time] , - :group => 'minute(created_at)') + def last_24_hours + start_time = (Time.now + 1.hour - 1.day).change(:min => 0) + results = clientperf_results.average(:milliseconds, :conditions => ['created_at > ?', start_time], + :group => "date_format(created_at,'%Y-%m-%d %H')") - max = 0 - padded_results = (start_time.min..start_time.min + 59).map do |i| - minute = i % 60 - data = data_for(minute, results) - max = data if data && data > max - [minute, data] - end - [padded_results, max] - end - - def last_day - end_time = (Time.now + 1.hour).change(:min => 0) - start_time = end_time - 1.day - results = average(:milliseconds, :conditions => ['created_at between ? and ?', start_time, end_time], - :group => 'hour(created_at)') - - max = 0 - padded_results = (start_time.hour..start_time.hour + 23).map do |i| - hour = i % 24 - data = data_for(hour, results) - max = data if data && data > max - [hour, data] - end - [padded_results, max] - end - - def last_month - end_time = (Time.now + 1.day).change(:hour => 0) - start_time = end_time - 30.days - results = average(:milliseconds, :conditions => ['created_at between ? and ?', start_time, end_time], - :group => 'day(created_at)') - - max = 0 - padded_results = (start_time.day..start_time.day + 29).map do |i| - day = i % Time.days_in_month(start_time.month) - data = data_for(day, results) - max = data if data && data > max - [day, data] - end - [padded_results, max] - end - - def data_for(point, results) - data = results.detect {|p,d| point == p.to_i} - data ? data[1].to_i : 0 - end - end - - def chart_url - "http://chart.apis.google.com/chart?cht=ls&chs=300x50&chm=B&chd=s:" - end - - def hour_chart - "#{chart_url}#{chart_data(clientperf_results.last_hour)}" - end - - def day_chart - "#{chart_url}#{chart_data(clientperf_results.last_day)}" - end - - def month_chart - "#{chart_url}#{chart_data(clientperf_results.last_month)}" + build_data_for_chart(results, start_time, 23, :hours) end - private - - def chart_data(args) - data, max = args - max += 10 - encode = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789' - - data.map do |result| - char = 62 * result[1] / max.to_f - encode[char.round,1] - end.join + def last_30_days + start_time = (Time.now + 1.day - 30.days).change(:hour => 0) + results = clientperf_results.average(:milliseconds, :conditions => ['created_at > ?', start_time], + :group => "date_format(created_at,'%Y-%m-%d')") + + build_data_for_chart(results, start_time, 29, :days) end end \ No newline at end of file lib/clientperf_uri.rb @@ -12,48 +12,28 @@ module ExtendActionController end def add_clientperf_to(response) - if response.body =~ /<html[^>]*?>/im - replacement = %q(\1 + if response.body =~ /(<html[^>]*?>).*(<\/html>)/im + top = %q(\1 <script type='text/javascript'> - var clientPerfStart = (new Date()).getTime(); - var clientPerf = function() { - var attach = function(instance, eventName, listener) { - var listenerFn = listener; - if (instance.addEventListener) { - instance.addEventListener(eventName, listenerFn, false); - } - else if (instance.attachEvent) { // Internet explorer - listenerFn = function() { - listener(window.event); - }; - instance.attachEvent("on" + eventName, listenerFn); - } - else { - // I could do some further attachment here, if I wanted too. for older browsers - // ex: instance['on' + eventName] = listener; - throw new Error("Event registration not supported"); - } - }; - - var endRun = function() { - var clientPerfEnd = (new Date()).getTime(); - var img = document.createElement('img'); - img.src = '/clientperf/measure.gif?b=' + clientPerfStart + '&e=' + clientPerfEnd + '&u=' + location.href; - document.body.appendChild(img); - }; - - try { - attach(window, 'load', endRun); - } - catch(e) { - window.onload = endRun; - } - } - clientPerf(); + var _clientPerfStart = (new Date()).getTime(); </script> ) - response.body.sub!(/(<html[^>]*?>)/im, replacement) + bottom = %q( + <script type='text/javascript'> + (function() { + function fn() { var end = (new Date()).getTime(), img = document.createElement('img'); img.src = '/clientperf/measure.gif?b='+_clientPerfStart+'&e='+end+'&u='+encodeURIComponent(location.href); document.body.appendChild(img); }; + if (window.addEventListener) { window.addEventListener('load', fn, false); } + else if (window.attachEvent) { window.attachEvent('onload', fn); } + else { var chain = window.onload; window.onload = function(e) { if(chain !== undefined) { chain(e); } fn(); } } + })(); + </script> + </html> + ) + + response.body.sub!(/(<html[^>]*?>)/im, top) + response.body.sub!(/<\/html>/im, bottom) + response.headers["Content-Length"] = response.body.size end end lib/extend_action_controller.rb @@ -1,20 +1,26 @@ -<h2>all urls</h2> -<table> - <tr> - <td>URL</td> - <td># of times measured</td> - <td>avg. client time (ms)</td> - <td>first measured</td> - <td>last measured</td> - </tr> - <% @uris.each do |uri| %> - <tr> - <td><%= link_to uri.uri, "/clientperf/#{uri.id}" %></td> - <td><%= uri.clientperf_results.count %></td> - <td><%= uri.clientperf_results.average(:milliseconds).to_i %></td> - <td><%= uri.created_at.strftime("%M/%d/%y") %></td> - <td><%= uri.updated_at.strftime("%M/%d/%y") %></td> - </tr> - <% end %> -</table> -<p><%= button_to "Reset all data", {:action => 'reset'}, :confirm => "are you sure?" %></p> \ No newline at end of file +<div id="urls"> + <div class="block"> + <h2>all urls<span id="explanation">[ avg. seconds | # of times seen ]</span></h2> + <table> + <% @uris.each do |uri| %> + <tr> + <td class="vital-stats">[ <%= number_with_precision(uri.clientperf_results.average(:milliseconds) / 1000.to_f, 2) %>s | <%= uri.clientperf_results.count %> ]</td> + <td><%= link_to uri.uri, "/clientperf/#{uri.id}" %></td> + </tr> + <% end %> + </table> + </div> +</div> +<div id="overall"> + <div class="block"> + <h2>overall graphs</h2> + <div class="chart"> + <h4>24 hour</h4> + <img src="<%= chart(ClientperfResult.last_24_hours) %>" /> + </div> + <div class="chart"> + <h4>30 day</h4> + <img src="<%= chart(ClientperfResult.last_30_days)%>" /> + </div> + </div> +</div> \ No newline at end of file views/clientperf/index.html.erb @@ -1,18 +1,24 @@ -<h2>summary</h2> -<p>recorded <%= @uri.clientperf_results.count %> times with average time of <%= @uri.clientperf_results.average(:milliseconds).to_i %>ms. last recorded <%= @uri.updated_at.strftime("%Y-%m-%d") %>.</p> - -<h2>trends</h2> -<div class="chart"> - <h4>last hour</h4> - <img src="<%= @uri.hour_chart %>" /> +<div id="trends"> + <div class="block"> + <h2>trends</h2> + <div class="chart"> + <h4>24 hour</h4> + <img src="<%= chart(@uri.last_24_hours) %>" /> + </div> + <div class="chart"> + <h4>30 day</h4> + <img src="<%= chart(@uri.last_30_days)%>" /> + </div> + </div> </div> -<div class="chart"> - <h4>last day</h4> - <img src="<%= @uri.day_chart %>" /> -</div> -<div class="chart"> - <h4>last month</h4> - <img src="<%= @uri.month_chart %>" /> -</div> - -<p><%= button_to "Reset this URI", {:action => 'reset', :id => @uri.id}, :confirm => "are you sure?" %></p> \ No newline at end of file +<div id="summary"> + <div class="block"> + <h2>summary</h2> + <ul> + <li><span>measured:</span><b><%= @uri.clientperf_results.count %></b> times</li> + <li><span>average time:</span><b><%= number_with_precision(@uri.clientperf_results.average(:milliseconds) / 1000.to_f, 2) %></b> seconds</li> + <li><span>first seen:</span><b><%= @uri.created_at.strftime("%m/%d/%Y") %></b></li> + <li><span>last seen:</span><b><%= distance_of_time_in_words(@uri.updated_at, Time.now) %></b> ago</li> + </ul> + </div> +</div> \ No newline at end of file views/clientperf/show.html.erb @@ -2,7 +2,21 @@ <head> <title>clientperf <%= ": #{@page_title}" if @page_title %></title> <style type="text/css"> - body {margin:0; font-family: helvetica, arial, sans-serif; font-size: 14px;} + body { + margin:0; + font-family: helvetica, arial, sans-serif; + font-size: 14px; + min-width: 990px; + } + + ul { + margin: 0; + padding: 0; + } + + li { + list-style-type: none; + } #header { background-color: #dedede; @@ -29,14 +43,53 @@ #header h3 span { } - #content { - padding: 0 20px; - } - #content h2 { - margin-top: 20px; + margin: 0 0 20px 0; border-bottom: 1px solid #d3d3d3; } + + #urls, #overall, #trends, #summary { + float: left; + } + + #urls, #trends { + width: 60%; + } + + #urls li { + margin-bottom: 3px ; + } + + .vital-stats, #explanation { + color: #666; + padding-right: 5px; + font-weight: normal; + } + + #explanation { + margin-left: 10px; + font-style: italic; + font-size: 12px; + position: relative; + bottom: 2px; + } + + table { + font-size: 14px; + } + + td { padding-bottom: 3px;} + + #overall, #summary{ + width: 40%; + } + + .block { + padding: 20px; + } + + #summary li {margin-bottom: 6px;} + #summary li span { float:left; width: 100px; } </style> </head> <body> views/layouts/clientperf.html.erb 7b4dc84ea9d9ac3202ece74b883acff54d3fd87a Eric Falcao efalcao@gmail.com http://github.com/efalcao/clientperf/commit/9a6dd311d28024fd978663ffda9902957b1ae1da 9a6dd311d28024fd978663ffda9902957b1ae1da 2008-06-21T00:52:17-07:00 2008-06-21T00:52:17-07:00 decent graphs, compressed js, js top and bottom, half-decent layout, worthy of a blog post at this point... 58263d1fece2336d96d57bd28400a2aaea8a32f6 Eric Falcao efalcao@gmail.com