NIFI-27:

- Updating cluster search to work with upgraded jquery ui.
- Better support for case when no results are found.

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 @@
         <div id="cluster-search-example">(e.g.&nbsp;my.host:80)</div>
     </div>
 </div>
+<div id="search-cluster-results"></div>

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 {

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) {
+                _normalize: function(searchResults) {
-                    return $.map(content, function (item, i) {
+                    var items = [];
-                        return $.extend({
+                    items.push(searchResults);
-                            label: item.address,
+                    return items;
-                            value: item.address
+                },
-                        }, item);
+                _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('<li class="unset search-no-matches">No nodes matched the search terms</li>');
+                    }
                 },
                 _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 () {