From 6afa62ea1b12a8db252d13916731e1a6da11a1b0 Mon Sep 17 00:00:00 2001
From: "Susan L. Cline" <home4slc@apache.org>
Date: Tue, 12 Jul 2016 13:15:33 -0700
Subject: [PATCH] QUARKS-201 added table for metrics info and addl
 accessibility stuff

---
 .../servlets/ConsoleMetricsServlet.java       |  17 +-
 .../quarks/console/servlets/MetricsUtil.java  | 124 +++++++-
 .../servlets/webapp_content/html/index.html   |  34 ++-
 console/servlets/webapp_content/js/index.js   | 271 ++++++++++++++++--
 console/servlets/webapp_content/js/metrics.js |   7 +-
 .../images/show_metrics_in_table.png          | Bin 0 -> 3611 bytes
 .../webapp_content/resources/images/state.png | Bin 1775 -> 2055 bytes
 7 files changed, 410 insertions(+), 43 deletions(-)
 create mode 100644 console/servlets/webapp_content/resources/images/show_metrics_in_table.png

diff --git a/console/servlets/src/main/java/quarks/console/servlets/ConsoleMetricsServlet.java b/console/servlets/src/main/java/quarks/console/servlets/ConsoleMetricsServlet.java
index 212fd6cb..8e8740ca 100644
--- a/console/servlets/src/main/java/quarks/console/servlets/ConsoleMetricsServlet.java
+++ b/console/servlets/src/main/java/quarks/console/servlets/ConsoleMetricsServlet.java
@@ -48,6 +48,7 @@ public void doGet(HttpServletRequest request, HttpServletResponse response)
 		String[] metricNames;
 		String metricName = "";
 		boolean availableMetrics = false;
+		boolean getAllMetrics = false;
 		for(Map.Entry<String,String[]> entry : parameterMap.entrySet()) {
 			if (entry.getKey().equals("job")) {
 				jobIds = entry.getValue();
@@ -64,6 +65,11 @@ public void doGet(HttpServletRequest request, HttpServletResponse response)
 				if (getMetrics.length == 1) {
 					availableMetrics = true;
 				}
+			} else if (entry.getKey().equals("getAllMetrics")) {
+				String[] getAll = entry.getValue();
+				if (getAll.length == 1) {
+					getAllMetrics = true;
+				}
 			}
 		}
 
@@ -79,6 +85,15 @@ public void doGet(HttpServletRequest request, HttpServletResponse response)
 				return;
 			}
 			
+			if (getAllMetrics) {
+				MetricsGson gsonJob = MetricsUtil.getAllRateMetrics(jobId);
+				Gson gson = new Gson();
+		    	response.setContentType("application/json");
+		    	response.setCharacterEncoding("UTF-8");
+		    	response.getWriter().write(gson.toJson(gsonJob));
+				return;
+			}
+			
 			MetricsGson mGson = MetricsUtil.getMetric(jobId, metricName, meterIterator, counterIterator);
 			String jsonString = "";
 
@@ -88,8 +103,6 @@ public void doGet(HttpServletRequest request, HttpServletResponse response)
 	    	response.setCharacterEncoding("UTF-8");
 	    	
 	    	response.getWriter().write(jsonString);
-			
-
 		}
 	}
 
