Allow selection of displayed network interface

Fixes #686

pages/containers_html.go

@@ -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>

pages/static/containers_js.go

@@ -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.interfaces[interfaceIndex].tx_bytes - prev.network.interfaces[interfaceIndex].tx_bytes) / intervalInSec);
-		elements.push((cur.network.rx_bytes - prev.network.rx_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.interfaces[interfaceIndex].tx_errors - prev.network.interfaces[interfaceIndex].tx_errors) / intervalInSec);
-		elements.push((cur.network.rx_errors - prev.network.rx_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,9 +708,15 @@ 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;
-					startFileSystemUsage("filesystem-usage", machineInfo, containerInfo);
+
+					if (containerInfo.spec.has_filesystem) {
+						startFileSystemUsage("filesystem-usage", machineInfo, containerInfo);
+					}
+					if (containerInfo.spec.has_network) {
+						startNetwork("network-selection", containerInfo);
+					}
 				}
 
 				drawCharts(machineInfo, containerInfo);