Merge pull request #829 from anushree-n/ui

UI changes to display custom metrics

pages/containers.go

@@ -244,6 +244,7 @@ func serveContainersPage(m manager.Manager, w http.ResponseWriter, u *url.URL) e
 		MemoryAvailable:        cont.Spec.HasMemory,
 		NetworkAvailable:       cont.Spec.HasNetwork,
 		FsAvailable:            cont.Spec.HasFilesystem,
+		CustomMetricsAvailable: cont.Spec.HasCustomMetrics,
 		Root: rootDir,
 	}
 	err = pageTemplate.Execute(w, data)

pages/containers_html.go

@@ -221,6 +221,16 @@ const containersHtmlTemplate = `
           </div>
         </div>
 	{{end}}
+	{{if .CustomMetricsAvailable}}
+	<div class="panel panel-primary">
+	  <div class="panel-heading">
+	    <h3 class="panel-title">Application Metrics</h3>
+	  </div>
+	  <div class="panel-body">
+	    <div id="custom-metrics-chart"></div>
+	  </div>
+	</div>
+	{{end}}
       </div>
       {{end}}
     </div>

pages/docker.go

@@ -140,6 +140,7 @@ func serveDockerPage(m manager.Manager, w http.ResponseWriter, u *url.URL) error
 			MemoryAvailable:        cont.Spec.HasMemory,
 			NetworkAvailable:       cont.Spec.HasNetwork,
 			FsAvailable:            cont.Spec.HasFilesystem,
+			CustomMetricsAvailable: cont.Spec.HasCustomMetrics,
 			Root: rootDir,
 		}
 	}

pages/pages.go

@@ -57,6 +57,7 @@ type pageData struct {
 	MemoryAvailable        bool
 	NetworkAvailable       bool
 	FsAvailable            bool
+	CustomMetricsAvailable bool
 	Root                   string
 	DockerStatus           []keyVal
 	DockerDriverStatus     []keyVal

pages/static/containers_js.go

@@ -645,6 +645,15 @@ function drawCharts(machineInfo, containerInfo) {
                 });
 	}
 
+	// Custom Metrics
+	if (containerInfo.spec.has_custom_metrics) {
+		steps.push(function() {
+        		getCustomMetrics(window.cadvisor.rootDir, window.cadvisor.containerName, function(metricsInfo) {
+                		drawCustomMetrics("custom-metrics-chart", containerInfo, metricsInfo)
+		        });
+		});
+	}
+
 	stepExecute(steps);
 }
 
@@ -697,11 +706,69 @@ function refreshStats() {
 			if (containerInfo.spec.has_network) {
 				startNetwork("network-selection", containerInfo);
 			}	
+			if (containerInfo.spec.has_custom_metrics) {
+				startCustomMetrics("custom-metrics-chart", containerInfo);
+			}
 		}
 			drawCharts(machineInfo, containerInfo);
 	});
 }
 
+function startCustomMetrics(elementId, containerInfo) {
+	var metrics = containerInfo.spec.custom_metrics;
+	var el=$("<div>");
+	for (i = 0; i<metrics.length; i++) {
+		divText = "<div id='"+elementId+"-"+metrics[i].name+"'></div>";
+		el.append($(divText));
+	}
+	el.append($("</div>"));
+	
+	$("#"+elementId).append(el);
+}
+
+function getCustomMetrics(rootDir, containerName, callback) {
+        $.getJSON(rootDir + "api/v2.0/appmetrics/" + containerName)
+        .done(function(data) {
+                callback(data);
+        })
+        .fail(function(jqhxr, textStatus, error) {
+	        callback([]);
+        });
+}
+
+function drawCustomMetrics(elementId, 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;
+			metricUnits = metricSpec[i].units;
+
+			var titles = ["Time", metricUnits];
+			var data = [];
+			metricVal = container[metricName];
+			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, metricName);			
+		}
+	}
+}
+
 // Executed when the page finishes loading.
 function startPage(containerName, hasCpu, hasMemory, rootDir, isRoot) {
 	// Don't fetch data if we don't have any resource.