Merge pull request #472 from rjnagal/docker

Add cpu load graph to UI.
This commit is contained in:
Victor Marmol 2015-01-27 23:14:51 -08:00
commit ef2d9d1c76
2 changed files with 27 additions and 0 deletions

View File

@ -116,6 +116,8 @@ const containersHtmlTemplate = `
<div class="panel-body"> <div class="panel-body">
<h4>Total Usage</h4> <h4>Total Usage</h4>
<div id="cpu-total-usage-chart"></div> <div id="cpu-total-usage-chart"></div>
<h4>CPU Load Average</h4>
<div id="cpu-load-chart"></div>
<h4>Usage per Core</h4> <h4>Usage per Core</h4>
<div id="cpu-per-core-usage-chart"></div> <div id="cpu-per-core-usage-chart"></div>
<h4>Usage Breakdown</h4> <h4>Usage Breakdown</h4>

View File

@ -1471,6 +1471,11 @@ function drawLineChart(seriesTitles, data, elementId, unit) {
position: 'bottom', position: 'bottom',
}, },
}; };
// If the whole data series has the same value, try to center it in the chart.
if ( min == max) {
opts.vAxis.viewWindow.max = 1.1 * max
opts.vAxis.viewWindow.min = 0.9 * max
}
window.charts[elementId].draw(dataTable, opts); window.charts[elementId].draw(dataTable, opts);
} }
@ -1553,6 +1558,23 @@ function drawCpuTotalUsage(elementId, machineInfo, stats) {
drawLineChart(titles, data, elementId, "Cores"); drawLineChart(titles, data, elementId, "Cores");
} }
// Draw the graph for CPU load.
function drawCpuLoad(elementId, machineInfo, stats) {
var titles = ["Time", "Average"];
var data = [];
for (var i = 1; i < stats.stats.length; i++) {
var cur = stats.stats[i];
var elements = [];
elements.push(cur.timestamp);
elements.push(cur.cpu.load_average/1000);
data.push(elements);
}
drawLineChart(titles, data, elementId, "Runnable threads");
}
// Draw the graph for per-core CPU usage. // Draw the graph for per-core CPU usage.
function drawCpuPerCoreUsage(elementId, machineInfo, stats) { function drawCpuPerCoreUsage(elementId, machineInfo, stats) {
if (stats.spec.has_cpu && !hasResource(stats, "cpu")) { if (stats.spec.has_cpu && !hasResource(stats, "cpu")) {
@ -1829,6 +1851,9 @@ function drawCharts(machineInfo, containerInfo) {
steps.push(function() { steps.push(function() {
drawCpuTotalUsage("cpu-total-usage-chart", machineInfo, containerInfo); drawCpuTotalUsage("cpu-total-usage-chart", machineInfo, containerInfo);
}); });
steps.push(function() {
drawCpuLoad("cpu-load-chart", machineInfo, containerInfo);
});
steps.push(function() { steps.push(function() {
drawCpuPerCoreUsage("cpu-per-core-usage-chart", machineInfo, containerInfo); drawCpuPerCoreUsage("cpu-per-core-usage-chart", machineInfo, containerInfo);
}); });