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 () {