Format TTL for humans

lib/riemann/dash/public/eventPane.js

@@ -1,5 +1,19 @@
 // Pane at the bottom of the dashboard for displaying events in context.
 
+function format_ttl(ttl) {
+  if (parseInt(ttl) != ttl) {
+    return ttl;
+  }
+
+  if (ttl > 3600 * 48) {
+    return (ttl / 3600 / 24).toFixed(1) + " days";
+  } else if (ttl > 3600 * 2) {
+    return (ttl / 3600).toFixed(1) + " hours";
+  } else if (ttl > 60 * 2) {
+    return (ttl / 60).toFixed(1) + " minutes";
+  }
+  return ttl + " seconds";
+}
 var eventPane = (function() {
   var el = $('#event-pane');
   var fixedFields = ['host', 'service', 'time', 'state', 'metric', 'ttl', 'description', 'tags'];
@@ -11,7 +25,7 @@ var eventPane = (function() {
       '<span class="state {{-state}}">{{-state}}</span>' +
       '<span class="metric">{{-metric}}</span>' +
       '<time class="absolute">{{-time}}</time>' +
-      '<span class="ttl">{{-ttl}}</span>' +
+      '<span class="ttl">{{-format_ttl(ttl)}}</span>' +
       '<span class="tags">{{-tags}}</span>' +
       '</div>' +
       '<pre class="description">{{-description}}</pre>');

lib/riemann/dash/views/css.scss

@@ -441,6 +441,7 @@ h2 {
     left: 0;
     right: 0;
     bottom: 0;
+    overflow: auto;
   }
 
   .bar {
@@ -468,18 +469,36 @@ h2 {
 
     th {
       text-align: right;
+      background-color: #fff;
     }
 
     thead {
       margin: 0;
       padding: 0;
 
       th {
-        // Work around https://bugs.webkit.org/show_bug.cgi?id=20040
-        position: relative;
-        top: 3px;
         vertical-align: bottom;
         text-align: left;
+        position: sticky;
+        top: 0;
+        z-index: 1;
+
+        &:first-child {
+	  left: 0;
+	  z-index: 2;
+        }
+      }
+    }
+
+    tbody {
+      tr:hover, tr:hover th {
+        background-color: $cream;
+      }
+
+      th {
+        position: sticky;
+	left: 0;
+	z-index: 1;
       }
     }
   }