From 3753ccb1ce423c7759319de0ba1c8d6920338186 Mon Sep 17 00:00:00 2001
From: Rob Vermaas <rob.vermaas@gmail.com>
Date: Thu, 11 Feb 2010 09:18:30 +0000
Subject: [PATCH]  * hydra: make chart zoomable and clickable

---
 src/lib/Hydra/Controller/Build.pm |   2 +-
 src/root/build.tt                 | 101 ++++++++++++++++++------------
 2 files changed, 61 insertions(+), 42 deletions(-)

diff --git a/src/lib/Hydra/Controller/Build.pm b/src/lib/Hydra/Controller/Build.pm
index 73a7264b..262b510a 100644
--- a/src/lib/Hydra/Controller/Build.pm
+++ b/src/lib/Hydra/Controller/Build.pm
@@ -59,7 +59,7 @@ sub view_build : Chained('build') PathPart('') Args(0) {
             , finished => 1
             , buildstatus => 0
             }
-          , { order_by => "id DESC", rows => 20 }
+          , { order_by => "id DESC", rows => 100 }
           )
         ];
     }
diff --git a/src/root/build.tt b/src/root/build.tt
index 3757464a..3cd81aad 100644
--- a/src/root/build.tt
+++ b/src/root/build.tt
@@ -81,6 +81,7 @@
 <p class="error">[% flashMsg %]</p>
 [% END %]
 
+
 <div id="generic-tabs">
 	<ul>
 		<li><a href="#tabs-summary">Summary</a></li>
@@ -416,58 +417,76 @@
 [% END %]
 
     <div id="tabs-history">
+        <h2>Build time history (in seconds)</h2>
+        <div id="placeholder" style="width:800px;height:400px;"></div> 
+        <div id="overview" style="margin-left:50px;margin-top:20px;width:600px;height:50px"></div> 
 
-<div id="placeholder" style="width:600px;height:300px;"></div> 
 <script src="/static/js/flot/jquery.flot.js" type="text/javascript"></script>
+<script src="/static/js/flot/jquery.flot.selection.js" type="text/javascript"></script>
 <script type="text/javascript">
   $(function() {
-    var d = [ null [% FOREACH prevbuild IN prevBuilds %][% IF prevbuild.resultInfo.starttime != 0 && (prevbuild.resultInfo.stoptime - prevbuild.resultInfo.starttime) != 0 %],[[% prevbuild.resultInfo.starttime * 1000 %],[% prevbuild.resultInfo.stoptime - prevbuild.resultInfo.starttime %]] [% END %] [% END %] ] ;
+    var d = [];
+    var ids = [];
+    [% FOREACH prevbuild IN prevBuilds %][% IF prevbuild.resultInfo.starttime != 0 %]
+      d.push([[% prevbuild.resultInfo.starttime * 1000 %],[% prevbuild.resultInfo.stoptime - prevbuild.resultInfo.starttime %]]);
+      ids[[% prevbuild.resultInfo.starttime * 1000 %]] = [% prevbuild.id %] ;
+    [% END %][% END %] 
 
-    // helper for returning the weekends in a period
-    function weekendAreas(axes) {
-        var markings = [];
-        var d = new Date(axes.xaxis.min);
-        // go to the first Saturday
-        d.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 1) % 7))
-        d.setUTCSeconds(0);
-        d.setUTCMinutes(0);
-        d.setUTCHours(0);
-        var i = d.getTime();
-        do {
-            // when we don't set yaxis, the rectangle automatically
-            // extends to infinity upwards and downwards
-            markings.push({ xaxis: { from: i, to: i + 2 * 24 * 60 * 60 * 1000 } });
-            i += 7 * 24 * 60 * 60 * 1000;
-        } while (i < axes.xaxis.max);
- 
-        return markings;
-    }
-    var now = (new Date()).getTime() ;    
-    var minimum = now;
-    for (var i = 1; i < d.length; ++i)
-      if ( minimum > d[i][0] )
-        minimum = d[i][0] ;
-
-    var now = (new Date()).getTime() ;    
     var options = {
-        xaxis: { mode: "time", min: minimum, max: now, 
-        },
+        xaxis: { mode: "time" },
+        selection: { mode: "x" },
         points: { show: true },
         lines: { show: true },
-        selection: { mode: "x" },
-        grid: { markings: weekendAreas }
+        grid: {
+          clickable: true,
+          hoverable: true,
+          hoverFill: '#444',
+          hoverRadius: 4,
+        },
     };
+    
 
     $('#generic-tabs').bind('tabsshow', function(event, ui) {
-      if (ui.panel.id == "tabs-history") {
-        $.plot($("#placeholder"), [
-           { data: d,
-             clickable : true,
-             hoverable : true,
-           },
-          ], options );
-      }
-    })
+        if (ui.panel.id == "tabs-history") {
+
+            var plot = $.plot($("#placeholder"), [d], options);
+    
+            var overview = $.plot($("#overview"), [d], {
+                series: {
+                    lines: { show: true, lineWidth: 1 },
+                    shadowSize: 0
+                },
+                xaxis: { ticks: [], mode: "time" },
+                yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },
+                selection: { mode: "x" }
+            });
+ 
+            // now connect the two
+    
+            $("#placeholder").bind("plotselected", function (event, ranges) {
+                // do the zooming
+                plot = $.plot($("#placeholder"), [d],
+                              $.extend(true, {}, options, {
+                                  xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
+                              }));
+ 
+                // don't fire event on the overview to prevent eternal loop
+                overview.setSelection(ranges, true);
+            });
+    
+            $("#overview").bind("plotselected", function (event, ranges) {
+                plot.setSelection(ranges);
+            });
+
+            $("#placeholder").bind("plotclick", function (e, pos, item) {
+                if (item) {
+                    plot.highlight(item.series, item.datapoint);
+                    buildid = ids[item.datapoint[0]];
+                    window.location = "/build/"+buildid;
+                }      
+            }); 
+        }
+    });
 
   });