prometheus/cadvisor
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Adding network bytes tx, rx and errors to the frontend. Network errors chart is not exposed in the UI yet.

Browse Source
This commit is contained in:
Vishnu Kannan 2014-07-23 19:14:09 +00:00
parent 83f2373fb1
commit 106787f850
2 changed files with 52 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
pages/containers_html.go
View File

@ -149,6 +149,14 @@ const containersHtmlTemplate = `
</div> </div>
</div> </div>
{{end}} {{end}}
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Network</h3>
</div>
<div class="panel-body">
<div id="network-bytes-chart"></div>
</div>
</div>
</div> </div>
{{end}} {{end}}
</div> </div>

44
pages/static/containers_js.go
View File

@ -219,6 +219,42 @@ function drawMemoryPageFaults(elementId, containerInfo) {
drawLineChart(titles, data, elementId, "Faults"); drawLineChart(titles, data, elementId, "Faults");
} }
// Draw the graph for network tx/rx bytes.
function drawNetworkBytes(elementId, machineInfo, stats) {
var titles = ["Time", "Tx bytes", "Rx bytes"];
var data = [];
for (var i = 1; i < stats.stats.length; i++) {
var cur = stats.stats[i];
var prev = stats.stats[i - 1];
// TODO(vmarmol): This assumes we sample every second, use the timestamps.
var elements = [];
elements.push(cur.timestamp);
elements.push(cur.network.tx_bytes - prev.network.tx_bytes);
elements.push(cur.network.rx_bytes - prev.network.rx_bytes);
data.push(elements);
}
drawLineChart(titles, data, elementId, "Bytes");
}
// Draw the graph for network errors
function drawNetworkErrors(elementId, machineInfo, stats) {
var titles = ["Time", "Tx", "Rx"];
var data = [];
for (var i = 1; i < stats.stats.length; i++) {
var cur = stats.stats[i];
var prev = stats.stats[i - 1];
// TODO(vmarmol): This assumes we sample every second, use the timestamps.
var elements = [];
elements.push(cur.timestamp);
elements.push(cur.network.tx_errors - prev.network.tx_errors);
elements.push(cur.network.rx_errors - prev.network.rx_errors);
data.push(elements);
}
drawLineChart(titles, data, elementId, "Errors");
}
// Expects an array of closures to call. After each execution the JS runtime is given control back before continuing. // Expects an array of closures to call. After each execution the JS runtime is given control back before continuing.
// This function returns asynchronously // This function returns asynchronously
function stepExecute(steps) { function stepExecute(steps) {
@ -264,6 +300,14 @@ function drawCharts(machineInfo, containerInfo) {
drawMemoryPageFaults("memory-page-faults-chart", containerInfo); drawMemoryPageFaults("memory-page-faults-chart", containerInfo);
}); });
// Network.
steps.push(function() {
drawNetworkBytes("network-bytes-chart", machineInfo, containerInfo);
});
steps.push(function() {
drawNetworkErrors("network-errors-chart", machineInfo, containerInfo);
});
stepExecute(steps); stepExecute(steps);
} }