Apache
/
nifi
mirror of https://github.com/apache/nifi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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.
This commit is contained in:
Matt Gilman 2015-10-07 19:11:55 -04:00
parent 31fba6b333
commit 2583d7869a
8 changed files with 105 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
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
View File

@ -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>

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

@ -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>

1
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
View File

@ -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>

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

@ -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;
}

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

@ -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;
}

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

@ -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;
}

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

@ -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

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

@ -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();
}