NIFI-442:

NIFI-828:
- Always selecting the first item in the new component table.
- Enabling adding the selected component by typing Enter.
- Removing the 'filter by' in the new component dialogs and instead just searching every field.

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-controller-service-dialog.jsp

@@ -20,7 +20,6 @@
         <div id="controller-service-type-filter-controls">
             <div id="controller-service-type-filter-container">
                 <input type="text" id="controller-service-type-filter"/>
-                <div id="controller-service-type-filter-options"></div>
             </div>
             <div id="controller-service-type-filter-status">
                 Displaying&nbsp;<span id="displayed-controller-service-types"></span>&nbsp;of&nbsp;<span id="total-controller-service-types"></span>

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-processor-dialog.jsp

@@ -20,7 +20,6 @@
         <div id="processor-type-filter-controls">
             <div id="processor-type-filter-container">
                 <input type="text" id="processor-type-filter"/>
-                <div id="processor-type-filter-options"></div>
             </div>
             <div id="processor-type-filter-status">
                 Displaying&nbsp;<span id="displayed-processor-types"></span>&nbsp;of&nbsp;<span id="total-processor-types"></span>

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-reporting-task-dialog.jsp

@@ -20,7 +20,6 @@
         <div id="reporting-task-type-filter-controls">
             <div id="controller-service-type-filter-container">
                 <input type="text" id="reporting-task-type-filter"/>
-                <div id="reporting-task-type-filter-options"></div>
             </div>
             <div id="reporting-task-type-filter-status">
                 Displaying&nbsp;<span id="displayed-reporting-task-types"></span>&nbsp;of&nbsp;<span id="total-reporting-task-types"></span>

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-controller-service-dialog.css

@@ -139,14 +139,5 @@ div.availability-label {
     line-height: 20px;
     width: 173px;
     border: 1px solid #ccc;
-    margin-right: 3px;
     float: left;
-}
-
-#controller-service-type-filter-options {
-    float: left;
-    height: 17px;
-    line-height: 17px;
-    width: 85px;
-    margin-top: 1px;
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-processor-dialog.css

@@ -118,14 +118,5 @@
     line-height: 20px;
     width: 173px;
     border: 1px solid #ccc;
-    margin-right: 3px;
     float: left;
-}
-
-#processor-type-filter-options {
-    float: left;
-    height: 17px;
-    line-height: 17px;
-    width: 85px;
-    margin-top: 1px;
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-reporting-task-dialog.css

@@ -139,14 +139,5 @@ div.availability-label {
     line-height: 20px;
     width: 173px;
     border: 1px solid #ccc;
-    margin-right: 3px;
     float: left;
-}
-
-#reporting-task-type-filter-options {
-    float: left;
-    height: 17px;
-    line-height: 17px;
-    width: 85px;
-    margin-top: 1px;
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbox.js

@@ -106,10 +106,14 @@ nf.CanvasToolbox = (function () {
 
             // update the search criteria
             processorTypesData.setFilterArgs({
-                searchString: getFilterText(),
+                searchString: getFilterText()
-                property: $('#processor-type-filter-options').combo('getSelectedOption').value
             });
             processorTypesData.refresh();
+            
+            // update the selection if possible
+            if (processorTypesData.getLength() > 0) {
+                processorTypesGrid.setSelectedRows([0]);
+            }
         }
     };
 
