From e2878170a1ddf680800409134684a62bc5ea0373 Mon Sep 17 00:00:00 2001
From: Matt Gilman <matt.c.gilman@gmail.com>
Date: Wed, 1 Apr 2015 11:15:07 -0400
Subject: [PATCH] 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.

---
 .../propertytable/jquery.propertytable.js     | 159 ++++++++++++------
 .../webapp/js/nf/canvas/nf-canvas-utils.js    |   9 -
 .../src/main/webapp/js/nf/canvas/nf-canvas.js |   2 +-
 .../js/nf/canvas/nf-controller-service.js     |   3 +
 .../nf/canvas/nf-processor-configuration.js   |   3 +
 .../webapp/js/nf/canvas/nf-reporting-task.js  |   3 +
 .../src/main/webapp/js/nf/nf-common.js        |   9 +
 .../main/webapp/js/nf/nf-processor-details.js |   3 +
 8 files changed, 127 insertions(+), 64 deletions(-)

diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js
index c2672f3a6b..31495bb630 100644
--- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js
+++ b/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,65 +631,116 @@
                     'left': offset.left - 5
                 }).appendTo('body');
 
-                var editor = null;
-
-                // so the nfel editor is appropriate
-                if (nf.Common.supportsEl(propertyDescriptor)) {
-                    var languageId = 'nfel';
-                    var editorClass = languageId + '-editor';
-
-                    // prevent dragging over the nf editor
+                var allowableValues = nf.Common.getAllowableValues(propertyDescriptor);
+                if ($.isArray(allowableValues)) {
+                    // prevent dragging over the combo
                     wrapper.draggable({
-                        cancel: 'input, textarea, pre, .button, .' + editorClass,
+                        cancel: '.button, .combo',
                         containment: 'parent'
                     });
 
-                    // create the editor
-                    editor = $('<div></div>').addClass(editorClass).appendTo(wrapper).nfeditor({
-                        languageId: languageId,
-                        width: cellNode.width(),
-                        content: property.value,
-                        minWidth: 175,
-                        minHeight: 100,
-                        readOnly: true,
-                        resizable: true
-                    });
-                } else {
-                    // prevent dragging over standard components
-                    wrapper.draggable({
-                        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
+                        });
                     });
 
-                    // create the input field
-                    $('<textarea hidefocus rows="5" readonly="readonly"/>').css({
-                        'background': 'white',
-                        'width': cellNode.width() + 'px',
-                        'height': '80px',
-                        'border-width': '0',
-                        'outline': '0',
-                        'overflow-y': 'auto',
-                        'resize': 'both',
-                        'margin-bottom': '28px'
-                    }).text(property.value).appendTo(wrapper);
-                }
-
-                // add an ok button that will remove the entire pop up
-                var ok = $('<div class="button button-normal">Ok</div>').on('click', function () {
-                    // clean up the editor
-                    if (editor !== null) {
-                        editor.nfeditor('destroy');
+                    // ensure the options there is at least one option
+                    if (options.length === 0) {
+                        options.push({
+                            text: 'No value',
+                            value: null,
+                            optionClass: 'unset',
+                            disabled: true
+                        });
                     }
 
-                    // clean up the rest
-                    wrapper.hide().remove();
-                });
-                $('<div></div>').css({
-                    'position': 'absolute',
-                    'bottom': '0',
-                    'left': '0',
-                    'right': '0',
-                    'padding': '0 3px 5px'
-                }).append(ok).append('<div class="clear"></div>').appendTo(wrapper);
+                    // 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
+                    if (nf.Common.supportsEl(propertyDescriptor)) {
+                        var languageId = 'nfel';
+                        var editorClass = languageId + '-editor';
+
+                        // prevent dragging over the nf editor
+                        wrapper.draggable({
+                            cancel: 'input, textarea, pre, .button, .' + editorClass,
+                            containment: 'parent'
+                        });
+
+                        // create the editor
+                        editor = $('<div></div>').addClass(editorClass).appendTo(wrapper).nfeditor({
+                            languageId: languageId,
+                            width: cellNode.width(),
+                            content: property.value,
+                            minWidth: 175,
+                            minHeight: 100,
+                            readOnly: true,
+                            resizable: true
+                        });
+                    } else {
+                        // prevent dragging over standard components
+                        wrapper.draggable({
+                            containment: 'parent'
+                        });
+
+                        // create the input field
+                        $('<textarea hidefocus rows="5" readonly="readonly"/>').css({
+                            'background': 'white',
+                            'width': cellNode.width() + 'px',
+                            'height': '80px',
+                            'border-width': '0',
+                            'outline': '0',
+                            'overflow-y': 'auto',
+                            'resize': 'both',
+                            'margin-bottom': '28px'
+                        }).text(property.value).appendTo(wrapper);
+                    }
+
+                    // add an ok button that will remove the entire pop up
+                    var ok = $('<div class="button button-normal">Ok</div>').on('click', function () {
+                        // clean up the editor
+                        if (editor !== null) {
+                            editor.nfeditor('destroy');
+                        }
+
+                        // clean up the rest
+                        wrapper.hide().remove();
+                    });
+                    $('<div></div>').css({
+                        'position': 'absolute',
+                        'bottom': '0',
+                        'left': '0',
+                        'right': '0',
+                        'padding': '0 3px 5px'
+                    }).append(ok).append('<div class="clear"></div>').appendTo(wrapper);
+                }
             }
         }
     };
@@ -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)) {
diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js
index 9460fa6e58..f1cb458fb1 100644
--- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js
+++ b/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.
          */
diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
index 82f455bbd6..6fda98481b 100644
--- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
+++ b/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();
diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js
index 7fb3eba60b..26b7253eaa 100644
--- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js
+++ b/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');
diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor-configuration.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor-configuration.js
index 329afc1028..4e828df3db 100644
--- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor-configuration.js
+++ b/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');
diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-reporting-task.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-reporting-task.js
index 7c953886e3..ed13f10977 100644
--- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-reporting-task.js
+++ b/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');
diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js
index b818e64a79..2a5273ddfc 100644
--- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js
+++ b/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.
      * 
diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-processor-details.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-processor-details.js
index 76d9e53417..13eed45ac3 100644
--- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-processor-details.js
+++ b/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');