diff --git a/console/servlets/src/main/java/quarks/console/servlets/MetricsUtil.java b/console/servlets/src/main/java/quarks/console/servlets/MetricsUtil.java
index 6a5df50e..44e12c8d 100644
--- a/console/servlets/src/main/java/quarks/console/servlets/MetricsUtil.java
+++ b/console/servlets/src/main/java/quarks/console/servlets/MetricsUtil.java
@@ -104,21 +104,20 @@ static MetricsGson getAvailableMetricsForJob(String jobId, Iterator<ObjectInstan
 			    		OpMetric aMetric = gsonJob.new OpMetric();
 		    			aMetric.type = "meter";
 		    			aMetric.name = attributeInfo.getName();
-		    			// if the name of the metric is "RateUnit", get the value as well
-		    			if (aMetric.name.equals("RateUnit")) {				 
-		    				try {
-		    					aMetric.value = String.valueOf(mBeanServer.getAttribute(mObjName, aMetric.name));
-		    				} catch (AttributeNotFoundException | InstanceNotFoundException | MBeanException
-								| ReflectionException e) {
-		    				    logger.error("Exception caught while accessing MBean", e);
-		    				}
-		    			}
+				 
+	    				try {
+	    					aMetric.value = String.valueOf(mBeanServer.getAttribute(mObjName, aMetric.name));
+	    				} catch (AttributeNotFoundException | InstanceNotFoundException | MBeanException
+							| ReflectionException e) {
+	    				    logger.error("Exception caught while accessing MBean", e);
+	    				}
+		    			
 		    			// if the op associated with this metric is not in the job add it
 		    			if (!gsonJob.isOpInJob(opName)) {
 						    anOp = gsonJob.new Operator();
 						    gsonJob.addOp(anOp);
 						    anOp.opId = opName;
-						    counterOps.add(anOp); // why do I have this?
+						    counterOps.add(anOp);
 						    metrics = new ArrayList<OpMetric>();
 		    			} 
 		    			metrics.add(aMetric);
@@ -146,6 +145,12 @@ static MetricsGson getAvailableMetricsForJob(String jobId, Iterator<ObjectInstan
 	    		OpMetric aMetric = gsonJob.new OpMetric();
     			aMetric.type = "counter";
     			aMetric.name = attributeInfo.getName();
+				try {
+					aMetric.value = String.valueOf(mBeanServer.getAttribute(cObjName, aMetric.name));
+				} catch (AttributeNotFoundException | InstanceNotFoundException | MBeanException
+					| ReflectionException e) {
+				    logger.error("Exception caught while accessing MBean", e);
+				}
     			Operator theOp = gsonJob.getOp(opName1);
 				if (theOp == null) {
 					anOp = gsonJob.new Operator();
@@ -165,6 +170,105 @@ static MetricsGson getAvailableMetricsForJob(String jobId, Iterator<ObjectInstan
 		return gsonJob;
 
 	}
+	
+	/**
+	 * Get all the rate metrics, i.e, one minute rate, fifteen minute rate, mean rate, etc  for a job
+	 * @param job id (e.g, "JOB_0")
+	 * 
+	 * @return  all metrics for this job if there are any
+	 */
+	static MetricsGson getAllRateMetrics(String jobId) {
+		MetricsGson gsonJob = new MetricsGson();
+		gsonJob.setJobId(jobId);
+		
+		Iterator<ObjectInstance> meterIterator = MetricsUtil.getMeterObjectIterator(jobId);
+		while (meterIterator.hasNext()) {
+			ArrayList<OpMetric> metrics = null;
+			ObjectInstance meterInstance = (ObjectInstance)meterIterator.next();
+			ObjectName mObjName = meterInstance.getObjectName();
+			//i.e, quarks.providers.development:jobId=JOB-0,opId=OP_4,name=TupleRateMeter.quarks.oplet.JOB_0.OP_4,type=metric.meters
+			String jobName = mObjName.getKeyProperty("jobId");
+			String opName = mObjName.getKeyProperty("opId");
+			Operator anOp = null;
+
+			if (jobId.equals(jobName)) {
+				MBeanInfo mBeanInfo = null;
+			
+				try {
+					mBeanInfo = mBeanServer.getMBeanInfo(mObjName);
+				} catch (IntrospectionException | InstanceNotFoundException | ReflectionException e) {
+				    logger.error("Exception caught while getting MBeanInfo", e);
+				}
+				
+		    	for (MBeanAttributeInfo attributeInfo : mBeanInfo.getAttributes()) {
+		    		String name = attributeInfo.getName();
+    				OpMetric aMetric = gsonJob.new OpMetric();
+    				aMetric.name = name;
+    				aMetric.type = attributeInfo.getType();
+    				try {
+						aMetric.value = String.valueOf(mBeanServer.getAttribute(mObjName, name));
+    				} catch (AttributeNotFoundException | InstanceNotFoundException | MBeanException
+							| ReflectionException e) {
+					    logger.error("Exception caught while accessing MBean", e);
+    				}
+					 if (!gsonJob.isOpInJob(opName)) {
+					    anOp = gsonJob.new Operator();
+					    gsonJob.addOp(anOp);
+					    anOp.opId = opName;
+					    metrics = new ArrayList<OpMetric>();
+					    gsonJob.setOpMetrics(anOp, metrics);
+					 } else {
+						anOp = gsonJob.getOp(opName);
+						metrics = anOp.metrics;
+					 }
+					 metrics.add(aMetric);
+		    	}
+			}
+		}
+		
+		Iterator<ObjectInstance> counterIterator = MetricsUtil.getCounterObjectIterator(jobId);
+		while (counterIterator.hasNext()) {
+			ArrayList<OpMetric> metrics = null;
+			ObjectInstance counterInstance = (ObjectInstance)counterIterator.next();
+			ObjectName cObjName = counterInstance.getObjectName();
+			String opName1 = cObjName.getKeyProperty("opId");
+
+			Operator anOp = null;
+			if (!opName1.equals("")) {
+			MBeanInfo mBeanInfo = null;
+			try {
+				mBeanInfo = mBeanServer.getMBeanInfo(cObjName);
+			} catch (IntrospectionException | InstanceNotFoundException | ReflectionException e) {
+			    logger.error("Exception caught while getting MBeanInfo", e);
+			}
+
+	    	for (MBeanAttributeInfo attributeInfo : mBeanInfo.getAttributes()) {
+	    		OpMetric aMetric = gsonJob.new OpMetric();
+    			aMetric.type = "counter";
+    			aMetric.name = attributeInfo.getName();
+				try {
+					aMetric.value = String.valueOf(mBeanServer.getAttribute(cObjName, aMetric.name));
+				} catch (AttributeNotFoundException | InstanceNotFoundException | MBeanException
+					| ReflectionException e) {
+				    logger.error("Exception caught while accessing MBean", e);
+				}
+    			Operator theOp = gsonJob.getOp(opName1);
+				if (theOp == null) {
+					anOp = gsonJob.new Operator();
+					gsonJob.addOp(anOp);
+					anOp.opId = opName1;
+					metrics = new ArrayList<OpMetric>();
+					gsonJob.setOpMetrics(anOp, metrics);
+				} else {
+					// get the op
+					metrics = theOp.metrics;
+				}
+    			metrics.add(aMetric);
+	    	}
+			}
+		}
+		return gsonJob;
+	}
 	// format for metricName is "name:RateUnit,type:meter"
 	static MetricsGson getMetric(String jobId, String metricName, Iterator<ObjectInstance> metricIterator, Iterator<ObjectInstance> counterIterator) {
 
diff --git a/console/servlets/webapp_content/html/index.html b/console/servlets/webapp_content/html/index.html
index bc240fab..3122ae53 100644
--- a/console/servlets/webapp_content/html/index.html
+++ b/console/servlets/webapp_content/html/index.html
@@ -1,5 +1,6 @@
-<!DOCTYPE html>
-<html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
+   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
 <head>
 <title>Quarks Console</title>
 
@@ -12,6 +13,7 @@
 </head>
 
 <body>
+<div role="main">
 <div style='margin-left:15px; float:left;'>
 <img height='95' width='178' tabindex=0 alt="Quarks logo" title="Quarks logo" src="resources/images/small_quarks.png"/>
 </div>
@@ -31,20 +33,21 @@
 <option value="static">Static flow</option>
 <option value="flow">Tuple count</option>
 <option value="opletColor">Oplet kind</option>
-<!-- <option value='stags' disabled>Stream tags</option> -->
 </select>
 
 <div id="tagsDiv" style="visibility:hidden;margin-top: 5px;">
 
-	<label for='showTags'>Show tags:</label>
+	
 	<input type='checkbox' id='showTags' checked/>
+	<label for='showTags'>Show tags:</label>
 	<div>
-		<label for='showAllTags'>Show all tags:</label>
+		
 		<input type='checkbox' id='showAllTags' checked/>
+		<label for='showAllTags'>Show all tags:</label>
 		<button id="tagDialogBtn" type='button' disabled>Select individual tags ...</button>
 	</div>
 		<div id="dialog" title="Select one or more tags">
-			<label class="tagsLabel">Tag:</label>
+			<label for="tags" class="tagsLabel">Tag:</label>
 			<select id="tags" multiple></select>
 		</div>
 </div>
@@ -57,7 +60,10 @@
 </div>
 
 <div style='width: 300px; margin-left: 30px; clear:both;'>
-	<div id="showAll" tabindex=0 >View all oplet properties</div>
+	<div id="showAll" tabindex=0 >
+		<div>View all oplet properties</div>
+		<div style='font-size: 0.95em'>(opens a new window)</div> 
+	</div>
 	<div id="graphLegend" style='height: 600px;'></div>
 </div>
 	<div id="chart" style="float:right; margin-right: 100px; margin-top: -600px;"><div id="loading">Loading graph ...</div></div>
@@ -68,23 +74,29 @@
 <label class="metricsTitle">Metrics</label>
 </div>
 <div class="metricsControls">
-<label class="metricsLabel">Metrics:</label>
+<label for='metrics' class="metricsLabel">Metrics:</label>
 <select id="metrics"></select>
 <span id="rateUnit"></span>
 </div>
 
-<div class="metricsControls" style='width:250px;'>
-<label class="chartTypeLabel">Chart type:</label>
+<div class="metricsControls">
+<label for='mChartType' class="chartTypeLabel">Chart type:</label>
 <select id="mChartType">
 <option value='barChart' selected>Bar chart</option>
 <option value='lineChart' selected>Line chart</option>
 </select>
+</div>
+
+<div class="metricsControls">
 <span id="noLineChartWarning" style="visibility:hidden;" class="warningLabel">*Line charts are not available when you select a metric containing multiple oplets</span>
 </div>
+<div style='clear:left; padding-top: 10px; width: 140px;'>
+<img id="showMetricsTable" width="150" height="38" tabindex=0 alt="Show metrics table" src="resources/images/show_metrics_in_table.png"/>
+</div>
 
 <div id="metricsChart" style="clear:left;"></div>
 </div>
-
+</div>
 <script src="js/ext/d3.min.js" charset="utf-8"></script>
 <script src="js/ext/jquery-ui-1.11.4.custom/external/jquery/jquery.js"></script>
 <script src="js/ext/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
diff --git a/console/servlets/webapp_content/js/index.js b/console/servlets/webapp_content/js/index.js
index 1eae3b83..263bcdf0 100644
--- a/console/servlets/webapp_content/js/index.js
+++ b/console/servlets/webapp_content/js/index.js
@@ -27,6 +27,9 @@ var refreshedRowValues = [];
 var stateTooltip = null;
 var rowsTooltip = null;
 
+var tableMetrics = null;
+var metricsTooltip = null;
+
 var tagsColors = {};
 var propWindow;
 
@@ -250,7 +253,180 @@ var showAllLink = d3.select("#showAll")
 		displayRowsTooltip(true);
 	} 
 });
+
+var showMetricsTimeout = null;
+
+d3.select("#showMetricsTable")
+	.on('mouseover', function() {
+		showMetricsTooltip(d3.event);
+	})
+	.on('mouseout', function() {
+		hideMetricsTooltip();
+	})
+	.on('keydown', function() {
+		if (d3.event.keyCode && d3.event.keyCode === 13) {
+			showMetricsTooltip(d3.event);
+		} else if (d3.event.keyCode) {
+			hideMetricsTooltip();
+		}
+	});
+
+var showMetricsTooltip = function(event) {
+	if (showMetricsTimeout) {
+		clearTimeout(showMetricsTimeout);
+	}
+	var jobId = d3.select("#jobs").node().value;
+	var content = "<div style='margin:10px; width: 300px; max-height: 300px;overflow-x: scroll;'>";
+	
+	var tableMetrics = new Array();
+	
+	var queryString = "metrics?job=" + jobId + "&getAllMetrics=true";
+	var getEvent = function(){
+		return event;
+	}
+	d3.xhr(queryString, function(error, responseData) {
+		  if (error) {
+			  console.log("error retrieving metrics");
+		  }
+		  if (responseData) {
+			  if (responseData.response) {
+				  var evt = getEvent();
+				  tableMetrics = JSON.parse(responseData.response);
+				  
+					if (tableMetrics.ops.length === 0) {
+						content+= "<span>There are no metrics to display.</span>";
+					} else {
+						var opMetrics = tableMetrics.ops;
+						var countArr = new Array();
+						var rateArr = new Array();
+						opMetrics.forEach(function(op) {
+							var metrics = op.metrics;
+							var opId = op.opId;
+							metrics.forEach(function(tm) {
+								var rateIdx = tm["name"].toUpperCase().indexOf("RATE");
+								// if it starts with Rate it is RateUnit
+								if (opId) {
+									tm.opId = opId;
+								}
+								if (rateIdx !== -1 && rateIdx !== 0) {
+									rateArr.push(tm);
+								} else if (rateIdx !== 0){
+									countArr.push(tm);
+								}
+							});
+
+						});
+						
+						var rowIdx = 0;
+						content += "<table><tr><th tabindex=0>Operator name</th><th tabindex=0>Counter value</th></tr>";
+						
+						var sortFunc = function(objA, objB) {
+							var a = objA.opId;
+							var b = objB.opId;
+							
+							if (a < b) {
+								return -1;
+							} else if (a > b) {
+								return 1;
+							} else {
+								return 0;
+							}
+						};
+						
+						var startTr = "<tr><td align='center' tabindex=0>";
+						var startTd = "<td align='center' tabindex=0>";
+						var startTdLeft = "<td align='left' tabindex=0>";
+						var endTd = "</td>"
+						var endTr = "</tr>";
+						
+						if (countArr.length > 0) {
+							countArr.sort(sortFunc);
+
+							countArr.forEach(function(counter) {
+								rowIdx++;
+	
+								var opName = counter["opId"].substring("OP_".length, counter["opId"].length);
+								content +=  startTr + opName + endTd;
 	
+								content += startTd + counter["value"] + endTd + endTr;	
+							});
+							
+							content += "</table>";
+						}
+						
+						if (rateArr.length > 0) {
+							rateArr.sort(sortFunc);
+							content += "<table><tr><th tabindex=0>Operator name</th><th tabindex=0>Rate type</th><th tabindex=0>Rate value</th></tr>";
+							rateArr.forEach(function(rate) {
+								rowIdx++;
+								
+								var opName = rate["opId"].substring("OP_".length, rate["opId"].length);
+								content +=  startTr + opName + endTd;
+								var rateName = rate["name"];
+								if (rateName.toUpperCase().endsWith("RATE")) {
+									rateName = rateName.substring(0, rateName.length - "RATE".length);
+								}
+								content += startTdLeft + rateName + endTd;
+								var num = Number.parseFloat(rate["value"]);
+								content += startTd + num.toFixed(4) + endTd + endTr;	
+							});
+							content += "</table>";
+						}
+
+					}
+					var evtX = evt.srcElement.x;
+					var evtY = evt.srcElement.y;
+					content += "</div>";
+
+					metricsTooltip
+					.html(content)
+					.style("left", (evtX + 140) + "px")
+					.style("top", evtY +"px")
+					.style("padding-x", 22)
+					.style("padding-y", 10)
+					.style("display", "block");
+					
+					d3.select("#showMetricsTable").node().blur();
+					metricsTooltip.node().focus();
+					
+
+					metricsTooltip
+					.on("keydown", function() {
+						// Escape key closes the popup
+						if (d3.event.keyCode && d3.event.keyCode === 27) {
+							hideMetricsTooltip();
+						}
+					});
+					
+					metricsTooltip
+					.on("mouseover", function() {
+						if (showMetricsTimeout) {
+							clearTimeout(showMetricsTimeout);
+						}
+					});
+					
+					metricsTooltip
+					.on("mouseout", function() {
+						hideMetricsTooltip();
+					});
+				  
+			  }
+		  }
+	});
+};
+
+
+
+var hideMetricsTooltip = function() {
+	if (showMetricsTimeout) {
+		clearTimeout(showMetricsTimeout);
+	}
+	showMetricsTimeout = setTimeout(function() {
+			metricsTooltip
+			.style("display", "none");
+	}, 400);
+};
+
 var tooltip = d3.select("body")
 	.append("div")
 	.attr("class", "tooltip")
@@ -370,16 +546,27 @@ var displayRowsTooltip = function(newRequest) {
 		}
 	}
 };
