Add cpu load graph to UI.

This commit is contained in:
Rohit Jnagal 2015-01-28 07:04:41 +00:00
parent 667a8e0fd1
commit a7603df953
2 changed files with 27 additions and 0 deletions

View File

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

View File

@ -1471,6 +1471,11 @@ function drawLineChart(seriesTitles, data, elementId, unit) {
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);
}
@ -1553,6 +1558,23 @@ function drawCpuTotalUsage(elementId, machineInfo, stats) {
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.
function drawCpuPerCoreUsage(elementId, machineInfo, stats) {
if (stats.spec.has_cpu && !hasResource(stats, "cpu")) {
@ -1829,6 +1851,9 @@ function drawCharts(machineInfo, containerInfo) {
steps.push(function() {
drawCpuTotalUsage("cpu-total-usage-chart", machineInfo, containerInfo);
});
steps.push(function() {
drawCpuLoad("cpu-load-chart", machineInfo, containerInfo);
});
steps.push(function() {
drawCpuPerCoreUsage("cpu-per-core-usage-chart", machineInfo, containerInfo);
});