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 2021/10/11 20:16:02 UTC
[nifi] branch main updated: NIFI-9258: - Populating the empty state
when a parameter is not referenced by any component. - Tweaking margins so
the references are slightly more compact.
This is an automated email from the ASF dual-hosted git repository.
scottyaslan pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/nifi.git
The following commit(s) were added to refs/heads/main by this push:
new 650da75 NIFI-9258: - Populating the empty state when a parameter is not referenced by any component. - Tweaking margins so the references are slightly more compact.
650da75 is described below
commit 650da75f2dbaa15cc10bd64fe102ef0f6d7c8bc3
Author: Matt Gilman <ma...@gmail.com>
AuthorDate: Tue Oct 5 15:26:28 2021 -0400
NIFI-9258:
- Populating the empty state when a parameter is not referenced by any component.
- Tweaking margins so the references are slightly more compact.
This closes #5442
Signed-off-by: Scott Aslan <sc...@gmail.com>
---
.../webapp/css/new-parameter-context-dialog.css | 13 +-
.../webapp/js/nf/canvas/nf-parameter-contexts.js | 275 +++++++++++----------
2 files changed, 150 insertions(+), 138 deletions(-)
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-parameter-context-dialog.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-parameter-context-dialog.css
index 8b4ef45..a3c3051 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-parameter-context-dialog.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-parameter-context-dialog.css
@@ -87,7 +87,7 @@
#parameter-referencing-components-container {
position: absolute;
bottom: 10px;
- top: 75px;
+ top: 62px;
width: calc(100% - 5px);
overflow: auto;
border: 0 solid #CCCCCC;
@@ -95,6 +95,10 @@
padding: 2px;
}
+#parameter-referencing-components-container div.referencing-component-references {
+ margin: 0;
+}
+
.referencing-components-template {
position: relative;
left: 15px;
@@ -112,7 +116,7 @@
span.parameter-context-referencing-component-name {
margin-left: 5px;
- max-width: calc(100% - 70px);
+ max-width: calc(100% - 30px);
}
#parameter-context-updating-status {
@@ -210,3 +214,8 @@ span.parameter-context-referencing-component-name {
max-width: calc(100% - 230px);
z-index: 999;
}
+
+#parameter-context-referencing-components ul.referencing-component-listing {
+ margin-bottom: 0;
+ margin-left: 10px;
+}
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 7e203bd..6ec550d 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
@@ -563,15 +563,13 @@
loadingDeferred.then(function () {
resetUsage();
}).then(function() {
- var parameterReferencingComponentsContainer = $('#parameter-referencing-components-container');
+ var parameterReferencingComponentsContainer = $('#parameter-referencing-components-container').empty();
// referencing component will be undefined when a new parameter is added
if (nfCommon.isUndefined(referencingComponents)) {
// set to pending
$('<div class="referencing-component-container"><span class="unset">Pending Apply</span></div>').appendTo(parameterReferencingComponentsContainer);
} else {
- $('#parameter-referencing-components-container').empty();
-
// bin the referencing components according to their type
$.each(referencingComponents, function (_, referencingComponentEntity) {
if (referencingComponentEntity.permissions.canRead === true && referencingComponentEntity.permissions.canWrite === true) {
@@ -654,157 +652,162 @@
}
}
- //sort alphabetically
- var sortedReferencingProcessGroups = referencingProcessGroupsArray.sort(function (a, b) {
- if (a.name < b.name) {
- return -1;
- }
- if (a.name > b.name) {
- return 1;
- }
- return 0;
- });
-
- sortedReferencingProcessGroups.forEach(function (referencingProcessGroup) {
- // container for this pg's references
- var referencingPgReferencesContainer = $('<div class="referencing-component-references"></div>');
- parameterReferencingComponentsContainer.append(referencingPgReferencesContainer);
-
- // create the collapsable listing for each PG
- var createReferenceBlock = function (referencingProcessGroup, list) {
- var twist = $('<div class="expansion-button collapsed"></div>');
- var title = $('<span class="referencing-component-title"></span>').text(referencingProcessGroup.name);
- var count = $('<span class="referencing-component-count"></span>').text('(' + (referencingProcessGroup.referencingProcessors.length + referencingProcessGroup.referencingControllerServices.length + referencingProcessGroup.unauthorizedReferencingComponents.length) + ')');
- var referencingComponents = $('#referencing-components-template').clone();
- referencingComponents.removeAttr('id');
- referencingComponents.removeClass('hidden');
-
- // create the reference block
- var groupTwist = $('<div class="referencing-component-block pointer unselectable"></div>').data('processGroupId', referencingProcessGroup.id).on('click', function () {
- if (twist.hasClass('collapsed')) {
- groupTwist.append(referencingComponents);
-
- var processorContainer = groupTwist.find('.parameter-context-referencing-processors');
- nfCommon.cleanUpTooltips(processorContainer, 'div.referencing-component-state');
- nfCommon.cleanUpTooltips(processorContainer, 'div.referencing-component-bulletins');
- processorContainer.empty();
-
- var controllerServiceContainer = groupTwist.find('.parameter-context-referencing-controller-services');
- nfCommon.cleanUpTooltips(controllerServiceContainer, 'div.referencing-component-state');
- nfCommon.cleanUpTooltips(controllerServiceContainer, 'div.referencing-component-bulletins');
- controllerServiceContainer.empty();
-
- var unauthorizedComponentsContainer = groupTwist.find('.parameter-context-referencing-unauthorized-components').empty();
-
- if (referencingProcessGroups[$(this).data('processGroupId')].referencingProcessors.length === 0) {
- $('<li class="referencing-component-container"><span class="unset">None</span></li>').appendTo(processorContainer);
- } else {
- // sort the referencing processors
- referencingProcessGroups[$(this).data('processGroupId')].referencingProcessors.sort(nameComparator);
-
- // render each and register a click handler
- $.each(referencingProcessGroups[$(this).data('processGroupId')].referencingProcessors, function (_, referencingProcessorEntity) {
- renderReferencingProcessor(referencingProcessorEntity, processorContainer);
- });
- }
+ if (nfCommon.isEmpty(referencingProcessGroupsArray)) {
+ // set to none
+ $('<div class="referencing-component-container"><span class="unset">None</span></div>').appendTo(parameterReferencingComponentsContainer);
+ } else {
+ //sort alphabetically
+ var sortedReferencingProcessGroups = referencingProcessGroupsArray.sort(function (a, b) {
+ if (a.name < b.name) {
+ return -1;
+ }
+ if (a.name > b.name) {
+ return 1;
+ }
+ return 0;
+ });
- if (referencingProcessGroups[$(this).data('processGroupId')].referencingControllerServices.length === 0) {
- $('<li class="referencing-component-container"><span class="unset">None</span></li>').appendTo(controllerServiceContainer);
- } else {
- // sort the referencing controller services
- referencingProcessGroups[$(this).data('processGroupId')].referencingControllerServices.sort(nameComparator);
+ sortedReferencingProcessGroups.forEach(function (referencingProcessGroup) {
+ // container for this pg's references
+ var referencingPgReferencesContainer = $('<div class="referencing-component-references"></div>');
+ parameterReferencingComponentsContainer.append(referencingPgReferencesContainer);
+
+ // create the collapsable listing for each PG
+ var createReferenceBlock = function (referencingProcessGroup, list) {
+ var twist = $('<div class="expansion-button collapsed"></div>');
+ var title = $('<span class="referencing-component-title"></span>').text(referencingProcessGroup.name);
+ var count = $('<span class="referencing-component-count"></span>').text('(' + (referencingProcessGroup.referencingProcessors.length + referencingProcessGroup.referencingControllerServices.length + referencingProcessGroup.unauthorizedReferencingComponents.length) + ')');
+ var referencingComponents = $('#referencing-components-template').clone();
+ referencingComponents.removeAttr('id');
+ referencingComponents.removeClass('hidden');
+
+ // create the reference block
+ var groupTwist = $('<div class="referencing-component-block pointer unselectable"></div>').data('processGroupId', referencingProcessGroup.id).on('click', function () {
+ if (twist.hasClass('collapsed')) {
+ groupTwist.append(referencingComponents);
+
+ var processorContainer = groupTwist.find('.parameter-context-referencing-processors');
+ nfCommon.cleanUpTooltips(processorContainer, 'div.referencing-component-state');
+ nfCommon.cleanUpTooltips(processorContainer, 'div.referencing-component-bulletins');
+ processorContainer.empty();
+
+ var controllerServiceContainer = groupTwist.find('.parameter-context-referencing-controller-services');
+ nfCommon.cleanUpTooltips(controllerServiceContainer, 'div.referencing-component-state');
+ nfCommon.cleanUpTooltips(controllerServiceContainer, 'div.referencing-component-bulletins');
+ controllerServiceContainer.empty();
+
+ var unauthorizedComponentsContainer = groupTwist.find('.parameter-context-referencing-unauthorized-components').empty();
+
+ if (referencingProcessGroups[$(this).data('processGroupId')].referencingProcessors.length === 0) {
+ $('<li class="referencing-component-container"><span class="unset">None</span></li>').appendTo(processorContainer);
+ } else {
+ // sort the referencing processors
+ referencingProcessGroups[$(this).data('processGroupId')].referencingProcessors.sort(nameComparator);
+
+ // render each and register a click handler
+ $.each(referencingProcessGroups[$(this).data('processGroupId')].referencingProcessors, function (_, referencingProcessorEntity) {
+ renderReferencingProcessor(referencingProcessorEntity, processorContainer);
+ });
+ }
- // render each and register a click handler
- $.each(referencingProcessGroups[$(this).data('processGroupId')].referencingControllerServices, function (_, referencingControllerServiceEntity) {
- renderReferencingControllerService(referencingControllerServiceEntity, controllerServiceContainer);
- });
- }
+ if (referencingProcessGroups[$(this).data('processGroupId')].referencingControllerServices.length === 0) {
+ $('<li class="referencing-component-container"><span class="unset">None</span></li>').appendTo(controllerServiceContainer);
+ } else {
+ // sort the referencing controller services
+ referencingProcessGroups[$(this).data('processGroupId')].referencingControllerServices.sort(nameComparator);
- if (referencingProcessGroups[$(this).data('processGroupId')].unauthorizedReferencingComponents.length === 0) {
- $('<li class="referencing-component-container"><span class="unset">None</span></li>').appendTo(unauthorizedComponentsContainer);
- } else {
- // sort the unauthorized referencing components
- referencingProcessGroups[$(this).data('processGroupId')].unauthorizedReferencingComponents.sort(function (a, b) {
- if (a.permissions.canRead === true && b.permissions.canRead === true) {
- // processors before controller services
- var sortVal = a.component.referenceType === b.component.referenceType ? 0 : a.component.referenceType > b.component.referenceType ? -1 : 1;
-
- // if a and b are the same type, then sort by name
- if (sortVal === 0) {
- sortVal = a.component.name === b.component.name ? 0 : a.component.name > b.component.name ? 1 : -1;
- }
+ // render each and register a click handler
+ $.each(referencingProcessGroups[$(this).data('processGroupId')].referencingControllerServices, function (_, referencingControllerServiceEntity) {
+ renderReferencingControllerService(referencingControllerServiceEntity, controllerServiceContainer);
+ });
+ }
- return sortVal;
- } else {
+ if (referencingProcessGroups[$(this).data('processGroupId')].unauthorizedReferencingComponents.length === 0) {
+ $('<li class="referencing-component-container"><span class="unset">None</span></li>').appendTo(unauthorizedComponentsContainer);
+ } else {
+ // sort the unauthorized referencing components
+ referencingProcessGroups[$(this).data('processGroupId')].unauthorizedReferencingComponents.sort(function (a, b) {
+ if (a.permissions.canRead === true && b.permissions.canRead === true) {
+ // processors before controller services
+ var sortVal = a.component.referenceType === b.component.referenceType ? 0 : a.component.referenceType > b.component.referenceType ? -1 : 1;
+
+ // if a and b are the same type, then sort by name
+ if (sortVal === 0) {
+ sortVal = a.component.name === b.component.name ? 0 : a.component.name > b.component.name ? 1 : -1;
+ }
- // if lacking read and write perms on both, sort by id
- if (a.permissions.canRead === false && b.permissions.canRead === false) {
- return a.id > b.id ? 1 : -1;
+ return sortVal;
} else {
- // if only one has read perms, then let it come first
- if (a.permissions.canRead === true) {
- return -1;
+
+ // if lacking read and write perms on both, sort by id
+ if (a.permissions.canRead === false && b.permissions.canRead === false) {
+ return a.id > b.id ? 1 : -1;
} else {
- return 1;
+ // if only one has read perms, then let it come first
+ if (a.permissions.canRead === true) {
+ return -1;
+ } else {
+ return 1;
+ }
}
}
- }
- });
+ });
- $.each(referencingProcessGroups[$(this).data('processGroupId')].unauthorizedReferencingComponents, function (_, unauthorizedReferencingComponentEntity) {
- if (unauthorizedReferencingComponentEntity.permissions.canRead === true) {
- if (unauthorizedReferencingComponentEntity.component.referenceType === 'PROCESSOR') {
- renderReferencingProcessor(unauthorizedReferencingComponentEntity, unauthorizedComponentsContainer);
+ $.each(referencingProcessGroups[$(this).data('processGroupId')].unauthorizedReferencingComponents, function (_, unauthorizedReferencingComponentEntity) {
+ if (unauthorizedReferencingComponentEntity.permissions.canRead === true) {
+ if (unauthorizedReferencingComponentEntity.component.referenceType === 'PROCESSOR') {
+ renderReferencingProcessor(unauthorizedReferencingComponentEntity, unauthorizedComponentsContainer);
+ } else {
+ renderReferencingControllerService(unauthorizedReferencingComponentEntity, unauthorizedComponentsContainer);
+ }
} else {
- renderReferencingControllerService(unauthorizedReferencingComponentEntity, unauthorizedComponentsContainer);
+ var referencingUnauthorizedComponentContainer = $('<li class="referencing-component-container"></li>').appendTo(unauthorizedComponentsContainer);
+ $('<span class="parameter-context-referencing-component-name link ellipsis"></span>')
+ .prop('title', unauthorizedReferencingComponentEntity.id)
+ .text(unauthorizedReferencingComponentEntity.id)
+ .on('click', function () {
+ // check if there are outstanding changes
+ handleOutstandingChanges().done(function () {
+ // close the shell
+ $('#shell-dialog').modal('hide');
+
+ // show the component in question
+ if (unauthorizedReferencingComponentEntity.referenceType === 'PROCESSOR') {
+ nfCanvasUtils.showComponent(unauthorizedReferencingComponentEntity.processGroup.id, unauthorizedReferencingComponentEntity.id);
+ } else if (unauthorizedReferencingComponentEntity.referenceType === 'CONTROLLER_SERVICE') {
+ nfProcessGroupConfiguration.showConfiguration(unauthorizedReferencingComponentEntity.processGroup.id).done(function () {
+ nfProcessGroup.enterGroup(unauthorizedReferencingComponentEntity.processGroup.id);
+ nfProcessGroupConfiguration.selectControllerService(unauthorizedReferencingComponentEntity.id);
+ });
+ }
+ });
+ })
+ .appendTo(referencingUnauthorizedComponentContainer);
}
- } else {
- var referencingUnauthorizedComponentContainer = $('<li class="referencing-component-container"></li>').appendTo(unauthorizedComponentsContainer);
- $('<span class="parameter-context-referencing-component-name link ellipsis"></span>')
- .prop('title', unauthorizedReferencingComponentEntity.id)
- .text(unauthorizedReferencingComponentEntity.id)
- .on('click', function () {
- // check if there are outstanding changes
- handleOutstandingChanges().done(function () {
- // close the shell
- $('#shell-dialog').modal('hide');
-
- // show the component in question
- if (unauthorizedReferencingComponentEntity.referenceType === 'PROCESSOR') {
- nfCanvasUtils.showComponent(unauthorizedReferencingComponentEntity.processGroup.id, unauthorizedReferencingComponentEntity.id);
- } else if (unauthorizedReferencingComponentEntity.referenceType === 'CONTROLLER_SERVICE') {
- nfProcessGroupConfiguration.showConfiguration(unauthorizedReferencingComponentEntity.processGroup.id).done(function () {
- nfProcessGroup.enterGroup(unauthorizedReferencingComponentEntity.processGroup.id);
- nfProcessGroupConfiguration.selectControllerService(unauthorizedReferencingComponentEntity.id);
- });
- }
- });
- })
- .appendTo(referencingUnauthorizedComponentContainer);
- }
- });
+ });
+ }
+ } else {
+ groupTwist.find('.referencing-components-template').remove();
}
- } else {
- groupTwist.find('.referencing-components-template').remove();
- }
- // toggle this block
- toggle(twist, list);
+ // toggle this block
+ toggle(twist, list);
- // update the border if necessary
- updateReferencingComponentsBorder($('#parameter-referencing-components-container'));
- }).append(twist).append(title).append(count).appendTo(referencingPgReferencesContainer);
+ // update the border if necessary
+ updateReferencingComponentsBorder($('#parameter-referencing-components-container'));
+ }).append(twist).append(title).append(count).appendTo(referencingPgReferencesContainer);
- // add the listing
- list.appendTo(referencingPgReferencesContainer);
+ // add the listing
+ list.appendTo(referencingPgReferencesContainer);
- // expand the group twist
- groupTwist.click();
- };
+ // expand the group twist
+ groupTwist.click();
+ };
- // create block for this process group
- createReferenceBlock(referencingProcessGroup, groups);
- });
+ // create block for this process group
+ createReferenceBlock(referencingProcessGroup, groups);
+ });
+ }
}
})
.always(function () {