-
+var showStateTimeout = null;
 
 var showStateTooltip = function(event) {
+	if (showStateTimeout) {
+		clearTimeout(showStateTimeout);
+	}
 	var jobId = d3.select("#jobs").node().value;
 	var jobObj = jobMap[jobId];
-	var content = "<div style='margin:10px'>";
+	var content = "<div style='margin:10px'><table>";
+	
+	var rowPfx = "stateData";
+	var startTd = "<td align='center' tabindex=0>";
+	var endTd = "</td>"
+	var endTr = "</tr>";
+	
+	var rowIdx = 0;
 
-	var kIdx = 0;
 	for (var key in jobObj) {
-		kIdx++;
+		rowIdx++;
+		content += "<tr>" + startTd;
+		
 		var idx = key.indexOf("State");
 		var errIdx = key.indexOf("Error");
 		
@@ -387,28 +574,36 @@ var showStateTooltip = function(event) {
 			var name = key.substring(0, idx) + " " + key.substring(idx, key.length).toLowerCase();
 			var val = jobObj[key];
 			var value = val.substring(0,1) + val.substring(1,val.length).toLowerCase();
-			content += "<div tabindex=0 id='sJobDiv" + kIdx + "'>" + name + ": " + value + "</div>";
-		} else if (errIdx !== -1) {
+			content += name + endTd;
+			content += "<td tabindex=0 id='" + rowPfx + rowIdx + "'>" + value + endTd + endTr;
+		}
+		
+		if (errIdx !== -1) {
 			var name = key.substring(0, errIdx) + " " + key.substring(errIdx, key.length).toLowerCase();
 			var val = jobObj[key];
 			var value = "";
 			if (val) {
 				value = val.substring(0,1) + val.substring(1,val.length).toLowerCase();
 			}
-			content += "<div tabindex=0 id='sJobDiv" + kIdx + "'>" + name + ": " + value + "</div>";
-		} else {
-			content += "<div tabindex=0 id='sJobDiv" + kIdx + "'>" + key + ": " + jobObj[key] + "</div>";
-		}
+			content += name + endTd;
+			content += "<td tabindex=0 id='" + rowPfx + rowIdx + "'>" + value + endTd + endTr;
+		} 
 		
+		if (idx === -1 && errIdx === -1) {
+			content += key + endTd;
+			content += "<td tabindex=0 id='" + rowPfx + rowIdx + "'>" + jobObj[key] + endTd + endTr;
+		}
+
 	}
