From 3f70258a8c403c2730b6be8566b5a08fb2f60bbb Mon Sep 17 00:00:00 2001 From: Max Kalika Date: Tue, 29 Mar 2016 13:47:26 -0700 Subject: [PATCH] Issue #96: Rework UI landing page with a combobox of cached endpoints and no nav bar. --- src/main/resources/assets/css/jmxproxy.css | 1 + src/main/resources/assets/index.html | 79 +++++++--------- src/main/resources/assets/js/jmxproxy.js | 103 +++++++++++++++++---- 3 files changed, 123 insertions(+), 60 deletions(-) diff --git a/src/main/resources/assets/css/jmxproxy.css b/src/main/resources/assets/css/jmxproxy.css index 197a10d..516d781 100644 --- a/src/main/resources/assets/css/jmxproxy.css +++ b/src/main/resources/assets/css/jmxproxy.css @@ -53,6 +53,7 @@ div.popover-content { word-wrap: break-word; } +#endpoint-combo, #mbean-title, #attrib-name { font-weight: bold; diff --git a/src/main/resources/assets/index.html b/src/main/resources/assets/index.html index 08907ae..17d82e7 100644 --- a/src/main/resources/assets/index.html +++ b/src/main/resources/assets/index.html @@ -11,54 +11,19 @@ - - - - - @@ -95,6 +60,32 @@

Endpoint Authentication

+ + + +
diff --git a/src/main/resources/assets/js/jmxproxy.js b/src/main/resources/assets/js/jmxproxy.js index 813b713..925838d 100644 --- a/src/main/resources/assets/js/jmxproxy.js +++ b/src/main/resources/assets/js/jmxproxy.js @@ -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()); @@ -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() { @@ -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 = $('') + .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( $('
  • ') + .attr('data-value', item) .append( $('') .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.'); }); });