Move the store path size chart to the job page

[?]

Oct 7, 2014, 9:45 AM

6GZZDDQBAIAZJAESJDIT5JKVY6F7IQTJHG6QT2HHBMK2EWE2MHCQC

Dependencies

[2] VBWHG272 Re-add the history tab (store size and build time), now as lazy-loaded tab on build page.
[3] XAJFR6SR Add a chart to the job pages showing the closure size over time
[4] WGUKOIQZ Fix indentation
[5] TBSIVFLO Use minutes in build history charts.
[6] 5GRW5XU4 Job page: Put latest builds on top
[*] DEMSSSB2 * Controller for jobs which inherits all actions in ListBuilds. So
[*] IK53RV4V
[*] ZB3JV52W Add a "My jobsets" tab to the dashboard
[*] QCGCX2BR Generalize lazy tabs
[*] ODNCGFQ5 * Improved the navigation bar: don't include all projects (since that

Change contents

edit in src/lib/Hydra/Controller/Job.pm at line 92

[3.427]

[8.548]

sub output_sizes : Chained('job') PathPart('output-sizes') Args(0) {
my ($self, $c) = @_;
my @res = $c->stash->{job}->builds->search(
{ finished => 1, buildstatus => 0, size => { '!=', 0 } },
{ order_by => "id", columns => [ "id", "timestamp", "size" ] });
$self->status_ok($c, entity => [ map { { id => $_->id, timestamp => $_ ->timestamp, value => $_->size } } @res ]);
}
edit in src/root/build-history-tab.tt at line 66

[2.3388]→[2.3388:5658](∅→∅)

if (item) {
plot.highlight(item.series, item.datapoint);
buildid = ids[item.datapoint[0]];
window.location = "/build/"+buildid;
}
});
});
</script>

<h3>Store path size history (in MB)</h3>

<div id="placeholder-size" style="width:800px;height:400px;"></div>
<div id="overview-size" style="margin-left:50px;margin-top:20px;width:600px;height:50px"></div>

<script type="text/javascript">
$(function() {
var d = [];
var ids = [];
[% FOREACH prevbuild IN prevBuilds; IF prevbuild.size != 0 %]
d.push([[% prevbuild.starttime * 1000 %],[% prevbuild.size / (1024*1024.0) %]]);
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-size"), [d], options);

var overview = $.plot($("#overview-size"), [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-size").bind("plotselected", function (event, ranges) {
// do the zooming
plot = $.plot($("#placeholder-size"), [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-size").bind("plotselected", function (event, ranges) {
plot.setSelection(ranges);
});

$("#placeholder-size").bind("plotclick", function (e, pos, item) {
edit in src/root/build-history-tab.tt at line 74

[2.5896]→[2.5896:5898](∅→∅)
edit in src/root/common.tt at line 534

[10.3455]

[10.3455]

BLOCK createChart %]
edit in src/root/common.tt at line 538

[10.3456]

[10.3456]

<div id="[%id%]-chart" style="width: 1000px; height: 400px;"></div>
<div id="[%id%]-overview" style="margin-top: 20px; margin-left: 50px; margin-right: 50px; width: 900px; height: 100px"></div>
edit in src/root/common.tt at line 541

[10.3457]

[11.679]

<script type="text/javascript">
$(function() {
requestJSON({
url: "[%dataUrl%]",
success: function(data) {
var ids = [];
var d = [];
var max = 0;
data.forEach(function(x) {
var t = x.timestamp * 1000;
ids[t] = x.id;
d.push([t, x.value / (1024.0 * 1024.0)]);
max = Math.max(t, max);
});

var options = {
xaxis: { mode: "time" },
yaxis: { min: 0 },
selection: { mode: "x" },
points: { show: true },
lines: { show: true },
grid: {
clickable: true,
hoverable: true,
hoverFill: '#444',
hoverRadius: 4,
},
};

var plot = $.plot($("#[%id%]-chart"), [d], options);

var overview = $.plot($("#[%id%]-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

$("#[%id%]-chart").bind("plotselected", function (event, ranges) {
// do the zooming
plot = $.plot($("#[%id%]-chart"), [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);
});

$("#[%id%]-overview").bind("plotselected", function (event, ranges) {
plot.setSelection(ranges);
});

$("#[%id%]-chart").bind("plotclick", function (e, pos, item) {
if (item) {
plot.highlight(item.series, item.datapoint);
buildid = data[item.dataIndex].id;
window.location = "/build/"+buildid;
}
});

// Zoom in to the last two months by default.
plot.setSelection({ xaxis: { from: max - 60 * 24 * 60 * 60 * 1000, to: max } });
}
});
});
</script>

[% END;
edit in src/root/job.tt at line 90

[3.839]→[3.839:2838](∅→∅)

<div id="placeholder" style="width: 1000px; height: 400px;"></div>
<div id="overview" style="margin-top: 20px; margin-left: 50px; margin-right: 50px; width: 900px; height: 100px"></div>

<script type="text/javascript">
$(function() {
requestJSON({
url: "[%c.uri_for('/job' project.name jobset.name job.name 'closure-sizes')%]",
success: function(data) {
var ids = [];
var d = [];
var max = 0;
data.forEach(function(x) {
var t = x.timestamp * 1000;
ids[t] = x.id;
d.push([t, x.value / (1024.0 * 1024.0)]);
max = Math.max(t, max);
});

var options = {
xaxis: { mode: "time" },
yaxis: { min: 0 },
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);
});
replacement in src/root/job.tt at line 91

[3.2839]→[3.2839:2971](∅→∅)

$("#overview").bind("plotselected", function (event, ranges) {
plot.setSelection(ranges);
});

[3.2839]

[3.2971]

[% INCLUDE createChart id="closure-size" dataUrl=c.uri_for('/job' project.name jobset.name job.name 'closure-sizes') %]
replacement in src/root/job.tt at line 93

[3.2972]→[3.2972:3269](∅→∅)

$("#placeholder").bind("plotclick", function (e, pos, item) {
if (item) {
plot.highlight(item.series, item.datapoint);
buildid = data[item.dataIndex].id;
window.location = "/build/"+buildid;
}
});

[3.2972]

[3.3269]

<h3>Output size (in MiB)</h3>
replacement in src/root/job.tt at line 95

[3.3270]→[3.3270:3469](∅→∅)

// Zoom in to the last two months by default.
plot.setSelection({ xaxis: { from: max - 60 * 24 * 60 * 60 * 1000, to: max } });
}
});
});
</script>

[3.3270]

[3.3469]

[% INCLUDE createChart id="output-size" dataUrl=c.uri_for('/job' project.name jobset.name job.name 'output-sizes') %]