@@ -134,7 +138,9 @@ nf.CanvasToolbox = (function () {
         }
 
         // determine if the item matches the filter
-        return item[args.property].search(filterExp) >= 0;
+        var matchesLabel = item['label'].search(filterExp) >= 0;
+        var matchesTags = item['tags'].search(filterExp) >= 0;
+        return matchesLabel || matchesTags;
     };
 
     /**
@@ -332,10 +338,18 @@ nf.CanvasToolbox = (function () {
         // show the dialog
         $('#new-processor-dialog').modal('show');
         
-        // set the focus in the filter field
+        // setup the filter
-        $('#processor-type-filter').focus();
+        $('#processor-type-filter').focus().off('keyup').on('keyup', function (e) {
+            var code = e.keyCode ? e.keyCode : e.which;
+            if (code === $.ui.keyCode.ENTER) {
+                addProcessor();
+            } else {
+                applyFilter();
+            }
+        });
 
         // adjust the grid canvas now that its been rendered
+        grid.setSelectedRows([0]);
         grid.resizeCanvas();
     };
 
@@ -870,20 +884,6 @@ nf.CanvasToolbox = (function () {
                 addToolboxIcon(config.type.template, toolbox, 'template-icon', 'template-icon-hover', 'template-icon-drag', promptForTemplate);
                 addToolboxIcon(config.type.label, toolbox, 'label-icon', 'label-icon-hover', 'label-icon-drag', createLabel);
 
-                // specify the combo options
-                $('#processor-type-filter-options').combo({
-                    options: [{
-                            text: 'by type',
-                            value: 'label'
-                        }, {
-                            text: 'by tag',
-                            value: 'tags'
-                        }],
-                    select: function (option) {
-                        applyFilter();
-                    }
-                });
-
                 // initialize the processor type table
                 var processorTypesColumns = [
                     {id: 'type', name: 'Type', field: 'label', sortable: true, resizable: true},
@@ -904,8 +904,7 @@ nf.CanvasToolbox = (function () {
                 });
                 processorTypesData.setItems([]);
                 processorTypesData.setFilterArgs({
-                    searchString: getFilterText(),
+                    searchString: getFilterText()
-                    property: $('#processor-type-filter-options').combo('getSelectedOption').value
                 });
                 processorTypesData.setFilter(filter);
 
@@ -1008,9 +1007,7 @@ nf.CanvasToolbox = (function () {
                 }).fail(nf.Common.handleAjaxError);
 
                 // define the function for filtering the list
-                $('#processor-type-filter').keyup(function () {
+                $('#processor-type-filter').focus(function () {
-                    applyFilter();
-                }).focus(function () {
                     if ($(this).hasClass(config.styles.filterList)) {
                         $(this).removeClass(config.styles.filterList).val('');
                     }
@@ -1024,6 +1021,9 @@ nf.CanvasToolbox = (function () {
                 $('#new-processor-dialog').modal({
                     headerText: 'Add Processor',
                     overlayBackground: false
+                }).draggable({
+                    containment: 'parent',
+                    handle: '.dialog-header'
                 });
 
                 // configure the new port dialog
@@ -1035,6 +1035,9 @@ nf.CanvasToolbox = (function () {
                             $('#new-port-name').val('');
                         }
                     }
+                }).draggable({
+                    containment: 'parent',
+                    handle: '.dialog-header'
                 });
 
                 // configure the new process group dialog
@@ -1046,6 +1049,9 @@ nf.CanvasToolbox = (function () {
                             $('#new-process-group-name').val('');
                         }
                     }
+                }).draggable({
+                    containment: 'parent',
+                    handle: '.dialog-header'
                 });
 
                 // configure the new remote process group dialog
@@ -1057,12 +1063,18 @@ nf.CanvasToolbox = (function () {
                             $('#new-remote-process-group-uri').val('');
                         }
                     }
+                }).draggable({
+                    containment: 'parent',
+                    handle: '.dialog-header'
                 });
 
                 // configure the instantiate template dialog
                 $('#instantiate-template-dialog').modal({
                     headerText: 'Instantiate Template',
                     overlayBackgroud: false
+                }).draggable({
+                    containment: 'parent',
+                    handle: '.dialog-header'
                 });
             } else {
                 // add disabled icons

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js

@@ -156,14 +156,14 @@ nf.Settings = (function () {
 
             // update the search criteria
             controllerServiceTypesData.setFilterArgs({
-                searchString: getControllerServiceTypeFilterText(),
+                searchString: getControllerServiceTypeFilterText()
-                property: $('#controller-service-type-filter-options').combo('getSelectedOption').value
             });
-
-            // need to invalidate the entire table since parent elements may need to be 
-            // rerendered due to changes in their children
             controllerServiceTypesData.refresh();
-            controllerServiceTypesGrid.invalidate();
+
+            // update the selection if possible
+            if (controllerServiceTypesData.getLength() > 0) {
+                controllerServiceTypesGrid.setSelectedRows([0]);
+            }
         }
     };
 
@@ -249,7 +249,9 @@ nf.Settings = (function () {
         }
 
         // determine if the item matches the filter
-        return item[args.property].search(filterExp) >= 0;
+        var matchesLabel = item['label'].search(filterExp) >= 0;
+        var matchesTags = item['tags'].search(filterExp) >= 0;
+        return matchesLabel || matchesTags;
     };
 
     /**
@@ -278,6 +280,23 @@ nf.Settings = (function () {
         return matches;
     };
 
+    /**
+     * Adds the currently selected controller service.
+     */
+    var addSelectedControllerService = function () {
+        var selectedServiceType = $('#selected-controller-service-type').text();
+
+        // ensure something was selected
+        if (selectedServiceType === '') {
+            nf.Dialog.showOkDialog({
+                dialogContent: 'The type of controller service to create must be selected.',
+                overlayBackground: false
+            });
+        } else {
+            addControllerService(selectedServiceType);
+        }
+    };
+
     /**
      * Adds a new controller service of the specified type.
      * 
@@ -334,20 +353,6 @@ nf.Settings = (function () {
      * Initializes the new controller service dialog.
      */
     var initNewControllerServiceDialog = function () {
-        // specify the combo options
-        $('#controller-service-type-filter-options').combo({
-            options: [{
-                    text: 'by type',
-                    value: 'label'
-                }, {
-                    text: 'by tag',
-                    value: 'tags'
-                }],
-            select: function (option) {
-                applyControllerServiceTypeFilter();
-            }
-        });
-
         // specify the controller service availability
         if (nf.Canvas.isClustered()) {
             $('#controller-service-availability-combo').combo({
@@ -365,8 +370,13 @@ nf.Settings = (function () {
         }
 
         // define the function for filtering the list
-        $('#controller-service-type-filter').keyup(function () {
+        $('#controller-service-type-filter').on('keyup', function (e) {
-            applyControllerServiceTypeFilter();
+            var code = e.keyCode ? e.keyCode : e.which;
+            if (code === $.ui.keyCode.ENTER) {
+                addSelectedControllerService();
+            } else {
+                applyControllerServiceTypeFilter();
+            }
         }).focus(function () {
             if ($(this).hasClass(config.styles.filterList)) {
                 $(this).removeClass(config.styles.filterList).val('');
@@ -389,8 +399,7 @@ nf.Settings = (function () {
         });
         controllerServiceTypesData.setItems([]);
         controllerServiceTypesData.setFilterArgs({
-            searchString: getControllerServiceTypeFilterText(),
+            searchString: getControllerServiceTypeFilterText()
-            property: $('#controller-service-type-filter-options').combo('getSelectedOption').value
         });
         controllerServiceTypesData.setFilter(filterControllerServiceTypes);
 
@@ -493,17 +502,7 @@ nf.Settings = (function () {
                     buttonText: 'Add',
                     handler: {
                         click: function () {
-                            var selectedServiceType = $('#selected-controller-service-type').text();
+                            addSelectedControllerService();
-                            
-                            // ensure something was selected
-                            if (selectedServiceType === '') {
-                                nf.Dialog.showOkDialog({
-                                    dialogContent: 'The type of controller service to create must be selected.',
-                                    overlayBackground: false
-                                });
-                            } else {
-                                addControllerService(selectedServiceType);
-                            }
                         }
                     }
                 }, {
@@ -905,14 +904,14 @@ nf.Settings = (function () {
 
             // update the search criteria
             reportingTaskTypesData.setFilterArgs({
-                searchString: getReportingTaskTypeFilterText(),
+                searchString: getReportingTaskTypeFilterText()
-                property: $('#reporting-task-type-filter-options').combo('getSelectedOption').value
             });
-
-            // need to invalidate the entire table since parent elements may need to be 
-            // rerendered due to changes in their children
             reportingTaskTypesData.refresh();
-            reportingTaskTypesGrid.invalidate();
+
+            // update the selection if possible
+            if (reportingTaskTypesData.getLength() > 0) {
+                reportingTaskTypesGrid.setSelectedRows([0]);
+            }
         }
     };
 
@@ -977,6 +976,23 @@ nf.Settings = (function () {
         return matches;
     };
 
+    /**
+     * Adds the currently selected reporting task.
+     */
+    var addSelectedReportingTask = function () {
+        var selectedTaskType = $('#selected-reporting-task-type').text();
+
+        // ensure something was selected
+        if (selectedTaskType === '') {
+            nf.Dialog.showOkDialog({
+                dialogContent: 'The type of reporting task to create must be selected.',
+                overlayBackground: false
+            });
+        } else {
+            addReportingTask(selectedTaskType);
+        }
+    };
+    
     /**
      * Adds a new reporting task of the specified type.
      * 
@@ -1033,20 +1049,6 @@ nf.Settings = (function () {
      * Initializes the new reporting task dialog.
      */
     var initNewReportingTaskDialog = function () {
-        // specify the combo options
-        $('#reporting-task-type-filter-options').combo({
-            options: [{
-                    text: 'by type',
-                    value: 'label'
-                }, {
-                    text: 'by tag',
-                    value: 'tags'
-                }],
-            select: function (option) {
-                applyReportingTaskTypeFilter();
-            }
-        });
-
         // specify the reporting task availability
         if (nf.Canvas.isClustered()) {
             $('#reporting-task-availability-combo').combo({
@@ -1064,8 +1066,13 @@ nf.Settings = (function () {
         }
 
         // define the function for filtering the list
-        $('#reporting-task-type-filter').keyup(function () {
+        $('#reporting-task-type-filter').on('keyup', function (e) {
-            applyReportingTaskTypeFilter();
+            var code = e.keyCode ? e.keyCode : e.which;
+            if (code === $.ui.keyCode.ENTER) {
+                addSelectedReportingTask();
+            } else {
+                applyReportingTaskTypeFilter();
+            }
         }).focus(function () {
             if ($(this).hasClass(config.styles.filterList)) {
                 $(this).removeClass(config.styles.filterList).val('');
@@ -1088,8 +1095,7 @@ nf.Settings = (function () {
         });
         reportingTaskTypesData.setItems([]);
         reportingTaskTypesData.setFilterArgs({
-            searchString: getReportingTaskTypeFilterText(),
+            searchString: getReportingTaskTypeFilterText()
-            property: $('#reporting-task-type-filter-options').combo('getSelectedOption').value
         });
         reportingTaskTypesData.setFilter(filterReportingTaskTypes);
 
@@ -1192,17 +1198,7 @@ nf.Settings = (function () {
                     buttonText: 'Add',
                     handler: {
                         click: function () {
-                            var selectedTaskType = $('#selected-reporting-task-type').text();
+                            addSelectedReportingTask();
-                            
-                            // ensure something was selected
-                            if (selectedTaskType === '') {
-                                nf.Dialog.showOkDialog({
-                                    dialogContent: 'The type of reporting task to create must be selected.',
-                                    overlayBackground: false
-                                });
-                            } else {
-                                addReportingTask(selectedTaskType);
-                            }
                         }
                     }
                 }, {
@@ -1587,6 +1583,7 @@ nf.Settings = (function () {
                     // reset the canvas size after the dialog is shown
                     var controllerServiceTypesGrid = $('#controller-service-types-table').data('gridInstance');
                     if (nf.Common.isDefinedAndNotNull(controllerServiceTypesGrid)) {
+                        controllerServiceTypesGrid.setSelectedRows([0]);
                         controllerServiceTypesGrid.resizeCanvas();
                     }
                     
@@ -1598,6 +1595,7 @@ nf.Settings = (function () {
                     // reset the canvas size after the dialog is shown
                     var reportingTaskTypesGrid = $('#reporting-task-types-table').data('gridInstance');
                     if (nf.Common.isDefinedAndNotNull(reportingTaskTypesGrid)) {
+                        reportingTaskTypesGrid.setSelectedRows([0]);
                         reportingTaskTypesGrid.resizeCanvas();
                     }