Skip to content

Commit

Permalink
Issue #96: Rework UI landing page with a combobox of cached endpoints…
Browse files Browse the repository at this point in the history 
… and no nav bar.
  • Loading branch information
@mk23
mk23 committed Mar 29, 2016
1 parent 4ad35eb commit 3f70258
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 60 deletions.
1 change: 1 addition & 0 deletions src/main/resources/assets/css/jmxproxy.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ div.popover-content {
word-wrap: break-word;
}

#endpoint-combo,
#mbean-title,
#attrib-name {
font-weight: bold;
Expand Down
79 changes: 35 additions & 44 deletions src/main/resources/assets/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,54 +11,19 @@
<link href="img/favicon.ico" rel="icon">
</head>
<body class="fuelux">
<div id="endpoint-select" class="nav navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<form id="endpoint-insert" class="navbar-form navbar-default hidden" autocomplete="off">
<div class="form-group">
<input id="endpoint-input" class="form-control" type="text" placeholder="hostname:port" pattern="^(?:[a-zA-Z][a-zA-Z0-9\.\-]+[a-zA-Z0-9]|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}):\d+$" required>
</div>
</form>
<ul id="endpoint-choice" class="nav navbar-default hidden">
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">select endpoint <span class="caret"></span></a>
<ul id="endpoint-list" class="dropdown-menu" role="menu"></ul>
<li>
</ul>
</div>
</div>
</div>
<div id="endpoint-navbar" class="nav navbar-inverse hidden" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand"><i class="fa fa-coffee"></i> <span id="navbar-label"></span></div>
</div>
<div class="collapse navbar-collapse">
<ul id="endpoint-tabs" class="nav navbar-nav" role="tablist">
<li><a href="#overview" data-toggle="tab" role="tab"><i class="fa fa-dashboard"></i> Overview </a></li>
<li><a href="#memory" data-toggle="tab" role="tab"><i class="fa fa-link"></i> Memory</a></li>
<li><a href="#threads" data-toggle="tab" role="tab"><i class="fa fa-tasks"></i> Threads</a></li>
<li><a href="#classes" data-toggle="tab" role="tab"><i class="fa fa-cubes"></i> Classes</a></li>
<li><a href="#summary" data-toggle="tab" role="tab"><i class="fa fa-info-circle"></i> Summary</a></li>
<li><a href="#mbeans" data-toggle="tab" role="tab"><i class="fa fa-list-ul"></i> MBeans</a></li>
</ul>
</div>
</div>
</div>

<div id="endpoint-alert" class="alert alert-danger alert-block fade" role="alert">
<button type="button" class="close">
<span aria-hidden="true">&times;</span>
</button>
<i class="fa fa-warning"></i>
<span id="endpoint-error"></span>
</div>

<div id="welcome-banner" class="banner-container">
<div class="text-info">
<h1><i class="fa fa-coffee"></i> JMXProxy</h1>
<hr>
<h3>&#X2196; please select an endpoint</h3>
<h3>please {action} an endpoint</h3>
<div id="endpoint-combo" class="col-lg-2 col-lg-offset-5 input-group input-append dropdown combobox">
<input class="form-control" type="text" placeholder="hostname:port" pattern="^(?:[a-zA-Z][a-zA-Z0-9\.\-]+[a-zA-Z0-9]|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}):\d+$" required>
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
</ul>
</div>
</div>
</div>
</div>

Expand Down Expand Up @@ -95,6 +60,32 @@ <h3 class="modal-title">Endpoint Authentication</h3>
<div class="loader" data-initialize="loader"></div>
</div>

<div id="endpoint-navbar" class="nav navbar-inverse navbar-fixed-top hidden" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand"><i class="fa fa-coffee"></i> <span id="navbar-label"></span></div>
</div>
<div class="collapse navbar-collapse">
<ul id="endpoint-tabs" class="nav navbar-nav" role="tablist">
<li><a href="#overview" data-toggle="tab" role="tab"><i class="fa fa-dashboard"></i> Overview </a></li>
<li><a href="#memory" data-toggle="tab" role="tab"><i class="fa fa-link"></i> Memory</a></li>
<li><a href="#threads" data-toggle="tab" role="tab"><i class="fa fa-tasks"></i> Threads</a></li>
<li><a href="#classes" data-toggle="tab" role="tab"><i class="fa fa-cubes"></i> Classes</a></li>
<li><a href="#summary" data-toggle="tab" role="tab"><i class="fa fa-info-circle"></i> Summary</a></li>
<li><a href="#mbeans" data-toggle="tab" role="tab"><i class="fa fa-list-ul"></i> MBeans</a></li>
</ul>
</div>
</div>
</div>

