Set the background and questionmark when the server is offline.

Gemfile

@@ -17,7 +17,7 @@ gem "aws-sdk"
 gem 'delayed_job_active_record'
 gem "daemons"
 gem 'jquery-rails', '>= 1.0.12'
-
+gem 'pivotal_git_scripts'
 
 group :postgres do
   gem "pg"

Gemfile.lock

@@ -32,13 +32,13 @@ GEM
     addressable (2.2.6)
     archive-tar-minitar (0.5.2)
     arel (2.0.10)
-    aws-sdk (1.3.2)
+    aws-sdk (1.3.4)
       httparty (~> 0.7)
       json (~> 1.4)
       nokogiri (>= 1.4.4)
       uuidtools (~> 2.1)
     builder (2.1.2)
-    bunny (0.7.8)
+    bunny (0.7.9)
     capistrano (2.9.0)
       highline
       net-scp (>= 1.0.0)
@@ -59,7 +59,7 @@ GEM
       moneta
       ohai (>= 0.5.0)
     columnize (0.3.6)
-    daemons (1.1.6)
+    daemons (1.1.8)
     delayed_job (3.0.1)
       activesupport (~> 3.0)
     delayed_job_active_record (0.3.2)
@@ -86,7 +86,7 @@ GEM
     formatador (0.2.1)
     gem_plugin (0.2.3)
     headless (0.1.0)
-    heroku (2.19.1)
+    heroku (2.20.0)
       launchy (>= 0.3.2)
       rest-client (~> 1.6.1)
       rubyzip
@@ -144,7 +144,8 @@ GEM
       mixlib-log
       systemu (~> 2.2.0)
       yajl-ruby
-    pg (0.12.2)
+    pg (0.13.1)
+    pivotal_git_scripts (1.1.0)
     polyglot (0.3.3)
     rack (1.2.5)
     rack-mount (0.6.14)
@@ -193,7 +194,7 @@ GEM
       ruby-openid (>= 2.1.7)
     ruby_core_source (0.1.5)
       archive-tar-minitar (>= 0.5.2)
-    rubyzip (0.9.5)
+    rubyzip (0.9.6.1)
     rvm (1.9.2)
     selenium-client (1.2.18)
     selenium-rc (2.4.0)
@@ -241,6 +242,7 @@ DEPENDENCIES
   mysql2 (< 0.3)
   nokogiri
   pg
+  pivotal_git_scripts
   rails (= 3.0.3)
   rake
   rspec-rails (= 2.2.0)

app/views/dashboards/_project.html.erb

@@ -2,18 +2,27 @@
    if project.red?
        background = 'redbox'
        background = 'redbox-aggregate' if project.is_a? AggregateProject
-       status_image = project.building? ? 'build-loader-red.gif' : 'exclamation.png'
+       if project.building?
+         status_class = 'project_status red building'
+       else
+         status_class = 'project_status red'
+       end
    elsif project.green?
        background = 'greenbox'
        background = 'greenbox-aggregate' if project.is_a? AggregateProject
-       status_image = project.building? ? 'build-loader-green.gif' : 'checkmark.png'
+       if project.building?
+         status_class = 'project_status green building'
+       else
+         status_class = 'project_status green'
+       end
    else
        background = 'bluebox'
        background = 'bluebox-aggregate' if project.is_a? AggregateProject
+       status_class = 'project_status offline'
    end
 %>
 
-<div class="box" project_id="<%= project.id %>" style="background: url('/images/<%= background %>.png') no-repeat top left">
+<div class="box <%= background %>" project_id="<%= project.id %>" >
   <div class="project_name <%= project.green? ? 'success' : 'error' %>">
     <h1><%= link_to(h(project.name), project.url) %></h1>
   </div>
@@ -28,11 +37,6 @@
     <%= render :partial=>'dashboards/history', :locals=>{:project=>project} %>
   </div>
 
-  <div class="project_status">
-    <% if project.online? %>
-        <%= link_to(image_tag(status_image, {:class => 'status_image'}), project.status.url) %>
-    <% else %>
-        <%= image_tag("questionmark.png", {:class => 'status_image'}) %>
-    <% end %>
+  <div class="<%= status_class %>">
   </div>
 </div>

