From 44886a0c905db5a3e66d70fe18a09f7d0bfa9df3 Mon Sep 17 00:00:00 2001
From: anushree-n <anushreen@google.com>
Date: Thu, 30 Jul 2015 10:29:23 -0700
Subject: [PATCH] UI changes for custom metrics

---
 pages/containers.go           | 29 +++++++--------
 pages/containers_html.go      | 10 ++++++
 pages/docker.go               | 25 ++++++-------
 pages/pages.go                | 35 +++++++++---------
 pages/static/containers_js.go | 67 +++++++++++++++++++++++++++++++++++
 5 files changed, 123 insertions(+), 43 deletions(-)

diff --git a/pages/containers.go b/pages/containers.go
index 394c5d16..6eab760e 100644
--- a/pages/containers.go
+++ b/pages/containers.go
@@ -231,20 +231,21 @@ func serveContainersPage(m manager.Manager, w http.ResponseWriter, u *url.URL) e
 	}
 
 	data := &pageData{
-		DisplayName:        displayName,
-		ContainerName:      escapeContainerName(cont.Name),
-		ParentContainers:   parentContainers,
-		Subcontainers:      subcontainerLinks,
-		Spec:               cont.Spec,
-		Stats:              cont.Stats,
-		MachineInfo:        machineInfo,
-		IsRoot:             cont.Name == "/",
-		ResourcesAvailable: cont.Spec.HasCpu || cont.Spec.HasMemory || cont.Spec.HasNetwork || cont.Spec.HasFilesystem,
-		CpuAvailable:       cont.Spec.HasCpu,
-		MemoryAvailable:    cont.Spec.HasMemory,
-		NetworkAvailable:   cont.Spec.HasNetwork,
-		FsAvailable:        cont.Spec.HasFilesystem,
-		Root:               rootDir,
+		DisplayName:            displayName,
+		ContainerName:          escapeContainerName(cont.Name),
+		ParentContainers:       parentContainers,
+		Subcontainers:          subcontainerLinks,
+		Spec:                   cont.Spec,
+		Stats:                  cont.Stats,
+		MachineInfo:            machineInfo,
+		IsRoot:                 cont.Name == "/",
+		ResourcesAvailable:     cont.Spec.HasCpu || cont.Spec.HasMemory || cont.Spec.HasNetwork || cont.Spec.HasFilesystem,
+		CpuAvailable:           cont.Spec.HasCpu,
+		MemoryAvailable:        cont.Spec.HasMemory,
+		NetworkAvailable:       cont.Spec.HasNetwork,
+		FsAvailable:            cont.Spec.HasFilesystem,
+		CustomMetricsAvailable: cont.Spec.HasCustomMetrics,
+		Root: rootDir,
 	}
 	err = pageTemplate.Execute(w, data)
 	if err != nil {
diff --git a/pages/containers_html.go b/pages/containers_html.go
index abc4ea28..4f822bee 100644
--- a/pages/containers_html.go
+++ b/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>
diff --git a/pages/docker.go b/pages/docker.go
index 599cb0ac..7e822c38 100644
--- a/pages/docker.go
+++ b/pages/docker.go
@@ -129,18 +129,19 @@ func serveDockerPage(m manager.Manager, w http.ResponseWriter, u *url.URL) error
 			return err
 		}
 		data = &pageData{
-			DisplayName:        displayName,
-			ContainerName:      escapeContainerName(cont.Name),
-			ParentContainers:   parentContainers,
-			Spec:               cont.Spec,
-			Stats:              cont.Stats,
-			MachineInfo:        machineInfo,
-			ResourcesAvailable: cont.Spec.HasCpu || cont.Spec.HasMemory || cont.Spec.HasNetwork,
-			CpuAvailable:       cont.Spec.HasCpu,
-			MemoryAvailable:    cont.Spec.HasMemory,
-			NetworkAvailable:   cont.Spec.HasNetwork,
-			FsAvailable:        cont.Spec.HasFilesystem,
-			Root:               rootDir,
+			DisplayName:            displayName,
+			ContainerName:          escapeContainerName(cont.Name),
+			ParentContainers:       parentContainers,
+			Spec:                   cont.Spec,
+			Stats:                  cont.Stats,
+			MachineInfo:            machineInfo,
+			ResourcesAvailable:     cont.Spec.HasCpu || cont.Spec.HasMemory || cont.Spec.HasNetwork,
+			CpuAvailable:           cont.Spec.HasCpu,
+			MemoryAvailable:        cont.Spec.HasMemory,
+			NetworkAvailable:       cont.Spec.HasNetwork,
+			FsAvailable:            cont.Spec.HasFilesystem,
+			CustomMetricsAvailable: cont.Spec.HasCustomMetrics,
+			Root: rootDir,
 		}
 	}
 
diff --git a/pages/pages.go b/pages/pages.go
index 662be0a3..aaf60fa2 100644
--- a/pages/pages.go
+++ b/pages/pages.go
@@ -44,23 +44,24 @@ type keyVal struct {
 }
 
 type pageData struct {
-	DisplayName        string
-	ContainerName      string
-	ParentContainers   []link
-	Subcontainers      []link
-	Spec               info.ContainerSpec
-	Stats              []*info.ContainerStats
-	MachineInfo        *info.MachineInfo
-	IsRoot             bool
-	ResourcesAvailable bool
-	CpuAvailable       bool
-	MemoryAvailable    bool
-	NetworkAvailable   bool
-	FsAvailable        bool
-	Root               string
-	DockerStatus       []keyVal
-	DockerDriverStatus []keyVal
-	DockerImages       []manager.DockerImage
+	DisplayName            string
+	ContainerName          string
+	ParentContainers       []link
+	Subcontainers          []link
+	Spec                   info.ContainerSpec
+	Stats                  []*info.ContainerStats
+	MachineInfo            *info.MachineInfo
+	IsRoot                 bool
+	ResourcesAvailable     bool
+	CpuAvailable           bool
+	MemoryAvailable        bool
+	NetworkAvailable       bool
+	FsAvailable            bool
+	CustomMetricsAvailable bool
+	Root                   string
+	DockerStatus           []keyVal
+	DockerDriverStatus     []keyVal
+	DockerImages           []manager.DockerImage
 }
 
 func init() {
diff --git a/pages/static/containers_js.go b/pages/static/containers_js.go
index e8d237f8..277deb82 100644
--- a/pages/static/containers_js.go
+++ b/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);
 }
 
@@ -696,12 +705,70 @@ 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.