+
 	var evtX = d3.event.srcElement.x;
 	var evtY = d3.event.srcElement.y;
 	content += "</div>";
-
+	
 	stateTooltip
 	.html(content)
 	.style("left", (evtX - 160) + "px")
-	.style("top", evtY +"px")
+	.style("top", evtY - 20 +"px")
 	.style("padding-x", 22)
 	.style("padding-y", 10)
 	.style("display", "block");
@@ -416,25 +611,56 @@ var showStateTooltip = function(event) {
 	d3.select("#stateImg").node().blur();
 	stateTooltip.node().focus();
 	
-	var keyDownNode = "#sJobDiv" + kIdx
+	var lastNode = "#" + rowPfx + rowIdx;
 	
-	d3.select(keyDownNode)
+	d3.select(lastNode)
 	.on("keydown", function() {
 		// the next tab closes the popup
 		if (d3.event.keyCode && d3.event.keyCode === 9) {
 			hideStateTooltip();
 		}
 	});
+
+
+	stateTooltip
+	.on("keydown", function() {
+		// Escape key closes the popup
+		if (d3.event.keyCode && d3.event.keyCode === 27) {
+			hideStateTooltip();
+		}
+	});
+	
+	stateTooltip
+	.on("mouseover", function() {
+		if (showStateTimeout) {
+			clearTimeout(showStateTimeout);
+		}
+	});
+	
+	stateTooltip
+	.on("mouseout", function() {
+		hideStateTooltip();
+	});
+	
 };
 
 var hideStateTooltip = function() {
-	stateTooltip
-	.style("display", "none");
-	//put focus back on the state image
+	if (showStateTimeout) {
+		clearTimeout(showStateTimeout);
+	}
+	
+	stateTooltip.node().blur();
+	// the focus needs to be put on the stateImg so that when the 
+	// tooltip is closed, the loss of focus on that retains the tab order.
+	// Now the next element to focus on is 'layers'
 	d3.select("#stateImg").node().focus();
+	
+	showStateTimeout = setTimeout(function() {
+		stateTooltip
+		.style("display", "none");
+	}, 400)
 };
 
