Merge pull request #363 from vmarmol/ui

Dynamically create the filesystem usage.

pages/containers.go

@@ -97,8 +97,6 @@ var funcMap = template.FuncMap{
 	"getMemoryUsagePercent": getMemoryUsagePercent,
 	"getHotMemoryPercent":   getHotMemoryPercent,
 	"getColdMemoryPercent":  getColdMemoryPercent,
-	"getFsStats":            getFsStats,
-	"getFsUsagePercent":     getFsUsagePercent,
 }
 
 func printMask(mask string, numCores int) interface{} {
@@ -208,17 +206,6 @@ func getColdMemoryPercent(spec *info.ContainerSpec, stats []*info.ContainerStats
 	return toMemoryPercent((latestStats.Usage)-(latestStats.WorkingSet), spec, machine)
 }
 
-func getFsStats(stats []*info.ContainerStats) []info.FsStats {
-	if len(stats) == 0 {
-		return []info.FsStats{}
-	}
-	return stats[len(stats)-1].Filesystem
-}
-
-func getFsUsagePercent(limit, used uint64) uint64 {
-	return uint64((float64(used) / float64(limit)) * 100)
-}
-
 func serveContainersPage(m manager.Manager, w http.ResponseWriter, u *url.URL) error {
 	start := time.Now()
 

pages/containers_html.go

@@ -157,24 +157,7 @@ const containersHtmlTemplate = `
           <div class="panel-heading">
             <h3 class="panel-title">Filesystem</h3>
           </div>
-          <div class="panel-body">
+          <div id="filesystem-usage" class="panel-body">
-            {{with getFsStats .Stats}}
-	    {{range $i, $e := .}}
-            <div class="row col-sm-12">
-              <h4>FS #{{$i}}: {{$e.Device}}</h4>
-            </div>
-            <div class="col-sm-9">
-	      <div class="progress">
-	        <div id="fs-{{$i}}-usage-chart"></div>
-                <div id="progress-{{$i}}" class="progress-bar progress-bar-danger" style="width: {{getFsUsagePercent $e.Limit $e.Usage}}%">
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-3" id="progress-text-{{$i}}">
-	      {{printSize $e.Limit}} {{printUnit $e.Limit}} ({{getFsUsagePercent $e.Limit $e.Usage}}%)
-	    </div>
-	    {{end}}
-	    {{end}}
           </div>
         </div>
 	{{end}}

pages/static/containers_js.go

@@ -1498,7 +1498,7 @@ function drawGauge(elementId, cpuUsage, memoryUsage, fsUsage) {
 	}
         for (var i = 0; i < fsUsage.length; i++) {
 	        if (fsUsage[i] >= 0) {
-			gauges.push(['FS #'+i, fsUsage[i]]);
+			gauges.push(['FS #' + (i + 1), fsUsage[i]]);
 	        }
 	}
 	// Create and populate the data table.
@@ -1726,19 +1726,59 @@ function drawNetworkErrors(elementId, machineInfo, stats) {
 	drawLineChart(titles, data, elementId, "Errors per second");
 }
 
-// Draw the filesystem graph
+// Update the filesystem usage values.
-function drawFileSystemUsage(elementId, machineInfo, stats) {
+function drawFileSystemUsage(machineInfo, stats) {
 	var curr = stats.stats[stats.stats.length - 1];
-	// Update the progress bar
+	var el = $("<div>");
 	for (var i = 0; i < curr.filesystem.length; i++) {
 		var data = curr.filesystem[i];
 		var totalUsage = Math.floor((data.usage * 100.0)/data.capacity);
-		$("#progress-"+i).width(totalUsage+"%");
+                var humanized = humanizeMetric(data.capacity);
-                var repFS = humanizeMetric(data.capacity);
+
-		$("#progress-text-"+i).html( repFS[0].toFixed(2) + " " + repFS[1] + " ("+totalUsage+"%)");
+		// Update DOM elements.
+		var els = window.cadvisor.fsUsage.elements[data.device];
+		els.progressElement.width(totalUsage + "%");
+		els.textElement.text(humanized[0].toFixed(2) + " " + humanized[1] + " (" + totalUsage + "%)");
+
 	}
 }
 
+// Draw the filesystem usage nodes.
+function startFileSystemUsage(elementId, machineInfo, stats) {
+	window.cadvisor.fsUsage = {};
+
+	// A map of device name to DOM elements.
+	window.cadvisor.fsUsage.elements = {};
+
+	var curr = stats.stats[stats.stats.length - 1];
+	var el = $("<div>");
+	for (var i = 0; i < curr.filesystem.length; i++) {
+		var data = curr.filesystem[i];
+		el.append($("<div>")
+			.addClass("row col-sm-12")
+			.append($("<h4>")
+				.text("FS #" + (i + 1) + ": " + data.device)));
+
+		var progressElement = $("<div>").addClass("progress-bar progress-bar-danger");
+		el.append($("<div>")
+			.addClass("col-sm-9")
+			.append($("<div>")
+				.addClass("progress")
+				.append(progressElement)));
+
+		var textElement = $("<div>").addClass("col-sm-3");
+		el.append(textElement);
+
+		window.cadvisor.fsUsage.elements[data.device] = {
+			'progressElement': progressElement,
+			'textElement': textElement,
+		};
+	}
+	$("#" + elementId).empty().append(el);
+
+	drawFileSystemUsage(machineInfo, stats);
+}
+
 // Expects an array of closures to call. After each execution the JS runtime is given control back before continuing.
 // This function returns asynchronously
 function stepExecute(steps) {
@@ -1800,11 +1840,10 @@ function drawCharts(machineInfo, containerInfo) {
 	// Filesystem.
 	if (containerInfo.spec.has_filesystem) {
 		steps.push(function() {
-                        drawFileSystemUsage("filesystem-usage-chart", machineInfo, containerInfo);
+                        drawFileSystemUsage(machineInfo, containerInfo);
                 });
 	}
 
-
 	stepExecute(steps);
 }
 
@@ -1816,12 +1855,19 @@ function startPage(containerName, hasCpu, hasMemory) {
 	}
 
 	window.charts = {};
+	window.cadvisor = {};
+	window.cadvisor.firstRun = true;
 
 	// Get machine info, then get the stats every 1s.
 	getMachineInfo(function(machineInfo) {
 		setInterval(function() {
-			getStats(containerName, function(stats){
+			getStats(containerName, function(containerInfo){
-				drawCharts(machineInfo, stats);
+				if (window.cadvisor.firstRun && containerInfo.spec.has_filesystem) {
+					window.cadvisor.firstRun = false;
+					startFileSystemUsage("filesystem-usage", machineInfo, containerInfo);
+				}
+
+				drawCharts(machineInfo, containerInfo);
 			});
 		}, 1000);
 	});