NIFI-477:

- Updating the property details shown in a read only dialog for properties with allowable values. Now rendering a read only combo to show the value's display name and the other available options.

nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js

@@ -598,7 +598,7 @@
      */
     var showPropertyValue = function (propertyGrid, descriptors, row, cell) {
         // remove any currently open detail dialogs
-        nf.CanvasUtils.removeAllPropertyDetailDialogs();
+        nf.Common.removeAllPropertyDetailDialogs();
 
         // get the property in question
         var propertyData = propertyGrid.getData();
@@ -619,7 +619,7 @@
 
                 // create the wrapper
                 var wrapper = $('<div class="property-detail"></div>').css({
-                    'z-index': 100000,
+                    'z-index': 1999,
                     'position': 'absolute',
                     'background': 'white',
                     'padding': '5px',
@@ -631,6 +631,56 @@
                     'left': offset.left - 5
                 }).appendTo('body');
 
+                var allowableValues = nf.Common.getAllowableValues(propertyDescriptor);
+                if ($.isArray(allowableValues)) {
+                    // prevent dragging over the combo
+                    wrapper.draggable({
+                        cancel: '.button, .combo',
+                        containment: 'parent'
+                    });
+
+                    // create the read only options
+                    var options = [];
+                    $.each(allowableValues, function (i, allowableValue) {
+                        options.push({
+                            text: allowableValue.displayName,
+                            value: allowableValue.value,
+                            description: nf.Common.escapeHtml(allowableValue.description),
+                            disabled: true
+                        });
+                    });
+
+                    // ensure the options there is at least one option
+                    if (options.length === 0) {
+                        options.push({
+                            text: 'No value',
+                            value: null,
+                            optionClass: 'unset',
+                            disabled: true
+                        });
+                    }
+
+                    // determine the max height
+                    var windowHeight = $(window).height();
+                    var maxHeight = windowHeight - (offset.top + cellNode.height()) - 16;
+                    var width = cellNode.width() - 16;
+
+                    // build the combo field
+                    $('<div class="value-combo combo"></div>').width(width).combo({
+                        options: options,
+                        maxHeight: maxHeight,
+                        selectedOption: {
+                            value: property.value
+                        }
+                    }).appendTo(wrapper);
+                    
+                    $('<div class="button button-normal">Ok</div>').css({
+                        'margin': '0 0 0 5px',
+                        'float': 'left'
+                    }).on('click', function () {
+                        wrapper.hide().remove();
+                    }).appendTo(wrapper);
+                } else {
                     var editor = null;
 
                     // so the nfel editor is appropriate
@@ -692,6 +742,7 @@
                     }).append(ok).append('<div class="clear"></div>').appendTo(wrapper);
                 }
             }
+        }
     };
 
     var initPropertiesTable = function (table, options) {
@@ -1022,7 +1073,7 @@
     var clear = function (propertyTableContainer) {
         var options = propertyTableContainer.data('options');
         if (options.readOnly === true) {
-            nf.CanvasUtils.removeAllPropertyDetailDialogs();
+            nf.Common.removeAllPropertyDetailDialogs();
         } else {
             // clear any existing new property dialogs
             if (nf.Common.isDefinedAndNotNull(options.newPropertyDialogContainer)) {

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

@@ -870,15 +870,6 @@ nf.CanvasUtils = (function () {
             return nf.Clipboard.isCopied();
         },
         
-        /**
-         * Removes all read only property detail dialogs.
-         */
-        removeAllPropertyDetailDialogs: function () {
-            var propertyDetails = $('body').children('div.property-detail');
-            propertyDetails.find('div.nfel-editor').nfeditor('destroy');
-            propertyDetails.hide().remove();
-        },
-        
         /**
          * Persists the current user view.
          */

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

@@ -549,7 +549,7 @@ nf.Canvas = (function () {
 
                 // first consider read only property detail dialog
                 if ($('div.property-detail').is(':visible')) {
-                    nf.CanvasUtils.removeAllPropertyDetailDialogs();
+                    nf.Common.removeAllPropertyDetailDialogs();
                     
                     // prevent further bubbling as we're already handled it
                     evt.stopPropagation();

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

@@ -1126,6 +1126,9 @@ nf.ControllerService = (function () {
                         tabContentId: 'controller-service-comments-tab-content'
                     }],
                 select: function () {
+                    // remove all property detail dialogs
+                    nf.Common.removeAllPropertyDetailDialogs();
+                    
                     // update the property table size in case this is the first time its rendered
                     if ($(this).text() === 'Properties') {
                         $('#controller-service-properties').propertytable('resetTableSize');

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

@@ -404,6 +404,9 @@ nf.ProcessorConfiguration = (function () {
                         tabContentId: 'processor-comments-tab-content'
                     }],
                 select: function () {
+                    // remove all property detail dialogs
+                    nf.Common.removeAllPropertyDetailDialogs();
+                    
                     // update the processor property table size in case this is the first time its rendered
                     if ($(this).text() === 'Properties') {
                         $('#processor-properties').propertytable('resetTableSize');

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

@@ -243,6 +243,9 @@ nf.ReportingTask = (function () {
                         tabContentId: 'reporting-task-comments-tab-content'
                     }],
                 select: function () {
+                    // remove all property detail dialogs
+                    nf.Common.removeAllPropertyDetailDialogs();
+                    
                     // update the property table size in case this is the first time its rendered
                     if ($(this).text() === 'Properties') {
                         $('#reporting-task-properties').propertytable('resetTableSize');

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

@@ -315,6 +315,15 @@ nf.Common = {
         });
     },
     
+    /**
+     * Removes all read only property detail dialogs.
+     */
+    removeAllPropertyDetailDialogs: function () {
+        var propertyDetails = $('body').children('div.property-detail');
+        propertyDetails.find('div.nfel-editor').nfeditor('destroy');
+        propertyDetails.hide().remove();
+    },
+    
     /**
      * Formats the tooltip for the specified property.
      * 

nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-processor-details.js

@@ -69,6 +69,9 @@ nf.ProcessorDetails = (function () {
                         tabContentId: 'details-processor-comments-tab-content'
                     }],
                 select: function () {
+                    // remove all property detail dialogs
+                    nf.Common.removeAllPropertyDetailDialogs();
+                    
                     // resize the property grid in case this is the first time its rendered
                     if ($(this).text() === 'Properties') {
                         $('#read-only-processor-properties').propertytable('resetTableSize');