Merge pull request #959 from sasrin/monitor

Enable Hystrix Dashboard to monitor multiple independent applications
Netflix · Nov 13, 2015 · fd570ad · fd570ad
2 parents 985a92d + b8e3247
commit fd570ad
Show file tree

Hide file tree

Showing 9 changed files with 208 additions and 143 deletions.
diff --git a/hystrix-dashboard/src/main/webapp/components/hystrixCommand/hystrixCommand.css b/hystrix-dashboard/src/main/webapp/components/hystrixCommand/hystrixCommand.css
@@ -110,7 +110,7 @@
 
 .dependencies div.monitor {
 	width: 245px; /* we want a fixed width instead of percentage as I want the boxes to be a set size and then fill in as many as can fit in each row ... this allows 3 columns on an iPad */
-	height: 155px;
+	height: 160px;
 }
 
 .dependencies .success {

diff --git a/hystrix-dashboard/src/main/webapp/components/hystrixCommand/hystrixCommand.js b/hystrix-dashboard/src/main/webapp/components/hystrixCommand/hystrixCommand.js
@@ -19,14 +19,15 @@
 	 * 
 	 * Publish this externally as "HystrixCommandMonitor"
 	 */
-	window.HystrixCommandMonitor = function(containerId, args) {
+	window.HystrixCommandMonitor = function(index, containerId, args) {
 
 		var self = this; // keep scope under control
 		self.args = args;
 		if(self.args == undefined) {
 			self.args = {};
 		}
 
+		this.index = index;
 		this.containerId = containerId;
 
 		/**
@@ -66,6 +67,7 @@
 		/* public */ self.eventSourceMessageListener = function(e) {
 			var data = JSON.parse(e.data);
 			if(data) {
+				data.index = self.index;
 				// check for reportingHosts (if not there, set it to 1 for singleHost vs cluster)
 				if(!data.reportingHosts) {
 					data.reportingHosts = 1;
@@ -91,7 +93,7 @@
 			// assert all the values we need
 			validateData(data);
 			// escape string used in jQuery & d3 selectors
-			data.escapedName = data.name.replace(/([ !"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g,'\\$1');
+			data.escapedName = data.name.replace(/([ !"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g,'\\$1') + '_' + data.index;
 			// do math
 			convertAllAvg(data);
 			calcRatePerSecond(data);

diff --git a/...ashboard/src/main/webapp/components/hystrixCommand/templates/hystrixCircuitContainer.html b/...ashboard/src/main/webapp/components/hystrixCommand/templates/hystrixCircuitContainer.html
@@ -1,4 +1,4 @@
-<div class="monitor" id="CIRCUIT_<%= name %>" style="position:relative;">
+<div class="monitor" id="CIRCUIT_<%= name + '_' + index %>" style="position:relative;">
 	<%
 		var displayName = name;
 		var toolTip = "";
@@ -8,12 +8,12 @@
 		}
 	%>
 
-	<div id="chart_CIRCUIT_<%= name %>" class="chart" style="position:absolute;top:0px;left:0; float:left; width:100%; height:100%;"></div>
+	<div id="chart_CIRCUIT_<%= name + '_' + index %>" class="chart" style="position:absolute;top:0px;left:0; float:left; width:100%; height:100%;"></div>
     <div style="position:absolute;top:0;width:100%;height:15px;opacity:0.8; background:white;">
     	<% if(includeDetailIcon) { %>
     	<p class="name" <%= toolTip %> style="padding-right:16px">
     		<%= displayName %>
-    		<a href="../dependencies/command.jsp?name=<%= name %>"><img src="../components/hystrixCommand/magnifying-glass-icon-20.png" height="14px" width="14px" border="0" style="position: absolute; right:0px;"></a>
+    		<a href="../dependencies/command.jsp?name=<%= name + '_' + index %>"><img src="../components/hystrixCommand/magnifying-glass-icon-20.png" height="14px" width="14px" border="0" style="position: absolute; right:0px;"></a>
     	</p>
     	<% }  else { %>
     	<p class="name" <%= toolTip %>><%= displayName %></p>
@@ -22,19 +22,19 @@
 	<div style="position:absolute;top:15px;; opacity:0.8; background:white; width:100%; height:95%;">
 		<div class="monitor_data"></div>
 	</div>
-	<div id="graph_CIRCUIT_<%= name %>" class="graph" style="position:absolute;top:25px;left:0; float:left; width:140px; height:62px;"></div>
+	<div id="graph_CIRCUIT_<%= name + '_' + index %>" class="graph" style="position:absolute;top:25px;left:0; float:left; width:140px; height:62px;"></div>
 
 	<script>
 		var y = 200;
 		/* escape with two backslashes */
-		var vis = d3.select("#chart_CIRCUIT_<%= name.replace(/([ !"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g,'\\\\$1') %>").append("svg:svg").attr("width", "100%").attr("height", "100%");
+		var vis = d3.select("#chart_CIRCUIT_<%= name.replace(/([ !"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g,'\\\\$1') + '_' + index %>").append("svg:svg").attr("width", "100%").attr("height", "100%");
 		/* add a circle -- we don't use the data point, we set it manually, so just passing in [1] */
 		var circle = vis.selectAll("circle").data([1]).enter().append("svg:circle");
 		/* setup the initial styling and sizing of the circle */
 		circle.style("fill", "green").attr("cx", "30%").attr("cy", "30%").attr("r", 5);
 
 		/* add the line graph - it will be populated by javascript, no default to show here */
 		/* escape with two backslashes */
-		var graph = d3.select("#graph_CIRCUIT_<%= name.replace(/([ !"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g,'\\\\$1') %>").append("svg:svg").attr("width", "100%").attr("height", "100%");
+		var graph = d3.select("#graph_CIRCUIT_<%= name.replace(/([ !"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g,'\\\\$1') + '_' + index %>").append("svg:svg").attr("width", "100%").attr("height", "100%");
 	</script>
 </div>
diff --git a/hystrix-dashboard/src/main/webapp/components/hystrixThreadPool/hystrixThreadPool.js b/hystrix-dashboard/src/main/webapp/components/hystrixThreadPool/hystrixThreadPool.js
@@ -19,10 +19,11 @@
 	 * 
 	 * Publish this externally as "HystrixThreadPoolMonitor"
 	 */
-	window.HystrixThreadPoolMonitor = function(containerId) {
+	window.HystrixThreadPoolMonitor = function(index, containerId) {
 
 		var self = this; // keep scope under control
 
+		this.index = index;
 		this.containerId = containerId;
 
 		/**
@@ -61,6 +62,7 @@
 		/* public */ self.eventSourceMessageListener = function(e) {
 			var data = JSON.parse(e.data);
 			if(data) {
+				data.index = self.index;
 				// check for reportingHosts (if not there, set it to 1 for singleHost vs cluster)
 				if(!data.reportingHosts) {
 					data.reportingHosts = 1;
@@ -83,7 +85,7 @@
 		function preProcessData(data) {
 			validateData(data);
 			// escape string used in jQuery & d3 selectors
-			data.escapedName = data.name.replace(/([ !"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g,'\\$1');
+			data.escapedName = data.name.replace(/([ !"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g,'\\$1') + '_' + data.index;
 			// do math
 			converAllAvg(data);
 			calcRatePerSecond(data);

diff --git a/...rd/src/main/webapp/components/hystrixThreadPool/templates/hystrixThreadPoolContainer.html b/...rd/src/main/webapp/components/hystrixThreadPool/templates/hystrixThreadPoolContainer.html
@@ -1,4 +1,4 @@
-<div class="monitor" id="THREAD_POOL_<%= name %>" style="position:relative;">
+<div class="monitor" id="THREAD_POOL_<%= name + '_' + index %>" style="position:relative;">
 
 	<%
 		var displayName = name;
@@ -9,7 +9,7 @@
 		}
 	%>
 
-	<div id="chart_THREAD_POOL_<%= name %>" class="chart" style="position:absolute;top:0px;left:0; float:left; width:100%; height:100%;"></div>
+	<div id="chart_THREAD_POOL_<%= name + '_' + index %>" class="chart" style="position:absolute;top:0px;left:0; float:left; width:100%; height:100%;"></div>
 	<div style="position:absolute;top:0;width:100%;height:15px;opacity:0.8; background:white;"><p class="name" <%= toolTip %>><%= displayName %></p></div>
 	<div style="position:absolute;top:15px;; opacity:0.8; background:white; width:100%; height:95%;">
 		<div class="monitor_data"></div>
@@ -24,7 +24,7 @@
 		<% } %>
 		var y = 200;
 		/* escape with two backslashes */
-		var vis = d3.select("#chart_THREAD_POOL_<%= name.replace(/([ !"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g,'\\\\$1') %>").append("svg:svg").attr("width", "100%").attr("height", "100%");
+		var vis = d3.select("#chart_THREAD_POOL_<%= name.replace(/([ !"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g,'\\\\$1') + '_' + index %>").append("svg:svg").attr("width", "100%").attr("height", "100%");
 		/* add a circle -- we don't use the data point, we set it manually, so just passing in [1] */
 		var circle = vis.selectAll("circle").data([1]).enter().append("svg:circle");
 		/* setup the initial styling and sizing of the circle */

diff --git a/hystrix-dashboard/src/main/webapp/css/global.css b/hystrix-dashboard/src/main/webapp/css/global.css
@@ -12,14 +12,18 @@ img {
 	height: auto;
 }
 
-
 #header {
 	background: #FFFFFF url(../images/hystrix-logo-tagline-tiny.png) no-repeat scroll 99% 0%;
 	height: 65px;
 	margin-bottom: 5px;
 }
 
-#header h2 {
+#streamHeader {
+  height: 65px;
+  margin-bottom: 5px;
+}
+
+#streamHeader  h2 {
 	float:left;
 	color: black;
 	position:relative;
@@ -56,7 +60,6 @@ img {
 	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
 }
 
-
 @media screen and (min-width: 1500px) {
 
 	#header .header_nav {
@@ -68,4 +71,8 @@ img {
 		background: #FFFFFF url(../images/hystrix-logo-tagline-tiny.png) no-repeat scroll 99% 50%;
 		height: 65px;
 	}
+
+	#streamHeader {
+		height: 65px;
+	}
 }
diff --git a/hystrix-dashboard/src/main/webapp/index.css b/hystrix-dashboard/src/main/webapp/index.css
@@ -0,0 +1,16 @@
+table {
+	width: 80%;
+	border-collapse: collapse;
+}
+
+table, td {
+	border: 1px solid #DBDBDB;
+}
+
+table tr:nth-child(even) {
+	background-color: #ECECEC;
+}
+
+table tr:nth-child(odd) {
+	background-color: #FFFFFF;
+}
diff --git a/hystrix-dashboard/src/main/webapp/index.html b/hystrix-dashboard/src/main/webapp/index.html
@@ -4,32 +4,43 @@
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 <title>Hystrix Dashboard</title>
 
+	<!-- Our custom CSS -->
+	<link rel="stylesheet" type="text/css" href="./index.css" />
+
 	<!-- Javascript to monitor and display -->
 	<script src="./js/jquery.min.js" type="text/javascript"></script>
-
+	<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
+
 	<script>
-		function sendToMonitor() {
-			
+		var streams = [];
+		function addStream() {
 			if($('#stream').val().length > 0) {
-				var url = "./monitor/monitor.html?stream=" + encodeURIComponent($('#stream').val()) + "";
-				if($('#delay').val().length > 0) {	
-					url += "&delay=" + $('#delay').val();
-				}
-				if($('#title').val().length > 0) {	
-					url += "&title=" + encodeURIComponent($('#title').val());
-				}
-                if($('#authorization').val().length > 0) {
-                    url += "&authorization=" + encodeURIComponent($('#authorization').val());
-                }
-				location.href= url;
+				var s = {
+					name: $('#title').val(),
+					stream: $('#stream').val(),
+					auth: $('#authorization').val(),
+					delay: $('#delay').val()
+				};
+
+				streams.push(s);
+				$('#streams').html('<table>' + _.reduce(streams, function(html, s) {
+					return html + '<tr><td>' + s.name + '</td><td>' + s.stream + '</td></tr>';
+				}, '') + '</table>');
 			} else {
 				$('#message').html("The 'stream' value is required.");
 			}
 		}
+		function monitorStreams() {
+			if (streams.length) {
+				location.href= './monitor/monitor.html?streams=' + encodeURIComponent(JSON.stringify(streams));
+			} else {
+				$('#message').html("Add Streams to monitor, before starting to monitor.");
+			}
+		}
 		$(document).ready(function() {
 			$('#stream').keypress(function(e) {
 				if(e.which == 13) {
-					sendToMonitor();
+					monitorStreams();
 				}
 			});
 		});
@@ -57,7 +68,11 @@ <h2>Hystrix Dashboard</h2>
 	Title: <input id="title" type="textfield" size="60" placeholder="Example Hystrix App"></input><br><br>
     Authorization: <input id="authorization" type="textfield" size="60" placeholder="Basic Zm9vOmJhcg=="></input><br>
 	<br>
-	<button onclick="sendToMonitor()">Monitor Stream</button>
+	<button onclick="addStream()">Add Stream</button>
+	<br><br>
+	<ol id='streams'></ol>
+	<br><br>
+	<button onclick="monitorStreams()">Monitor Streams</button>
 	<br><br>
 	<div id="message" style="color:red"></div>