Move the build time chart to the job page

This commit is contained in:
Eelco Dolstra
2014-10-07 12:59:09 +02:00
parent 0bb027e633
commit 1b12daa032
6 changed files with 19 additions and 105 deletions

View File

@ -1,73 +0,0 @@
[% PROCESS common.tt %]
[% PROCESS "product-list.tt" %]
[% USE HTML %]
[% USE Date %]
<h3>Build time history (in minutes)</h3>
<div id="placeholder" style="width:800px;height:400px;"></div>
<div id="overview" style="margin-left:50px;margin-top:20px;width:600px;height:50px"></div>
<script src="[% c.uri_for("/static/js/flot/jquery.flot.js") %]" type="text/javascript"></script>
<script src="[% c.uri_for("/static/js/flot/jquery.flot.selection.js") %]" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var d = [];
var ids = [];
[% FOREACH prevbuild IN prevBuilds; IF prevbuild.build.starttime != 0 %]
d.push([[% prevbuild.starttime * 1000 %],[% prevbuild.get_column('actualBuildTime') / 60 %]]);
ids[[% prevbuild.starttime * 1000 %]] = [% prevbuild.id %] ;
[% END; END %]
var options = {
xaxis: { mode: "time" },
selection: { mode: "x" },
points: { show: true },
lines: { show: true },
grid: {
clickable: true,
hoverable: true,
hoverFill: '#444',
hoverRadius: 4,
},
};
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;
}
});
});
</script>

View File

@ -103,7 +103,6 @@
<li><a href="#tabs-buildinputs" data-toggle="tab">Inputs</a></li>
[% IF build.buildsteps %]<li><a href="#tabs-buildsteps" data-toggle="tab">Build steps</a></li>[% END %]
[% IF build.dependents %]<li><a href="#tabs-usedby" data-toggle="tab">Used by</a></li>[% END%]
<li><a href="#tabs-history" data-toggle="tab">History chart</a></li>
[% IF drvAvailable %]<li><a href="#tabs-build-deps" data-toggle="tab">Build dependencies</a></li>[% END %]
[% IF available %]<li><a href="#tabs-runtime-deps" data-toggle="tab">Runtime dependencies</a></li>[% END %]
</ul>
@ -408,8 +407,6 @@
</div>
[% END %]
[% INCLUDE makeLazyTab tabName="tabs-history" uri=c.uri_for('/build' build.id 'history-graphs') %]
[% IF drvAvailable %]
[% INCLUDE makeLazyTab tabName="tabs-build-deps" uri=c.uri_for('/build' build.id 'build-deps') %]
[% END %]

View File

@ -549,7 +549,7 @@ BLOCK createChart %]
data.forEach(function(x) {
var t = x.timestamp * 1000;
ids[t] = x.id;
d.push([t, x.value / (1024.0 * 1024.0)]);
d.push([t, x.value [% IF yaxis == "mib" %] / (1024.0 * 1024.0)[% END %]]);
max = Math.max(t, max);
});

View File

@ -86,13 +86,17 @@ removed or had an evaluation error.</div>
<div id="tabs-charts" class="tab-pane">
<h3>Build time (in seconds)</h3>
[% INCLUDE createChart id="build-times" yaxis="sec" dataUrl=c.uri_for('/job' project.name jobset.name job.name 'build-times') %]
<h3>Closure size (in MiB)</h3>
[% INCLUDE createChart id="closure-size" dataUrl=c.uri_for('/job' project.name jobset.name job.name 'closure-sizes') %]
[% INCLUDE createChart id="closure-size" yaxis="mib" dataUrl=c.uri_for('/job' project.name jobset.name job.name 'closure-sizes') %]
<h3>Output size (in MiB)</h3>
[% INCLUDE createChart id="output-size" dataUrl=c.uri_for('/job' project.name jobset.name job.name 'output-sizes') %]
[% INCLUDE createChart id="output-size" yaxis="mib" dataUrl=c.uri_for('/job' project.name jobset.name job.name 'output-sizes') %]
</div>