Move chart code to common.js

[?]

Mar 25, 2016, 12:33 PM

OMSOKS2A7NLS4LX6J4ZW5BUKIN2P4YXI2Q7DAFY26AYIECZZEJMAC

Dependencies

[2] 4AKMU4ZB Clean up user editing
[3] RQTECBWX Fix rendering of metrics with dots in their name
[4] QCGCX2BR Generalize lazy tabs
[5] BB2KXLXZ Move the build time chart to the job page
[6] ZB3JV52W Add a "My jobsets" tab to the dashboard
[7] CVWVXXJU Scale the Y axis to the visible points
[8] TX7Q4RAS Add page showing latest build steps
[9] 6GZZDDQB Move the store path size chart to the job page
[10] T5BIOVJE Add support for tracking custom metrics
[*] IK53RV4V
[*] 2P7VNAAC Move common Javascript code into a separate file

Change contents

replacement in src/root/common.tt at line 574

[4.681]→[4.681:763](∅→∅),[4.763]→[3.0:30](∅→∅),[3.30]→[4.763:809](∅→∅),[4.763]→[4.763:809](∅→∅),[4.809]→[4.8528:8604](∅→∅),[4.8604]→[4.832:936](∅→∅),[4.832]→[4.832:936](∅→∅),[4.936]→[4.549:636](∅→∅),[4.636]→[4.8605:8693](∅→∅),[4.8693]→[4.1026:1418](∅→∅),[4.1026]→[4.1026:1418](∅→∅),[4.1418]→[3.31:98](∅→∅),[3.98]→[4.1481:1482](∅→∅),[4.1481]→[4.1481:1482](∅→∅),[4.1482]→[3.99:165](∅→∅),[3.165]→[4.1544:1858](∅→∅),[4.1544]→[4.1544:1858](∅→∅),[4.1858]→[3.166:247](∅→∅),[3.247]→[4.0:224](∅→∅),[4.1935]→[4.0:224](∅→∅),[4.224]→[4.1935:1965](∅→∅),[4.1935]→[4.1935:1965](∅→∅),[4.1965]→[3.248:303](∅→∅),[3.303]→[4.2016:2060](∅→∅),[4.2016]→[4.2016:2060](∅→∅),[4.2060]→[4.225:349](∅→∅),[4.349]→[4.2132:2288](∅→∅),[4.2132]→[4.2132:2288](∅→∅),[4.2288]→[3.304:388](∅→∅),[3.388]→[4.2368:2422](∅→∅),[4.2368]→[4.2368:2422](∅→∅),[4.2422]→[3.389:466](∅→∅),[3.466]→[4.2495:2763](∅→∅),[4.2495]→[4.2495:2763](∅→∅),[4.2763]→[4.8694:8812](∅→∅),[4.8812]→[4.2854:2874](∅→∅),[4.2854]→[4.2854:2874](∅→∅)

requestJSON({
url: "[%dataUrl%]",
success: function(data) {
var id = "[%id%]";

var ids = [];
var d = [];
var maxTime = 0;
var minTime = Number.MAX_SAFE_INTEGER;
data.forEach(function(x) {
var t = x.timestamp * 1000;
ids[t] = x.id;
d.push([t, x.value [% IF yaxis == "mib" %] / (1024.0 * 1024.0)[% END %]]);
maxTime = Math.max(t, maxTime);
minTime = Math.min(t, minTime);
});

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) {
var ymax = 0;
d.forEach(function(x) {
if (x[0] < ranges.xaxis.from) return;
if (x[0] > ranges.xaxis.to) return;
ymax = Math.max(x[1], ymax);
});

// do the zooming
plot = $.plot($("#" + id + "-chart"), [d],
$.extend(true, {}, options, {
xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
yaxis: { min: 0, max: ymax * 1.1 }
}));

// 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: Math.max(minTime, maxTime - 60 * 24 * 60 * 60 * 1000), to: maxTime } });
}
});

[4.681]

[4.2874]

showChart("[%id%]", "[%dataUrl%]", "[%yaxis%]");
edit in src/root/static/js/common.js at line 154

[2.2410]

[2.2410]

}

function showChart(id, dataUrl, yaxis) {
requestJSON({
url: dataUrl,
success: function(data) {
var d = [];
var maxTime = 0;
var minTime = Number.MAX_SAFE_INTEGER;
data.forEach(function(x) {
var t = x.timestamp * 1000;
d.push(
[t,
yaxis == "mib" ? x.value / (1024.0 * 1024.0) : x.value
]);
maxTime = Math.max(t, maxTime);
minTime = Math.min(t, minTime);
});

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) {
var ymax = 0;
d.forEach(function(x) {
if (x[0] < ranges.xaxis.from) return;
if (x[0] > ranges.xaxis.to) return;
ymax = Math.max(x[1], ymax);
});

// do the zooming
plot = $.plot($("#" + id + "-chart"), [d],
$.extend(true, {}, options, {
xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
yaxis: { min: 0, max: ymax * 1.1 }
}));

// 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: Math.max(minTime, maxTime - 60 * 24 * 60 * 60 * 1000), to: maxTime } });
}
});