Improving dashboard eureka integration

- Refactoring code
- Grouping instances by services
- Added a new group for the first instance of each server
- Updating url on chaning stream type
- Update title for with application name

hystrix-dashboard/src/main/webapp/index.html

@@ -13,8 +13,8 @@
 
 	<script>
 		var streams = [];
-		function addStream() {
-			if($('#stream').val().length > 0) {
+		function addStream () {
+			if ($('#stream').val().length > 0) {
 				var s = {
 					name: $('#title').val(),
 					stream: $('#stream').val(),
@@ -32,74 +32,110 @@
 				$('#message').html("The 'stream' value is required.");
 			}
 		}
-		function monitorStreams() {
+
+		function monitorStreams () {
 			if (streams.length) {
-				location.href= './monitor/monitor.html?streams=' + encodeURIComponent(JSON.stringify(streams));
+				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) {
-					monitorStreams();
-				}
-			});
-		});
 
-		$(document).ready(function(){
+		var mapInstanceToOption = function (instance) {
+			var ipAddr = $(instance).find("ipAddr")[0].innerHTML;
+			var port = $(instance).find("port")[0].innerHTML;
+			var appName = $(instance).find("app")[0].innerHTML;
+
+			return '<option value="' + ipAddr + ':' + port + '" data-appname="' + appName + '">' + appName + ' on ' + ipAddr + '</option>';
+		};
 
-				$('#eurekaURL').on('input',function(e){
-					url = window.location.pathname + "eureka?url=" + $('#eurekaURL').val()
-					$.get(url,function( data ) {
+		var updateStreamUrlForEurekaApp = function (evt) {
+			var $this = $('#eurekaApp'),
+					$value = $this.val();
 
-				   		$(data.children).find("application").each(function(index,item){
-					   	  appName = $(item).find("name")[0].innerHTML
-
-					   	  ip = null;
-						  $($(item).find("instance")).each(function(i,d){
-						  	 ip = $(d).find("ipAddr")[0].innerHTML;	
-						  });
+			if ($this.find("option:selected").is(':disabled')) {
+				return;
+			}
 
-					   	  $('#eurekaApp').append($("<option></option>")
-					                    .attr("value",ip)
-					                    .text(appName)); 
+			var appName = $this.find("option:selected").data("appname");
+
+			var streamType = $('input[name=streamType]:checked').val();
+			$('#stream').val("http://" + $value + "/" + streamType + "?cluster=default");
+			$("#title").val(appName);
+		};
+
+		var fetchEurekaAppList = function (e) {
+			var url = window.location.pathname + "eureka?url=" + $('#eurekaURL').val();
+			var $eurekaApp = $('#eurekaApp');
+
+			$.get(url, function (data) {
+				$eurekaApp.html('<option selected disabled>Choose here</option>'); // clear options
+
+				var optionsByApp = _($(data).find("application")).chain()
+																 .map(function (application) {
+																	 return $(application).find("instance")[0];
+																 })
+																 .map(mapInstanceToOption)
+																 .reduce(function (html, option) { return html + option; })
+																 .value();
+
+				var optionsByInstances = _($(data).find("application")).chain()
+																	   .map(function (application) {
+																		   var appName = $(application).find("name")[0].innerHTML;
+																		   var appInstances = $(application).find("instance");
+																		   var optionsForInstances = _($(appInstances)).chain()
+																													   .map(mapInstanceToOption)
+																													   .reduce(function (html, option) {return html + option;})
+																													   .value();
+
+																		   return '<optgroup label="' + appName + '">' + optionsForInstances + '</optgroup>';
+																	   })
+																	   .reduce(function (html, opt) { return html + opt; })
+																	   .value();
+
+				var allOptions = '<optgroup label="Applications">' + optionsByApp + "</optgroup>" + optionsByInstances;
+
+				$eurekaApp.html(allOptions);
+				updateStreamUrlForEurekaApp();
+			});
+		};
 
-					      $('#eurekaApp').on('change click',function(item){
-					          var $this = $(this),
-					          $value = $this.val();
-					          streamType = $('input[name=streamType]:checked').val()
-					          $('#stream').val("http://" + $value +  ":8080/" + streamType + "?cluster=default");
-					      });
+		$(document).ready(function () {
+			$('#stream').keypress(function (e) {
+				if (e.which == 13) {
+					monitorStreams();
+				}
+			});
 
-					   });
-					});		
+			$('#eurekaURL').on('input', fetchEurekaAppList);
 
-				});
-
-	 	});
+			// setup handlers for selecting an application
+			$("#eurekaApp").on('change click', updateStreamUrlForEurekaApp);
 
+			// setup handler for stream type changing
+			$("[name='streamType']").on('change', updateStreamUrlForEurekaApp);
+		});
 	</script>
 </head>
 <body>
 <div style="width:800px;margin:0 auto;">
-	
+
 	<center>
 	<img width="264" height="233" src="./images/hystrix-logo.png">
 	<br>
 	<br>
-	
+
 	<h2>Hystrix Dashboard</h2>
-	
+
 	Eureka URL: <input id="eurekaURL" name="eurekaURL" class="eurekaURL" type="text" size="42" placeholder="http://hostname:8080/eureka/v2/apps"> <br>
 
-	Eureka Application: 
+	Eureka Application:
 	<select id="eurekaApp" name="eurekaApp" class="eurekaApp">
 		<option selected disabled>Choose here</option>
-	</select> 
+	</select>
 
 	Stream Type:
-	Hystrix <input type="radio" name="streamType" value="hystrix.stream"> 
+	Hystrix <input type="radio" name="streamType" value="hystrix.stream">
 	Turbine <input type="radio" name="streamType" value="turbine.stream" checked> <br><br>
 
 	<input id="stream" type="textfield" size="120" placeholder="http://hostname:port/turbine/turbine.stream"></input>
@@ -110,8 +146,8 @@ <h2>Hystrix Dashboard</h2>
 	<br>
 	<i>Single Hystrix App:</i> http://hystrix-app:port/hystrix.stream
 	<br><br>
-	Delay: <input id="delay" type="textfield" size="10" placeholder="2000"></input>ms 
-	&nbsp;&nbsp;&nbsp;&nbsp; 
+	Delay: <input id="delay" type="textfield" size="10" placeholder="2000"></input>ms
+	&nbsp;&nbsp;&nbsp;&nbsp;
 	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>
@@ -122,7 +158,7 @@ <h2>Hystrix Dashboard</h2>
 	<button onclick="monitorStreams()">Monitor Streams</button>
 	<br><br>
 	<div id="message" style="color:red"></div>
-	
+
 	</center>
 </div>
 </body>