From 9736526e7abfd50eb8f18293f8ac312bf61937e4 Mon Sep 17 00:00:00 2001
From: Misha Zatsman <misha-arvados@zatsman.com>
Date: Wed, 7 May 2014 02:33:06 +0000
Subject: [PATCH] Added cache age histogram!

---
 .../assets/javascripts/keep_disks.js.coffee   | 29 +++++++++++++++++++
 .../assets/stylesheets/keep_disks.css.scss    |  7 +++--
 .../app/controllers/keep_disks_controller.rb  |  4 ++-
 .../views/keep_disks/_content_layout.html.erb | 16 +++++++---
 4 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/apps/workbench/app/assets/javascripts/keep_disks.js.coffee b/apps/workbench/app/assets/javascripts/keep_disks.js.coffee
index 761567942f..cc3aac784c 100644
--- a/apps/workbench/app/assets/javascripts/keep_disks.js.coffee
+++ b/apps/workbench/app/assets/javascripts/keep_disks.js.coffee
@@ -1,3 +1,32 @@
 # Place all the behaviors and hooks related to the matching controller here.
 # All this logic will automatically be available in application.js.
 # You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
+
+cache_age_in_days = (milliseconds_age) ->
+  ONE_DAY = 1000 * 60 * 60 * 24
+  milliseconds_age / ONE_DAY
+
+cache_age_hover = (milliseconds_age) ->
+  'Cache age ' + cache_age_in_days(milliseconds_age).toFixed(1) + ' days.'
+
+cache_age_axis_label = (milliseconds_age) ->
+  cache_age_in_days(milliseconds_age).toFixed(0) + ' days'
+
+float_as_percentage = (proportion) ->
+  (proportion.toFixed(4) * 100) + '%'
+
+$.renderHistogram = (histogram_data) ->
+  Morris.Area({
+    element: 'cache-age-vs-disk-histogram',
+    pointSize: 0,
+    lineWidth: 0,
+    data: histogram_data,
+    xkey: 'age',
+    ykeys: ['persisted', 'cache'],
+    labels: ['Persisted Storage Disk Utilization', 'Cached Storage Disk Utilization'],
+    ymax: 1,
+    ymin: 0,
+    xLabelFormat: cache_age_axis_label,
+    yLabelFormat: float_as_percentage,
+    dateFormat: cache_age_hover
+  })
diff --git a/apps/workbench/app/assets/stylesheets/keep_disks.css.scss b/apps/workbench/app/assets/stylesheets/keep_disks.css.scss
index aff8b50f18..741ac191ae 100644
--- a/apps/workbench/app/assets/stylesheets/keep_disks.css.scss
+++ b/apps/workbench/app/assets/stylesheets/keep_disks.css.scss
@@ -3,8 +3,9 @@
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
 /* Margin allows us some space between the table above. */
-div.cache-age-vs-disk-histogram {
+div.graph {
     margin-top: 20px;
 }
-
-
+div.graph h3 {
+    text-align: center;
+}
diff --git a/apps/workbench/app/controllers/keep_disks_controller.rb b/apps/workbench/app/controllers/keep_disks_controller.rb
index b7bc7c06dc..c6a42b0974 100644
--- a/apps/workbench/app/controllers/keep_disks_controller.rb
+++ b/apps/workbench/app/controllers/keep_disks_controller.rb
@@ -4,8 +4,8 @@ class KeepDisksController < ApplicationController
     @object = KeepDisk.new defaults.merge(params[:keep_disk] || {})
     super
   end
-  def index
 
+  def index
     # Retrieve cache age histogram info
     @cache_age_histogram = []
     @histogram_date = 0
@@ -26,6 +26,8 @@ class KeepDisksController < ApplicationController
           :cache => total_free_cache - x[1],
           :persisted => persisted_storage} }
     end
+
+    # Do the regular control work needed.
     super
   end
 end
diff --git a/apps/workbench/app/views/keep_disks/_content_layout.html.erb b/apps/workbench/app/views/keep_disks/_content_layout.html.erb
index cbad20ab3f..4696cabecf 100644
--- a/apps/workbench/app/views/keep_disks/_content_layout.html.erb
+++ b/apps/workbench/app/views/keep_disks/_content_layout.html.erb
@@ -1,8 +1,16 @@
 <% content_for :tab_panes do %>
-  <div class='cache-age-vs-disk-histogram'>
-    <%= raw @cache_age_histogram.to_json %>
-    <br>
-    <%= @histogram_date %>
+  <%# We use protocol-relative paths here to avoid browsers refusing to load javascript over http in a page that was loaded over https. %>
+  <%= javascript_include_tag '//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js' %>
+  <%= javascript_include_tag '//cdnjs.cloudflare.com/ajax/libs/morris.js/0.4.3/morris.min.js' %>
+  <script type="text/javascript">
+    $(document).ready(function(){
+      $.renderHistogram(<%= raw @cache_age_histogram.to_json %>);
+    });
+  </script>
+  <div class='graph'>
+    <h3>Cache Age vs. Disk Utilization</h3>
+    <div id='cache-age-vs-disk-histogram'>
+    </div>
   </div>
 <% end %>
 <%= content_for :content_top %>
-- 
2.39.5