NIFI-6345:

- Updating property table editor to distinguish between available modes (el vs parameter reference).
arisro · Aug 30, 2019 · 7228496 · 7228496
1 parent 75e452b
commit 7228496
Show file tree

Hide file tree

Showing 4 changed files with 230 additions and 2 deletions.
diff --git a/...-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/languages/nfeditor.css b/...-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/languages/nfeditor.css
@@ -49,3 +49,83 @@ span.el-argument-name {
 div.nf-tooltip {
     max-width: 350px;
 }
+
+div.mode-hint-tip {
+    z-index: 14000;
+    width: 455px;
+    padding: 10px;
+    position: absolute;
+    border: 1px solid #ddd;
+    border-radius: 2px;
+    background-color: #fff;
+    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16);
+    font-size: 13px;
+    display: none;
+}
+
+div.mode-hint-tip > :first-child {
+    margin-bottom: 15px;
+}
+
+div.mode-hint-tip-title-container {
+    display: flex;
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+div.mode-hint-tip-title-container > :first-child {
+    width: 10px;
+    margin-right: 10px;
+    color: #898989;
+}
+
+div.mode-hint-tip-title-container > .mode-supported {
+    color: #151515;
+}
+
+div.mode-hint-tip-title-container > .mode-unsupported {
+    color: #676767;
+}
+
+div.mode-hint-tip-description-container {
+    margin-left: 20px;
+}
+
+div.mode-hint-tip-description-container .hint-pattern {
+    padding: 0 2px;
+    letter-spacing: 1px;
+    font-weight: 400;
+    background-color: rgba(20, 145, 193, 0.12);
+}
+
+div.mode-hint-tip-description-container .hint-keystroke {
+    font-weight: 300;
+    font-style: italic;
+}
+
+div.mode-hint-container {
+    margin-top: 5px;
+    display: flex;
+    justify-content: flex-end;
+    height: 13px;
+    font-size: 11px;
+    color: #898989;
+}
+
+div.mode-hint-element {
+    cursor: default;
+    display: flex;
+    justify-content: space-between;
+    width: 96px;
+}
+
+div.mode-hint {
+    display: flex;
+    font-weight: bold;
+    font-style: italic;
+}
+
+div.mode-hint-value {
+    margin-left: 5px;
+    color: #898989;
+}
diff --git a/.../nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/languages/nfel.js b/.../nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/languages/nfel.js
@@ -871,8 +871,31 @@
             return completions;
         },
 
+        /**
+         * Returns the language id.
+         *
+         * @returns {string} language id
+         */
         getLanguageId: function () {
             return 'nfel';
+        },
+
+        /**
+         * Returns whether this editor mode supports EL.
+         *
+         * @returns {boolean}   Whether the editor supports EL
+         */
+        supportsEl: function () {
+            return true;
+        },
+
+        /**
+         * Returns whether this editor mode supports parameter reference.
+         *
+         * @returns {boolean}   Whether the editor supports parameter reference
+         */
+        supportsParameterReference: function () {
+            return true;
         }
     };
 }));
diff --git a/.../nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/languages/nfpr.js b/.../nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/languages/nfpr.js
@@ -478,8 +478,31 @@
             return completions;
         },
 
+        /**
+         * Returns the language id.
+         *
+         * @returns {string} language id
+         */
         getLanguageId: function () {
             return 'nfpr';
+        },
+
+        /**
+         * Returns whether this editor mode supports EL.
+         *
+         * @returns {boolean}   Whether the editor supports EL
+         */
+        supportsEl: function () {
+            return false;
+        },
+
+        /**
+         * Returns whether this editor mode supports parameter reference.
+         *
+         * @returns {boolean}   Whether the editor supports parameter reference
+         */
+        supportsParameterReference: function () {
+            return true;
         }
     };
 }));
diff --git a/...work/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js b/...work/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js
@@ -90,6 +90,49 @@
     var EDITOR_MIN_WIDTH = 212;
     var EDITOR_MIN_HEIGHT = 100;
 
