You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@nifi.apache.org by sc...@apache.org on 2019/08/30 17:54:09 UTC
[nifi] 02/09: NIFI-6345: - Updating property table editor to
distinguish between available modes (el vs parameter reference).
This is an automated email from the ASF dual-hosted git repository.
scottyaslan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/nifi.git
commit 7228496801735054c44fb9d0dbc75ce51be05f56
Author: Matt Gilman <ma...@gmail.com>
AuthorDate: Mon Jun 3 14:30:22 2019 -0400
NIFI-6345:
- Updating property table editor to distinguish between available modes (el vs parameter reference).
---
.../js/jquery/nfeditor/languages/nfeditor.css | 80 ++++++++++++++++
.../webapp/js/jquery/nfeditor/languages/nfel.js | 23 +++++
.../webapp/js/jquery/nfeditor/languages/nfpr.js | 23 +++++
.../jquery/propertytable/jquery.propertytable.js | 106 ++++++++++++++++++++-
4 files changed, 230 insertions(+), 2 deletions(-)
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/languages/nfeditor.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/languages/nfeditor.css
index 03b600c..24093e0 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/languages/nfeditor.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-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-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/languages/nfel.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/languages/nfel.js
index 3ce1211..0cf813c 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/languages/nfel.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/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-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/languages/nfpr.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/languages/nfpr.js
index 1ba044d..23e5af4 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/languages/nfpr.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/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/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js
index 2d534c4..ce5dea5 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/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,10 +174,65 @@
'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
@@ -139,7 +240,7 @@
.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 () {