Skip to content

Commit

Permalink
Merge pull request #1336 from kennedyoliveira/feature/dashboard_impro…
Browse files Browse the repository at this point in the history 
…viments

Hystrix Dashboard Eureka integration improvements
  • Loading branch information
@mattrjacobs
mattrjacobs authored Sep 8, 2016
2 parents fe83e49 + 417b249 commit d838f4d
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 47 deletions.
2 changes: 1 addition & 1 deletion hystrix-dashboard/src/main/webapp/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
table {
width: 80%;
width: 100%;
border-collapse: collapse;
}

Expand Down
142 changes: 96 additions & 46 deletions hystrix-dashboard/src/main/webapp/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand All @@ -24,82 +24,132 @@

streams.push(s);
$('#streams').html('<table>' + _.reduce(streams, function(html, s) {
return html + '<tr><td>' + s.name + '</td><td>' + s.stream + '</td></tr>';
return html + '<tr><td>' + s.name + '</td><td>' + s.stream + '</td> <td><a href="#" onclick="removeStream(this);">Remove</a></td> </tr>';
}, '') + '</table>');

$('#message').html("");
} else {
$('#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 removeStream = function(element) {
var $tr = $(element).closest("tr");
var url = $tr.find("td:nth-child(2)").text();

for (var i = 0; i < streams.length; i++) {
if(streams[i].stream === url) {
streams.splice(i, 1);
break;
}
}

$tr.remove();
};

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>
Expand All @@ -110,8 +160,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>
Expand All @@ -122,7 +172,7 @@ <h2>Hystrix Dashboard</h2>
<button onclick="monitorStreams()">Monitor Streams</button>
<br><br>
<div id="message" style="color:red"></div>

</center>
</div>
</body>
Expand Down

0 comments on commit d838f4d

Please sign in to comment.