Simplify handling of progress bars and humanized values.

Fixes #378.

pages/containers.go

@@ -93,10 +93,6 @@ var funcMap = template.FuncMap{
 	"printShares": printShares,
 	"printSize":   printSize,
 	"printUnit":   printUnit,
-	"getMemoryUsage":        getMemoryUsage,
-	"getMemoryUsagePercent": getMemoryUsagePercent,
-	"getHotMemoryPercent":   getHotMemoryPercent,
-	"getColdMemoryPercent":  getColdMemoryPercent,
 }
 
 func printMask(mask string, numCores int) interface{} {
@@ -177,35 +173,6 @@ func toMemoryPercent(usage uint64, spec *info.ContainerSpec, machine *info.Machi
 	return int((usage * 100) / limit)
 }
 
-func getMemoryUsage(stats []*info.ContainerStats) string {
-	if len(stats) == 0 {
-		return "0.0"
-	}
-	return strconv.FormatFloat(toMegabytes((stats[len(stats)-1].Memory.Usage)), 'f', 2, 64)
-}
-
-func getMemoryUsagePercent(spec *info.ContainerSpec, stats []*info.ContainerStats, machine *info.MachineInfo) int {
-	if len(stats) == 0 {
-		return 0
-	}
-	return toMemoryPercent((stats[len(stats)-1].Memory.Usage), spec, machine)
-}
-
-func getHotMemoryPercent(spec *info.ContainerSpec, stats []*info.ContainerStats, machine *info.MachineInfo) int {
-	if len(stats) == 0 {
-		return 0
-	}
-	return toMemoryPercent((stats[len(stats)-1].Memory.WorkingSet), spec, machine)
-}
-
-func getColdMemoryPercent(spec *info.ContainerSpec, stats []*info.ContainerStats, machine *info.MachineInfo) int {
-	if len(stats) == 0 {
-		return 0
-	}
-	latestStats := stats[len(stats)-1].Memory
-	return toMemoryPercent((latestStats.Usage)-(latestStats.WorkingSet), spec, machine)
-}
-
 func serveContainersPage(m manager.Manager, w http.ResponseWriter, u *url.URL) error {
 	start := time.Now()
 

pages/containers_html.go

@@ -136,17 +136,15 @@ const containersHtmlTemplate = `
               <h4>Usage Breakdown</h4>
               <div class="col-sm-9">
 		<div class="progress">
-                  <div class="progress-bar progress-bar-danger" style="width: {{getHotMemoryPercent .Spec .Stats .MachineInfo}}%" id="progress-hot-memory">
+                  <div class="progress-bar progress-bar-danger" id="progress-hot-memory">
                     <span class="sr-only">Hot Memory</span>
                   </div>
-                  <div class="progress-bar progress-bar-info" style="width: {{getColdMemoryPercent .Spec .Stats .MachineInfo}}%" id="progress-cold-memory">
+                  <div class="progress-bar progress-bar-info" id="progress-cold-memory">
                     <span class="sr-only">Cold Memory</span>
                   </div>
 		</div>
               </div>
-              <div class="col-sm-3" id="memory-text">
+              <div class="col-sm-3" id="memory-text"></div>
-		{{ getMemoryUsage .Stats }} MB ({{ getMemoryUsagePercent .Spec .Stats .MachineInfo}}%)
-              </div>
 	    </div>
           </div>
 	</div>

pages/static/containers_js.go

@@ -1403,12 +1403,14 @@ function humanize(num,size,units) {
 
 // Following the IEC naming convention
 function humanizeIEC(num) {
-        return humanize(num,1024,["TiB", "GiB", "MiB", "KiB", "Bytes"]);
+        var ret = humanize(num, 1024, ["TiB", "GiB", "MiB", "KiB", "Bytes"]);
+	return ret[0].toFixed(2) + " " + ret[1];
 }
 
 // Following the Metric naming convention
 function humanizeMetric(num) {
-        return humanize(num,1000,["TB", "GB", "MB", "KB", "Bytes"]);
+        var ret = humanize(num, 1000, ["TB", "GB", "MB", "KB", "Bytes"]);
+	return ret[0].toFixed(2) + " " + ret[1];
 }
 
 // Draw a line chart.
@@ -1666,15 +1668,20 @@ function drawMemoryUsage(elementId, machineInfo, containerInfo) {
 		data.push(elements);
 	}
 
+	// Get the memory limit, saturate to the machine size.
+	var memory_limit = machineInfo.memory_capacity;
+	if (containerInfo.spec.memory.limit && (containerInfo.spec.memory.limit < memory_limit)) {
+		memory_limit = machineInfo.spec.memory.limit;;
+	}
+
 	// Updating the progress bar.
 	var cur = containerInfo.stats[containerInfo.stats.length-1];
-        var hotMemory = Math.floor((cur.memory.working_set * 100.0) / machineInfo.memory_capacity);
+        var hotMemory = Math.floor((cur.memory.working_set * 100.0) / memory_limit);
-        var totalMemory = Math.floor((cur.memory.usage * 100.0) / machineInfo.memory_capacity);
+        var totalMemory = Math.floor((cur.memory.usage * 100.0) / memory_limit);
 	var coldMemory = totalMemory - hotMemory;
 	$("#progress-hot-memory").width(hotMemory + "%");
         $("#progress-cold-memory").width(coldMemory + "%");
-        var repMemory = humanizeIEC(cur.memory.usage);
+	$("#memory-text").text(humanizeIEC(cur.memory.usage) + " / " + humanizeIEC(memory_limit) +  " ("+ totalMemory +"%)");
-	$("#memory-text").html( repMemory[0].toFixed(3) + " " + repMemory[1] +  " ("+ totalMemory +"%)");
 
 	drawLineChart(titles, data, elementId, "Megabytes");
 }
@@ -1734,12 +1741,11 @@ function drawFileSystemUsage(machineInfo, stats) {
 	for (var i = 0; i < cur.filesystem.length; i++) {
 		var data = cur.filesystem[i];
 		var totalUsage = Math.floor((data.usage * 100.0) / data.capacity);
-                var humanized = humanizeMetric(data.capacity);
 
 		// 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 + "%)");
+		els.textElement.text(humanizeMetric(data.usage) + " / " + humanizeMetric(data.capacity)+ " (" + totalUsage + "%)");
 	}
 }