+    var EL_SUPPORTED_TITLE = '<div>Expression Language (EL) supported</div>';
+    var EL_SUPPORTED_DESCRIPTION = '<div>After beginning with the start delimiter <span class="hint-pattern">${</span> use the keystroke '
+        + '<span class="hint-keystroke">control+space</span> to see a list of available functions.</div>';
+    var EL_UNSUPPORTED_TITLE = '<div>Expression Language (EL) not supported</div>';
+
+    var PARAM_SUPPORTED_TITLE = '<div>Parameters (PARAM) supported</div>';
+    var PARAM_SUPPORTED_DESCRIPTION = '<div>After beginning with the start delimiter <span class="hint-pattern">#{</span> use the keystroke '
+        + '<span class="hint-keystroke">control+space</span> to see a list of available parameters.</div>';
+    var PARAM_UNSUPPORTED_TITLE = '<div>Parameters (PARAM) not supported</div>';
+
+    var getSupportTip = function (isEl, isSupported) {
+        var supportContainer = $('<div></div>');
+
+        var supportTitleContainer = $('<div></div>')
+            .addClass('mode-hint-tip-title-container')
+            .appendTo(supportContainer);
+
+        if (isSupported) {
+            $('<div></div>')
+                .addClass('fa fa-check')
+                .appendTo(supportTitleContainer);
+            $(isEl ? EL_SUPPORTED_TITLE : PARAM_SUPPORTED_TITLE)
+                .addClass('mode-supported')
+                .appendTo(supportTitleContainer);
+
+            var supportDescriptionContainer = $('<div></div>')
+                .addClass('mode-hint-tip-description-container')
+                .appendTo(supportContainer);
+
+            $(isEl ? EL_SUPPORTED_DESCRIPTION : PARAM_SUPPORTED_DESCRIPTION)
+                .appendTo(supportDescriptionContainer);
+        } else {
+            $('<div></div>')
+                .addClass('fa fa-ban')
+                .appendTo(supportTitleContainer);
+            $(isEl ? EL_UNSUPPORTED_TITLE : PARAM_UNSUPPORTED_TITLE)
+                .addClass('mode-unsupported')
+                .appendTo(supportTitleContainer);
+        }
+
+        return supportContainer;
+    };
+
     var getNfEditor = function (getMode) {
         return function (args) {
             var scope = this;
@@ -99,6 +142,7 @@
             var isEmpty;
             var wrapper;
             var editor;
+            var tip;
 
             this.init = function () {
                 var container = $('body');
@@ -108,6 +152,8 @@
                 var descriptors = gridContainer.data('descriptors');
                 propertyDescriptor = descriptors[args.item.property];
 
+                var mode = getMode(propertyDescriptor);
+
                 // determine if this is a sensitive property
                 var sensitive = nfCommon.isSensitiveProperty(propertyDescriptor);
 
@@ -128,18 +174,73 @@
                         'cursor': 'move',
                         'transform': 'translate3d(0px, 0px, 0px)'
                     }).draggable({
-                        cancel: '.button, .nf-editor, .string-check-container > *',
+                        cancel: '.button, .mode-hint-element, .nf-editor, .string-check-container > *',
                         containment: 'parent'
                     }).appendTo(container);
 
+                // create the tip
+                tip = $('<div></div>')
+                    .addClass('mode-hint-tip')
+                    .appendTo(container);
+
+                var supportsEl = mode.supportsEl();
+                var supportsParameterReference = mode.supportsParameterReference();
+                tip.append(getSupportTip(true, supportsEl));
+                tip.append(getSupportTip(false, supportsParameterReference));
+
+                // create the mode hint
+                var modeHintContainer = $('<div></div>')
+                    .addClass('mode-hint-container')
+                    .appendTo(wrapper);
+                var modeHintElement = $('<div></div>')
+                    .addClass('mode-hint-element')
+                    .on('mouseenter', function () {
+                        var wrapperPosition = wrapper.position();
+                        var tipTop = wrapperPosition.top - tip.outerHeight() + 2;
+                        var tipLeft = wrapperPosition.left + wrapper.outerWidth() - tip.outerWidth() + 5;
+                        tip.css({
+                            top: tipTop + 'px',
+                            left: tipLeft + 'px'
+                        });
+                        tip.show();
+                    })
+                    .on('mouseleave', function () {
+                        tip.hide();
+                    })
+                    .appendTo(modeHintContainer);
+
+                // el hint
+                var elModeHintContainer = $('<div></div>')
+                    .addClass('mode-hint')
+                    .appendTo(modeHintElement);
+
+                $('<div>EL</div>')
+                    .appendTo(elModeHintContainer);
+                $('<div></div>')
+                    .addClass('mode-hint-value fa')
+                    .addClass(supportsEl ? 'fa-check' : 'fa-ban')
+                    .appendTo(elModeHintContainer);
+
+                // parameter hint
+                var paramModeHitContainer = $('<div></div>')
+                    .addClass('mode-hint')
+                    .appendTo(modeHintElement);
+
+                $('<div>PARAM</div>')
+                    .appendTo(paramModeHitContainer);
+                $('<div></div>')
+                    .addClass('mode-hint-value fa')
+                    .addClass(supportsParameterReference ? 'fa-check' : 'fa-ban')
+                    .appendTo(paramModeHitContainer);
+
                 var editorWidth = Math.max(args.position.width, EDITOR_MIN_WIDTH);
 
                 // create the editor
                 editor = $('<div></div>')
                     .addClass('nf-editor')
                     .appendTo(wrapper)
                     .nfeditor({
-                        languageMode: getMode(propertyDescriptor),
+                        languageMode: mode,
                         width: editorWidth,
                         minWidth: EDITOR_MIN_WIDTH,
                         minHeight: EDITOR_MIN_HEIGHT,
@@ -234,6 +335,7 @@
             this.destroy = function () {
                 editor.nfeditor('destroy');
                 wrapper.remove();
+                tip.remove();
             };
 
             this.focus = function () {