app/views/dashboards/_twitter_search.html.erb

@@ -1,36 +1,36 @@
-<div class="tweets" tweet_id=<%= twitter_search.id%>>
-<script>
-new TWTR.Widget({
-  version: 2,
-  type: 'search',
-  search: <%= twitter_search.search_term.to_json.html_safe %>,
-  interval: 6000,
-  title: '',
-  subject: <%= twitter_search.search_term.to_json.html_safe %>,
-  width: 216, 
-  height: 150,
-  rpp: 3,
-  theme: {
-    shell: {
-      background: '#8ec1da',
-      color: '#ffffff'
-    },
-    tweets: {
-      background: '#ffffff',
-      color: '#000000',
-      links: '#1985b5'
-    }
-  },
-  features: {
-    scrollbar: false,
-    loop: false,
-    live: false,
-    hashtags: true,
-    timestamp: true,
-    avatars: true,
-    toptweets: true,
-    behavior: 'all'
-  }
-}).render().start();
-</script>
+<div class="tweets" tweet_id='<%= twitter_search.id%>'>
+  <script>
+    new TWTR.Widget({
+      version: 2,
+      type: 'search',
+      search: <%= twitter_search.search_term.to_json.html_safe %>,
+      interval: 6000,
+      title: '',
+      subject: <%= twitter_search.search_term.to_json.html_safe %>,
+      width: 216,
+      height: 150,
+      rpp: 3,
+      theme: {
+        shell: {
+          background: '#8ec1da',
+          color: '#ffffff'
+        },
+        tweets: {
+          background: '#ffffff',
+          color: '#000000',
+          links: '#1985b5'
+        }
+      },
+      features: {
+        scrollbar: false,
+        loop: false,
+        live: false,
+        hashtags: true,
+        timestamp: true,
+        avatars: true,
+        toptweets: true,
+        behavior: 'all'
+      }
+    }).render().start();
+  </script>
 </div>

app/views/dashboards/show.html.erb

@@ -5,7 +5,11 @@
   });
 </script>
 <% end %>
-
+<div class="cached_images" >
+  <% ["/images/bluebox-aggregate.png", "/images/questionmark.png", "/images/bluebox.png"].each do |image| %>
+    <%= image_tag image %>
+  <% end %>
+</div>
 <div class="projects">
   <% for project in @projects %>
     <div class="project<%= project.is_a?(AggregateProject) ? ' aggregate' : ''%>">

app/views/messages/index.html.erb

@@ -14,7 +14,9 @@
 <% for message in @messages %>
   <tr class="<%= cycle("odd", "even") %>">
     <td><%=h message.text %></td>
-    <td><%=h time_ago_in_words(message.expires_at) %></td>
+    <% if message.expires_at %>
+      <td><%=h time_ago_in_words(message.expires_at) %></td>
+    <% end %>
     <td class="tag_list"><%= message.tag_list %></td>
     <td><%= link_to 'Edit', edit_message_path(message), :class => "button" %></td>
     <td><%= link_to 'Delete', message_path(message), :method => :delete, :class => "button" %></td>

public/javascripts/refresh.js