-
 var makeRows = function() {
 	var nodes = refreshedRowValues !== null ? refreshedRowValues : sankey.nodes();
 	var theRows = [];
@@ -953,6 +1179,15 @@ var fetchJobsInfo = function() {
 	                                .style("background-color", "white")
 	                                .attr("class", "bshadow");
 	                                
+	                                metricsTooltip = d3.select("body")
+	                                .append("div")
+	                                .style("position", "absolute")
+	                                .style("z-index", "10")
+	                                .style("display", "none")
+	                                .style("background-color", "white")
+	                                .attr("class", "bshadow")
+	                                .attr("tabindex", "0");
+	                                
 	                                // check to see if a job is already selected and it's still in the jobMap object
 	                                var jobId = d3.select("#jobs").node().value;
 	                                var jobObj = jobMap[jobId];
diff --git a/console/servlets/webapp_content/js/metrics.js b/console/servlets/webapp_content/js/metrics.js
index f3931a00..5c3bd8c4 100644
--- a/console/servlets/webapp_content/js/metrics.js
+++ b/console/servlets/webapp_content/js/metrics.js
@@ -221,10 +221,9 @@ clearTupleMaxBucketIdx = function() {
 	max_bucket_idx = null;
 };
 
-
 metricFunction = function(selectedJobId, metricSelected, bUseWideWidth) {
 	stopLineChart();
-	// metric selected, i.e: name:Count,type:counter
+	// metricSelected, i.e: name:Count,type:counter
 	var queryString = "metrics?job=" + selectedJobId + "&metric=" + metricSelected;
 	
 	var metricName = metricSelected.split(",")[0].split(":")[1];
@@ -609,6 +608,10 @@ plotMetricChartType = function(jobId, metricSelected) {
 				     
 };
 
+/*
+ * This returns only the name and type of the metric
+ * i.e, name: Count, type: "counter" or type "meter"
+ */
 metricsAvailable = function(queryString, jobId, bIsNewJob) {
 	d3.xhr(queryString, function(error, responseData) {
 		  if (error) {
diff --git a/console/servlets/webapp_content/resources/images/show_metrics_in_table.png b/console/servlets/webapp_content/resources/images/show_metrics_in_table.png
new file mode 100644
index 0000000000000000000000000000000000000000..7062cb2e7c2d7373be196a927e9486c117bf76a4
GIT binary patch
literal 3611
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

literal 0
HcmV?d00001

diff --git a/console/servlets/webapp_content/resources/images/state.png b/console/servlets/webapp_content/resources/images/state.png
index 13a148895c4fcdb13abbb77c300667799dbc3ba9..08723c69bd6d67dcf3975a3789eff8383ff36190 100644
GIT binary patch
delta 986
zcmV<0110?L4Tli0JOqCL32;bRa{vGqB>(^xB>_oNB=7(L1E5JnK~zW$y;fOBRZ$dO
z=Q>x=jM9V+RFp+CQAVRykcI_)RA|vmLBmIrrT0lTd{hMW(L@6UVVKk_qLC=`Bk-r_
zqlt_%5-chbeNW%r?S0<6*K7J-(X$TRd-mDGTIcMu&plV+4_bfbu510Rcw@c-%>}7c
zfO-YP)JG_)BB+~&-@1BxPxjm2!Kp|NGtDc54HdUvDU}n+&$ba!nMIA;@0kl;+PYu+
zu!I>!*LQ;8Q3|oY21ObZp$Q6wcM9h1ZOg9};c&AgzPFKd5>UBq1^l^=&R1LYtDc*S
z{O%aTJrKE<N;-cLJ((b>+#r_7&8-DtMv-?d?^j;4IXX$O1k;V;q;y8Uw|8uUdc(#9
zw?nit?`cE8PlN6kXH^T9vqB?I?c{O0k_iD9U1A7ZhFnkFrkUOz@e0*!jhFF1Xg<G1
zeIA%uwR(jy3bX$qnan>ybFdI31m=cY)uTfzP*q+U&a8j+@1NX&_(f_lAr5;FN7&B%
zwXnsoeOo?_4L@4?3r<TchXY)?pJwD=rlc;(!ls|Gd3&hmkO|JXYib%z+jfy+6FWM(
zk&CvGJa&xq86GbU&Rp*3#GYAnorFVX6k4I`_O7A~^<Qf+Y5h^8<!r*|*OeHxcsG~;
zsgrXsZdrdZBy}liQ^24|88H=4OAa7;c)GTW->iZ%)I2Z8%iCv=zVSFlFDcMI{<?2W
zrMd}W=sQVYQqvbE*VR^|;@Ae!YY;xTh)e8*q^>DYMhv<S7=>r02T^`_rJkI2<d@i`
z8L@GA`>;gImFEh0vK_!#!?zDF&|}E>FWN_5ico*^=KclkD6{V~ZVsv*mw~K+*44hM
zM3b)`Pfl+|=e|QRWy@*3LT%(%z~6wThC2AZf7Y?0pSbP_#w;~8X_tP(<oxNB>X=NA
z_rmlYmz=z_QtyN0e&F=Qj@~Vck36zx6W1Jed}J*9ZQD8ZdJlzzb-{x_)8kzdqm))i
z1xkM^!#1hBNcK>m#t}K>8z5SGuQ2PPE}8)07MHNTMk12A07AH7JB`ykF`wpOZ%rtl
z9E;Scu+dQ(c(td5LtyNK537;nhW15?-71`SfNu-zvkeZRTptA5WE<M8SG3u_ngp{|
zb#RrP<^1Qh2O+2O+?~R#Wo|5Ig|_k|)vr?KYCms}|F##hAXZC+Rx7m4vpm=G6%3OL
zE%Y_AEs=ZPvnGON-Yv{7Zp$+)p*a87|5Eqt+Vjubjr(8ZpA;8=2QAP>2><{907*qo
IM6N<$g8CQXlK=n!

delta 704
zcmV;x0zdtS5bq7JJOqCNok>JNR7eeD{0{^SbOcOvv<qw%-7RDx)rSkuKgFsg-cTB=
zIJzJsF>#2?5_H30e0-J@3{p}p16hhs4_*uLX@vO(7mZ6VP785qz-0k8acpK_wGf*^
zYz7h|hHe&C3yCp^Tr~r4A$kyid;%){{{8!h(^G`xk<BE^hu42j9c5TExgDp4gyfMm
zVw5zW-@jwnFteB8+n3J_Hol<@+UB+l``0XDczW*^gN0`RgPfW+!;1c9hBwb1Gl<J6
zF@)w;pvcRpXfmAKxsl=2uFXKTS`7Yag$zv0%y2s~e0X%r8U{se1BT@K9)?@zPk|LW
zhQu)#+PQ))16hA8t*p+F(>;sf+vg7qw=bSyK$gFD>IlQb>z5g_I;S)I`2LmQ;QD27
z%Rmea3yqyU89<g!EKFvQR#HPz4C3$!iZDFAdy`>CRSwXyvp`EfqNq84U?(s%ZZj-s
zDQ9^3_yNP4=cr{bMv#IG%k7!X@b}Ljh6#lU4BD1<C<cG-UOtyWR#k%`qOg`>QgI53
z9Ec;Spu(VLXwG2n?gw_*_pe`2)L{6KnVE%QT16(q=DCv?M5W{yxOw>*M5SdJE*(3-
z@c8z1aBv^pvX)_9V+q55V9LF4Xb+0KnVT=e@g3_KX4e&feJLm=iDDtv+G5`6hYVjo
zePG}d5`lj!{{8DG12YRN0}~Sy!*^hUVrFG!U}NWC0QrEEn}-2e9;E5r%V!J%BI4i#
zgIs%H1Sv={GYbofWgszDHg*sN2An*+FecbC5C>Tv#1|5m0#O(MBS<k+P+0)0g~&lb
zseR~XVYLus3A#dZEXHOAP75iu6q{urGx1tTuBAA*ECZQ`HCuorZ~^3!A6X4POOVx(
mY$38{a@YielpI6x=>Y&4MDm>9iqyIQ0000<MNUMnLSTX+&NJZv