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.
apache · Oct 7, 2015 · 2583d78 · 2583d78
1 parent 31fba6b
commit 2583d78
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 125 deletions.
diff --git a/...web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-controller-service-dialog.jsp b/...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>

diff --git a/...ork/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-processor-dialog.jsp b/...ork/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>

diff --git a/...ifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-reporting-task-dialog.jsp b/...ifi-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>

diff --git a/...nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-controller-service-dialog.css b/...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;
 }
diff --git a/...k-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-processor-dialog.css b/...k-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;
 }
diff --git a/...dle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-reporting-task-dialog.css b/...dle/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;
 }
diff --git a/...dle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbox.js b/...dle/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(),
-                property: $('#processor-type-filter-options').combo('getSelectedOption').value
+                searchString: getFilterText()
             });
             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
-        $('#processor-type-filter').focus();
+        // setup the filter
+        $('#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(),
-                    property: $('#processor-type-filter-options').combo('getSelectedOption').value
+                    searchString: getFilterText()
                 });
                 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 () {
-                    applyFilter();
-                }).focus(function () {
+                $('#processor-type-filter').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