@@ -16,23 +16,44 @@ function refresh() {
         var currentDiv = ProjectDivs[i];
         var id = jQuery(currentDiv).attr("project_id");
         if (id) {
-            jQuery.get('/projects/'+id+'/load_project_with_status', function reloadDiv(divContents) {
+            jQuery.ajax({
+                url: '/projects/'+id+'/load_project_with_status',
+              method: 'GET',
+                success: function reloadDiv(divContents) {
                 var new_project_id = this.url.split('/')[2];
                 if (divContents.length > 0) {
                     jQuery('.projects div.project:not(.aggregate) div.box[project_id='+new_project_id+']').replaceWith(divContents);
                 }
-            });
+              },
+              error: (function(currentDiv) {
+                return function errorState(xhr) {
+                  var new_id = jQuery(currentDiv).attr("project_id");
+                  jQuery(".projects div.project:not(.aggregate) div.box[project_id="+ new_id +"] div.project_status").addClass('offline');
+                  jQuery(".projects div.project:not(.aggregate) div.box[project_id="+ new_id +"]").addClass('bluebox');
+                  jQuery(".projects div.project:not(.aggregate) div.box[project_id="+ new_id +"] div.project_status").removeClass('building');
+                }
+              })(currentDiv)
+              });
         } else {
             id = jQuery(currentDiv).attr("message_id");
             if (id) {
-                jQuery.get("/messages/"+id+"/load_message", function reloadDiv(divContents) {
+                jQuery.ajax({
+                  url:"/messages/"+id+"/load_message",
+                  method: 'GET',
+                  success: function reloadDiv(divContents) {
                     var new_message_id = this.url.split('/')[2];
                     if (divContents.length > 0) {
                         jQuery('.projects div.box[message_id='+new_message_id+']').replaceWith(divContents);
                     } else {
                         jQuery('.projects div.box[message_id='+new_message_id+']').remove();
                     }
-
+                  },
+                  error: (function(currentDiv) {
+                    return function errorState(xhr) {
+                      var new_id = jQuery(currentDiv).attr("message_id");
+                      jQuery(".projects div.message div.box[message_id="+ new_id +"]").addClass('offline');
+                    }
+                  })(currentDiv)
                 });
             }
         }
@@ -42,23 +63,47 @@ function refresh() {
         var currentDiv = aggregateDivs[i];
         var id = jQuery(currentDiv).attr("project_id");
         if (id) {
-            jQuery.get('/aggregate_projects/'+id+'/load_aggregate_project_with_status', function reloadDiv(divContents) {
+            jQuery.ajax({
+              url: '/aggregate_projects/'+id+'/load_aggregate_project_with_status',
+              method: 'GET',
+              success: function reloadDiv(divContents) {
                 var new_project_id = this.url.split('/')[2];
                 if (divContents.length > 0) {
                     jQuery('.projects div.project.aggregate div.box[project_id='+new_project_id+']').replaceWith(divContents);
                 }
+            },
+            error: (function(currentDiv) {
+              return function errorState(xhr) {
+                  var new_id = jQuery(currentDiv).attr("project_id");
+                  jQuery(".projects div.project.aggregate div.box[project_id="+ new_id +"] div.project_status").addClass('offline');
+                  jQuery(".projects div.project.aggregate div.box[project_id="+ new_id +"]").addClass('bluebox-aggregate');
+                  jQuery(".projects div.project.aggregate div.box[project_id="+ new_id +"] div.project_status").removeClass('building');
+              }
+            })(currentDiv)
             });
         }
     }
     var twitterFeeds = jQuery(".projects div.project.message div.tweets");
     for (var j = 0; j < twitterFeeds.length; j++) {
         var currentDiv = twitterFeeds[j];
+        var id = jQuery(currentDiv).attr("tweet_id");
+
         if (id) {
-            jQuery.get('/twitter_searches/'+id+'/load_tweet', function reloadDiv(divContents) {
-                    var tweet_id = jQuery(divContents).attr('project_id');
-                    jQuery('.projects div.project.message div.tweets[tweet_id='+tweet_id+']').replaceWith(divContents);
+            jQuery.ajax({
+              url: '/twitter_searches/'+id+'/load_tweet',
+              method: 'GET',
+              success: function reloadDiv(divContents) {
+                var tweet_id = jQuery(divContents).attr('tweet_id');
+                var foundExistingTwitterBox = jQuery('.projects div.project.message div.tweets[tweet_id='+tweet_id+']')
+                foundExistingTwitterBox.replaceWith(jQuery(divContents));
+              },
+              error: (function(currentDiv) {
+                return function errorState(xhr) {
+                  var new_id = jQuery(currentDiv).attr("tweet_id");
+                  jQuery(".projects div.project.message div.tweets[tweet_id="+ new_id +"]").addClass('offline');
                 }
-            );
+              })(currentDiv)
+            });
         }
     }
     scheduleRefresh();