diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-configuration.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-configuration.css
index b18da8df9a..94ae63b61a 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-configuration.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-configuration.css
@@ -122,4 +122,12 @@ div.undefined {
line-height: 32px;
height: 32px;
padding: 0px 10px;
-}
\ No newline at end of file
+}
+
+#prioritizer-selected .draggable-control {
+ float: right;
+}
+
+#prioritizer-selected .fa-remove {
+ color: #fff;
+}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js
index 83871dbcf8..ff7084144f 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js
@@ -1197,7 +1197,11 @@
// reset the prioritizers
var selectedList = $('#prioritizer-selected');
var availableList = $('#prioritizer-available');
- selectedList.children().detach().appendTo(availableList);
+ selectedList.children()
+ .detach()
+ .appendTo(availableList)
+ .find('div.draggable-control')
+ .remove();
// sort the available list
var listItems = availableList.children('li').get();
@@ -1340,16 +1344,56 @@
nfConnectionConfiguration.addAvailablePrioritizer('#prioritizer-available', documentedType);
});
+ // work around for https://bugs.jqueryui.com/ticket/6054
+ var shouldAllowDrop = true;
+
// make the prioritizer containers sortable
- $('#prioritizer-available, #prioritizer-selected').sortable({
+ $('#prioritizer-available').sortable({
containment: $('#connection-settings-tab-content').find('.settings-right'),
connectWith: 'ul',
placeholder: 'ui-state-highlight',
scroll: true,
- opacity: 0.6
+ opacity: 0.6,
+ beforeStop: function (event, ui) {
+ if ($('#prioritizer-available').find('.ui-sortable-placeholder').length) {
+ shouldAllowDrop = false;
+ }
+ },
+ stop: function (event, ui) {
+ const allowDrop = shouldAllowDrop;
+ shouldAllowDrop = true;
+ return allowDrop;
+ }
});
+
+ $('#prioritizer-selected').sortable({
+ containment: $('#connection-settings-tab-content').find('.settings-right'),
+ placeholder: 'selected',
+ scroll: true,
+ opacity: 0.6,
+ receive: function (event, ui) {
+ nfConnectionConfiguration.addControlsForSelectedPrioritizer(ui.item);
+ },
+ update: function (event, ui) {
+ // update the buttons to possibly trigger the disabled state
+ $('#connection-configuration').modal('refreshButtons');
+ }
+ });
+
$('#prioritizer-available, #prioritizer-selected').disableSelection();
+
+ // add a listener that will handle dblclick for all available prioritizers
+ $(document).on('dblclick', '#prioritizer-available li', function() {
+ var availablePrioritizerElement = $(this).detach().appendTo($('#prioritizer-selected'));
+
+ nfConnectionConfiguration.addControlsForSelectedPrioritizer(availablePrioritizerElement);
+
+ // update the buttons to possibly trigger the disabled state
+ $('#connection-configuration').modal('refreshButtons');
+ });
}).fail(nfErrorHandler.handleAjaxError);
+
+ nfConnectionConfiguration.sortAvailablePrioritizers();
},
/**
@@ -1374,6 +1418,44 @@
}
},
+ /**
+ * Sorts the available prioritizers.
+ */
+ sortAvailablePrioritizers: function () {
+ var availablePrioritizersList = $('#prioritizer-available');
+ availablePrioritizersList.children('li')
+ .detach()
+ .sort(function (aElement, bElement) {
+ var nameA = $(aElement).text();
+ var nameB = $(bElement).text();
+ return nameA.localeCompare(nameB);
+ })
+ .appendTo(availablePrioritizersList);
+ },
+
+ /**
+ * Adds the controls to the specified selected draggable element.
+ *
+ * @argument {jQuery} draggableElement
+ */
+ addControlsForSelectedPrioritizer: function (draggableElement) {
+ var removeIcon = $('
')
+ .on('click', function () {
+ // remove the remove icon
+ removeIcon.remove();
+
+ // restore to the available parameter contexts
+ $('#prioritizer-available').append(draggableElement);
+
+ // resort the available parameter contexts
+ nfConnectionConfiguration.sortAvailablePrioritizers();
+
+ // update the buttons to possibly trigger the disabled state
+ $('#connection-configuration').modal('refreshButtons');
+ })
+ .appendTo(draggableElement);
+ },
+
/**
* Shows the dialog for creating a new connection.
*
@@ -1526,7 +1608,9 @@
// handle each prioritizer
$.each(connection.prioritizers, function (i, type) {
- $('#prioritizer-available').children('li[id="' + type + '"]').detach().appendTo('#prioritizer-selected');
+ var selectedPrioritizer = $('#prioritizer-available').children('li[id="' + type + '"]');
+ nfConnectionConfiguration.addControlsForSelectedPrioritizer(selectedPrioritizer);
+ selectedPrioritizer.detach().appendTo('#prioritizer-selected');
});
// store the connection details
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-parameter-contexts.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-parameter-contexts.js
index 6ec550d795..146b627d68 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-parameter-contexts.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-parameter-contexts.js
@@ -1774,7 +1774,7 @@
var addControlsForSelectedParameterContext = function (draggableElement) {
var removeIcon = $('
')
.on('click', function () {
- // remove the remove ice
+ // remove the remove icon
removeIcon.remove();
// restore to the available parameter contexts