Add tooltips to metrics showing the exact value of the data point

src/root/common.tt

@@ -561,6 +561,7 @@ BLOCK includeFlot %]
   <script src="[% c.uri_for("/static/js/flot/jquery.flot.min.js") %]" type="text/javascript"></script>
   <script src="[% c.uri_for("/static/js/flot/jquery.flot.time.min.js") %]" type="text/javascript"></script>
   <script src="[% c.uri_for("/static/js/flot/jquery.flot.selection.min.js") %]" type="text/javascript"></script>
+  <div id="flot-tooltip" class="flot-tooltip"></div>
 [% END;
 
 

src/root/static/css/hydra.css

@@ -129,3 +129,13 @@ pre.taillog {
     max-height: 60em;
     overflow: hidden;
 }
+
+div.flot-tooltip {
+    display: none;
+    position: absolute;
+    border: 1px solid #fdd;
+    padding: 2px;
+    background-color: #fee;
+    opacity: 0.80;
+    z-index: 100;
+}

src/root/static/js/common.js

@@ -229,6 +229,23 @@ function showChart(id, dataUrl, yaxis) {
           }
         });
 
+        $("#" + id + "-chart").bind("plothover", function (event, pos, item) {
+            if (item) {
+                var i = data[item.dataIndex];
+                var date = new Date(i.timestamp * 1000);
+                var s =
+                    "Build <em>" + i.id + "</em><br/>"
+                    + "on " + date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + ""
+                    + ":<br/><strong>" + i.value
+                    + (i.unit != null ? " " + i.unit : "") + "</strong>";
+                $("#flot-tooltip")
+                    .html(s)
+                    .css({top: item.pageY + 10, left: item.pageX + 10})
+                    .show();
+            } else
+                $("#flot-tooltip").hide();
+        });
+
         // Zoom in to the last two months by default.
         plot.setSelection({ xaxis: { from: Math.max(minTime, maxTime - 60 * 24 * 60 * 60 * 1000), to: maxTime } });
       }