@@ -62,7 +62,7 @@ class WatchesController < ApplicationController respond_to do |format| if @watch.save flash[:notice] = 'Watch was successfully created.' - format.html { redirect_to(@watch) } + format.html { redirect_to root_path } format.xml { render :xml => @watch, :status => :created, :location => @watch } else format.html { render :action => "new" } @@ -79,7 +79,7 @@ class WatchesController < ApplicationController respond_to do |format| if @watch.update_attributes(params[:watch]) flash[:notice] = 'Watch was successfully updated.' - format.html { redirect_to sites_path } + format.html { redirect_to root_path } format.xml { head :ok } else format.html { render :action => "edit" } app/controllers/watches_controller.rb @@ -5,6 +5,7 @@ .name{:onclick => "location.href = '#{edit_watch_path(watch)}'"} %span.site_name= watch.site.name + %span.full_name= watch.name %span.name= watch.name %span.full_url= watch.url %span.url= link_to(watch.url, watch.url) @@ -17,9 +18,17 @@ = image_tag(response_graph_watches_path + "/#{watch.id}", :alt => "Last 24 hours response times for #{watch.name}", :class => 'graph', :id => "watch_#{watch.id}_graph", :title => "Response times, last 24 hours") .status - %span.status - = warning ? 'Warning' : watch.status.name - - unless watch.status.id == Status::DISABLED - %span.response= watch.last_response_time.to_s + " ms" - - else - %span.enable= link_to_remote 'Enable?', :url => { :controller => 'watches', :action => 'update', :id => watch.id }, :success => "$('watch_#{watch.id}').down('span.status').update('Enabled'); $('watch_#{watch.id}').down('span.enable').update('').addClassName('response').removeClassName('enable');", :method => :put, :with => "'watch[active]=1'" + %span.response_title Last + %span.response= watch.last_response_time.to_s + " ms" + %span.since_title For + %span.since= time_ago_in_words(watch.last_status_change_at || watch.created_at) + + +-# + .status + %span.status + = warning ? 'Warning' : watch.status.name + - unless watch.status.id == Status::DISABLED + %span.response= watch.last_response_time.to_s + " ms" + - else + %span.enable= link_to_remote 'Enable?', :url => { :controller => 'watches', :action => 'update', :id => watch.id }, :success => "$('watch_#{watch.id}').down('span.status').update('Enabled'); $('watch_#{watch.id}').down('span.enable').update('').addClassName('response').removeClassName('enable');", :method => :put, :with => "'watch[active]=1'" app/views/watches/_watch.html.haml @@ -16,8 +16,8 @@ <%= f.text_field :warning_time %> - <%= f.label :content %> - <%= f.text_field :content %> + <%= f.label :content_match %> + <%= f.text_field :content_match %> <%= f.label :site_id %> app/views/watches/edit.html.erb @@ -1,44 +1,76 @@ // Called when the browser is resized to resize each of the slides in the compact dashboard view function resizePanels() { var watches = $$('.watch'); - var container_margin = $('sites').getStyle('marginLeft').match(/\d+/); // how much space we need to reserve for the margins + var container_margin = $('sites').getStyle('marginLeft').match(/\d+/); // how much space we need to reserve for the margins of the page var browser_width = parseInt(document.viewport.getWidth()); // browser width - var watch_margin = parseInt(watches.first().getStyle('marginRight').match(/\d+/)); - var watch_max_width = parseInt(watches.first().getStyle('minWidth').match(/\d+/)); + var watch_margin = parseInt(watches.first().getStyle('marginRight').match(/\d+/)); // how much margin for each watch + var watch_min_width = parseInt(watches.first().getStyle('minWidth').match(/\d+/)); // the minimum width a watch is allowed to be var i = watches.length; // start counting backwards through the number of total watches until we find a width for each that is greater than the max width do { var watch_width = figureWatchWidth(browser_width, i, watch_margin, container_margin); // how wide one slide should be i--; - } while (watch_width < watch_max_width) + } while (watch_width < watch_min_width) - // figure out how much text can fit for the URL - var total_chars = Math.floor(watch_width / 7); // maximum length for URL based on this size of a box - // resize each slide watches.each(function(element) { element.setStyle({'width':watch_width+'px'}); - resizeLink(element,watch_width,total_chars); + resizeLink(element, watch_width); + resizeName(element, watch_width); }); } -function resizeLink(element, width, total) { +// resizes the link in a watch so it doesn't wrap +function resizeLink(element, width) { var url = element.down('span.full_url').innerHTML.replace(/https?:\/\//,''); - var a = element.down('span.url a') - if (a.innerHTML.length > total) { - var text = url.slice(0,(total/2)) + '...' + url.slice(-(total/2)); // shorten the URL if it's too long, removing http:// at the beginning - a.update(text); + var a = element.down('span.url a'); + var font_size = a.getStyle('fontSize').replace(/px/,''); + a.update(resizeText(url, font_size, width, 1.7, 'middle')); +} + + +function resizeName(element, width) { + var full_name = element.down('span.full_name').innerHTML; + var name = element.down('span.name'); + var font_size = name.getStyle('fontSize').replace(/px/,''); + name.update(resizeText(full_name, font_size, width, 1.4, 'end')); +} + + +// resizes text based on a certain element size +// text => the text to resize +// font_size => the size of the current font +// width => how wide of a space the font needs to fit +// font_factor => multiplier that compensates for font width (something like 1.5) +// shorten_at => where to shorten the text (and replace with ellipsis) - start, middle, end +function resizeText(text, font_size, width, font_factor, shorten_at) { + var chars = width / font_size * font_factor; + if (text.length > chars) { + switch (shorten_at) { + case 'start': + return '...' + text.slice(-1,-chars); + break; + case 'middle': + return text.slice(0,(chars/2)) + '...' + text.slice(-(chars/2)); // shorten the URL if it's too long, removing http:// at the beginning + break; + case 'end': + return text.slice(0,chars) + '...'; + break; + } } else { - a.update(url); // otherwise replace with the full URL + return text } } + +// computes how wide one slide should be function figureWatchWidth(browser_width,total,watch_margin,container_margin) { return (browser_width / total - watch_margin) - (container_margin /total); // how wide one slide should be } +// reads cookies function getCookie(c_name) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "="); @@ -52,6 +84,7 @@ function getCookie(c_name) { return ""; } +// methods used by watches watchBlock = { // set graphs to cookie settings public/javascripts/application.js @@ -31,7 +31,7 @@ h1 color: #ffffff text-decoration: none - div.watch + .watch cursor: pointer margin: 0 0 .3em background-color: transparent @@ -45,9 +45,13 @@ h1 span display: block &.name + span.full_name + display: none span.name font-size: 167% text-shadow: 1px 1px 2px rgba(0,0,0,.6) + span.full_url + display: none span.url font-size: 100% a public/stylesheets/sass/shared.sass @@ -13,26 +13,38 @@ h1 .watch float: left width: 300px - height: 100px - margin: 0 10px 10px 0!important + height: 112px + margin: 0 10px 10px 0 display: block min-width: 200px -moz-box-shadow: 2px 2px 2px rgba(0,0,0,.2) -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.2) div + padding: 0 + float: left &.name width: auto + margin: 0.5em 1em span.name - font-size: 131% !important - span.full_url - display: none + font-size: 131% span.url a font-size: 85% &.status - display: none + text-align: left width: auto - font-size: 85% !important + clear: left + float: left + margin-top: 1.7em + padding: 0.3em 1em 0.4em + background-color: rgba(255,255,255,.2) + width: 100% + span + display: inline + font-size: 85% + &.response + margin: 0 1.3em 0 0 + &.graph display: none .new_watch public/stylesheets/sass/slides.sass @@ -38,7 +38,7 @@ h1 a span { color: #ffffff; text-decoration: none; } -#sites .site div.watch { +#sites .site .watch { cursor: pointer; margin: 0 0 .3em; background-color: transparent; @@ -47,111 +47,117 @@ h1 a span { -webkit-border-radius: 6px; overflow: hidden; } -#sites .site div.watch div { +#sites .site .watch div { padding: .5em 1em; float: left; } -#sites .site div.watch div span { +#sites .site .watch div span { display: block; } -#sites .site div.watch div.name span.name { +#sites .site .watch div.name span.full_name { + display: none; +} +#sites .site .watch div.name span.name { font-size: 167%; text-shadow: 1px 1px 2px rgba(0,0,0,.6); } -#sites .site div.watch div.name span.url { +#sites .site .watch div.name span.full_url { + display: none; +} +#sites .site .watch div.name span.url { font-size: 100%; } -#sites .site div.watch div.name a { +#sites .site .watch div.name a { color: #ffffff; color: rgba(255,255,255,.6); } -#sites .site div.watch div.name a:hover { +#sites .site .watch div.name a:hover { color: #ffffff; color: rgba(255,255,255,1); } -#sites .site div.watch div.status { +#sites .site .watch div.status { width: 80px; text-align: center; float: right; } -#sites .site div.watch div.status span.status { +#sites .site .watch div.status span.status { font-weight: bold; font-size: 146.5%; text-shadow: 1px 1px 2px rgba(0,0,0,.6); } -#sites .site div.watch div.status span.response { +#sites .site .watch div.status span.response { font-size: 85%; } -#sites .site div.watch div.status a { +#sites .site .watch div.status a { color: #ffffff; } -#sites .site div.watch div.graph { +#sites .site .watch div.graph { width: 245px; text-align: right; float: right; } -#sites .site div.watch div.graph ul { +#sites .site .watch div.graph ul { font-size: 85%; margin: 0 0.5em; } -#sites .site div.watch div.graph ul li { +#sites .site .watch div.graph ul li { display: inline; padding: 0 0.5em; } -#sites .site div.watch div.graph ul li.current { +#sites .site .watch div.graph ul li.current { background-color: rgba(255,255,255,1); -moz-border-radius: 2px 2px 0 0; -webkit-border-radius: 2px 2px 0 0; } -#sites .site div.watch div.graph ul li.current a { +#sites .site .watch div.graph ul li.current a { color: #638562; } -#sites .site div.watch div.graph ul li.current a:hover { +#sites .site .watch div.graph ul li.current a:hover { color: #638562; } -#sites .site div.watch div.graph ul li a { +#sites .site .watch div.graph ul li a { color: rgba(255,255,255,.6); text-decoration: none; outline: none; } -#sites .site div.watch div.graph ul li a:hover { +#sites .site .watch div.graph ul li a:hover { color: rgba(255,255,255,1); } -#sites .site div.watch div.graph img { +#sites .site .watch div.graph img { display: block; padding: .3em; background-color: #ffffff; -moz-border-radius: 5px; -webkit-border-radius: 5px; } -#sites .site div.watch.up { +#sites .site .watch.up { background-color: #638562; } -#sites .site div.watch.up:hover { +#sites .site .watch.up:hover { background-color: #7A9F78; } -#sites .site div.watch.down { +#sites .site .watch.down { background-color: #921C1C; } -#sites .site div.watch.down:hover { +#sites .site .watch.down:hover { background-color: #AE2D2D; } -#sites .site div.watch.disabled { +#sites .site .watch.disabled { background-color: #aaaaaa; } -#sites .site div.watch.disabled:hover { +#sites .site .watch.disabled:hover { background-color: #999999; } -#sites .site div.watch.unknown { +#sites .site .watch.unknown { background-color: #666666; } -#sites .site div.watch.unknown:hover { +#sites .site .watch.unknown:hover { background-color: #555555; } -#sites .site div.watch.warning { +#sites .site .watch.warning { background-color: #EEBD4E; } -#sites .site div.watch.warning:hover { +#sites .site .watch.warning:hover { background-color: #FFC02F; } #sites .new_watch { public/stylesheets/shared.css @@ -17,29 +17,43 @@ h1 { #sites .site .watch { float: left; width: 300px; - height: 100px; - margin: 0 10px 10px 0!important; + height: 112px; + margin: 0 10px 10px 0; display: block; min-width: 200px; -moz-box-shadow: 2px 2px 2px rgba(0,0,0,.2); -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.2); } +#sites .site .watch div { + padding: 0; + float: left; +} #sites .site .watch div.name { width: auto; + margin: 0.5em 1em; } #sites .site .watch div.name span.name { - font-size: 131% !important; -} -#sites .site .watch div.name span.full_url { - display: none; + font-size: 131%; } #sites .site .watch div.name span.url a { font-size: 85%; } #sites .site .watch div.status { - display: none; + text-align: left; width: auto; - font-size: 85% !important; + clear: left; + float: left; + margin-top: 1.7em; + padding: 0.3em 1em 0.4em; + background-color: rgba(255,255,255,.2); + width: 100%; +} +#sites .site .watch div.status span { + display: inline; + font-size: 85%; +} +#sites .site .watch div.status span.response { + margin: 0 1.3em 0 0; } #sites .site .watch div.graph { display: none; public/stylesheets/slides.css 0df1ac9430a42bbbf845ae61f42f24b2f9d1d67d Cannikin cannikinn@gmail.com http://github.com/cannikin/owl/commit/5a1aedde8e0cb7686316c921e20aec413e518eda 5a1aedde8e0cb7686316c921e20aec413e518eda

2009-11-03T09:39:52-08:00

Boxes and text resizing, showing last response time and how long in that state 2457e9bf5f984605fd7c780e11f5809abe766bc3 Cannikin cannikinn@gmail.com