From 74767b860042f7d3b98068b89a68a1b24881504a Mon Sep 17 00:00:00 2001
From: anushree-n <anushreen@google.com>
Date: Fri, 14 Aug 2015 17:57:24 -0700
Subject: [PATCH] UI changes

---
 pages/static/containers_js.go | 118 ++++++++++++++++++++++++++++------
 1 file changed, 98 insertions(+), 20 deletions(-)

diff --git a/pages/static/containers_js.go b/pages/static/containers_js.go
index 6af1f999..72116f7a 100644
--- a/pages/static/containers_js.go
+++ b/pages/static/containers_js.go
@@ -714,11 +714,82 @@ function refreshStats() {
 	});
 }
 
+function addAllLabels(containerInfo, metricsInfo) {
+        if (metricsInfo.length == 0) {
+                return;
+        }
+        var metricSpec = containerInfo.spec.custom_metrics;
+        for (var containerName in metricsInfo) {
+                var container = metricsInfo[containerName];
+                for (i=0; i<metricSpec.length; i++) {
+                        metricName = metricSpec[i].name;
+                        metricLabelVal = container[metricName];
+                        firstLabel = true;
+                        for (var label in metricLabelVal) {
+                                if (label == "") {
+                                        $('#button-'+metricName).hide();
+                                }
+
+                                $("#"+metricName+"_labels").append($("<li>")
+                                        .attr("role", "presentation")
+                                        .append($("<a>")
+                                        .attr("role", "menuitem")
+                                        .click(setLabel.bind(null, metricName, label))
+                                        .text(label)));
+                                        if (firstLabel) {
+                                                firstLabel = false;
+                                                setLabel(metricName, label);
+                                        }
+                        }
+                }
+        }
+}
+
+function getMetricIndex(metricName) {
+	for (i = 0; i<window.cadvisor.metricLabelPair.length; ++i) {
+		if (window.cadvisor.metricLabelPair[i][0] == metricName)
+			return i; 
+	}
+	return -1;	
+}
+
+function setLabel(metric, label) {
+	$("#"+metric+"-selection-text")
+        	.empty()
+                .append($("<span>").text("Label: "))
+                .append($("<b>").text(label))
+
+	index = getMetricIndex(metric);
+	if (index == -1) {
+		window.cadvisor.metricLabelPair.push([metric, label]);
+	} else {
+		window.cadvisor.metricLabelPair[index][1] = label;
+	}
+        
+        refreshStats();
+}
+
+function getSelectedLabel(metricName) {
+	index = getMetricIndex(metricName);
+	if (index == -1)
+		return "";
+ 	return window.cadvisor.metricLabelPair[index][1];
+}
+
 function startCustomMetrics(elementId, containerInfo) {
-	var metrics = containerInfo.spec.custom_metrics;
+	var metricSpec = containerInfo.spec.custom_metrics;
+	var metricStats = containerInfo.stats.custom_metrics;
 	var el=$("<div>");
-	for (i = 0; i<metrics.length; i++) {
-		divText = "<div id='"+elementId+"-"+metrics[i].name+"'></div>";
+
+	if (metricSpec.length < window.cadvisor.maxCustomMetrics)
+		window.cadvisor.maxCustomMetrics = metricSpec.length
+	for (i = 0; i<window.cadvisor.maxCustomMetrics; i++) {
+		metricName = metricSpec[i].name;
+        	var divText = "<div class='dropdown'> <button class='btn btn-default dropdown-toggle' type='button' id='button-"+metricName;
+		divText += "' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>";
+		divText += "<span id='"+metricName+"-selection-text'></span> <span class='caret'></span> </button>";
+        	divText += "<ul id='"+metricName+"_labels' class='dropdown-menu' role='menu' aria-labelledby='button-"+metricName+ "'> </ul> </div>";
+		divText += "<div id='"+elementId+"-"+metricName+"'> </div>";
 		el.append($(divText));
 	}
 	el.append($("</div>"));
@@ -743,28 +814,31 @@ function drawCustomMetrics(elementId, containerInfo, metricsInfo) {
         var metricSpec = containerInfo.spec.custom_metrics;
 	for (var containerName in metricsInfo) {
 		var container = metricsInfo[containerName];
-		for (i=0; i<metricSpec.length; i++) {
+		for (i=0; i<window.cadvisor.maxCustomMetrics; i++) {
 			metricName = metricSpec[i].name;
 			metricUnits = metricSpec[i].units;
 			var titles = ["Time", metricName];
-			var data = [];
 			metricLabelVal = container[metricName];
-			for (var label in metricLabelVal) {
-				metricVal = metricLabelVal[label];
-				for (var index in metricVal) {
-        	                        metric = metricVal[index];
-                	                var elements = [];
-                        	        for (var attribute in metric) {
-                                	        value = metric[attribute];
-                                        	elements.push(value);
-                                	}
-                    	       		if (elements.length<2) {
-                        	                elements.push(0);
-                                	}
-                                	data.push(elements);
-                        	}
-  		                drawLineChart(titles, data, elementId+"-"+metricName, metricUnits);
+			if (window.cadvisor.firstCustomCollection) {
+				window.cadvisor.firstCustomCollection = false;
+				addAllLabels(containerInfo, metricsInfo);				
 			}
+			var data = [];
+			selectedLabel = getSelectedLabel(metricName);
+			metricVal = metricLabelVal[selectedLabel];
+			for (var index in metricVal) {
+        	        	metric = metricVal[index];
+                	        var elements = [];
+                        	for (var attribute in metric) {
+                                	value = metric[attribute];
+                                        elements.push(value);
+                                }
+                    	       	if (elements.length<2) {
+                        		elements.push(0);
+                                }
+                                data.push(elements);
+                        }
+			drawLineChart(titles, data, elementId+"-"+metricName, metricUnits);
 		}
 	}
 }
@@ -782,6 +856,10 @@ function startPage(containerName, hasCpu, hasMemory, rootDir, isRoot) {
 	window.cadvisor.rootDir = rootDir;
 	window.cadvisor.containerName = containerName;
 
+	window.cadvisor.firstCustomCollection = true;
+	window.cadvisor.metricLabelPair = [];	
+	window.cadvisor.maxCustomMetrics = 10;
+
 	// Draw process information at start and refresh every 60s.
 	getProcessInfo(rootDir, containerName, function(processInfo) {
 		drawProcesses(isRoot, rootDir, processInfo)