Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Hystrix Dashboard Eureka integration improvements #1336

Merged
merged 2 commits into from
Sep 8, 2016
Merged

Hystrix Dashboard Eureka integration improvements #1336

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
86760bd
Improving dashboard eureka integration
kennedyoliveira Aug 28, 2016
417b249
Add remove button for streams
kennedyoliveira Aug 28, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion hystrix-dashboard/src/main/webapp/index.css
View file
Open in desktop
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
Open in desktop
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