From 2583d7869acedcbe536d4dd5eaf2e7c8f9cf149c Mon Sep 17 00:00:00 2001 From: Matt Gilman Date: Wed, 7 Oct 2015 19:11:55 -0400 Subject: [PATCH] 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. --- .../canvas/new-controller-service-dialog.jsp | 1 - .../partials/canvas/new-processor-dialog.jsp | 1 - .../canvas/new-reporting-task-dialog.jsp | 1 - .../css/new-controller-service-dialog.css | 9 -- .../main/webapp/css/new-processor-dialog.css | 9 -- .../webapp/css/new-reporting-task-dialog.css | 9 -- .../webapp/js/nf/canvas/nf-canvas-toolbox.js | 60 +++++--- .../main/webapp/js/nf/canvas/nf-settings.js | 140 +++++++++--------- 8 files changed, 105 insertions(+), 125 deletions(-) diff --git a/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 b/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 index eb54ace556..9463cb9b0e 100644 --- a/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 +++ b/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 @@
-
Displaying  of  diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-processor-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-processor-dialog.jsp index df7766ca75..ad33c1caa6 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-processor-dialog.jsp +++ b/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 @@
-
Displaying  of  diff --git a/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 b/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 index cfb39921c8..2025aeb9f9 100644 --- a/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 +++ b/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 @@
-
Displaying  of  diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-controller-service-dialog.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-controller-service-dialog.css index ff8d19e7a2..57c3c555e7 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-controller-service-dialog.css +++ b/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; } \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-processor-dialog.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-processor-dialog.css index d5871acf65..9ccd23e28e 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-processor-dialog.css +++ b/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; } \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-reporting-task-dialog.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-reporting-task-dialog.css index 24b4380d19..c8d629f50a 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-reporting-task-dialog.css +++ b/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; } \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbox.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbox.js index 2812142b45..3ed1f1fc26 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbox.js +++ b/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(), - 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 diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js index 476f34bcd8..f7e9472412 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js +++ b/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(), - property: $('#controller-service-type-filter-options').combo('getSelectedOption').value + searchString: getControllerServiceTypeFilterText() }); - - // 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 () { - applyControllerServiceTypeFilter(); + $('#controller-service-type-filter').on('keyup', function (e) { + 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(), - property: $('#controller-service-type-filter-options').combo('getSelectedOption').value + searchString: getControllerServiceTypeFilterText() }); controllerServiceTypesData.setFilter(filterControllerServiceTypes); @@ -493,17 +502,7 @@ nf.Settings = (function () { buttonText: 'Add', handler: { click: 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); - } + addSelectedControllerService(); } } }, { @@ -905,14 +904,14 @@ nf.Settings = (function () { // update the search criteria reportingTaskTypesData.setFilterArgs({ - searchString: getReportingTaskTypeFilterText(), - property: $('#reporting-task-type-filter-options').combo('getSelectedOption').value + searchString: getReportingTaskTypeFilterText() }); - - // 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 () { - applyReportingTaskTypeFilter(); + $('#reporting-task-type-filter').on('keyup', function (e) { + 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(), - property: $('#reporting-task-type-filter-options').combo('getSelectedOption').value + searchString: getReportingTaskTypeFilterText() }); reportingTaskTypesData.setFilter(filterReportingTaskTypes); @@ -1192,17 +1198,7 @@ nf.Settings = (function () { buttonText: 'Add', handler: { click: 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); - } + addSelectedReportingTask(); } } }, { @@ -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(); }