vriska/hydra
0
0
Fork 0
forked from lix-project/hydra
Code Pull requests Activity

* hydra: make chart zoomable and clickable

Browse source
This commit is contained in:
Rob Vermaas 2010-02-11 09:18:30 +00:00
parent 6dd87f5851
commit 3753ccb1ce
2 changed files with 61 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lib/Hydra/Controller/Build.pm
View file

@ -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 }
)
];
}

95
src/root/build.tt
View file

@ -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,
var plot = $.plot($("#placeholder"), [d], options);
var overview = $.plot($("#overview"), [d], {
series: {
lines: { show: true, lineWidth: 1 },
shadowSize: 0
},
], options );
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;
}
})
});
}
});
});