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

Allow selection of displayed network interface

Browse Source 
Fixes #686
This commit is contained in:
Victor Marmol 2015-06-07 18:11:10 -07:00
parent 72df0cb098
commit 2906722b4f
2 changed files with 87 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
pages/containers_html.go
View File

@ -192,6 +192,16 @@ const containersHtmlTemplate = `
<div class="panel-heading">
<h3 class="panel-title">Network</h3>
</div>
<div class="panel-body">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="network-selection-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span id="network-selection-text"></span>
<span class="caret"></span>
</button>
<ul id="network-selection" class="dropdown-menu" role="menu" aria-labelledby="network-selection-dropdown">
</ul>
</div>
</div>
<div class="panel-body">
<h4>Throughput</h4>
<div id="network-bytes-chart"></div>

81
pages/static/containers_js.go
View File

@ -375,12 +375,32 @@ function drawMemoryUsage(elementId, machineInfo, containerInfo) {
drawLineChart(titles, data, elementId, "Megabytes");
}
// Get the index of the interface with the specified name.
function getNetworkInterfaceIndex(interfaceName, interfaces) {
for (var i = 0; i < interfaces.length; i++) {
if (interfaces[i].name == interfaceName) {
return i;
}
}
return -1;
}
// Draw the graph for network tx/rx bytes.
function drawNetworkBytes(elementId, machineInfo, stats) {
if (stats.spec.has_network && !hasResource(stats, "network")) {
return;
}
// Get interface index.
var interfaceIndex = -1;
if (stats.stats.length > 0) {
interfaceIndex = getNetworkInterfaceIndex(window.cadvisor.network.interface, stats.stats[0].network.interfaces);
}
if (interfaceIndex < 0) {
console.log("Unable to find interface\"", interfaceName, "\" in ", stats.stats.network);
return;
}
var titles = ["Time", "Tx bytes", "Rx bytes"];
var data = [];
for (var i = 1; i < stats.stats.length; i++) {
@ -390,8 +410,8 @@ function drawNetworkBytes(elementId, machineInfo, stats) {
var elements = [];
elements.push(cur.timestamp);
elements.push((cur.network.tx_bytes - prev.network.tx_bytes) / intervalInSec);
elements.push((cur.network.rx_bytes - prev.network.rx_bytes) / intervalInSec);
elements.push((cur.network.interfaces[interfaceIndex].tx_bytes - prev.network.interfaces[interfaceIndex].tx_bytes) / intervalInSec);
elements.push((cur.network.interfaces[interfaceIndex].rx_bytes - prev.network.interfaces[interfaceIndex].rx_bytes) / intervalInSec);
data.push(elements);
}
drawLineChart(titles, data, elementId, "Bytes per second");
@ -403,6 +423,16 @@ function drawNetworkErrors(elementId, machineInfo, stats) {
return;
}
// Get interface index.
var interfaceIndex = -1;
if (stats.stats.length > 0) {
interfaceIndex = getNetworkInterfaceIndex(window.cadvisor.network.interface, stats.stats[0].network.interfaces);
}
if (interfaceIndex < 0) {
console.log("Unable to find interface\"", interfaceName, "\" in ", stats.stats.network);
return;
}
var titles = ["Time", "Tx", "Rx"];
var data = [];
for (var i = 1; i < stats.stats.length; i++) {
@ -412,8 +442,8 @@ function drawNetworkErrors(elementId, machineInfo, stats) {
var elements = [];
elements.push(cur.timestamp);
elements.push((cur.network.tx_errors - prev.network.tx_errors) / intervalInSec);
elements.push((cur.network.rx_errors - prev.network.rx_errors) / intervalInSec);
elements.push((cur.network.interfaces[interfaceIndex].tx_errors - prev.network.interfaces[interfaceIndex].tx_errors) / intervalInSec);
elements.push((cur.network.interfaces[interfaceIndex].rx_errors - prev.network.interfaces[interfaceIndex].rx_errors) / intervalInSec);
data.push(elements);
}
drawLineChart(titles, data, elementId, "Errors per second");
@ -618,6 +648,41 @@ function drawCharts(machineInfo, containerInfo) {
stepExecute(steps);
}
function setNetwork(interfaceName) {
$("#network-selection-text")
.empty()
.append($("<span>").text("Interface: "))
.append($("<b>").text(interfaceName));
window.cadvisor.network.interface = interfaceName;
// TODO(vmarmol): Draw network here.
}
// Creates the network selection dropdown.
function startNetwork(selectionElement, containerInfo) {
if (!hasResource(containerInfo, "network") || containerInfo.stats.length == 0
|| !containerInfo.stats[0].network.interfaces || containerInfo.stats[0].network.interfaces.length == 0) {
return;
}
window.cadvisor.network = {};
window.cadvisor.network.interface = "";
// Add all interfaces to the dropdown.
var el = $("#" + selectionElement);
console.log(containerInfo.stats[0].network.interfaces);
for (var i = 0; i < containerInfo.stats[0].network.interfaces.length; i++) {
var interfaceName = containerInfo.stats[0].network.interfaces[i].name;
el.append($("<li>")
.attr("role", "presentation")
.append($("<a>")
.attr("role", "menuitem")
.attr("tabindex", -1)
.click(setNetwork.bind(null, interfaceName))
.text(interfaceName)));
}
setNetwork(containerInfo.stats[0].network.interfaces[0].name);
}
// Executed when the page finishes loading.
function startPage(containerName, hasCpu, hasMemory, rootDir, isRoot) {
// Don't fetch data if we don't have any resource.
@ -643,10 +708,16 @@ function startPage(containerName, hasCpu, hasMemory, rootDir, isRoot) {
getMachineInfo(rootDir, function(machineInfo) {
setInterval(function() {
getStats(rootDir, containerName, function(containerInfo){
if (window.cadvisor.firstRun && containerInfo.spec.has_filesystem) {
if (window.cadvisor.firstRun) {
window.cadvisor.firstRun = false;
if (containerInfo.spec.has_filesystem) {
startFileSystemUsage("filesystem-usage", machineInfo, containerInfo);
}
if (containerInfo.spec.has_network) {
startNetwork("network-selection", containerInfo);
}
}
drawCharts(machineInfo, containerInfo);
});