278 lines
7.5 KiB
JavaScript
278 lines
7.5 KiB
JavaScript
gGraphs = {};
|
|
|
|
var brush = d3.svg.brush()
|
|
.on("brushend", brushed);
|
|
|
|
var margin = {top: 10, right: 10, bottom: 100, left: 40},
|
|
height = 70 - margin.top,
|
|
width = 600 - margin.right - margin.left;
|
|
|
|
var x = d3.time.scale().range([0, width]),
|
|
y = d3.scale.linear().range([height, 0]);
|
|
|
|
|
|
$(document).on('dragenter', function (e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
$('#drop').css('border', '4px dashed #fff')
|
|
});
|
|
$(document).on('dragover', function (e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
$('#drop').css('border', '4px dashed red')
|
|
});
|
|
$(document).on('drop', function (e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
processFiles(e.originalEvent.target.files || e.originalEvent.dataTransfer.files);
|
|
$('#drop-background').hide();
|
|
});
|
|
|
|
|
|
function processFiles(files) {
|
|
for (f = 0; file = files[f]; f++) {
|
|
processFile(file);
|
|
}
|
|
}
|
|
|
|
function processFile(file) {
|
|
reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
text = reader.result;
|
|
processCSV(text, file.name);
|
|
}
|
|
|
|
reader.readAsText(file);
|
|
}
|
|
|
|
function processCSV(csv, filename) {
|
|
lines = csv.split('\n');
|
|
line2 = lines[2].replace(/"/g, '').split(',');
|
|
groups = lines[4].replace(/"/g, '').split(',');
|
|
headers = lines[5].replace(/"/g, '').split(',');
|
|
|
|
host = line2[1];
|
|
graphs = [];
|
|
map = [];
|
|
gindex = -1;
|
|
|
|
for (i = 0, j = 0; i < headers.length; i++, j++) {
|
|
if (groups[i] != "") {
|
|
last_group = groups[i];
|
|
j = 0;
|
|
graphs.push({name: last_group, d: []});
|
|
gindex++;
|
|
}
|
|
|
|
graphs[gindex].d.push({key: headers[i], values: []});
|
|
map[i] = {group: gindex, index: j, name: headers[i]};
|
|
}
|
|
|
|
for (lindex = 6; lindex < lines.length; lindex++) {
|
|
line = lines[lindex].replace(/"/g, '').split(',');
|
|
for (cindex = 0; cindex < line.length; cindex++) {
|
|
lmap = map[cindex];
|
|
if (lmap.name == 'time') {
|
|
timeStr = line[cindex];
|
|
timeStr = timeStr.replace(/(\d+)-(\d+)\s+(\d+):(\d+):(\d+)/, '1942/$2/$1 $3:$4:$5')
|
|
time = Date.parse(timeStr);
|
|
}
|
|
else {
|
|
nVal = parseFloat(line[cindex]);
|
|
|
|
if (isNaN(nVal)) {
|
|
val = line[cindex]
|
|
graphs[lmap.group].yformat = function(_) {return _};
|
|
}
|
|
else {
|
|
val = nVal
|
|
graphs[lmap.group].yformat = d3.format('<-,02f');
|
|
}
|
|
|
|
graphs[lmap.group].d[lmap.index].values.push({y: val, x: time});
|
|
}
|
|
}
|
|
}
|
|
|
|
dmin = graphs[1].d[1].values[0].x;
|
|
dmax = graphs[1].d[0].values[graphs[1].d[0].values.length -1].x;
|
|
if (lines.length > 500) {
|
|
dmin = graphs[1].d[0].values[graphs[1].d[0].values.length - 500].x;
|
|
}
|
|
|
|
displayFocusGraph(graphs, dmin, dmax);
|
|
|
|
for (gindex = 0; gindex < graphs.length; gindex++) {
|
|
if (graphs[gindex].name != "system" && graphs[gindex].d[0].key != "time") {
|
|
graphName = graphs[gindex].name;
|
|
graphData = graphs[gindex].d;
|
|
graphFormat = graphs[gindex].yformat;
|
|
panel = createPanel(graphName, graphData, host)
|
|
displayGraph(graphName, graphData, graphFormat, panel, dmin, dmax);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
function createPanel(graphName, graphData, filename) {
|
|
id = graphName.replace(/[&\/\\#,+()$~%.'":*?<>{}\s]/g,'_');
|
|
div = d3.select('#' + id);
|
|
|
|
if (div.empty()) {
|
|
div = d3.select('#dashboard').append('div').attr('class', ' list-group-item').attr('id', id);
|
|
header = div.append('div').attr('class', 'panel-heading').append('h3').attr('class', 'panel-title');
|
|
header.append('span').text(graphName);
|
|
header.append('span').attr('class', 'glyphicon glyphicon-chevron-right pull-right clickable');
|
|
}
|
|
|
|
elt = div.append('div').attr('class', 'row list-body');
|
|
elt.append('p').text(filename)
|
|
elt.append('svg').datum(reduceData(graphData));
|
|
|
|
return div;
|
|
}
|
|
|
|
|
|
|
|
function displayGraph(graphName, graphData, graphFormat, panel, dmin, dmax) {
|
|
panel.selectAll('svg').each(function() {
|
|
var elt = d3.select(this);
|
|
|
|
nv.addGraph(function() {
|
|
var chart = nv.models.lineChart()
|
|
.margin({left: 100})
|
|
.useInteractiveGuideline(true)
|
|
.showLegend(true)
|
|
;
|
|
|
|
chart.xAxis.axisLabel('Time').tickFormat(function(d) { return d3.time.format('%Hh %Mm %Ss')(new Date(d)); });
|
|
chart.yAxis.tickFormat(graphFormat);
|
|
|
|
elt.call(chart);
|
|
nv.utils.windowResize(chart.update);
|
|
|
|
pb = d3.select(elt[0][0].parentNode.parentNode).select('.clickable').on("click", function() {
|
|
pb = d3.select(this.parentNode.parentNode.parentNode).selectAll('.list-body');
|
|
isHidden = pb.style('display') == 'none';
|
|
pb.style('display', isHidden ? 'inherit' : 'none');
|
|
chart.update()
|
|
});
|
|
|
|
return chart;
|
|
}, function(chart) {
|
|
if (gGraphs[graphName] == undefined) gGraphs[graphName] = [];
|
|
gGraphs[graphName].push({elt: elt, chart: chart, data: graphData});
|
|
});
|
|
});
|
|
}
|
|
|
|
function getValues(graphs, group, header) {
|
|
for (i in graphs) {
|
|
if (graphs[i].name == group) {
|
|
for (j in graphs[i].d) {
|
|
if (graphs[i].d[j].key == header) {
|
|
return graphs[i].d[j].values;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return [];
|
|
}
|
|
|
|
var displayFocusGraphInitialized = false;
|
|
function displayFocusGraph(graphs, dmin, dmax) {
|
|
if (displayFocusGraphInitialized) {
|
|
return;
|
|
}
|
|
|
|
displayFocusGraphInitialized = true;
|
|
data = getValues(graphs, "total cpu usage", "idl").map(function(idl) { return {x: idl.x, y: (100 - parseFloat(idl.y)) };});
|
|
|
|
x.domain(d3.extent(data.map(function(val) { return val.x })));
|
|
y.domain([0, d3.max(data.map(function(val) { return val.y }))]);
|
|
|
|
brush.x(x)
|
|
.extent([dmin, dmax]);
|
|
|
|
var area = d3.svg.area()
|
|
.interpolate("monotone")
|
|
.x(function(d) { return x(d.x) })
|
|
.y1(function(d) { return y(d.y) })
|
|
.y0(height);
|
|
|
|
var svg = d3.select('#focus').append('svg')
|
|
.attr("width", width + margin.left + margin.right)
|
|
.attr("height", height + margin.top + margin.bottom);
|
|
|
|
var xAxis = d3.svg.axis().scale(x).orient("bottom");
|
|
|
|
svg.append("defs").append("clipPath")
|
|
.attr("id", "clip")
|
|
.append("rect")
|
|
.attr("width", width)
|
|
.attr("height", height);
|
|
|
|
context = svg.append("g")
|
|
.attr("class", "context")
|
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
|
|
|
context.append("path")
|
|
.datum(data)
|
|
.attr("class", "area")
|
|
.attr("d", area);
|
|
|
|
context.append("g")
|
|
.attr("class", "x axis")
|
|
.attr("transform", "translate(0," + height + ")")
|
|
.call(xAxis.ticks(5));
|
|
|
|
context.append("g")
|
|
.attr("class", "x brush")
|
|
.call(brush)
|
|
.selectAll("rect")
|
|
.attr("y", -6)
|
|
.attr("height", height + 7);
|
|
|
|
brushed();
|
|
}
|
|
|
|
function reduceData(data) {
|
|
ext = (brush.empty() || brush.extent() == null ? x.domain() : brush.extent());
|
|
extD = [ext[0] instanceof String ? Date.parse(ext[0]) : ext[0],
|
|
ext[1] instanceof String ? Date.parse(ext[1]) : ext[1]];
|
|
|
|
ndata = data.map(function(d, i) {
|
|
return {
|
|
key: d.key,
|
|
area: d.area,
|
|
values: d.values.filter(function(d, i) {
|
|
return d.x > extD[0] && d.x < extD[1];
|
|
})
|
|
}});
|
|
return ndata;
|
|
}
|
|
|
|
|
|
function brushed() {
|
|
ext = (brush.empty() || brush.extent() == null ? x.domain() : brush.extent());
|
|
|
|
for (var name in gGraphs) {
|
|
if (gGraphs.hasOwnProperty(name)) {
|
|
for (gIndex in gGraphs[name]) {
|
|
graph = gGraphs[name][gIndex];
|
|
chart = graph.chart;
|
|
elt = graph.elt;
|
|
data = graph.data;
|
|
ndata = reduceData(data);
|
|
chart.xDomain(ext);
|
|
|
|
elt.call(chart.xAxis);
|
|
elt.datum(ndata);
|
|
|
|
elt.call(chart.update);
|
|
}
|
|
}
|
|
}
|
|
}
|