Merge pull request #381 from vmarmol/ui

Simplify handling of progress bars and humanized values.
google · Dec 19, 2014 · 4cbdbc2 · 4cbdbc2
2 parents 7c5e69f + 3cebc95
commit 4cbdbc2
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 52 deletions.
diff --git a/pages/containers.go b/pages/containers.go
@@ -88,15 +88,11 @@ func (b ByteSize) Unit() string {
 }
 
 var funcMap = template.FuncMap{
-	"printMask":             printMask,
-	"printCores":            printCores,
-	"printShares":           printShares,
-	"printSize":             printSize,
-	"printUnit":             printUnit,
-	"getMemoryUsage":        getMemoryUsage,
-	"getMemoryUsagePercent": getMemoryUsagePercent,
-	"getHotMemoryPercent":   getHotMemoryPercent,
-	"getColdMemoryPercent":  getColdMemoryPercent,
+	"printMask":   printMask,
+	"printCores":  printCores,
+	"printShares": printShares,
+	"printSize":   printSize,
+	"printUnit":   printUnit,
 }
 
 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()
 

diff --git a/pages/containers_html.go b/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">
-		{{ getMemoryUsage .Stats }} MB ({{ getMemoryUsagePercent .Spec .Stats .MachineInfo}}%)
-              </div>
+              <div class="col-sm-3" id="memory-text"></div>
 	    </div>
           </div>
 	</div>

diff --git a/pages/static/containers_js.go b/pages/static/containers_js.go
@@ -1393,7 +1393,7 @@ xx(oX[K],oX[K][hA]);Cw(oX[K],oX[K][qy]);oX[K].setAction=oX[K].dj;oX[K].getAction
 google.loader.loaded({"module":"visualization","version":"1.0","components":["ui","corechart","default","gauge","format"]});
 google.loader.eval.visualization = function() {eval(arguments[0]);};if (google.loader.eval.scripts && google.loader.eval.scripts['visualization']) {(function() {var scripts = google.loader.eval.scripts['visualization'];for (var i = 0; i < scripts.length; i++) {google.loader.eval.visualization(scripts[i]);}})();google.loader.eval.scripts['visualization'] = null;}})();
 
-function humanize(num,size,units) {
+function humanize(num, size, units) {
     var unit;
     for (unit = units.pop(); units.length && num >= size; unit = units.pop()) {
         num /= size;
@@ -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 totalMemory = Math.floor((cur.memory.usage * 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) / memory_limit);
 	var coldMemory = totalMemory - hotMemory;
 	$("#progress-hot-memory").width(hotMemory + "%");
         $("#progress-cold-memory").width(coldMemory + "%");
-        var repMemory = humanizeIEC(cur.memory.usage);
-	$("#memory-text").html( repMemory[0].toFixed(3) + " " + repMemory[1] +  " ("+ totalMemory +"%)");
+	$("#memory-text").text(humanizeIEC(cur.memory.usage) + " / " + humanizeIEC(memory_limit) +  " ("+ 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 + "%)");
 	}
 }