2013-04-14 13:08:25 -07:00
|
|
|
function draw_graphs(location_url, log_url, container_id) {
|
2013-04-14 13:23:09 -07:00
|
|
|
jQuery.when(jQuery.getJSON(location_url), jQuery.getJSON(log_url))
|
2013-04-14 13:08:25 -07:00
|
|
|
.then(function(loc_data, log_data) {
|
2013-04-14 13:23:09 -07:00
|
|
|
/* use the same color selection for a given URL in every graph */
|
|
|
|
var color = d3.scale.category10();
|
|
|
|
jQuery.each(loc_data[0].locations, function(i, val) {
|
|
|
|
mirror_status(container_id, val, log_data[0], color);
|
2013-04-14 13:08:25 -07:00
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
2012-11-10 13:41:09 -08:00
|
|
|
|
2013-04-14 13:23:09 -07:00
|
|
|
function mirror_status(container_id, check_loc, log_data, color) {
|
2013-04-14 13:08:25 -07:00
|
|
|
|
|
|
|
var draw_graph = function(chart_id, data) {
|
|
|
|
var jq_div = jQuery(chart_id);
|
2012-11-10 13:41:09 -08:00
|
|
|
var margin = {top: 20, right: 20, bottom: 30, left: 40},
|
2012-11-10 14:12:15 -08:00
|
|
|
width = jq_div.width() - margin.left - margin.right,
|
|
|
|
height = jq_div.height() - margin.top - margin.bottom;
|
2012-11-10 13:41:09 -08:00
|
|
|
|
2013-04-14 13:23:09 -07:00
|
|
|
var x = d3.time.scale.utc().range([0, width]),
|
2012-11-10 13:41:09 -08:00
|
|
|
y = d3.scale.linear().range([height, 0]),
|
|
|
|
x_axis = d3.svg.axis().scale(x).orient("bottom"),
|
|
|
|
y_axis = d3.svg.axis().scale(y).orient("left");
|
|
|
|
|
2012-11-10 14:12:15 -08:00
|
|
|
/* remove any existing graph first if we are redrawing after resize */
|
|
|
|
d3.select(chart_id).select("svg").remove();
|
2012-11-10 13:41:09 -08:00
|
|
|
var svg = d3.select(chart_id).append("svg")
|
|
|
|
.attr("width", width + margin.left + margin.right)
|
|
|
|
.attr("height", height + margin.top + margin.bottom)
|
|
|
|
.append("g")
|
|
|
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
|
|
|
|
2012-11-10 15:09:51 -08:00
|
|
|
x.domain([
|
|
|
|
d3.min(data, function(c) { return d3.min(c.logs, function(v) { return v.check_time; }); }),
|
|
|
|
d3.max(data, function(c) { return d3.max(c.logs, function(v) { return v.check_time; }); })
|
2012-11-10 15:20:26 -08:00
|
|
|
]).nice(d3.time.hour);
|
2012-11-10 15:09:51 -08:00
|
|
|
y.domain([
|
2012-11-11 12:55:37 -08:00
|
|
|
0,
|
2012-11-10 15:09:51 -08:00
|
|
|
d3.max(data, function(c) { return d3.max(c.logs, function(v) { return v.duration; }); })
|
2012-11-10 15:20:26 -08:00
|
|
|
]).nice();
|
2012-11-10 13:41:09 -08:00
|
|
|
|
2012-11-10 14:12:15 -08:00
|
|
|
/* build the axis lines... */
|
2012-11-10 13:41:09 -08:00
|
|
|
svg.append("g")
|
|
|
|
.attr("class", "x axis")
|
|
|
|
.attr("transform", "translate(0," + height + ")")
|
|
|
|
.call(x_axis)
|
|
|
|
.append("text")
|
|
|
|
.attr("class", "label")
|
|
|
|
.attr("x", width)
|
|
|
|
.attr("y", -6)
|
|
|
|
.style("text-anchor", "end")
|
|
|
|
.text("Check Time (UTC)");
|
|
|
|
|
|
|
|
svg.append("g")
|
|
|
|
.attr("class", "y axis")
|
|
|
|
.call(y_axis)
|
|
|
|
.append("text")
|
|
|
|
.attr("class", "label")
|
|
|
|
.attr("transform", "rotate(-90)")
|
|
|
|
.attr("y", 6)
|
|
|
|
.attr("dy", ".71em")
|
|
|
|
.style("text-anchor", "end")
|
|
|
|
.text("Duration (seconds)");
|
|
|
|
|
2012-11-10 15:09:51 -08:00
|
|
|
var line = d3.svg.line()
|
|
|
|
.interpolate("basis")
|
|
|
|
.x(function(d) { return x(d.check_time); })
|
|
|
|
.y(function(d) { return y(d.duration); });
|
|
|
|
|
|
|
|
/* ...then the points and lines between them. */
|
|
|
|
var urls = svg.selectAll(".url")
|
2012-11-10 13:41:09 -08:00
|
|
|
.data(data)
|
|
|
|
.enter()
|
2012-11-10 15:09:51 -08:00
|
|
|
.append("g")
|
|
|
|
.attr("class", "url");
|
|
|
|
|
|
|
|
urls.append("path")
|
|
|
|
.attr("class", "url-line")
|
|
|
|
.attr("d", function(d) { return line(d.logs); })
|
|
|
|
.style("stroke", function(d) { return color(d.url); });
|
|
|
|
|
|
|
|
urls.selectAll("circle")
|
|
|
|
.data(function(u) {
|
|
|
|
return jQuery.map(u.logs, function(l, i) {
|
|
|
|
return {url: u.url, check_time: l.check_time, duration: l.duration};
|
|
|
|
});
|
|
|
|
})
|
|
|
|
.enter()
|
2012-11-10 13:41:09 -08:00
|
|
|
.append("circle")
|
2012-11-10 15:09:51 -08:00
|
|
|
.attr("class", "url-dot")
|
2012-11-10 13:41:09 -08:00
|
|
|
.attr("r", 3.5)
|
|
|
|
.attr("cx", function(d) { return x(d.check_time); })
|
|
|
|
.attr("cy", function(d) { return y(d.duration); })
|
2012-11-11 14:40:21 -08:00
|
|
|
.style("fill", function(d) { return color(d.url); })
|
|
|
|
.append("title")
|
|
|
|
.text(function(d) { return d.url + "\n" + d.duration.toFixed(3) + " secs\n" + d.check_time.toUTCString(); });
|
2012-11-10 13:41:09 -08:00
|
|
|
|
2012-11-10 14:12:15 -08:00
|
|
|
/* add a legend for good measure */
|
2013-04-14 13:23:09 -07:00
|
|
|
var active = jQuery.map(data, function(item, i) { return item.url; });
|
2012-11-10 13:41:09 -08:00
|
|
|
var legend = svg.selectAll(".legend")
|
2013-04-14 13:23:09 -07:00
|
|
|
.data(active)
|
2012-11-10 13:41:09 -08:00
|
|
|
.enter().append("g")
|
|
|
|
.attr("class", "legend")
|
|
|
|
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
|
|
|
|
|
|
|
|
legend.append("rect")
|
|
|
|
.attr("x", width - 18)
|
|
|
|
.attr("width", 18)
|
|
|
|
.attr("height", 18)
|
|
|
|
.style("fill", color);
|
|
|
|
|
|
|
|
legend.append("text")
|
|
|
|
.attr("x", width - 24)
|
|
|
|
.attr("y", 9)
|
|
|
|
.attr("dy", ".35em")
|
|
|
|
.style("text-anchor", "end")
|
|
|
|
.text(function(d) { return d; });
|
2012-11-10 14:12:15 -08:00
|
|
|
};
|
|
|
|
|
2013-04-14 13:08:25 -07:00
|
|
|
var filter_data = function(json, location_id) {
|
|
|
|
return jQuery.map(json.urls, function(url, i) {
|
|
|
|
var logs = jQuery.map(url.logs, function(log, j) {
|
|
|
|
if (!log.is_success) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
/* screen by location ID if we were given one */
|
|
|
|
if (location_id && log.location_id !== location_id) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
return {
|
|
|
|
duration: log.duration,
|
|
|
|
check_time: new Date(log.check_time)
|
|
|
|
};
|
|
|
|
});
|
|
|
|
/* don't return URLs without any log info */
|
|
|
|
if (logs.length === 0) {
|
|
|
|
return null;
|
|
|
|
}
|
2012-11-10 15:09:51 -08:00
|
|
|
return {
|
|
|
|
url: url.url,
|
2013-04-14 13:08:25 -07:00
|
|
|
logs: logs
|
2012-11-10 15:09:51 -08:00
|
|
|
};
|
2012-11-10 14:12:15 -08:00
|
|
|
});
|
2013-04-14 13:08:25 -07:00
|
|
|
};
|
|
|
|
|
|
|
|
var cached_data = filter_data(log_data, check_loc.id);
|
|
|
|
/* we had a check location with no log data handed to us, skip graphing */
|
|
|
|
if (cached_data.length === 0) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* create the containers, defer the actual graph drawing */
|
|
|
|
var chart_id = 'status-chart-' + check_loc.id;
|
2013-04-14 13:23:09 -07:00
|
|
|
jQuery(container_id).append('<h3><span class="fam-flag fam-flag-' + check_loc.country_code.toLowerCase() + '" title="' + check_loc.country + '"></span> ' + check_loc.country + ' (' + check_loc.source_ip + '), IPv' + check_loc.ip_version + '</h3>');
|
|
|
|
jQuery(container_id).append('<div id="' + chart_id + '" class="visualize-mirror visualize-chart"></div>');
|
|
|
|
jQuery(container_id).append('<br/>');
|
2013-04-14 13:08:25 -07:00
|
|
|
setTimeout(function() {
|
|
|
|
draw_graph('#' + chart_id, cached_data);
|
|
|
|
}, 0);
|
2012-11-10 13:41:09 -08:00
|
|
|
|
2012-11-10 14:12:15 -08:00
|
|
|
/* then hook up a resize handler to redraw if necessary */
|
2012-11-10 13:41:09 -08:00
|
|
|
var resize_timeout = null;
|
|
|
|
var real_resize = function() {
|
|
|
|
resize_timeout = null;
|
2013-04-14 13:08:25 -07:00
|
|
|
draw_graph('#' + chart_id, cached_data);
|
2012-11-10 13:41:09 -08:00
|
|
|
};
|
|
|
|
jQuery(window).resize(function() {
|
|
|
|
if (resize_timeout) {
|
|
|
|
clearTimeout(resize_timeout);
|
|
|
|
}
|
|
|
|
resize_timeout = setTimeout(real_resize, 200);
|
|
|
|
});
|
|
|
|
}
|