<div id="endpoint-alert" class="alert alert-danger alert-block fade" role="alert">
<button type="button" class="close">
<span aria-hidden="true">&times;</span>
</button>
<i class="fa fa-warning"></i>
<span id="endpoint-error"></span>
</div>

<div class="tab-content">
<div id="overview" class="tab-pane fade" role="tabpanel">
<div class="container">
Expand Down
103 changes: 87 additions & 16 deletions src/main/resources/assets/js/jmxproxy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -833,8 +833,33 @@ $(document).ready(function() {
}
});

$('#endpoint-combo')
.on('changed.fu.combobox', function(e, data) {
if ($(this).data('trashing')) {
$('input', this)
.val('')
.focus();

elem = $(this).find('li[data-value="'+data.text+'"]');
if (_.contains(jmxproxyConf.allowed_endpoints, data.text)) {
elem.find('span').remove();
} else {
elem.remove();
}

$('#endpoint-input')
if ($('#endpoint-combo ul li').length == 0) {
$('#endpoint-combo button').prop('disabled', true);
}
} else if (!$(this).data('changing')) {
console.log($(this).data('changing'));
endpointHost = endpointHostClass(prefix, data.text);
$('#endpoint-combo').data('changing', false);
}
})
.data('trashing', false)
.data('changing', false);

$('#endpoint-combo input')
.keypress(function(e) {
if (e.keyCode == 13 && this.validity.valid) {
endpointHost = endpointHostClass(prefix, $(this).val());
Expand All @@ -844,6 +869,12 @@ $(document).ready(function() {
$(this).parent()
.toggleClass('has-error', !this.validity.valid)
.toggleClass('has-success', this.validity.valid);

$('#endpoint-combo').data('changing', $(this).val() != '');
})
.blur(function(e) {
console.log('hi');
$('#endpoint-combo').data('changing', false);
});

$('#endpoint-creds').submit(function() {
Expand Down Expand Up @@ -906,33 +937,73 @@ $(document).ready(function() {

$.getJSON(prefix+'/jmxproxy/config', function(data) {
jmxproxyConf = data;
bannerAction = $('#welcome-banner h3').text();

$.getJSON(prefix+'/jmxproxy', function(data) {
_.each(_.union(jmxproxyConf.allowed_endpoints, data), function(item) {
if (_.contains(data, item)) {
trash = $('<span/>')
.data('value', item)
.addClass('glyphicon glyphicon-trash text-muted pull-right')
.mouseover(function() {
$('#endpoint-combo').data('trashing', true);
$(this).toggleClass('text-muted text-danger');
})
.mouseout(function() {
$('#endpoint-combo').data('trashing', false);
$(this).toggleClass('text-muted text-danger');
})
.click(function() {
$.ajax(prefix+'/jmxproxy/'+$(this).data('value'), {
method: 'DELETE',
success: function() {
$('#endpoint-combo')
.data('trashing', false);
},
})
});
} else {
trash = '';
}

if (data.allowed_endpoints.length > 0) {
$.each(data.allowed_endpoints, function(key, val) {
$('#endpoint-list')
$('#endpoint-combo ul')
.append(
$('<li/>')
.attr('data-value', item)
.append(
$('<a/>')
.attr('href', '#')
.click(function() {
endpointHost = endpointHostClass(prefix, $(this).text());
})
.text(val)
.append(item)
.append(trash)
)
);
});

$('#welcome-banner h3').text($('#welcome-banner h3').text().replace('enter', 'select'));
$('#endpoint-choice').toggleClass('hidden');
} else {
$('#welcome-banner h3').text($('#welcome-banner h3').text().replace('select', 'enter'));
$('#endpoint-insert').toggleClass('hidden');
$('#endpoint-insert input').focus();
}
if ($('#endpoint-combo ul li').length > 0) {
$('#endpoint-combo').combobox('enable');
} else {
$('#endpoint-combo button').prop('disabled', true);
}

if (jmxproxyConf.allowed_endpoints.length > 0) {
$('#endpoint-combo input').prop('disabled', true);
$('#welcome-banner h3').text(bannerAction.replace('{action}', 'select'));
} else {
$('#endpoint-combo input').focus();
if (data.length > 0) {
$('#welcome-banner h3').text(bannerAction.replace('{action}', 'select or enter'));
} else {
$('#welcome-banner h3').text(bannerAction.replace('{action}', 'enter'));
}
}
})
.fail(function() {
displayError('Malformed cached endpoint list received from server.');
});

})
.fail(function() {
displayError('Malformed configuration data recieved from the server.')
displayError('Malformed configuration data received from the server.');
});
});

Expand Down

0 comments on commit 3f70258

Please sign in to comment.