Merging Netflix/Hystrix#959.

Streams, which breakerbox doesn't use, but the concept is nice.
yammer · Nov 23, 2015 · 5205655 · 5205655
1 parent a160fb0
commit 5205655
Show file tree

Hide file tree

Showing 9 changed files with 244 additions and 182 deletions.
diff --git a/breakerbox-dashboard/src/main/resources/assets/components/hystrixCommand/hystrixCommand.css b/breakerbox-dashboard/src/main/resources/assets/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/breakerbox-dashboard/src/main/resources/assets/components/hystrixCommand/hystrixCommand.js b/breakerbox-dashboard/src/main/resources/assets/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/...rc/main/resources/assets/components/hystrixCommand/templates/hystrixCircuitContainer.html b/...rc/main/resources/assets/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 = "";
@@ -7,13 +7,13 @@
 			toolTip = "title=\"" + name + "\"";
 		}
 	%>
-	
-	<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/...box-dashboard/src/main/resources/assets/components/hystrixThreadPool/hystrixThreadPool.js b/...box-dashboard/src/main/resources/assets/components/hystrixThreadPool/hystrixThreadPool.js
@@ -19,7 +19,7 @@
 	 * 
 	 * Publish this externally as "HystrixThreadPoolMonitor"
 	 */
-	window.HystrixThreadPoolMonitor = function(containerId) {
+	window.HystrixThreadPoolMonitor = function(index, containerId) {
 
 		var self = this; // keep scope under control
 
@@ -61,6 +61,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 +84,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/...n/resources/assets/components/hystrixThreadPool/templates/hystrixThreadPoolContainer.html b/...n/resources/assets/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;
@@ -8,8 +8,8 @@
 			toolTip = "title=\"" + name + "\"";
 		}
 	%>
-	
-	<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/breakerbox-dashboard/src/main/resources/assets/css/global.css b/breakerbox-dashboard/src/main/resources/assets/css/global.css
@@ -12,14 +12,13 @@ img {
 	height: auto;
 }
 
-
-#header {
-	background: #FFFFFF url(https://raw.github.com/wiki/Netflix/Hystrix/images/hystrix-logo-tagline-tiny.png) no-repeat scroll 99% 0%;
-	height: 65px;
-	margin-bottom: 5px;
+#streamHeader {
+    height: 65px;
+    margin-bottom: 5px;
 }
 
-#header h2 {
+
+#streamHeader  h2 {
 	float:left;
 	color: black;
 	position:relative;
@@ -63,9 +62,8 @@ img {
 		top:13px;
 		right:130px;
 	}
-
-	#header {
-		background: #FFFFFF url(https://raw.github.com/wiki/Netflix/Hystrix/images/hystrix-logo-tagline-tiny.png) no-repeat scroll 99% 50%;
+
+	#streamHeader {
 		height: 65px;
 	}
 }