X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/638d136057f4d9ed19f132075079da396217d6fd..cef70f92c560353b8800affba9211382b7920815:/apps/workbench/app/views/keep_disks/_content_layout.html.erb

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..0f5cd7aece 100644
--- a/apps/workbench/app/views/keep_disks/_content_layout.html.erb
+++ b/apps/workbench/app/views/keep_disks/_content_layout.html.erb
@@ -1,9 +1,20 @@
-<% content_for :tab_panes do %>
-  <div class='cache-age-vs-disk-histogram'>
-    <%= raw @cache_age_histogram.to_json %>
-    <br>
-    <%= @histogram_date %>
+<% unless @histogram_pretty_date.nil? %>
+  <% content_for :tab_panes do %>
+  <%# 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>
+    <h4>circa <%= @histogram_pretty_date %></h4>
+    <div id='cache-age-vs-disk-histogram'>
+    </div>
   </div>
+  <% end %>
 <% end %>
 <%= content_for :content_top %>
 <%= content_for :tab_line_buttons %>