forked from lix-project/hydra
* hydra: make chart zoomable and clickable
This commit is contained in:
parent
6dd87f5851
commit
3753ccb1ce
|
@ -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 }
|
||||
)
|
||||
];
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in a new issue