YARN-9836. General usability improvements in showSimulationTrace.html. Contributed by Adam Antal
This commit is contained in:
Szilard Nemeth
parent
4a700c20d5
commit
62b5cefaea
@ -69,265 +69,286 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="divborder span8" style="margin-left:50px" id="area1"></div>
|
<div id="error-div" style="display:none">
|
||||||
<div class="divborder span8" id="area2"></div>
|
<div class="alert alert-danger" role="alert" style="margin-left:20%; margin-right:20%">
|
||||||
|
<span id="error-message"></span>
|
||||||
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div id="data" style="display:none;">
|
||||||
<div class="divborder span8" style="margin-left:50px" id="area3"></div>
|
<div class="row">
|
||||||
<div class="divborder span8" id="area4"></div>
|
<div class="divborder span8 chart-area" style="margin-left:50px" id="area1"></div>
|
||||||
</div>
|
<div class="divborder span8 chart-area" id="area2"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="divborder span8" style="margin-left:50px" id="area5"></div>
|
<div class="divborder span8 chart-area" style="margin-left:50px" id="area3"></div>
|
||||||
<div class="divborder span8" id="area6"></div>
|
<div class="divborder span8 chart-area" id="area4"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="divborder span8" style="margin-left:50px" id="area7"></div>
|
<div class="divborder span8 chart-area" style="margin-left:50px" id="area5"></div>
|
||||||
<div class="span7" id="area8"></div>
|
<div class="divborder span8 chart-area" id="area6"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="divborder span8 " style="margin-left:50px" id="area7"></div>
|
||||||
|
<div class="span7 chart-area" id="area8"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p> </p>
|
<p> </p>
|
||||||
<script>
|
<script>
|
||||||
// select file and draw
|
// select file and draw
|
||||||
function draw() {
|
function draw() {
|
||||||
var filepath = document.getElementById('jsonfile').value;
|
$("#error-div").css("display", "none");
|
||||||
if (filepath) {
|
var filepath = document.getElementById('jsonfile').value;
|
||||||
for (var i = 1; i < 9; i ++) {
|
if (filepath) {
|
||||||
$('#area' + i).empty();
|
$(".chart-area").empty();
|
||||||
}
|
filepath = filepath.replace("C:\\fakepath\\", "");
|
||||||
filepath = filepath.replace("C:\\fakepath\\", "");
|
drawCharts(filepath);
|
||||||
drawCharts(filepath);
|
} else {
|
||||||
} else {
|
$("#error-message").html("Please choose file.");
|
||||||
alert('choose file firstly.');
|
$("#error-div").css("display", "block");
|
||||||
}
|
$("#data").css("display", "none");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function drawCharts(filepath) {
|
function drawCharts(filepath) {
|
||||||
$.getJSON(filepath, function(data) {
|
$.getJSON(filepath, function(data) {
|
||||||
var numQueues = 0;
|
var numQueues = 0;
|
||||||
var queueNames = new Array();
|
var queueNames = new Array();
|
||||||
for (var j in data[0]) {
|
for (var j in data[0]) {
|
||||||
if (j.substring(0, 'queue'.length) === 'queue') {
|
if (j.substring(0, 'queue'.length) === 'queue') {
|
||||||
queueNames[numQueues] = j;
|
queueNames[numQueues] = j;
|
||||||
numQueues ++;
|
numQueues ++;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
numQueues /= 2;
|
numQueues /= 2;
|
||||||
|
|
||||||
// create graph
|
// create graph
|
||||||
$.getJSON(filepath, function(data) {
|
$.getJSON(filepath, function(data) {
|
||||||
var basetime = data[0].time;
|
var basetime = data[0].time;
|
||||||
data.forEach(function(d) {
|
data.forEach(function(d) {
|
||||||
d.time = (d.time - basetime) / 1000;
|
d.time = (d.time - basetime) / 1000;
|
||||||
});
|
});
|
||||||
|
|
||||||
var legends = ["running.applications", "running.containers"];
|
var legends = ["running.applications", "running.containers"];
|
||||||
drawEachChart("#area1", data, legends, "Cluster running applications & containers", "Number", 0, 0);
|
drawEachChart("#area1", data, legends, "Cluster running applications & containers", "Number", 0, 0);
|
||||||
legends = ["jvm.free.memory", "jvm.max.memory", "jvm.total.memory"];
|
legends = ["jvm.free.memory", "jvm.max.memory", "jvm.total.memory"];
|
||||||
drawEachChart("#area2", data, legends, "JVM memory", "Memory (GB)", 0, 0);
|
drawEachChart("#area2", data, legends, "JVM memory", "Memory (GB)", 0, 0);
|
||||||
legends = ["cluster.allocated.memory", "cluster.available.memory"];
|
legends = ["cluster.allocated.memory", "cluster.available.memory"];
|
||||||
drawEachChart("#area3", data, legends, "Cluster allocated & available memory", "Memory (GB)", 0, 0);
|
drawEachChart("#area3", data, legends, "Cluster allocated & available memory", "Memory (GB)", 0, 0);
|
||||||
legends = ["cluster.allocated.vcores", "cluster.available.vcores"];
|
legends = ["cluster.allocated.vcores", "cluster.available.vcores"];
|
||||||
drawEachChart("#area4", data, legends, "Cluster allocated & available vcores", "Number", 0, 0);
|
drawEachChart("#area4", data, legends, "Cluster allocated & available vcores", "Number", 0, 0);
|
||||||
|
|
||||||
for (var i = 0; i < numQueues; i ++) {
|
for (var i = 0; i < numQueues; i ++) {
|
||||||
legends[i] = queueNames[i * 2];
|
legends[i] = queueNames[i * 2];
|
||||||
}
|
}
|
||||||
drawEachChart("#area5", data, legends, "Queue allocated memory", "Memory (GB)", 1, 100);
|
drawEachChart("#area5", data, legends, "Queue allocated memory", "Memory (GB)", 1, 100);
|
||||||
for (var i = 0; i < numQueues; i ++) {
|
for (var i = 0; i < numQueues; i ++) {
|
||||||
legends[i] = queueNames[i * 2 + 1];
|
legends[i] = queueNames[i * 2 + 1];
|
||||||
}
|
}
|
||||||
drawEachChart("#area6", data, legends, "Queue allocated vcores", "VCores", 1, 90);
|
drawEachChart("#area6", data, legends, "Queue allocated vcores", "VCores", 1, 90);
|
||||||
|
|
||||||
legends = [
|
legends = [
|
||||||
"scheduler.allocate.timecost",
|
"scheduler.allocate.timecost",
|
||||||
"scheduler.handle-NODE_ADDED.timecost", "scheduler.handle-NODE_REMOVED.timecost",
|
"scheduler.handle-NODE_ADDED.timecost", "scheduler.handle-NODE_REMOVED.timecost",
|
||||||
"scheduler.handle-NODE_UPDATE.timecost", "scheduler.handle-APP_ADDED.timecost",
|
"scheduler.handle-NODE_UPDATE.timecost", "scheduler.handle-APP_ADDED.timecost",
|
||||||
"scheduler.handle-APP_REMOVED.timecost", "scheduler.handle-CONTAINER_EXPIRED.timecost"
|
"scheduler.handle-APP_REMOVED.timecost", "scheduler.handle-CONTAINER_EXPIRED.timecost"
|
||||||
];
|
];
|
||||||
drawEachChart("#area7", data, legends, "Scheduler allocate & handle operations timecost", "Timecost (ms)", 0, 210);
|
drawEachChart("#area7", data, legends, "Scheduler allocate & handle operations timecost", "Timecost (ms)", 0, 210);
|
||||||
});
|
});
|
||||||
});
|
}).done(function() {
|
||||||
|
$("#data").css("display", "block");
|
||||||
|
}).fail(function(jqxhr, textStatus, error) {
|
||||||
|
$("#error-message").html(String(error));
|
||||||
|
$("#error-div").css("display", "block");
|
||||||
|
$("#data").css("display", "none");
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// draw different chart
|
// draw different chart
|
||||||
function drawEachChart(chartArea, data, legends, title, yLabelTitle, isArea, pl) {
|
function drawEachChart(chartArea, data, legends, title, yLabelTitle, isArea, pl) {
|
||||||
// drawchart
|
// drawchart
|
||||||
var margin = {top: 50, right: 250, bottom: 50, left: 70};
|
var margin = {top: 50, right: 250, bottom: 50, left: 70};
|
||||||
var width = 800 - margin.left - margin.right;
|
var width = 800 - margin.left - margin.right;
|
||||||
var height = 420 - margin.top - margin.bottom;
|
var height = 420 - margin.top - margin.bottom;
|
||||||
|
|
||||||
var x = d3.scale.linear().range([0, width]);
|
var x = d3.scale.linear().range([0, width]);
|
||||||
var y = d3.scale.linear().range([height, 0]);
|
var y = d3.scale.linear().range([height, 0]);
|
||||||
var xAxis = d3.svg.axis().scale(x).orient("bottom");
|
var xAxis = d3.svg.axis().scale(x).orient("bottom");
|
||||||
var yAxis = d3.svg.axis().scale(y).orient("left");
|
var yAxis = d3.svg.axis().scale(y).orient("left");
|
||||||
|
|
||||||
var color = d3.scale.category10();
|
var color = d3.scale.category10();
|
||||||
|
|
||||||
if (isArea == 1){
|
if (isArea == 1) {
|
||||||
var area = d3.svg.area()
|
var area = d3.svg.area()
|
||||||
.x(function(d) { return x(d.time); })
|
.x(function(d) { return x(d.time); })
|
||||||
.y0(function(d) { return y(d.y0); })
|
.y0(function(d) { return y(d.y0); })
|
||||||
.y1(function(d) { return y(d.y0 + d.y); });
|
.y1(function(d) { return y(d.y0 + d.y); });
|
||||||
|
|
||||||
var stack = d3.layout.stack()
|
var stack = d3.layout.stack()
|
||||||
.values(function(d) { return d.values; });
|
.values(function(d) { return d.values; });
|
||||||
|
|
||||||
// create chart
|
// create chart
|
||||||
var svg = d3.select(chartArea).append("svg")
|
var svg = d3.select(chartArea).append("svg")
|
||||||
.attr("width", width + margin.left + margin.right)
|
.attr("width", width + margin.left + margin.right)
|
||||||
.attr("height", height + margin.top + margin.bottom)
|
.attr("height", height + margin.top + margin.bottom)
|
||||||
.append("g")
|
.append("g")
|
||||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||||
|
|
||||||
color.domain(d3.keys(data[0])
|
color.domain(d3.keys(data[0])
|
||||||
.filter(function(key) {return $.inArray(key, legends) !== -1; }));
|
.filter(function(key) {return $.inArray(key, legends) !== -1; }));
|
||||||
|
|
||||||
var points = stack(color.domain().map(function(name) {
|
var points = stack(color.domain().map(function(name) {
|
||||||
return {
|
return {
|
||||||
name: name,
|
name: name,
|
||||||
values: data.map(function(d) {
|
values: data.map(function(d) {
|
||||||
return {time: d.time, y: d[name]};
|
return {time: d.time, y: d[name]};
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
}));
|
}));
|
||||||
|
|
||||||
// x & y
|
// x & y
|
||||||
x.domain(d3.extent(data, function(d) { return d.time; }));
|
x.domain(d3.extent(data, function(d) { return d.time; }));
|
||||||
y.domain([
|
y.domain([
|
||||||
d3.min(points, function(c) {
|
d3.min(points, function(c) {
|
||||||
return 0.9 * d3.min(c.values, function(v) { return v.y; }); }),
|
return 0.9 * d3.min(c.values, function(v) { return v.y; }); }),
|
||||||
d3.max(points, function(c) {
|
d3.max(points, function(c) {
|
||||||
return 1.1 * d3.max(c.values, function(v) { return v.y + v.y0; }); })
|
return 1.1 * d3.max(c.values, function(v) { return v.y + v.y0; }); })
|
||||||
]);
|
]);
|
||||||
|
|
||||||
svg.append("g").attr("class", "x axis")
|
svg.append("g").attr("class", "x axis")
|
||||||
.attr("transform", "translate(0," + height + ")")
|
.attr("transform", "translate(0," + height + ")")
|
||||||
.call(xAxis)
|
.call(xAxis)
|
||||||
.append("text")
|
.append("text")
|
||||||
.attr("transform", "translate(" + (width / 2) + ", 45)")
|
.attr("transform", "translate(" + (width / 2) + ", 45)")
|
||||||
.style("text-anchor", "middle")
|
.style("text-anchor", "middle")
|
||||||
.text("Time (s)");
|
.text("Time (s)");
|
||||||
|
|
||||||
svg.append("g")
|
svg.append("g")
|
||||||
.attr("class", "y axis")
|
.attr("class", "y axis")
|
||||||
.call(yAxis)
|
.call(yAxis)
|
||||||
.append("text")
|
.append("text")
|
||||||
.attr("transform", "rotate(-90)")
|
.attr("transform", "rotate(-90)")
|
||||||
.attr("y", 0 - margin.left)
|
.attr("y", 0 - margin.left)
|
||||||
.attr("x",0 - (height / 2))
|
.attr("x",0 - (height / 2))
|
||||||
.attr("dy", "1em")
|
.attr("dy", "1em")
|
||||||
.style("text-anchor", "middle")
|
.style("text-anchor", "middle")
|
||||||
.text(yLabelTitle);
|
.text(yLabelTitle);
|
||||||
|
|
||||||
var point = svg.selectAll(".point")
|
var point = svg.selectAll(".point")
|
||||||
.data(points)
|
.data(points)
|
||||||
.enter().append("g");
|
.enter().append("g");
|
||||||
|
|
||||||
point.append("path")
|
point.append("path")
|
||||||
.attr("class", "area")
|
.attr("class", "area")
|
||||||
.attr("d", function(d) { return area(d.values); })
|
.attr("d", function(d) { return area(d.values); })
|
||||||
.style("fill", function(d) { return color(d.name); });
|
.style("fill", function(d) { return color(d.name); });
|
||||||
} else {
|
} else {
|
||||||
// lines
|
// lines
|
||||||
var line = d3.svg.line()
|
var line = d3.svg.line()
|
||||||
.interpolate("basis")
|
.interpolate("basis")
|
||||||
.x(function(d) { return x(d.time); })
|
.x(function(d) { return x(d.time); })
|
||||||
.y(function(d) { return y(d.value); });
|
.y(function(d) { return y(d.value); });
|
||||||
|
|
||||||
// create chart
|
// create chart
|
||||||
var svg = d3.select(chartArea).append("svg")
|
var svg = d3.select(chartArea).append("svg")
|
||||||
.attr("id", title)
|
.attr("id", title)
|
||||||
.attr("width", width + margin.left + margin.right)
|
.attr("width", width + margin.left + margin.right)
|
||||||
.attr("height", height + margin.top + margin.bottom)
|
.attr("height", height + margin.top + margin.bottom)
|
||||||
.append("g")
|
.append("g")
|
||||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||||
|
|
||||||
color.domain(d3.keys(data[0])
|
color.domain(d3.keys(data[0])
|
||||||
.filter(function(key) {return $.inArray(key, legends) !== -1; }));
|
.filter(function(key) {return $.inArray(key, legends) !== -1; }));
|
||||||
|
|
||||||
var values = color.domain().map(function(name) {
|
var values = color.domain().map(function(name) {
|
||||||
return {
|
return {
|
||||||
name: name,
|
name: name,
|
||||||
values: data.map(function(d) {
|
values: data.map(function(d) {
|
||||||
return {time: d.time, value: +d[name]};
|
return {time: d.time, value: +d[name]};
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
// x & y
|
// x & y
|
||||||
x.domain(d3.extent(data, function(d) { return d.time; }));
|
x.domain(d3.extent(data, function(d) { return d.time; }));
|
||||||
y.domain([
|
y.domain([
|
||||||
d3.min(values, function(c) { return 0.9 * d3.min(c.values, function(v) { return v.value; }); }),
|
d3.min(values, function(c) { return 0.9 * d3.min(c.values, function(v) { return v.value; }); }),
|
||||||
d3.max(values, function(c) { return 1.1 * d3.max(c.values, function(v) { return v.value; }); })
|
d3.max(values, function(c) { return 1.1 * d3.max(c.values, function(v) { return v.value; }); })
|
||||||
]);
|
]);
|
||||||
|
|
||||||
svg.append("g").attr("class", "x axis")
|
svg.append("g").attr("class", "x axis")
|
||||||
.attr("transform", "translate(0," + height + ")")
|
.attr("transform", "translate(0," + height + ")")
|
||||||
.call(xAxis)
|
.call(xAxis)
|
||||||
.append("text")
|
.append("text")
|
||||||
.attr("transform", "translate(" + (width / 2) + ", 45)")
|
.attr("transform", "translate(" + (width / 2) + ", 45)")
|
||||||
.style("text-anchor", "middle")
|
.style("text-anchor", "middle")
|
||||||
.text("Time (s)");
|
.text("Time (s)");
|
||||||
|
|
||||||
svg.append("g")
|
svg.append("g")
|
||||||
.attr("class", "y axis")
|
.attr("class", "y axis")
|
||||||
.call(yAxis)
|
.call(yAxis)
|
||||||
.append("text")
|
.append("text")
|
||||||
.attr("transform", "rotate(-90)")
|
.attr("transform", "rotate(-90)")
|
||||||
.attr("y", 0 - margin.left)
|
.attr("y", 0 - margin.left)
|
||||||
.attr("x",0 - (height / 2))
|
.attr("x",0 - (height / 2))
|
||||||
.attr("dy", "1em")
|
.attr("dy", "1em")
|
||||||
.style("text-anchor", "middle")
|
.style("text-anchor", "middle")
|
||||||
.text(yLabelTitle);
|
.text(yLabelTitle);
|
||||||
|
|
||||||
var value = svg.selectAll(".city")
|
var value = svg.selectAll(".city")
|
||||||
.data(values)
|
.data(values)
|
||||||
.enter().append("g")
|
.enter().append("g")
|
||||||
.attr("class", "city");
|
.attr("class", "city");
|
||||||
|
|
||||||
value.append("path")
|
value.append("path")
|
||||||
.attr("class", "line")
|
.attr("class", "line")
|
||||||
.attr("d", function(d) { return line(d.values); })
|
.attr("d", function(d) { return line(d.values); })
|
||||||
.style("stroke", function(d) { return color(d.name); });
|
.style("stroke", function(d) { return color(d.name); });
|
||||||
}
|
}
|
||||||
// title
|
|
||||||
svg.append("text")
|
|
||||||
.attr("x", (width / 2))
|
|
||||||
.attr("y", 10 - (margin.top / 2))
|
|
||||||
.attr("text-anchor", "middle")
|
|
||||||
.text(title);
|
|
||||||
|
|
||||||
// legend
|
// title
|
||||||
var legend = svg.append("g")
|
svg.append("text")
|
||||||
.attr("class", "legend")
|
.attr("x", (width / 2))
|
||||||
.attr("x", width - 50)
|
.attr("y", 10 - (margin.top / 2))
|
||||||
.attr("y", 25)
|
.attr("text-anchor", "middle")
|
||||||
.attr("height", 120)
|
.text(title);
|
||||||
.attr("width", 140);
|
|
||||||
|
|
||||||
legend.selectAll('g').data(legends)
|
// legend
|
||||||
.enter()
|
var legend = svg.append("g")
|
||||||
.append('g')
|
.attr("class", "legend")
|
||||||
.each(function(d, i) {
|
.attr("x", width - 50)
|
||||||
var g = d3.select(this);
|
.attr("y", 25)
|
||||||
g.append("rect")
|
.attr("height", 120)
|
||||||
.attr("x", width - 5 - pl)
|
.attr("width", 140);
|
||||||
.attr("y", i*20 + 0)
|
|
||||||
.attr("width", 10)
|
|
||||||
.attr("height", 10)
|
|
||||||
.style("fill", color(d));
|
|
||||||
|
|
||||||
g.append("text")
|
legend.selectAll('g').data(legends)
|
||||||
.attr("x", width + 15 - pl)
|
.enter()
|
||||||
.attr("y", i * 20 + 8)
|
.append('g')
|
||||||
.attr("height",30)
|
.each(function(d, i) {
|
||||||
.attr("width",250)
|
var g = d3.select(this);
|
||||||
.style("fill", color(d))
|
g.append("rect")
|
||||||
.text(d);
|
.attr("x", width - 5 - pl)
|
||||||
});
|
.attr("y", i*20 + 0)
|
||||||
|
.attr("width", 10)
|
||||||
|
.attr("height", 10)
|
||||||
|
.style("fill", color(d));
|
||||||
|
|
||||||
|
g.append("text")
|
||||||
|
.attr("x", width + 15 - pl)
|
||||||
|
.attr("y", i * 20 + 8)
|
||||||
|
.attr("height",30)
|
||||||
|
.attr("width",250)
|
||||||
|
.style("fill", color(d))
|
||||||
|
.text(d);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user