diff --git a/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/view-single-node-dialog.jsp b/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/view-single-node-dialog.jsp index 9570de5daf..4a3338cf3d 100644 --- a/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/view-single-node-dialog.jsp +++ b/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/view-single-node-dialog.jsp @@ -21,3 +21,4 @@
(e.g. my.host:80)
+
diff --git a/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/css/summary.css b/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/css/summary.css index cab21c034d..c10992769c 100644 --- a/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/css/summary.css +++ b/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/css/summary.css @@ -139,9 +139,18 @@ div.search-match { font-size: 10px; } -.ui-autocomplete { +#search-cluster-results .ui-autocomplete { max-height: 300px; overflow: auto; + border: 1px solid #aaaaaa; + z-index: 1351; + border-radius: 0; +} + +#search-cluster-results .ui-menu .ui-menu-item a.ui-state-focus { + background: #D4E0E5 !important; + border: 1px solid #999999; + border-radius: 0; } input.search-nodes { diff --git a/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-cluster-search.js b/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-cluster-search.js index 035e6f0929..2254943172 100644 --- a/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-cluster-search.js +++ b/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-cluster-search.js @@ -102,13 +102,27 @@ nf.ClusterSearch = (function () { // configure the cluster auto complete $.widget('nf.clusterSearchAutocomplete', $.ui.autocomplete, { - _normalize: function (content) { - return $.map(content, function (item, i) { - return $.extend({ - label: item.address, - value: item.address - }, item); + _normalize: function(searchResults) { + var items = []; + items.push(searchResults); + return items; + }, + _renderMenu: function(ul, items) { + // results are normalized into a single element array + var searchResults = items[0]; + + var self = this; + $.each(searchResults.nodeResults, function(_, node) { + self._renderItemData(ul, { + label: node.address, + value: node.address + }); }); + + // ensure there were some results + if (ul.children().length === 0) { + ul.append('
  • No nodes matched the search terms
  • '); + } }, _resizeMenu: function () { var ul = this.menu.element; @@ -119,6 +133,7 @@ nf.ClusterSearch = (function () { // configure the autocomplete field $('#cluster-search-field').clusterSearchAutocomplete({ minLength: 0, + appendTo: '#search-cluster-results', position: { my: 'left top', at: 'left bottom', @@ -134,7 +149,7 @@ nf.ClusterSearch = (function () { dataType: 'json', url: config.urls.clusterSearch }).done(function (searchResponse) { - response(searchResponse.nodeResults); + response(searchResponse); }); } }).focus(function () {