From bf3b1640fce1cded2197b8a898e0f58081a89df4 Mon Sep 17 00:00:00 2001 From: Scott Aslan Date: Fri, 3 Feb 2017 18:09:16 -0500 Subject: [PATCH] [NIFI-3360] taking bottom up approach to modularizing the canvas...wrapping modulaes with UMD and keep the app loading - taking top down approach from this point and leveraging inversion of control desgin pattern - This closes #1487 --- .../nifi-web/nifi-web-ui/pom.xml | 79 +- .../main/resources/filters/canvas.properties | 79 +- .../WEB-INF/partials/canvas/canvas-header.jsp | 22 +- .../WEB-INF/partials/canvas/navigation.jsp | 14 +- .../js/jquery/nfeditor/languages/nfel.js | 2 +- .../js/nf/bulletin-board/nf-bulletin-board.js | 2 +- .../nf-ng-breadcrumbs-controller.js | 268 ++-- .../nf-ng-canvas-flow-status-controller.js | 857 +++++----- .../nf-ng-canvas-global-menu-controller.js | 654 ++++---- .../nf-ng-canvas-graph-controls-controller.js | 622 ++++---- .../nf-ng-canvas-header-controller.js | 204 +-- .../nf-ng-canvas-navigate-controller.js | 136 +- .../nf-ng-canvas-operate-controller.js | 807 +++++----- .../nf-ng-canvas-toolbox-controller.js | 254 +-- .../directives/nf-ng-breadcrumbs-directive.js | 46 +- .../directives/nf-ng-draggable-directive.js | 32 +- .../components/nf-ng-funnel-component.js | 216 +-- .../components/nf-ng-group-component.js | 403 ++--- .../components/nf-ng-input-port-component.js | 387 ++--- .../components/nf-ng-label-component.js | 223 +-- .../components/nf-ng-output-port-component.js | 369 +++-- .../components/nf-ng-processor-component.js | 1192 +++++++------- .../nf-ng-remote-process-group-component.js | 509 +++--- .../components/nf-ng-template-component.js | 417 ++--- .../main/webapp/js/nf/canvas/nf-actions.js | 582 ++++--- .../main/webapp/js/nf/canvas/nf-birdseye.js | 78 +- .../js/nf/canvas/nf-canvas-bootstrap.js | 400 +++++ .../js/nf/canvas/nf-canvas-error-handler.js | 24 +- .../webapp/js/nf/canvas/nf-canvas-utils.js | 816 +++++----- .../src/main/webapp/js/nf/canvas/nf-canvas.js | 1399 ++++++++--------- .../main/webapp/js/nf/canvas/nf-clipboard.js | 42 +- .../webapp/js/nf/canvas/nf-component-state.js | 60 +- .../webapp/js/nf/canvas/nf-connectable.js | 52 +- .../nf/canvas/nf-connection-configuration.js | 261 +-- .../main/webapp/js/nf/canvas/nf-connection.js | 332 ++-- .../webapp/js/nf/canvas/nf-context-menu.js | 224 +-- .../js/nf/canvas/nf-controller-service.js | 299 ++-- .../js/nf/canvas/nf-controller-services.js | 199 ++- .../main/webapp/js/nf/canvas/nf-custom-ui.js | 2 +- .../main/webapp/js/nf/canvas/nf-draggable.js | 278 ++-- .../src/main/webapp/js/nf/canvas/nf-funnel.js | 83 +- .../src/main/webapp/js/nf/canvas/nf-go-to.js | 129 +- .../src/main/webapp/js/nf/canvas/nf-graph.js | 371 ++++- .../js/nf/canvas/nf-label-configuration.js | 54 +- .../src/main/webapp/js/nf/canvas/nf-label.js | 111 +- .../js/nf/canvas/nf-policy-management.js | 145 +- .../js/nf/canvas/nf-port-configuration.js | 61 +- .../webapp/js/nf/canvas/nf-port-details.js | 39 +- .../src/main/webapp/js/nf/canvas/nf-port.js | 127 +- .../canvas/nf-process-group-configuration.js | 100 +- .../webapp/js/nf/canvas/nf-process-group.js | 167 +- .../nf/canvas/nf-processor-configuration.js | 124 +- .../main/webapp/js/nf/canvas/nf-processor.js | 135 +- .../webapp/js/nf/canvas/nf-queue-listing.js | 140 +- .../nf-remote-process-group-configuration.js | 98 +- .../canvas/nf-remote-process-group-details.js | 68 +- .../canvas/nf-remote-process-group-ports.js | 115 +- .../js/nf/canvas/nf-remote-process-group.js | 158 +- .../webapp/js/nf/canvas/nf-reporting-task.js | 153 +- .../main/webapp/js/nf/canvas/nf-selectable.js | 48 +- .../main/webapp/js/nf/canvas/nf-settings.js | 295 ++-- .../main/webapp/js/nf/canvas/nf-snippet.js | 83 +- .../webapp/js/nf/cluster/nf-cluster-table.js | 2 +- .../main/webapp/js/nf/cluster/nf-cluster.js | 2 +- .../js/nf/counters/nf-counters-table.js | 2 +- .../main/webapp/js/nf/counters/nf-counters.js | 2 +- .../webapp/js/nf/history/nf-history-model.js | 2 +- .../webapp/js/nf/history/nf-history-table.js | 2 +- .../main/webapp/js/nf/history/nf-history.js | 2 +- .../src/main/webapp/js/nf/login/nf-login.js | 7 +- .../src/main/webapp/js/nf/nf-ajax-setup.js | 2 +- .../src/main/webapp/js/nf/nf-client.js | 2 +- .../main/webapp/js/nf/nf-cluster-summary.js | 2 +- .../src/main/webapp/js/nf/nf-common.js | 11 +- .../webapp/js/nf/nf-connection-details.js | 2 +- .../src/main/webapp/js/nf/nf-dialog.js | 2 +- .../src/main/webapp/js/nf/nf-error-handler.js | 2 +- .../src/main/webapp/js/nf/nf-ng-app-config.js | 2 +- .../main/webapp/js/nf/nf-ng-app-controller.js | 37 +- .../src/main/webapp/js/nf/nf-ng-bridge.js | 2 +- .../webapp/js/nf/nf-ng-service-provider.js | 2 +- .../main/webapp/js/nf/nf-processor-details.js | 2 +- .../src/main/webapp/js/nf/nf-shell.js | 35 +- .../main/webapp/js/nf/nf-status-history.js | 2 +- .../src/main/webapp/js/nf/nf-storage.js | 2 +- .../main/webapp/js/nf/nf-universal-capture.js | 2 +- .../js/nf/provenance/nf-provenance-lineage.js | 2 +- .../js/nf/provenance/nf-provenance-table.js | 6 +- .../webapp/js/nf/provenance/nf-provenance.js | 2 +- .../webapp/js/nf/summary/nf-cluster-search.js | 2 +- .../webapp/js/nf/summary/nf-summary-table.js | 6 +- .../main/webapp/js/nf/summary/nf-summary.js | 2 +- .../js/nf/templates/nf-templates-table.js | 4 +- .../webapp/js/nf/templates/nf-templates.js | 2 +- .../main/webapp/js/nf/users/nf-users-table.js | 12 +- .../src/main/webapp/js/nf/users/nf-users.js | 2 +- 96 files changed, 9188 insertions(+), 6628 deletions(-) create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-bootstrap.js diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/pom.xml b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/pom.xml index d04f2075f5..d0c70f004e 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/pom.xml +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/pom.xml @@ -422,56 +422,57 @@ true ${project.build.directory}/${project.build.finalName}/js/nf/canvas/nf-canvas-all.js - ${staging.dir}/js/nf/nf-dialog.js + ${staging.dir}/js/nf/nf-ng-bridge.js + ${staging.dir}/js/nf/nf-ng-service-provider.js + ${staging.dir}/js/nf/nf-cluster-summary.js ${staging.dir}/js/nf/nf-storage.js ${staging.dir}/js/nf/nf-ajax-setup.js - ${staging.dir}/js/nf/nf-common.js - ${staging.dir}/js/nf/nf-client.js - ${staging.dir}/js/nf/nf-error-handler.js - ${staging.dir}/js/nf/canvas/nf-context-menu.js - ${staging.dir}/js/nf/nf-ng-bridge.js - ${staging.dir}/js/nf/nf-cluster-summary.js - ${staging.dir}/js/nf/canvas/nf-canvas.js - ${staging.dir}/js/nf/canvas/nf-canvas-error-handler.js ${staging.dir}/js/nf/nf-universal-capture.js - ${staging.dir}/js/nf/nf-shell.js - ${staging.dir}/js/nf/canvas/nf-snippet.js - ${staging.dir}/js/nf/canvas/nf-queue-listing.js + ${staging.dir}/js/nf/nf-dialog.js + ${staging.dir}/js/nf/nf-common.js + ${staging.dir}/js/nf/nf-error-handler.js ${staging.dir}/js/nf/canvas/nf-component-state.js + ${staging.dir}/js/nf/nf-shell.js + ${staging.dir}/js/nf/nf-client.js + ${staging.dir}/js/nf/canvas/nf-clipboard.js ${staging.dir}/js/nf/canvas/nf-custom-ui.js - ${staging.dir}/js/nf/canvas/nf-controller-service.js - ${staging.dir}/js/nf/canvas/nf-controller-services.js - ${staging.dir}/js/nf/canvas/nf-reporting-task.js - ${staging.dir}/js/nf/canvas/nf-processor-configuration.js - ${staging.dir}/js/nf/nf-processor-details.js - ${staging.dir}/js/nf/canvas/nf-process-group-configuration.js - ${staging.dir}/js/nf/canvas/nf-policy-management.js - ${staging.dir}/js/nf/canvas/nf-remote-process-group-configuration.js - ${staging.dir}/js/nf/canvas/nf-remote-process-group-details.js - ${staging.dir}/js/nf/canvas/nf-remote-process-group-ports.js - ${staging.dir}/js/nf/canvas/nf-port-configuration.js - ${staging.dir}/js/nf/canvas/nf-port-details.js - ${staging.dir}/js/nf/canvas/nf-label-configuration.js - ${staging.dir}/js/nf/canvas/nf-connection-configuration.js - ${staging.dir}/js/nf/nf-connection-details.js - ${staging.dir}/js/nf/nf-status-history.js - ${staging.dir}/js/nf/canvas/nf-graph.js - ${staging.dir}/js/nf/canvas/nf-processor.js + ${staging.dir}/js/nf/canvas/nf-canvas-utils.js + ${staging.dir}/js/nf/canvas/nf-go-to.js + ${staging.dir}/js/nf/canvas/nf-snippet.js + ${staging.dir}/js/nf/canvas/nf-connection.js + ${staging.dir}/js/nf/canvas/nf-funnel.js ${staging.dir}/js/nf/canvas/nf-label.js ${staging.dir}/js/nf/canvas/nf-port.js ${staging.dir}/js/nf/canvas/nf-process-group.js ${staging.dir}/js/nf/canvas/nf-remote-process-group.js - ${staging.dir}/js/nf/canvas/nf-funnel.js - ${staging.dir}/js/nf/canvas/nf-connection.js - ${staging.dir}/js/nf/canvas/nf-draggable.js - ${staging.dir}/js/nf/canvas/nf-connectable.js + ${staging.dir}/js/nf/canvas/nf-processor.js + ${staging.dir}/js/nf/canvas/nf-processor-configuration.js + ${staging.dir}/js/nf/nf-processor-details.js + ${staging.dir}/js/nf/canvas/nf-label-configuration.js + ${staging.dir}/js/nf/canvas/nf-port-configuration.js + ${staging.dir}/js/nf/canvas/nf-port-details.js + ${staging.dir}/js/nf/canvas/nf-process-group-configuration.js + ${staging.dir}/js/nf/canvas/nf-remote-process-group-configuration.js + ${staging.dir}/js/nf/canvas/nf-remote-process-group-details.js + ${staging.dir}/js/nf/canvas/nf-remote-process-group-ports.js + ${staging.dir}/js/nf/canvas/nf-connection-configuration.js + ${staging.dir}/js/nf/nf-connection-details.js + ${staging.dir}/js/nf/canvas/nf-context-menu.js ${staging.dir}/js/nf/canvas/nf-selectable.js ${staging.dir}/js/nf/canvas/nf-birdseye.js - ${staging.dir}/js/nf/canvas/nf-settings.js - ${staging.dir}/js/nf/canvas/nf-go-to.js + ${staging.dir}/js/nf/canvas/nf-draggable.js + ${staging.dir}/js/nf/canvas/nf-connectable.js + ${staging.dir}/js/nf/canvas/nf-graph.js + ${staging.dir}/js/nf/nf-status-history.js + ${staging.dir}/js/nf/canvas/nf-queue-listing.js + ${staging.dir}/js/nf/canvas/nf-policy-management.js ${staging.dir}/js/nf/canvas/nf-actions.js - ${staging.dir}/js/nf/canvas/nf-clipboard.js - ${staging.dir}/js/nf/nf-ng-service-provider.js + ${staging.dir}/js/nf/canvas/nf-canvas.js + ${staging.dir}/js/nf/canvas/nf-canvas-error-handler.js + ${staging.dir}/js/nf/canvas/nf-controller-service.js + ${staging.dir}/js/nf/canvas/nf-controller-services.js + ${staging.dir}/js/nf/canvas/nf-reporting-task.js + ${staging.dir}/js/nf/canvas/nf-settings.js ${staging.dir}/js/nf/canvas/controllers/nf-ng-breadcrumbs-controller.js ${staging.dir}/js/nf/canvas/controllers/nf-ng-canvas-header-controller.js ${staging.dir}/js/nf/canvas/controllers/nf-ng-canvas-toolbox-controller.js @@ -492,7 +493,7 @@ ${staging.dir}/js/nf/canvas/directives/nf-ng-draggable-directive.js ${staging.dir}/js/nf/nf-ng-app-controller.js ${staging.dir}/js/nf/nf-ng-app-config.js - ${staging.dir}/js/nf/canvas/nf-canvas-utils.js + ${staging.dir}/js/nf/canvas/nf-canvas-bootstrap.js diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/canvas.properties b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/canvas.properties index dbc2ac25f5..b5b9e33b67 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/canvas.properties +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/canvas.properties @@ -13,56 +13,57 @@ # See the License for the specific language governing permissions and # limitations under the License. -nf.canvas.script.tags=\n\ +nf.canvas.script.tags=\n\ +\n\ +\n\ \n\ \n\ -\n\ -\n\ -\n\ -\n\ -\n\ -\n\ -\n\ -\n\ \n\ -\n\ -\n\ -\n\ +\n\ +\n\ +\n\ \n\ +\n\ +\n\ +\n\ \n\ -\n\ -\n\ -\n\ -\n\ -\n\ -\n\ -\n\ -\n\ -\n\ -\n\ -\n\ -\n\ -\n\ -\n\ -\n\ -\n\ -\n\ -\n\ +\n\ +\n\ +\n\ +\n\ +\n\ \n\ \n\ \n\ \n\ -\n\ -\n\ -\n\ -\n\ +\n\ +\n\ +\n\ +\n\ +\n\ +\n\ +\n\ +\n\ +\n\ +\n\ +\n\ +\n\ +\n\ \n\ \n\ -\n\ -\n\ +\n\ +\n\ +\n\ +\n\ +\n\ +\n\ \n\ -\n\ -\n\ +\n\ +\n\ +\n\ +\n\ +\n\ +\n\ \n\ \n\ \n\ @@ -83,6 +84,6 @@ nf.canvas.script.tags=\n\ \n\ \n\ - + nf.canvas.style.tags=\n\ \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/canvas-header.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/canvas-header.jsp index 15c60add17..c7064f8ff7 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/canvas-header.jsp +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/canvas-header.jsp @@ -22,56 +22,56 @@ @@ -146,15 +146,15 @@ Flow Configuration History - - + + Users - + diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/navigation.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/navigation.jsp index ed67aaa80a..e42e60d125 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/navigation.jsp +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/navigation.jsp @@ -17,8 +17,8 @@ <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
@@ -95,8 +95,8 @@ ng-disabled="!(appCtrl.serviceProvider.graphControlsCtrl.canConfigureOrOpenDetails())">
-
 
-
+
 
+
@@ -128,13 +128,13 @@
 
 
@@ -154,7 +154,7 @@
 
 
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 807cf11212..44f4b0345e 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 @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, define, module, require, exports */ +/* global define, module, require, exports */ /* requires qtip plugin to be loaded first*/ diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/bulletin-board/nf-bulletin-board.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/bulletin-board/nf-bulletin-board.js index c36296bac2..b563a51db8 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/bulletin-board/nf-bulletin-board.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/bulletin-board/nf-bulletin-board.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, define, module, require, exports */ +/* global define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-breadcrumbs-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-breadcrumbs-controller.js index 16a90593aa..c1771756e1 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-breadcrumbs-controller.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-breadcrumbs-controller.js @@ -15,108 +15,92 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ng.BreadcrumbsCtrl = function (serviceProvider) { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'nf.Common'], + function ($, common) { + return (nf.ng.BreadcrumbsCtrl = factory($, common)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.BreadcrumbsCtrl = + factory(require('jquery'), + require('nf.Common'))); + } else { + nf.ng.BreadcrumbsCtrl = factory(root.$, + root.nf.Common); + } +}(this, function ($, common) { 'use strict'; - function BreadcrumbsCtrl() { - this.breadcrumbs = []; - } - BreadcrumbsCtrl.prototype = { - constructor: BreadcrumbsCtrl, + return function (serviceProvider) { + 'use strict'; - /** - * Register the breadcrumbs controller. - */ - register: function() { - if (serviceProvider.breadcrumbsCtrl === undefined) { - serviceProvider.register('breadcrumbsCtrl', breadcrumbsCtrl); - } - }, - - /** - * Generate the breadcrumbs. - * - * @param {object} breadcrumbEntity The breadcrumb - */ - generateBreadcrumbs: function(breadcrumbEntity) { - var label = breadcrumbEntity.id; - if (breadcrumbEntity.permissions.canRead) { - label = breadcrumbEntity.breadcrumb.name; - } - - this.breadcrumbs.unshift($.extend({ - 'label': label - }, breadcrumbEntity)); - - if (nf.Common.isDefinedAndNotNull(breadcrumbEntity.parentBreadcrumb)) { - this.generateBreadcrumbs(breadcrumbEntity.parentBreadcrumb); - } - }, - - /** - * Reset the breadcrumbs. - */ - resetBreadcrumbs: function() { + function BreadcrumbsCtrl() { this.breadcrumbs = []; - }, + } - /** - * Get the breadcrumbs. - */ - getBreadcrumbs: function() { - return this.breadcrumbs; - }, + BreadcrumbsCtrl.prototype = { + constructor: BreadcrumbsCtrl, - /** - * Update the breadcrumbs css. - * - * @param {object} style The style to be applied. - */ - updateBreadcrumbsCss: function(style) { - $('#breadcrumbs').css(style); - }, + /** + * Register the breadcrumbs controller. + */ + register: function () { + if (serviceProvider.breadcrumbsCtrl === undefined) { + serviceProvider.register('breadcrumbsCtrl', breadcrumbsCtrl); + } + }, - /** - * Reset initial scroll position. - */ - resetScrollPosition: function() { - var title = $('#data-flow-title-container'); - var titlePosition = title.position(); - var titleWidth = title.outerWidth(); - var titleRight = titlePosition.left + titleWidth; - - var padding = $('#breadcrumbs-right-border').width(); - var viewport = $('#data-flow-title-viewport'); - var viewportWidth = viewport.width(); - var viewportRight = viewportWidth - padding; - - // if the title's right is past the viewport's right, shift accordingly - if (titleRight > viewportRight) { - // adjust the position - title.css('left', (titlePosition.left - (titleRight - viewportRight)) + 'px'); - } else { - title.css('left', '10px'); - } - }, - - /** - * Registers a scroll event on the `element` - * - * @param {object} element The element event listener will be registered upon. - */ - registerMouseWheelEvent: function(element) { - // mousewheel -> IE, Chrome - // DOMMouseScroll -> FF - // wheel -> FF, IE - - // still having issues with this in IE :/ - element.on('DOMMouseScroll mousewheel', function (evt, d) { - if (nf.Common.isUndefinedOrNull(evt.originalEvent)) { - return; + /** + * Generate the breadcrumbs. + * + * @param {object} breadcrumbEntity The breadcrumb + */ + generateBreadcrumbs: function (breadcrumbEntity) { + var label = breadcrumbEntity.id; + if (breadcrumbEntity.permissions.canRead) { + label = breadcrumbEntity.breadcrumb.name; } + this.breadcrumbs.unshift($.extend({ + 'label': label + }, breadcrumbEntity)); + + if (common.isDefinedAndNotNull(breadcrumbEntity.parentBreadcrumb)) { + this.generateBreadcrumbs(breadcrumbEntity.parentBreadcrumb); + } + }, + + /** + * Reset the breadcrumbs. + */ + resetBreadcrumbs: function () { + this.breadcrumbs = []; + }, + + /** + * Get the breadcrumbs. + */ + getBreadcrumbs: function () { + return this.breadcrumbs; + }, + + /** + * Update the breadcrumbs css. + * + * @param {object} style The style to be applied. + */ + updateBreadcrumbsCss: function (style) { + $('#breadcrumbs').css(style); + }, + + /** + * Reset initial scroll position. + */ + resetScrollPosition: function () { var title = $('#data-flow-title-container'); var titlePosition = title.position(); var titleWidth = title.outerWidth(); @@ -127,46 +111,82 @@ nf.ng.BreadcrumbsCtrl = function (serviceProvider) { var viewportWidth = viewport.width(); var viewportRight = viewportWidth - padding; - // if the width of the title is larger than the viewport - if (titleWidth > viewportWidth) { - var adjust = false; + // if the title's right is past the viewport's right, shift accordingly + if (titleRight > viewportRight) { + // adjust the position + title.css('left', (titlePosition.left - (titleRight - viewportRight)) + 'px'); + } else { + title.css('left', '10px'); + } + }, - var delta = 0; + /** + * Registers a scroll event on the `element` + * + * @param {object} element The element event listener will be registered upon. + */ + registerMouseWheelEvent: function (element) { + // mousewheel -> IE, Chrome + // DOMMouseScroll -> FF + // wheel -> FF, IE - //Chrome and Safari both have evt.originalEvent.detail defined but - //evt.originalEvent.wheelDelta holds the correct value so we must - //check for evt.originalEvent.wheelDelta first! - if (nf.Common.isDefinedAndNotNull(evt.originalEvent.wheelDelta)) { - delta = evt.originalEvent.wheelDelta; - } else if (nf.Common.isDefinedAndNotNull(evt.originalEvent.detail)) { - delta = -evt.originalEvent.detail; + // still having issues with this in IE :/ + element.on('DOMMouseScroll mousewheel', function (evt, d) { + if (common.isUndefinedOrNull(evt.originalEvent)) { + return; } - // determine the increment - if (delta > 0 && titleRight > viewportRight) { - var increment = -25; - adjust = true; - } else if (delta < 0 && (titlePosition.left - padding) < 0) { - increment = 25; + var title = $('#data-flow-title-container'); + var titlePosition = title.position(); + var titleWidth = title.outerWidth(); + var titleRight = titlePosition.left + titleWidth; - // don't shift too far - if (titlePosition.left + increment > padding) { - increment = padding - titlePosition.left; + var padding = $('#breadcrumbs-right-border').width(); + var viewport = $('#data-flow-title-viewport'); + var viewportWidth = viewport.width(); + var viewportRight = viewportWidth - padding; + + // if the width of the title is larger than the viewport + if (titleWidth > viewportWidth) { + var adjust = false; + + var delta = 0; + + //Chrome and Safari both have evt.originalEvent.detail defined but + //evt.originalEvent.wheelDelta holds the correct value so we must + //check for evt.originalEvent.wheelDelta first! + if (common.isDefinedAndNotNull(evt.originalEvent.wheelDelta)) { + delta = evt.originalEvent.wheelDelta; + } else if (common.isDefinedAndNotNull(evt.originalEvent.detail)) { + delta = -evt.originalEvent.detail; } - adjust = true; - } + // determine the increment + if (delta > 0 && titleRight > viewportRight) { + var increment = -25; + adjust = true; + } else if (delta < 0 && (titlePosition.left - padding) < 0) { + increment = 25; - if (adjust) { - // adjust the position - title.css('left', (titlePosition.left + increment) + 'px'); + // don't shift too far + if (titlePosition.left + increment > padding) { + increment = padding - titlePosition.left; + } + + adjust = true; + } + + if (adjust) { + // adjust the position + title.css('left', (titlePosition.left + increment) + 'px'); + } } - } - }); + }); + } } - } - var breadcrumbsCtrl = new BreadcrumbsCtrl(); - breadcrumbsCtrl.register(); - return breadcrumbsCtrl; -}; \ No newline at end of file + var breadcrumbsCtrl = new BreadcrumbsCtrl(); + breadcrumbsCtrl.register(); + return breadcrumbsCtrl; + } +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-flow-status-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-flow-status-controller.js index 95b6ac0e4f..8e2b520a80 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-flow-status-controller.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-flow-status-controller.js @@ -15,469 +15,506 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ng.Canvas.FlowStatusCtrl = function (serviceProvider) { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'nf.Common', + 'nf.Dialog', + 'nf.CanvasUtils', + 'nf.ContextMenu', + 'nf.ClusterSummary', + 'nf.ErrorHandler', + 'nf.Settings'], + function ($, common, dialog, canvasUtils, contextMenu, clusterSummary, errorHandler, settings) { + return (nf.ng.Canvas.FlowStatusCtrl = factory($, common, dialog, canvasUtils, contextMenu, clusterSummary, errorHandler, settings)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.Canvas.FlowStatusCtrl = + factory(require('jquery'), + require('nf.Common'), + require('nf.Dialog'), + require('nf.CanvasUtils'), + require('nf.ContextMenu'), + require('nf.ClusterSummary'), + require('nf.ErrorHandler'), + require('nf.Settings'))); + } else { + nf.ng.Canvas.FlowStatusCtrl = factory(root.$, + root.nf.Common, + root.nf.Dialog, + root.nf.CanvasUtils, + root.nf.ContextMenu, + root.nf.ClusterSummary, + root.nf.ErrorHandler, + root.nf.Settings); + } +}(this, function ($, common, dialog, canvasUtils, contextMenu, clusterSummary, errorHandler, settings) { 'use strict'; - var config = { - search: 'Search', - urls: { - search: '../nifi-api/flow/search-results', - status: '../nifi-api/flow/status' - } - }; + return function (serviceProvider) { + 'use strict'; - function FlowStatusCtrl() { - this.connectedNodesCount = "-"; - this.activeThreadCount = "-"; - this.totalQueued = "-"; - this.controllerTransmittingCount = "-"; - this.controllerNotTransmittingCount = "-"; - this.controllerRunningCount = "-"; - this.controllerStoppedCount = "-"; - this.controllerInvalidCount = "-"; - this.controllerDisabledCount = "-"; - this.statsLastRefreshed = "-"; + var config = { + search: 'Search', + urls: { + search: '../nifi-api/flow/search-results', + status: '../nifi-api/flow/status' + } + }; - /** - * The search controller. - */ - this.search = { + function FlowStatusCtrl() { + this.connectedNodesCount = "-"; + this.activeThreadCount = "-"; + this.totalQueued = "-"; + this.controllerTransmittingCount = "-"; + this.controllerNotTransmittingCount = "-"; + this.controllerRunningCount = "-"; + this.controllerStoppedCount = "-"; + this.controllerInvalidCount = "-"; + this.controllerDisabledCount = "-"; + this.statsLastRefreshed = "-"; /** - * Get the search input element. + * The search controller. */ - getInputElement: function () { - return $('#search-field'); - }, + this.search = { - /** - * Get the search button element. - */ - getButtonElement: function () { - return $('#search-button'); - }, + /** + * Get the search input element. + */ + getInputElement: function () { + return $('#search-field'); + }, - /** - * Get the search container element. - */ - getSearchContainerElement: function () { - return $('#search-container'); - }, + /** + * Get the search button element. + */ + getButtonElement: function () { + return $('#search-button'); + }, - /** - * Initialize the search controller. - */ - init: function () { + /** + * Get the search container element. + */ + getSearchContainerElement: function () { + return $('#search-container'); + }, - var searchCtrl = this; + /** + * Initialize the search controller. + */ + init: function () { - // Create new jQuery UI widget - $.widget('nf.searchAutocomplete', $.ui.autocomplete, { - reset: function () { - this.term = null; - }, - _create: function() { - this._super(); - this.widget().menu('option', 'items', '> :not(.search-header, .search-no-matches)' ); - }, - _resizeMenu: function () { - var ul = this.menu.element; - ul.width(400); - }, - _normalize: function (searchResults) { - var items = []; - items.push(searchResults); - return items; - }, - _renderMenu: function (ul, items) { - var nfSearchAutocomplete = this; + var searchCtrl = this; - // the object that holds the search results is normalized into a single element array - var searchResults = items[0]; + // Create new jQuery UI widget + $.widget('nf.searchAutocomplete', $.ui.autocomplete, { + reset: function () { + this.term = null; + }, + _create: function () { + this._super(); + this.widget().menu('option', 'items', '> :not(.search-header, .search-no-matches)'); + }, + _resizeMenu: function () { + var ul = this.menu.element; + ul.width(400); + }, + _normalize: function (searchResults) { + var items = []; + items.push(searchResults); + return items; + }, + _renderMenu: function (ul, items) { + var nfSearchAutocomplete = this; - // show all processors - if (!nf.Common.isEmpty(searchResults.processorResults)) { - ul.append('
  • Processors
    • '); - $.each(searchResults.processorResults, function (i, processorMatch) { - nfSearchAutocomplete._renderItem(ul, processorMatch); + // the object that holds the search results is normalized into a single element array + var searchResults = items[0]; + + // show all processors + if (!common.isEmpty(searchResults.processorResults)) { + ul.append('
  • Processors
    • '); + $.each(searchResults.processorResults, function (i, processorMatch) { + nfSearchAutocomplete._renderItem(ul, processorMatch); + }); + } + + // show all process groups + if (!common.isEmpty(searchResults.processGroupResults)) { + ul.append('
  • Process Groups
    • '); + $.each(searchResults.processGroupResults, function (i, processGroupMatch) { + nfSearchAutocomplete._renderItem(ul, processGroupMatch); + }); + } + + // show all remote process groups + if (!common.isEmpty(searchResults.remoteProcessGroupResults)) { + ul.append('
  • Remote Process Groups
    • '); + $.each(searchResults.remoteProcessGroupResults, function (i, remoteProcessGroupMatch) { + nfSearchAutocomplete._renderItem(ul, remoteProcessGroupMatch); + }); + } + + // show all connections + if (!common.isEmpty(searchResults.connectionResults)) { + ul.append('
  • Connections
    • '); + $.each(searchResults.connectionResults, function (i, connectionMatch) { + nfSearchAutocomplete._renderItem(ul, connectionMatch); + }); + } + + // show all input ports + if (!common.isEmpty(searchResults.inputPortResults)) { + ul.append('
  • Input Ports
    • '); + $.each(searchResults.inputPortResults, function (i, inputPortMatch) { + nfSearchAutocomplete._renderItem(ul, inputPortMatch); + }); + } + + // show all output ports + if (!common.isEmpty(searchResults.outputPortResults)) { + ul.append('
  • Output Ports
    • '); + $.each(searchResults.outputPortResults, function (i, outputPortMatch) { + nfSearchAutocomplete._renderItem(ul, outputPortMatch); + }); + } + + // show all funnels + if (!common.isEmpty(searchResults.funnelResults)) { + ul.append('
  • Funnels
    • '); + $.each(searchResults.funnelResults, function (i, funnelMatch) { + nfSearchAutocomplete._renderItem(ul, funnelMatch); + }); + } + + // ensure there were some results + if (ul.children().length === 0) { + ul.append('
  • No results matched the search terms
    • '); + } + }, + _renderItem: function (ul, match) { + var itemContent = $('    ').append($('
    ').text(match.name)); + $.each(match.matches, function (i, match) { + itemContent.append($('
    ').text(match)); }); + return $('
  • ').data('ui-autocomplete-item', match).append(itemContent).appendTo(ul); } + }); - // show all process groups - if (!nf.Common.isEmpty(searchResults.processGroupResults)) { - ul.append('
  • Process Groups
    • '); - $.each(searchResults.processGroupResults, function (i, processGroupMatch) { - nfSearchAutocomplete._renderItem(ul, processGroupMatch); + // configure the new searchAutocomplete jQuery UI widget + this.getInputElement().searchAutocomplete({ + appendTo: '#search-flow-results', + position: { + my: 'right top', + at: 'right bottom', + offset: '1 1' + }, + source: function (request, response) { + // create the search request + $.ajax({ + type: 'GET', + data: { + q: request.term + }, + dataType: 'json', + url: config.urls.search + }).done(function (searchResponse) { + response(searchResponse.searchResultsDTO); }); + }, + select: function (event, ui) { + var item = ui.item; + + // show the selected component + canvasUtils.showComponent(item.groupId, item.id); + + searchCtrl.getInputElement().val('').blur(); + + // stop event propagation + return false; + }, + open: function (event, ui) { + // show the glass pane + var searchField = $(this); + $('
    ').one('click', function () { + }).appendTo('body'); + }, + close: function (event, ui) { + // set the input text to '' and reset the cached term + $(this).searchAutocomplete('reset'); + searchCtrl.getInputElement().val(''); + + // remove the glass pane + $('div.search-glass-pane').remove(); } + }); - // show all remote process groups - if (!nf.Common.isEmpty(searchResults.remoteProcessGroupResults)) { - ul.append('
  • Remote Process Groups
    • '); - $.each(searchResults.remoteProcessGroupResults, function (i, remoteProcessGroupMatch) { - nfSearchAutocomplete._renderItem(ul, remoteProcessGroupMatch); - }); - } + // hide the search input + searchCtrl.toggleSearchField(); + }, - // show all connections - if (!nf.Common.isEmpty(searchResults.connectionResults)) { - ul.append('
  • Connections
    • '); - $.each(searchResults.connectionResults, function (i, connectionMatch) { - nfSearchAutocomplete._renderItem(ul, connectionMatch); - }); - } + /** + * Toggle/Slide the search field open/closed. + */ + toggleSearchField: function () { + var searchCtrl = this; - // show all input ports - if (!nf.Common.isEmpty(searchResults.inputPortResults)) { - ul.append('
  • Input Ports
    • '); - $.each(searchResults.inputPortResults, function (i, inputPortMatch) { - nfSearchAutocomplete._renderItem(ul, inputPortMatch); - }); - } + // hide the context menu if necessary + contextMenu.hide(); - // show all output ports - if (!nf.Common.isEmpty(searchResults.outputPortResults)) { - ul.append('
  • Output Ports
    • '); - $.each(searchResults.outputPortResults, function (i, outputPortMatch) { - nfSearchAutocomplete._renderItem(ul, outputPortMatch); - }); - } - - // show all funnels - if (!nf.Common.isEmpty(searchResults.funnelResults)) { - ul.append('
  • Funnels
    • '); - $.each(searchResults.funnelResults, function (i, funnelMatch) { - nfSearchAutocomplete._renderItem(ul, funnelMatch); - }); - } - - // ensure there were some results - if (ul.children().length === 0) { - ul.append('
  • No results matched the search terms
    • '); - } - }, - _renderItem: function (ul, match) { - var itemContent = $('').append($('
    ').text(match.name)); - $.each(match.matches, function (i, match) { - itemContent.append($('
    ').text(match)); - }); - return $('
  • ').data('ui-autocomplete-item', match).append(itemContent).appendTo(ul); - } - }); - - // configure the new searchAutocomplete jQuery UI widget - this.getInputElement().searchAutocomplete({ - appendTo: '#search-flow-results', - position: { - my: 'right top', - at: 'right bottom', - offset: '1 1' - }, - source: function (request, response) { - // create the search request - $.ajax({ - type: 'GET', - data: { - q: request.term - }, - dataType: 'json', - url: config.urls.search - }).done(function (searchResponse) { - response(searchResponse.searchResultsDTO); - }); - }, - select: function (event, ui) { - var item = ui.item; - - // show the selected component - nf.CanvasUtils.showComponent(item.groupId, item.id); - - searchCtrl.getInputElement().val('').blur(); - - // stop event propagation - return false; - }, - open: function (event, ui) { - // show the glass pane - var searchField = $(this); - $('
    ').one('click', function () { - }).appendTo('body'); - }, - close: function (event, ui) { - // set the input text to '' and reset the cached term - $(this).searchAutocomplete('reset'); - searchCtrl.getInputElement().val(''); - - // remove the glass pane - $('div.search-glass-pane').remove(); - } - }); - - // hide the search input - searchCtrl.toggleSearchField(); - }, - - /** - * Toggle/Slide the search field open/closed. - */ - toggleSearchField: function () { - var searchCtrl = this; - - // hide the context menu if necessary - nf.ContextMenu.hide(); - - var isVisible = searchCtrl.getInputElement().is(':visible'); - var display = 'none'; - var class1 = 'search-container-opened'; - var class2 = 'search-container-closed'; - if (!isVisible) { - searchCtrl.getButtonElement().css('background-color', '#FFFFFF'); - display = 'inline-block'; - class1 = 'search-container-closed'; - class2 = 'search-container-opened'; - } else { - searchCtrl.getInputElement().css('display', display); - } - - this.getSearchContainerElement().switchClass(class1, class2, 500, function () { - searchCtrl.getInputElement().css('display', display); + var isVisible = searchCtrl.getInputElement().is(':visible'); + var display = 'none'; + var class1 = 'search-container-opened'; + var class2 = 'search-container-closed'; if (!isVisible) { searchCtrl.getButtonElement().css('background-color', '#FFFFFF'); - searchCtrl.getInputElement().focus(); + display = 'inline-block'; + class1 = 'search-container-closed'; + class2 = 'search-container-opened'; } else { - searchCtrl.getButtonElement().css('background-color', '#E3E8EB'); + searchCtrl.getInputElement().css('display', display); } - }); - } - } - /** - * The bulletins controller. - */ - this.bulletins = { + this.getSearchContainerElement().switchClass(class1, class2, 500, function () { + searchCtrl.getInputElement().css('display', display); + if (!isVisible) { + searchCtrl.getButtonElement().css('background-color', '#FFFFFF'); + searchCtrl.getInputElement().focus(); + } else { + searchCtrl.getButtonElement().css('background-color', '#E3E8EB'); + } + }); + } + } /** - * Update the bulletins. - * - * @param response The controller bulletins returned from the `../nifi-api/controller/bulletins` endpoint. + * The bulletins controller. */ - update: function (response) { + this.bulletins = { - // icon for system bulletins - var bulletinIcon = $('#bulletin-button'); - var currentBulletins = bulletinIcon.data('bulletins'); + /** + * Update the bulletins. + * + * @param response The controller bulletins returned from the `../nifi-api/controller/bulletins` endpoint. + */ + update: function (response) { - // update the bulletins if necessary - if (nf.Common.doBulletinsDiffer(currentBulletins, response.bulletins)) { - bulletinIcon.data('bulletins', response.bulletins); + // icon for system bulletins + var bulletinIcon = $('#bulletin-button'); + var currentBulletins = bulletinIcon.data('bulletins'); - // get the formatted the bulletins - var bulletins = nf.Common.getFormattedBulletins(response.bulletins); + // update the bulletins if necessary + if (common.doBulletinsDiffer(currentBulletins, response.bulletins)) { + bulletinIcon.data('bulletins', response.bulletins); - // bulletins for this processor are now gone - if (bulletins.length === 0) { - if (bulletinIcon.data('qtip')) { - bulletinIcon.removeClass('has-bulletins').qtip('api').destroy(true); - } - } else { - var newBulletins = nf.Common.formatUnorderedList(bulletins); + // get the formatted the bulletins + var bulletins = common.getFormattedBulletins(response.bulletins); - // different bulletins, refresh - if (bulletinIcon.data('qtip')) { - bulletinIcon.qtip('option', 'content.text', newBulletins); + // bulletins for this processor are now gone + if (bulletins.length === 0) { + if (bulletinIcon.data('qtip')) { + bulletinIcon.removeClass('has-bulletins').qtip('api').destroy(true); + } } else { - // no bulletins before, show icon and tips - bulletinIcon.addClass('has-bulletins').qtip($.extend({}, - nf.CanvasUtils.config.systemTooltipConfig, - { - content: newBulletins, - position: { - at: 'bottom left', - my: 'top right', - adjust: { - x: 4 + var newBulletins = common.formatUnorderedList(bulletins); + + // different bulletins, refresh + if (bulletinIcon.data('qtip')) { + bulletinIcon.qtip('option', 'content.text', newBulletins); + } else { + // no bulletins before, show icon and tips + bulletinIcon.addClass('has-bulletins').qtip($.extend({}, + canvasUtils.config.systemTooltipConfig, + { + content: newBulletins, + position: { + at: 'bottom left', + my: 'top right', + adjust: { + x: 4 + } } } - } - )); + )); + } } } + + // update controller service and reporting task bulletins + settings.setBulletins(response.controllerServiceBulletins, response.reportingTaskBulletins); } - // update controller service and reporting task bulletins - nf.Settings.setBulletins(response.controllerServiceBulletins, response.reportingTaskBulletins); } - } - } - FlowStatusCtrl.prototype = { - constructor: FlowStatusCtrl, + FlowStatusCtrl.prototype = { + constructor: FlowStatusCtrl, - /** - * Initialize the flow status controller. - */ - init: function () { - this.search.init(); - }, + /** + * Initialize the flow status controller. + */ + init: function () { + this.search.init(); + }, - /** - * Reloads the current status of the flow. - */ - reloadFlowStatus: function () { - var flowStatusCtrl = this; + /** + * Reloads the current status of the flow. + */ + reloadFlowStatus: function () { + var flowStatusCtrl = this; - return $.ajax({ - type: 'GET', - url: config.urls.status, - dataType: 'json' - }).done(function (response) { - // report the updated status - if (nf.Common.isDefinedAndNotNull(response.controllerStatus)) { - flowStatusCtrl.update(response.controllerStatus); - } - }).fail(nf.ErrorHandler.handleAjaxError); - }, + return $.ajax({ + type: 'GET', + url: config.urls.status, + dataType: 'json' + }).done(function (response) { + // report the updated status + if (common.isDefinedAndNotNull(response.controllerStatus)) { + flowStatusCtrl.update(response.controllerStatus); + } + }).fail(errorHandler.handleAjaxError); + }, - /** - * Updates the cluster summary. - * - * @param clusterSummary - */ - updateClusterSummary: function (clusterSummary) { - // see if this node has been (dis)connected - if (nf.ClusterSummary.isConnectedToCluster() !== clusterSummary.connectedToCluster) { - if (clusterSummary.connectedToCluster) { - nf.Dialog.showConnectedToClusterMessage(); - } else { - nf.Dialog.showDisconnectedFromClusterMessage(); - } - } - - var color = '#728E9B'; - - // update the connection state - if (clusterSummary.connectedToCluster) { - if (nf.Common.isDefinedAndNotNull(clusterSummary.connectedNodes)) { - var connectedNodes = clusterSummary.connectedNodes.split(' / '); - if (connectedNodes.length === 2 && connectedNodes[0] !== connectedNodes[1]) { - this.clusterConnectionWarning = true; - color = '#BA554A'; + /** + * Updates the cluster summary. + * + * @param summary + */ + updateClusterSummary: function (summary) { + // see if this node has been (dis)connected + if (clusterSummary.isConnectedToCluster() !== summary.connectedToCluster) { + if (summary.connectedToCluster) { + dialog.showConnectedToClusterMessage(); + } else { + dialog.showDisconnectedFromClusterMessage(); } } - this.connectedNodesCount = - nf.Common.isDefinedAndNotNull(clusterSummary.connectedNodes) ? clusterSummary.connectedNodes : '-'; - } else { - this.connectedNodesCount = 'Disconnected'; - color = '#BA554A'; + + var color = '#728E9B'; + + // update the connection state + if (summary.connectedToCluster) { + if (common.isDefinedAndNotNull(summary.connectedNodes)) { + var connectedNodes = summary.connectedNodes.split(' / '); + if (connectedNodes.length === 2 && connectedNodes[0] !== connectedNodes[1]) { + this.clusterConnectionWarning = true; + color = '#BA554A'; + } + } + this.connectedNodesCount = + common.isDefinedAndNotNull(summary.connectedNodes) ? summary.connectedNodes : '-'; + } else { + this.connectedNodesCount = 'Disconnected'; + color = '#BA554A'; + } + + // update the color + $('#connected-nodes-count').closest('div.fa-cubes').css('color', color); + }, + + /** + * Update the flow status counts. + * + * @param status The controller status returned from the `../nifi-api/flow/status` endpoint. + */ + update: function (status) { + var controllerInvalidCount = (common.isDefinedAndNotNull(status.invalidCount)) ? status.invalidCount : 0; + + if (this.controllerInvalidCount > 0) { + $('#controller-invalid-count').parent().removeClass('zero').addClass('invalid'); + } else { + $('#controller-invalid-count').parent().removeClass('invalid').addClass('zero'); + } + + // update the report values + this.activeThreadCount = status.activeThreadCount; + + if (this.activeThreadCount > 0) { + $('#flow-status-container').find('.icon-threads').removeClass('zero'); + } else { + $('#flow-status-container').find('.icon-threads').addClass('zero'); + } + + this.totalQueued = status.queued; + + if (this.totalQueued.indexOf('0 / 0') >= 0) { + $('#flow-status-container').find('.fa-list').addClass('zero'); + } else { + $('#flow-status-container').find('.fa-list').removeClass('zero'); + } + + // update the component counts + this.controllerTransmittingCount = + common.isDefinedAndNotNull(status.activeRemotePortCount) ? + status.activeRemotePortCount : '-'; + + if (this.controllerTransmittingCount > 0) { + $('#flow-status-container').find('.fa-bullseye').removeClass('zero').addClass('transmitting'); + } else { + $('#flow-status-container').find('.fa-bullseye').removeClass('transmitting').addClass('zero'); + } + + this.controllerNotTransmittingCount = + common.isDefinedAndNotNull(status.inactiveRemotePortCount) ? + status.inactiveRemotePortCount : '-'; + + if (this.controllerNotTransmittingCount > 0) { + $('#flow-status-container').find('.icon-transmit-false').removeClass('zero').addClass('not-transmitting'); + } else { + $('#flow-status-container').find('.icon-transmit-false').removeClass('not-transmitting').addClass('zero'); + } + + this.controllerRunningCount = + common.isDefinedAndNotNull(status.runningCount) ? status.runningCount : '-'; + + if (this.controllerRunningCount > 0) { + $('#flow-status-container').find('.fa-play').removeClass('zero').addClass('running'); + } else { + $('#flow-status-container').find('.fa-play').removeClass('running').addClass('zero'); + } + + this.controllerStoppedCount = + common.isDefinedAndNotNull(status.stoppedCount) ? status.stoppedCount : '-'; + + if (this.controllerStoppedCount > 0) { + $('#flow-status-container').find('.fa-stop').removeClass('zero').addClass('stopped'); + } else { + $('#flow-status-container').find('.fa-stop').removeClass('stopped').addClass('zero'); + } + + this.controllerInvalidCount = + common.isDefinedAndNotNull(status.invalidCount) ? status.invalidCount : '-'; + + if (this.controllerInvalidCount > 0) { + $('#flow-status-container').find('.fa-warning').removeClass('zero').addClass('invalid'); + } else { + $('#flow-status-container').find('.fa-warning').removeClass('invalid').addClass('zero'); + } + + this.controllerDisabledCount = + common.isDefinedAndNotNull(status.disabledCount) ? status.disabledCount : '-'; + + if (this.controllerDisabledCount > 0) { + $('#flow-status-container').find('.icon-enable-false').removeClass('zero').addClass('disabled'); + } else { + $('#flow-status-container').find('.icon-enable-false').removeClass('disabled').addClass('zero'); + } + + }, + + /** + * Updates the controller level bulletins + * + * @param response + */ + updateBulletins: function (response) { + this.bulletins.update(response); } - - // update the color - $('#connected-nodes-count').closest('div.fa-cubes').css('color', color); - }, - - /** - * Update the flow status counts. - * - * @param status The controller status returned from the `../nifi-api/flow/status` endpoint. - */ - update: function (status) { - var controllerInvalidCount = (nf.Common.isDefinedAndNotNull(status.invalidCount)) ? status.invalidCount : 0; - - if (this.controllerInvalidCount > 0) { - $('#controller-invalid-count').parent().removeClass('zero').addClass('invalid'); - } else { - $('#controller-invalid-count').parent().removeClass('invalid').addClass('zero'); - } - - // update the report values - this.activeThreadCount = status.activeThreadCount; - - if (this.activeThreadCount > 0) { - $('#flow-status-container').find('.icon-threads').removeClass('zero'); - } else { - $('#flow-status-container').find('.icon-threads').addClass('zero'); - } - - this.totalQueued = status.queued; - - if (this.totalQueued.indexOf('0 / 0') >= 0) { - $('#flow-status-container').find('.fa-list').addClass('zero'); - } else { - $('#flow-status-container').find('.fa-list').removeClass('zero'); - } - - // update the component counts - this.controllerTransmittingCount = - nf.Common.isDefinedAndNotNull(status.activeRemotePortCount) ? - status.activeRemotePortCount : '-'; - - if (this.controllerTransmittingCount > 0) { - $('#flow-status-container').find('.fa-bullseye').removeClass('zero').addClass('transmitting'); - } else { - $('#flow-status-container').find('.fa-bullseye').removeClass('transmitting').addClass('zero'); - } - - this.controllerNotTransmittingCount = - nf.Common.isDefinedAndNotNull(status.inactiveRemotePortCount) ? - status.inactiveRemotePortCount : '-'; - - if (this.controllerNotTransmittingCount > 0) { - $('#flow-status-container').find('.icon-transmit-false').removeClass('zero').addClass('not-transmitting'); - } else { - $('#flow-status-container').find('.icon-transmit-false').removeClass('not-transmitting').addClass('zero'); - } - - this.controllerRunningCount = - nf.Common.isDefinedAndNotNull(status.runningCount) ? status.runningCount : '-'; - - if (this.controllerRunningCount > 0) { - $('#flow-status-container').find('.fa-play').removeClass('zero').addClass('running'); - } else { - $('#flow-status-container').find('.fa-play').removeClass('running').addClass('zero'); - } - - this.controllerStoppedCount = - nf.Common.isDefinedAndNotNull(status.stoppedCount) ? status.stoppedCount : '-'; - - if (this.controllerStoppedCount > 0) { - $('#flow-status-container').find('.fa-stop').removeClass('zero').addClass('stopped'); - } else { - $('#flow-status-container').find('.fa-stop').removeClass('stopped').addClass('zero'); - } - - this.controllerInvalidCount = - nf.Common.isDefinedAndNotNull(status.invalidCount) ? status.invalidCount : '-'; - - if (this.controllerInvalidCount > 0) { - $('#flow-status-container').find('.fa-warning').removeClass('zero').addClass('invalid'); - } else { - $('#flow-status-container').find('.fa-warning').removeClass('invalid').addClass('zero'); - } - - this.controllerDisabledCount = - nf.Common.isDefinedAndNotNull(status.disabledCount) ? status.disabledCount : '-'; - - if (this.controllerDisabledCount > 0) { - $('#flow-status-container').find('.icon-enable-false').removeClass('zero').addClass('disabled'); - } else { - $('#flow-status-container').find('.icon-enable-false').removeClass('disabled').addClass('zero'); - } - - }, - - /** - * Updates the controller level bulletins - * - * @param response - */ - updateBulletins: function (response) { - this.bulletins.update(response); } - } - var flowStatusCtrl = new FlowStatusCtrl(); - return flowStatusCtrl; -}; \ No newline at end of file + var flowStatusCtrl = new FlowStatusCtrl(); + return flowStatusCtrl; + }; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-global-menu-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-global-menu-controller.js index 6d0a3046f8..b28d5b1f4a 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-global-menu-controller.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-global-menu-controller.js @@ -15,386 +15,426 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ng.Canvas.GlobalMenuCtrl = function (serviceProvider) { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'nf.Common', + 'nf.QueueListing', + 'nf.Shell', + 'nf.PolicyManagement', + 'nf.ClusterSummary', + 'nf.ErrorHandler', + 'nf.Settings', + 'nf.CanvasUtils'], + function ($, common, queueListing, shell, policyManagement, clusterSummary, errorHandler, settings, canvasUtils) { + return (nf.ng.Canvas.GlobalMenuCtrl = factory($, common, queueListing, shell, policyManagement, clusterSummary, errorHandler, settings, canvasUtils)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.Canvas.GlobalMenuCtrl = + factory(require('jquery'), + require('nf.Common'), + require('nf.QueueListing'), + require('nf.Shell'), + require('nf.PolicyManagement'), + require('nf.ClusterSummary'), + require('nf.ErrorHandler'), + require('nf.Settings'), + require('nf.CanvasUtils'))); + } else { + nf.ng.Canvas.GlobalMenuCtrl = factory(root.$, + root.nf.Common, + root.nf.QueueListing, + root.nf.Shell, + root.nf.PolicyManagement, + root.nf.ClusterSummary, + root.nf.ErrorHandler, + root.nf.Settings, + root.nf.CanvasUtils); + } +}(this, function ($, common, queueListing, shell, policyManagement, clusterSummary, errorHandler, settings, canvasUtils) { 'use strict'; - var config = { - urls: { - helpDocument: '../nifi-docs/documentation', - controllerAbout: '../nifi-api/flow/about' - } - }; + return function (serviceProvider) { + 'use strict'; - function GlobalMenuCtrl(serviceProvider) { - - /** - * The summary menu item controller. - */ - this.summary = { - - /** - * The summary menu item's shell controller. - */ - shell: { - - /** - * Launch the summary shell. - */ - launch: function () { - nf.Shell.showPage('summary'); - } + var config = { + urls: { + helpDocument: '../nifi-docs/documentation', + controllerAbout: '../nifi-api/flow/about' } }; - /** - * The counters menu item controller. - */ - this.counters = { + function GlobalMenuCtrl(serviceProvider) { /** - * The counters menu item's shell controller. + * The summary menu item controller. */ - shell: { + this.summary = { /** - * Launch the counters shell. + * The summary menu item's shell controller. */ - launch: function () { - if (nf.Common.canAccessCounters()) { - nf.Shell.showPage('counters'); + shell: { + + /** + * Launch the summary shell. + */ + launch: function () { + shell.showPage('summary'); } } - } - }; - - /** - * The bulletin board menu item controller. - */ - this.bulletinBoard = { + }; /** - * The bulletin board menu item's shell controller. + * The counters menu item controller. */ - shell: { + this.counters = { /** - * Launch the bulletin board shell. + * The counters menu item's shell controller. */ - launch: function () { - nf.Shell.showPage('bulletin-board'); - } - } - }; + shell: { - /** - * The data provenance menu item controller. - */ - this.dataProvenance = { - - /** - * The data provenance menu item's shell controller. - */ - shell: { - - /** - * Launch the data provenance shell. - */ - launch: function () { - if (nf.Common.canAccessProvenance()) { - nf.Shell.showPage('provenance'); + /** + * Launch the counters shell. + */ + launch: function () { + if (common.canAccessCounters()) { + shell.showPage('counters'); + } } } - } - }; - - /** - * The controller settings menu item controller. - */ - this.controllerSettings = { + }; /** - * The controller settings menu item's shell controller. + * The bulletin board menu item controller. */ - shell: { + this.bulletinBoard = { /** - * Launch the settings shell. + * The bulletin board menu item's shell controller. */ - launch: function () { - nf.Settings.showSettings(); - } - } - }; + shell: { - /** - * The cluster menu item controller. - */ - this.cluster = { - - /** - * Determines if the cluster menu item is enabled. - * - * @returns {*|boolean} - */ - visible: function () { - return nf.ClusterSummary.isConnectedToCluster(); - }, - - /** - * The cluster menu item's shell controller. - */ - shell: { - - /** - * Launch the cluster shell. - */ - launch: function () { - if (nf.Common.canAccessController()) { - nf.Shell.showPage('cluster'); + /** + * Launch the bulletin board shell. + */ + launch: function () { + shell.showPage('bulletin-board'); } } - } - }; - - /** - * The flow config history menu item controller. - */ - this.flowConfigHistory = { + }; /** - * The flow config history menu item's shell controller. + * The data provenance menu item controller. */ - shell: { + this.dataProvenance = { /** - * Launch the history shell. + * The data provenance menu item's shell controller. */ - launch: function () { - nf.Shell.showPage('history'); - } - } - }; + shell: { - /** - * The users menu item controller. - */ - this.users = { - - /** - * The users menu item's shell controller. - */ - shell: { - - /** - * Launch the users shell. - */ - launch: function () { - if (nf.Common.canAccessTenants()) { - nf.Shell.showPage('users'); + /** + * Launch the data provenance shell. + */ + launch: function () { + if (common.canAccessProvenance()) { + shell.showPage('provenance'); + } } } - } - }; - - /** - * The policies menu item controller. - */ - this.policies = { + }; /** - * The policies menu item's shell controller. + * The controller settings menu item controller. */ - shell: { + this.controllerSettings = { /** - * Launch the policies shell. + * The controller settings menu item's shell controller. */ - launch: function () { - if (nf.Common.canModifyPolicies() && nf.Common.canAccessTenants()) { - nf.PolicyManagement.showGlobalPolicies(); + shell: { + + /** + * Launch the settings shell. + */ + launch: function () { + settings.showSettings(); } } - } - }; - - /** - * The templates menu item controller. - */ - this.templates = { + }; /** - * The templates menu item's shell controller. + * The cluster menu item controller. */ - shell: { + this.cluster = { /** - * Launch the templates shell. - */ - launch: function () { - nf.Shell.showPage('templates?' + $.param({ - groupId: nf.Canvas.getGroupId() - })); - } - } - }; - - /** - * The help menu item controller. - */ - this.help = { - - /** - * The help menu item's shell controller. - */ - shell: { - - /** - * Launch the help documentation shell. - */ - launch: function () { - nf.Shell.showPage(config.urls.helpDocument); - } - } - }; - - /** - * The about menu item controller. - */ - this.about = { - - /** - * Initialize the about details. - */ - init: function () { - // get the about details - $.ajax({ - type: 'GET', - url: config.urls.controllerAbout, - dataType: 'json' - }).done(function (response) { - var aboutDetails = response.about; - // set the document title and the about title - document.title = aboutDetails.title; - $('#nf-version').text(aboutDetails.version); - var showVersionDetail = false; - if (aboutDetails.buildTag && aboutDetails.buildTag !== 'HEAD') { - $('#nf-about-build-tag').text(aboutDetails.buildTag); - $('#nf-version-detail-tag').show(); - showVersionDetail = true; - } - if (aboutDetails.buildRevision) { - $('#nf-about-build-revision').text(aboutDetails.buildRevision); - $('#nf-about-build-branch').text(aboutDetails.buildBranch); - $('#nf-version-detail-commit').show(); - showVersionDetail = true - } - if (aboutDetails.buildTimestamp) { - $('#nf-about-build-timestamp').text(aboutDetails.buildTimestamp); - $('#nf-version-detail-timestamp').show(); - showVersionDetail = true; - } - if (showVersionDetail) { - $('#nf-version-detail').show(); - } - - // store the content viewer url if available - if (!nf.Common.isBlank(aboutDetails.contentViewerUrl)) { - $('#nifi-content-viewer-url').text(aboutDetails.contentViewerUrl); - nf.QueueListing.initFlowFileDetailsDialog(); - } - }).fail(nf.ErrorHandler.handleAjaxError); - - this.modal.init(); - }, - - /** - * The about menu item's modal controller. - */ - modal: { - - /** - * Gets the modal element. + * Determines if the cluster menu item is enabled. * - * @returns {*|jQuery|HTMLElement} + * @returns {*|boolean} */ - getElement: function () { - return $('#nf-about'); + visible: function () { + return clusterSummary.isConnectedToCluster(); }, /** - * Initialize the modal. + * The cluster menu item's shell controller. + */ + shell: { + + /** + * Launch the cluster shell. + */ + launch: function () { + if (common.canAccessController()) { + shell.showPage('cluster'); + } + } + } + }; + + /** + * The flow config history menu item controller. + */ + this.flowConfigHistory = { + + /** + * The flow config history menu item's shell controller. + */ + shell: { + + /** + * Launch the history shell. + */ + launch: function () { + shell.showPage('history'); + } + } + }; + + /** + * The users menu item controller. + */ + this.users = { + + /** + * The users menu item's shell controller. + */ + shell: { + + /** + * Launch the users shell. + */ + launch: function () { + if (common.canAccessTenants()) { + shell.showPage('users'); + } + } + } + }; + + /** + * The policies menu item controller. + */ + this.policies = { + + /** + * The policies menu item's shell controller. + */ + shell: { + + /** + * Launch the policies shell. + */ + launch: function () { + if (common.canModifyPolicies() && common.canAccessTenants()) { + policyManagement.showGlobalPolicies(); + } + } + } + }; + + /** + * The templates menu item controller. + */ + this.templates = { + + /** + * The templates menu item's shell controller. + */ + shell: { + + /** + * Launch the templates shell. + */ + launch: function () { + shell.showPage('templates?' + $.param({ + groupId: canvasUtils.getGroupId() + })); + } + } + }; + + /** + * The help menu item controller. + */ + this.help = { + + /** + * The help menu item's shell controller. + */ + shell: { + + /** + * Launch the help documentation shell. + */ + launch: function () { + shell.showPage(config.urls.helpDocument); + } + } + }; + + /** + * The about menu item controller. + */ + this.about = { + + /** + * Initialize the about details. */ init: function () { - var aboutModal = this; + // get the about details + $.ajax({ + type: 'GET', + url: config.urls.controllerAbout, + dataType: 'json' + }).done(function (response) { + var aboutDetails = response.about; + // set the document title and the about title + document.title = aboutDetails.title; + $('#nf-version').text(aboutDetails.version); + var showVersionDetail = false; + if (aboutDetails.buildTag && aboutDetails.buildTag !== 'HEAD') { + $('#nf-about-build-tag').text(aboutDetails.buildTag); + $('#nf-version-detail-tag').show(); + showVersionDetail = true; + } + if (aboutDetails.buildRevision) { + $('#nf-about-build-revision').text(aboutDetails.buildRevision); + $('#nf-about-build-branch').text(aboutDetails.buildBranch); + $('#nf-version-detail-commit').show(); + showVersionDetail = true + } + if (aboutDetails.buildTimestamp) { + $('#nf-about-build-timestamp').text(aboutDetails.buildTimestamp); + $('#nf-version-detail-timestamp').show(); + showVersionDetail = true; + } + if (showVersionDetail) { + $('#nf-version-detail').show(); + } - var resizeAbout = function(){ - var dialog = $(this); - var top = $('#nf-about-pic-container').height() + $('.dialog-header').height() + 10; //10 for padding-top - dialog.find('.dialog-content').css('top', top); - }; + // store the content viewer url if available + if (!common.isBlank(aboutDetails.contentViewerUrl)) { + $('#nifi-content-viewer-url').text(aboutDetails.contentViewerUrl); + queueListing.initFlowFileDetailsDialog(); + } + }).fail(errorHandler.handleAjaxError); - this.getElement().modal({ - scrollableContentStyle: 'scrollable', - headerText: 'About Apache NiFi', - handler: { - resize: resizeAbout - }, - buttons: [{ - buttonText: 'Ok', - color: { - base: '#728E9B', - hover: '#004849', - text: '#ffffff' - }, + this.modal.init(); + }, + + /** + * The about menu item's modal controller. + */ + modal: { + + /** + * Gets the modal element. + * + * @returns {*|jQuery|HTMLElement} + */ + getElement: function () { + return $('#nf-about'); + }, + + /** + * Initialize the modal. + */ + init: function () { + var aboutModal = this; + + var resizeAbout = function () { + var dialog = $(this); + var top = $('#nf-about-pic-container').height() + $('.dialog-header').height() + 10; //10 for padding-top + dialog.find('.dialog-content').css('top', top); + }; + + this.getElement().modal({ + scrollableContentStyle: 'scrollable', + headerText: 'About Apache NiFi', handler: { - click: function () { - aboutModal.hide(); + resize: resizeAbout + }, + buttons: [{ + buttonText: 'Ok', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, + handler: { + click: function () { + aboutModal.hide(); + } } - } - }] - }); - }, + }] + }); + }, - /** - * Updates the modal config. - * - * @param {string} name The name of the property to update. - * @param {object|array} config The config for the `name`. - */ - update: function (name, config) { - this.getElement().modal(name, config); - }, + /** + * Updates the modal config. + * + * @param {string} name The name of the property to update. + * @param {object|array} config The config for the `name`. + */ + update: function (name, config) { + this.getElement().modal(name, config); + }, - /** - * Show the modal - */ - show: function () { - this.getElement().modal('show'); - }, + /** + * Show the modal + */ + show: function () { + this.getElement().modal('show'); + }, - /** - * Hide the modal - */ - hide: function () { - this.getElement().modal('hide'); + /** + * Hide the modal + */ + hide: function () { + this.getElement().modal('hide'); + } } } } - } - GlobalMenuCtrl.prototype = { - constructor: GlobalMenuCtrl, + GlobalMenuCtrl.prototype = { + constructor: GlobalMenuCtrl, - /** - * Initialize the global menu controls. - */ - init: function () { - this.about.init(); + /** + * Initialize the global menu controls. + */ + init: function () { + this.about.init(); + } } - } - var globalMenuCtrl = new GlobalMenuCtrl(); - return globalMenuCtrl; -}; \ No newline at end of file + var globalMenuCtrl = new GlobalMenuCtrl(); + return globalMenuCtrl; + }; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js index 06959df4a5..e7dedeab77 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js @@ -15,330 +15,364 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ng.Canvas.GraphControlsCtrl = function (serviceProvider, navigateCtrl, operateCtrl) { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'nf.Actions', + 'nf.Birdseye', + 'nf.Storage', + 'nf.CanvasUtils', + 'nf.Common', + 'nf.ProcessGroupConfiguration'], + function ($, action, birdseye, storage, canvasUtils, common, processGroupConfiguration) { + return (nf.ng.Canvas.GraphControlsCtrl = factory($, action, birdseye, storage, canvasUtils, common, processGroupConfiguration)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.Canvas.GraphControlsCtrl = + factory(require('jquery'), + require('nf.Actions'), + require('nf.Birdseye'), + require('nf.Storage'), + require('nf.CanvasUtils'), + require('nf.Common'), + require('nf.ProcessGroupConfiguration'))); + } else { + nf.ng.Canvas.GraphControlsCtrl = factory(root.$, + root.nf.Actions, + root.nf.Birdseye, + root.nf.Storage, + root.nf.CanvasUtils, + root.nf.Common, + root.nf.ProcessGroupConfiguration); + } +}(this, function ($, actions, birdseye, storage, canvasUtils, common, processGroupConfiguration) { 'use strict'; - /** - * Opens the specified graph control. - * - * @param {jQuery} graphControl - */ - var openGraphControl = function (graphControl) { - // undock if necessary - if ($('div.graph-control-content').is(':visible') === false) { - $('#graph-controls div.graph-control-docked').hide(); - $('#graph-controls div.graph-control-header-container').show(); - $('.graph-control').removeClass('docked'); - } - - // show the content of the specified graph control - graphControl.children('div.graph-control-content').show(); - graphControl.find('div.graph-control-expansion').removeClass('fa-plus-square-o').addClass('fa-minus-square-o'); - - // handle specific actions as necessary - if (graphControl.attr('id') === 'navigation-control') { - nf.Birdseye.updateBirdseyeVisibility(true); - } - - // get the current visibility - var graphControlVisibility = nf.Storage.getItem('graph-control-visibility'); - if (graphControlVisibility === null) { - graphControlVisibility = {}; - } - - // update the visibility for this graph control - var graphControlId = graphControl.attr('id'); - graphControlVisibility[graphControlId] = true; - nf.Storage.setItem('graph-control-visibility', graphControlVisibility); - }; - - /** - * Hides the specified graph control. - * - * @param {jQuery} graphControl - */ - var hideGraphControl = function (graphControl) { - // hide the content of the specified graph control - graphControl.children('div.graph-control-content').hide(); - graphControl.find('div.graph-control-expansion').removeClass('fa-minus-square-o').addClass('fa-plus-square-o'); - - // dock if necessary - if ($('div.graph-control-content').is(':visible') === false) { - $('#graph-controls div.graph-control-header-container').hide(); - $('#graph-controls div.graph-control-docked').show(); - $('.graph-control').addClass('docked'); - } - - // handle specific actions as necessary - if (graphControl.attr('id') === 'navigation-control') { - nf.Birdseye.updateBirdseyeVisibility(false); - } - - // get the current visibility - var graphControlVisibility = nf.Storage.getItem('graph-control-visibility'); - if (graphControlVisibility === null) { - graphControlVisibility = {}; - } - - // update the visibility for this graph control - var graphControlId = graphControl.attr('id'); - graphControlVisibility[graphControlId] = false; - nf.Storage.setItem('graph-control-visibility', graphControlVisibility); - }; - - function GraphControlsCtrl(navigateCtrl, operateCtrl) { - this.navigateCtrl = navigateCtrl; - this.operateCtrl = operateCtrl; - } - - GraphControlsCtrl.prototype = { - constructor: GraphControlsCtrl, + return function (serviceProvider, navigateCtrl, operateCtrl) { + 'use strict'; /** - * Register the header controller. + * Opens the specified graph control. + * + * @param {jQuery} graphControl */ - register: function () { - if (serviceProvider.graphControlsCtrl === undefined) { - serviceProvider.register('graphControlsCtrl', graphControlsCtrl); + var openGraphControl = function (graphControl) { + // undock if necessary + if ($('div.graph-control-content').is(':visible') === false) { + $('#graph-controls div.graph-control-docked').hide(); + $('#graph-controls div.graph-control-header-container').show(); + $('.graph-control').removeClass('docked'); } - }, - /** - * Initialize the graph controls. - */ - init: function () { - this.operateCtrl.init(); - // initial the graph control visibility - var graphControlVisibility = nf.Storage.getItem('graph-control-visibility'); - if (graphControlVisibility !== null) { - $.each(graphControlVisibility, function (id, isVisible) { - var graphControl = $('#' + id); - if (graphControl) { - if (isVisible) { - openGraphControl(graphControl); - } else { - hideGraphControl(graphControl); - } - } - }); - } else { - openGraphControl($('#navigation-control')); - openGraphControl($('#operation-control')); + // show the content of the specified graph control + graphControl.children('div.graph-control-content').show(); + graphControl.find('div.graph-control-expansion').removeClass('fa-plus-square-o').addClass('fa-minus-square-o'); + + // handle specific actions as necessary + if (graphControl.attr('id') === 'navigation-control') { + birdseye.updateBirdseyeVisibility(true); } - }, - /** - * Undock the graph control. - * @param {jQuery} $event - */ - undock: function ($event) { - openGraphControl($($event.target).parent()); - }, - - /** - * Expand the graph control. - * @param {jQuery} $event - */ - expand: function ($event) { - var icon = $($event.target); - if (icon.find('.fa-plus-square-o').length > 0 || icon.hasClass('fa-plus-square-o') || icon.parent().children().find('.fa-plus-square-o').length > 0) { - openGraphControl(icon.closest('div.graph-control')); - } else { - hideGraphControl(icon.closest('div.graph-control')); + // get the current visibility + var graphControlVisibility = storage.getItem('graph-control-visibility'); + if (graphControlVisibility === null) { + graphControlVisibility = {}; } - }, + + // update the visibility for this graph control + var graphControlId = graphControl.attr('id'); + graphControlVisibility[graphControlId] = true; + storage.setItem('graph-control-visibility', graphControlVisibility); + }; /** - * Gets the icon to show for the selection context. + * Hides the specified graph control. + * + * @param {jQuery} graphControl */ - getContextIcon: function () { - var selection = nf.CanvasUtils.getSelection(); + var hideGraphControl = function (graphControl) { + // hide the content of the specified graph control + graphControl.children('div.graph-control-content').hide(); + graphControl.find('div.graph-control-expansion').removeClass('fa-minus-square-o').addClass('fa-plus-square-o'); - if (selection.empty()) { - if (nf.Canvas.getParentGroupId() === null) { - return 'icon-drop'; - } else { - return 'icon-group'; + // dock if necessary + if ($('div.graph-control-content').is(':visible') === false) { + $('#graph-controls div.graph-control-header-container').hide(); + $('#graph-controls div.graph-control-docked').show(); + $('.graph-control').addClass('docked'); + } + + // handle specific actions as necessary + if (graphControl.attr('id') === 'navigation-control') { + birdseye.updateBirdseyeVisibility(false); + } + + // get the current visibility + var graphControlVisibility = storage.getItem('graph-control-visibility'); + if (graphControlVisibility === null) { + graphControlVisibility = {}; + } + + // update the visibility for this graph control + var graphControlId = graphControl.attr('id'); + graphControlVisibility[graphControlId] = false; + storage.setItem('graph-control-visibility', graphControlVisibility); + }; + + function GraphControlsCtrl(navigateCtrl, operateCtrl) { + this.navigateCtrl = navigateCtrl; + this.operateCtrl = operateCtrl; + } + + GraphControlsCtrl.prototype = { + constructor: GraphControlsCtrl, + + /** + * Register the header controller. + */ + register: function () { + if (serviceProvider.graphControlsCtrl === undefined) { + serviceProvider.register('graphControlsCtrl', graphControlsCtrl); } - } else { - if (selection.size() === 1) { - if (nf.CanvasUtils.isProcessor(selection)) { - return 'icon-processor'; - } else if (nf.CanvasUtils.isProcessGroup(selection)) { - return 'icon-group'; - } else if (nf.CanvasUtils.isInputPort(selection)) { - return 'icon-port-in'; - } else if (nf.CanvasUtils.isOutputPort(selection)) { - return 'icon-port-out'; - } else if (nf.CanvasUtils.isRemoteProcessGroup(selection)) { - return 'icon-group-remote'; - } else if (nf.CanvasUtils.isFunnel(selection)) { - return 'icon-funnel'; - } else if (nf.CanvasUtils.isLabel(selection)) { - return 'icon-label'; - } else if (nf.CanvasUtils.isConnection(selection)) { - return 'icon-connect'; - } - } else { - return 'icon-drop'; - } - } - }, + }, - /** - * Will hide target when appropriate. - */ - hide: function () { - var selection = nf.CanvasUtils.getSelection(); - if (selection.size() > 1) { - return 'invisible' - } else { - return ''; - } - }, - - /** - * Gets the name to show for the selection context. - */ - getContextName: function () { - var selection = nf.CanvasUtils.getSelection(); - var canRead = nf.Canvas.canRead(); - - if (selection.empty()) { - if (canRead) { - return nf.Canvas.getGroupName(); - } else { - return nf.Canvas.getGroupId(); - } - } else { - if (selection.size() === 1) { - var d = selection.datum(); - if (d.permissions.canRead) { - if (nf.CanvasUtils.isLabel(selection)) { - if ($.trim(d.component.label) !== '') { - return d.component.label; + /** + * Initialize the graph controls. + */ + init: function () { + this.operateCtrl.init(); + // initial the graph control visibility + var graphControlVisibility = storage.getItem('graph-control-visibility'); + if (graphControlVisibility !== null) { + $.each(graphControlVisibility, function (id, isVisible) { + var graphControl = $('#' + id); + if (graphControl) { + if (isVisible) { + openGraphControl(graphControl); } else { - return ''; + hideGraphControl(graphControl); } - } else if (nf.CanvasUtils.isConnection(selection)) { - return nf.CanvasUtils.formatConnectionName(d.component); - } else { - return d.component.name; + } + }); + } else { + openGraphControl($('#navigation-control')); + openGraphControl($('#operation-control')); + } + }, + + /** + * Undock the graph control. + * @param {jQuery} $event + */ + undock: function ($event) { + openGraphControl($($event.target).parent()); + }, + + /** + * Expand the graph control. + * @param {jQuery} $event + */ + expand: function ($event) { + var icon = $($event.target); + if (icon.find('.fa-plus-square-o').length > 0 || icon.hasClass('fa-plus-square-o') || icon.parent().children().find('.fa-plus-square-o').length > 0) { + openGraphControl(icon.closest('div.graph-control')); + } else { + hideGraphControl(icon.closest('div.graph-control')); + } + }, + + /** + * Gets the icon to show for the selection context. + */ + getContextIcon: function () { + var selection = canvasUtils.getSelection(); + + if (selection.empty()) { + if (canvasUtils.getParentGroupId() === null) { + return 'icon-drop'; + } else { + return 'icon-group'; + } + } else { + if (selection.size() === 1) { + if (canvasUtils.isProcessor(selection)) { + return 'icon-processor'; + } else if (canvasUtils.isProcessGroup(selection)) { + return 'icon-group'; + } else if (canvasUtils.isInputPort(selection)) { + return 'icon-port-in'; + } else if (canvasUtils.isOutputPort(selection)) { + return 'icon-port-out'; + } else if (canvasUtils.isRemoteProcessGroup(selection)) { + return 'icon-group-remote'; + } else if (canvasUtils.isFunnel(selection)) { + return 'icon-funnel'; + } else if (canvasUtils.isLabel(selection)) { + return 'icon-label'; + } else if (canvasUtils.isConnection(selection)) { + return 'icon-connect'; } } else { + return 'icon-drop'; + } + } + }, + + /** + * Will hide target when appropriate. + */ + hide: function () { + var selection = canvasUtils.getSelection(); + if (selection.size() > 1) { + return 'invisible' + } else { + return ''; + } + }, + + /** + * Gets the name to show for the selection context. + */ + getContextName: function () { + var selection = canvasUtils.getSelection(); + var canRead = canvasUtils.canReadFromGroup(); + + if (selection.empty()) { + if (canRead) { + return canvasUtils.getGroupName(); + } else { + return canvasUtils.getGroupId(); + } + } else { + if (selection.size() === 1) { + var d = selection.datum(); + if (d.permissions.canRead) { + if (canvasUtils.isLabel(selection)) { + if ($.trim(d.component.label) !== '') { + return d.component.label; + } else { + return ''; + } + } else if (canvasUtils.isConnection(selection)) { + return canvasUtils.formatConnectionName(d.component); + } else { + return d.component.name; + } + } else { + return d.id; + } + } else { + return 'Multiple components selected'; + } + } + }, + + /** + * Gets the type to show for the selection context. + */ + getContextType: function () { + var selection = canvasUtils.getSelection(); + + if (selection.empty()) { + return 'Process Group'; + } else { + if (selection.size() === 1) { + if (canvasUtils.isProcessor(selection)) { + return 'Processor'; + } else if (canvasUtils.isProcessGroup(selection)) { + return 'Process Group'; + } else if (canvasUtils.isInputPort(selection)) { + return 'Input Port'; + } else if (canvasUtils.isOutputPort(selection)) { + return 'Output Port'; + } else if (canvasUtils.isRemoteProcessGroup(selection)) { + return 'Remote Process Group'; + } else if (canvasUtils.isFunnel(selection)) { + return 'Funnel'; + } else if (canvasUtils.isLabel(selection)) { + return 'Label'; + } else if (canvasUtils.isConnection(selection)) { + return 'Connection'; + } + } else { + return 'Multiple selected'; + } + } + }, + + /** + * Gets the id to show for the selection context. + */ + getContextId: function () { + var selection = canvasUtils.getSelection(); + + if (selection.empty()) { + return canvasUtils.getGroupId(); + } else { + if (selection.size() === 1) { + var d = selection.datum(); return d.id; + } else { + return 'Multiple selected'; } - } else { - return 'Multiple components selected'; } - } - }, + }, - /** - * Gets the type to show for the selection context. - */ - getContextType: function () { - var selection = nf.CanvasUtils.getSelection(); + /** + * Determines whether the user can configure or open the details dialog. + */ + canConfigureOrOpenDetails: function () { + var selection = canvasUtils.getSelection(); - if (selection.empty()) { - return 'Process Group'; - } else { - if (selection.size() === 1) { - if (nf.CanvasUtils.isProcessor(selection)) { - return 'Processor'; - } else if (nf.CanvasUtils.isProcessGroup(selection)) { - return 'Process Group'; - } else if (nf.CanvasUtils.isInputPort(selection)) { - return 'Input Port'; - } else if (nf.CanvasUtils.isOutputPort(selection)) { - return 'Output Port'; - } else if (nf.CanvasUtils.isRemoteProcessGroup(selection)) { - return 'Remote Process Group'; - } else if (nf.CanvasUtils.isFunnel(selection)) { - return 'Funnel'; - } else if (nf.CanvasUtils.isLabel(selection)) { - return 'Label'; - } else if (nf.CanvasUtils.isConnection(selection)) { - return 'Connection'; + if (selection.empty()) { + return true; + } + + return canvasUtils.isConfigurable(selection) || canvasUtils.hasDetails(selection); + }, + + /** + * Opens either the configuration or details view based on the current state. + */ + openConfigureOrDetailsView: function () { + var selection = canvasUtils.getSelection(); + + if (selection.empty()) { + processGroupConfiguration.showConfiguration(canvasUtils.getGroupId()); + } + + if (canvasUtils.isConfigurable(selection)) { + actions.showConfiguration(selection); + } else if (canvasUtils.hasDetails(selection)) { + actions.showDetails(selection); + } + }, + + /** + * Determines whether the user can configure or open the policy management page. + */ + canManagePolicies: function () { + var selection = canvasUtils.getSelection(); + + // ensure 0 or 1 components selected + if (selection.size() <= 1) { + // if something is selected, ensure it's not a connection + if (!selection.empty() && canvasUtils.isConnection(selection)) { + return false; } - } else { - return 'Multiple selected'; - } - } - }, - /** - * Gets the id to show for the selection context. - */ - getContextId: function () { - var selection = nf.CanvasUtils.getSelection(); - - if (selection.empty()) { - return nf.Canvas.getGroupId(); - } else { - if (selection.size() === 1) { - var d = selection.datum(); - return d.id; - } else { - return 'Multiple selected'; - } - } - }, - - /** - * Determines whether the user can configure or open the details dialog. - */ - canConfigureOrOpenDetails: function () { - var selection = nf.CanvasUtils.getSelection(); - - if (selection.empty()) { - return true; - } - - return nf.CanvasUtils.isConfigurable(selection) || nf.CanvasUtils.hasDetails(selection); - }, - - /** - * Opens either the configuration or details view based on the current state. - */ - openConfigureOrDetailsView: function () { - var selection = nf.CanvasUtils.getSelection(); - - if (selection.empty()) { - nf.ProcessGroupConfiguration.showConfiguration(nf.Canvas.getGroupId()); - } - - if (nf.CanvasUtils.isConfigurable(selection)) { - nf.Actions.showConfiguration(selection); - } else if (nf.CanvasUtils.hasDetails(selection)) { - nf.Actions.showDetails(selection); - } - }, - - /** - * Determines whether the user can configure or open the policy management page. - */ - canManagePolicies: function () { - var selection = nf.CanvasUtils.getSelection(); - - // ensure 0 or 1 components selected - if (selection.size() <= 1) { - // if something is selected, ensure it's not a connection - if (!selection.empty() && nf.CanvasUtils.isConnection(selection)) { - return false; + // ensure access to read tenants + return common.canAccessTenants(); } - // ensure access to read tenants - return nf.Common.canAccessTenants(); + return false; } - - return false; } - } - var graphControlsCtrl = new GraphControlsCtrl(navigateCtrl, operateCtrl); - graphControlsCtrl.register(); - return graphControlsCtrl; -}; \ No newline at end of file + var graphControlsCtrl = new GraphControlsCtrl(navigateCtrl, operateCtrl); + graphControlsCtrl.register(); + return graphControlsCtrl; + }; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-header-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-header-controller.js index 903cea9fd4..2ad88954a0 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-header-controller.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-header-controller.js @@ -15,113 +15,141 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ng.Canvas.HeaderCtrl = function (serviceProvider, toolboxCtrl, globalMenuCtrl, flowStatusCtrl) { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'nf.Common', + 'nf.Storage', + 'nf.Shell', + 'nf.ErrorHandler'], + function ($, common, storage, shell, errorHandler) { + return (nf.ng.Canvas.HeaderCtrl = factory($, common, storage, shell, errorHandler)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.Canvas.HeaderCtrl = + factory(require('jquery'), + require('nf.Common'), + require('nf.Storage'), + require('nf.Shell'), + require('nf.ErrorHandler'))); + } else { + nf.ng.Canvas.HeaderCtrl = factory(root.$, + root.nf.Common, + root.nf.Storage, + root.nf.Shell, + root.nf.ErrorHandler); + } +}(this, function ($, common, storage, shell, errorHandler) { 'use strict'; - var MIN_TOOLBAR_WIDTH = 640; + return function (serviceProvider, toolboxCtrl, globalMenuCtrl, flowStatusCtrl) { + 'use strict'; - var config = { - urls: { - accessConfig: '../nifi-api/access/config' - } - }; + var MIN_TOOLBAR_WIDTH = 640; - function HeaderCtrl(toolboxCtrl, globalMenuCtrl, flowStatusCtrl) { - this.toolboxCtrl = toolboxCtrl; - this.globalMenuCtrl = globalMenuCtrl; - this.flowStatusCtrl = flowStatusCtrl; + var config = { + urls: { + accessConfig: '../nifi-api/access/config' + } + }; - /** - * The login controller. - */ - this.loginCtrl = { + function HeaderCtrl(toolboxCtrl, globalMenuCtrl, flowStatusCtrl) { + this.toolboxCtrl = toolboxCtrl; + this.globalMenuCtrl = globalMenuCtrl; + this.flowStatusCtrl = flowStatusCtrl; /** - * Initialize the login controller. + * The login controller. */ - init: function () { - var loginCtrl = this; + this.loginCtrl = { - // if the user is not anonymous or accessing via http - if ($('#current-user').text() !== nf.Common.ANONYMOUS_USER_TEXT || location.protocol === 'http:') { - $('#login-link-container').css('display', 'none'); + /** + * Initialize the login controller. + */ + init: function () { + var loginCtrl = this; + + // if the user is not anonymous or accessing via http + if ($('#current-user').text() !== common.ANONYMOUS_USER_TEXT || location.protocol === 'http:') { + $('#login-link-container').css('display', 'none'); + } + + // if accessing via http, don't show the current user + if (location.protocol === 'http:') { + $('#current-user-container').css('display', 'none'); + } + + // get the login config + var loginXhr = $.ajax({ + type: 'GET', + url: config.urls.accessConfig, + dataType: 'json' + }); + + $.when(loginXhr).done(function (loginResult) { + loginCtrl.supportsLogin = loginResult.config.supportsLogin; + }).fail(errorHandler.handleAjaxError); + }, + + /** + * Boolean describing whether or not the NiFi instance supports login. + */ + supportsLogin: undefined, + + /** + * The login shell controller. + */ + shell: { + + /** + * Launch the login shell. + */ + launch: function () { + shell.showPage('login', false); + } } + }; - // if accessing via http, don't show the current user - if (location.protocol === 'http:') { - $('#current-user-container').css('display', 'none'); + /** + * The logout controller. + */ + this.logoutCtrl = { + logout: function () { + storage.removeItem("jwt"); + window.location = '/nifi'; } + }; + } - // get the login config - var loginXhr = $.ajax({ - type: 'GET', - url: config.urls.accessConfig, - dataType: 'json' - }); + HeaderCtrl.prototype = { + constructor: HeaderCtrl, - $.when(loginXhr).done(function (loginResult) { - loginCtrl.supportsLogin = loginResult.config.supportsLogin; - }).fail(nf.ErrorHandler.handleAjaxError); + /** + * Register the header controller. + */ + register: function () { + if (serviceProvider.headerCtrl === undefined) { + serviceProvider.register('headerCtrl', headerCtrl); + } }, /** - * Boolean describing whether or not the NiFi instance supports login. + * Initialize the canvas header. + * + * @argument {boolean} supportsLogin Whether login is supported. */ - supportsLogin: undefined, - - /** - * The login shell controller. - */ - shell: { - - /** - * Launch the login shell. - */ - launch: function () { - nf.Shell.showPage('login', false); - } + init: function () { + this.toolboxCtrl.init(); + this.globalMenuCtrl.init(); + this.flowStatusCtrl.init(); + this.loginCtrl.init(); } - }; - - /** - * The logout controller. - */ - this.logoutCtrl = { - logout: function () { - nf.Storage.removeItem("jwt"); - window.location = '/nifi'; - } - }; - } - - HeaderCtrl.prototype = { - constructor: HeaderCtrl, - - /** - * Register the header controller. - */ - register: function () { - if (serviceProvider.headerCtrl === undefined) { - serviceProvider.register('headerCtrl', headerCtrl); - } - }, - - /** - * Initialize the canvas header. - * - * @argument {boolean} supportsLogin Whether login is supported. - */ - init: function () { - this.toolboxCtrl.init(); - this.globalMenuCtrl.init(); - this.flowStatusCtrl.init(); - this.loginCtrl.init(); } - } - var headerCtrl = new HeaderCtrl(toolboxCtrl, globalMenuCtrl, flowStatusCtrl); - headerCtrl.register(); - return headerCtrl; -}; \ No newline at end of file + var headerCtrl = new HeaderCtrl(toolboxCtrl, globalMenuCtrl, flowStatusCtrl); + headerCtrl.register(); + return headerCtrl; + }; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-navigate-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-navigate-controller.js index 45c541c730..ca0b2269a5 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-navigate-controller.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-navigate-controller.js @@ -15,77 +15,97 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ng.Canvas.NavigateCtrl = function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['nf.CanvasUtils', + 'nf.ContextMenu'], + function (canvasUtils, contextMenu) { + return (nf.ng.Canvas.NavigateCtrl = factory(canvasUtils, contextMenu)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.Canvas.NavigateCtrl = + factory(require('nf.CanvasUtils'), + require('nf.ContextMenu'))); + } else { + nf.ng.Canvas.NavigateCtrl = factory(root.nf.CanvasUtils, + root.nf.ContextMenu); + } +}(this, function (canvasUtils, contextMenu) { 'use strict'; - function NavigateCtrl() { + return function () { + 'use strict'; - /** - * Zoom in on the canvas. - */ - this.zoomIn = function () { - nf.Canvas.View.zoomIn(); + function NavigateCtrl() { - // hide the context menu - nf.ContextMenu.hide(); + /** + * Zoom in on the canvas. + */ + this.zoomIn = function () { + canvasUtils.zoomCanvasViewIn(); - // refresh the canvas - nf.Canvas.View.refresh({ - transition: true - }); - }; + // hide the context menu + contextMenu.hide(); - /** - * Zoom out on the canvas. - */ - this.zoomOut = function () { - nf.Canvas.View.zoomOut(); + // refresh the canvas + canvasUtils.refreshCanvasView({ + transition: true + }); + }; - // hide the context menu - nf.ContextMenu.hide(); + /** + * Zoom out on the canvas. + */ + this.zoomOut = function () { + canvasUtils.zoomCanvasViewOut(); - // refresh the canvas - nf.Canvas.View.refresh({ - transition: true - }); - }; + // hide the context menu + contextMenu.hide(); - /** - * Zoom fit on the canvas. - */ - this.zoomFit = function () { - nf.Canvas.View.fit(); + // refresh the canvas + canvasUtils.refreshCanvasView({ + transition: true + }); + }; - // hide the context menu - nf.ContextMenu.hide(); + /** + * Zoom fit on the canvas. + */ + this.zoomFit = function () { + canvasUtils.fitCanvasView(); - // refresh the canvas - nf.Canvas.View.refresh({ - transition: true - }); - }; + // hide the context menu + contextMenu.hide(); - /** - * Zoom actual size on the canvas. - */ - this.zoomActualSize = function () { - nf.Canvas.View.actualSize(); + // refresh the canvas + canvasUtils.refreshCanvasView({ + transition: true + }); + }; - // hide the context menu - nf.ContextMenu.hide(); + /** + * Zoom actual size on the canvas. + */ + this.zoomActualSize = function () { + canvasUtils.actualSizeCanvasView(); - // refresh the canvas - nf.Canvas.View.refresh({ - transition: true - }); - }; - } - NavigateCtrl.prototype = { - constructor: NavigateCtrl - } + // hide the context menu + contextMenu.hide(); - var navigateCtrl = new NavigateCtrl(); - return navigateCtrl; -}; \ No newline at end of file + // refresh the canvas + canvasUtils.refreshCanvasView({ + transition: true + }); + }; + } + + NavigateCtrl.prototype = { + constructor: NavigateCtrl + } + + var navigateCtrl = new NavigateCtrl(); + return navigateCtrl; + }; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js index d6d868860b..dc1ad39293 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js @@ -15,323 +15,207 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ng.Canvas.OperateCtrl = function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'd3', + 'nf.Dialog', + 'nf.Birdseye', + 'nf.CanvasUtils', + 'nf.Common', + 'nf.Client', + 'nf.Processor'], + function ($, d3, dialog, birdseye, canvasUtils, common, client, processor) { + return (nf.ng.Canvas.OperateCtrl = factory($, d3, dialog, birdseye, canvasUtils, common, client, processor)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.Canvas.OperateCtrl = + factory(require('jquery'), + require('d3'), + require('nf.Dialog'), + require('nf.Birdseye'), + require('nf.CanvasUtils'), + require('nf.Common'), + require('nf.Client'), + require('nf.Processor'))); + } else { + nf.ng.Canvas.OperateCtrl = factory(root.$, + root.d3, + root.nf.Dialog, + root.nf.Birdseye, + root.nf.CanvasUtils, + root.nf.Common, + root.nf.Client, + root.nf.Processor); + } +}(this, function ($, d3, dialog, birdseye, canvasUtils, common, client, processor) { 'use strict'; - // updates the color if its a valid hex color string - var updateColor = function () { - var hex = $('#fill-color-value').val(); + return function () { + 'use strict'; - // only update the fill color when its a valid hex color string - // #[six hex characters|three hex characters] case insensitive - if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(hex)) { - $('#fill-color').minicolors('value', hex); - } - }; + // updates the color if its a valid hex color string + var updateColor = function () { + var hex = $('#fill-color-value').val(); - function OperateCtrl() { - - /** - * The canvas operator's create template component. - */ - this.template = { - - /** - * The canvas operator's create template component's modal. - */ - modal: { - - /** - * Gets the modal element. - * - * @returns {*|jQuery|HTMLElement} - */ - getElement: function () { - return $('#new-template-dialog'); - }, - - /** - * Initialize the modal. - */ - init: function () { - // configure the create template dialog - this.getElement().modal({ - scrollableContentStyle: 'scrollable', - headerText: 'Create Template' - }); - }, - - /** - * Updates the modal config. - * - * @param {string} name The name of the property to update. - * @param {object|array} config The config for the `name`. - */ - update: function (name, config) { - this.getElement().modal(name, config); - }, - - /** - * Show the modal. - */ - show: function () { - this.getElement().modal('show'); - }, - - /** - * Hide the modal. - */ - hide: function () { - this.getElement().modal('hide'); - } + // only update the fill color when its a valid hex color string + // #[six hex characters|three hex characters] case insensitive + if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(hex)) { + $('#fill-color').minicolors('value', hex); } }; - /** - * The canvas operator's create template component. - */ - this.templateUpload = { + function OperateCtrl() { /** - * The canvas operator's create template component's modal. + * The canvas operator's create template component. */ - modal: { + this.template = { /** - * Gets the modal element. - * - * @returns {*|jQuery|HTMLElement} + * The canvas operator's create template component's modal. */ - getElement: function () { - return $('#upload-template-dialog'); - }, + modal: { - /** - * Initialize the modal. - */ - init: function () { - // initialize the form - var templateForm = $('#template-upload-form').ajaxForm({ - url: '../nifi-api/process-groups/', - dataType: 'xml', - beforeSubmit: function (formData, $form, options) { - // ensure uploading to the current process group - options.url += (encodeURIComponent(nf.Canvas.getGroupId()) + '/templates/upload'); - }, - success: function (response, statusText, xhr, form) { - // see if the import was successful and inform the user - if (response.documentElement.tagName === 'templateEntity') { - nf.Dialog.showOkDialog({ - headerText: 'Success', - dialogContent: 'Template successfully imported.' - }); - } else { - // import failed - var statusText = 'Unable to import template. Please check the log for errors.'; - if (response.documentElement.tagName === 'errorResponse') { - // if a more specific error was given, use it - var errorMessage = response.documentElement.getAttribute('statusText'); - if (!nf.Common.isBlank(errorMessage)) { - statusText = errorMessage; - } - } + /** + * Gets the modal element. + * + * @returns {*|jQuery|HTMLElement} + */ + getElement: function () { + return $('#new-template-dialog'); + }, - // show reason - nf.Dialog.showOkDialog({ - headerText: 'Unable to Upload', - dialogContent: nf.Common.escapeHtml(statusText) - }); - } - }, - error: function (xhr, statusText, error) { - // request failed - nf.Dialog.showOkDialog({ - headerText: 'Unable to Upload', - dialogContent: nf.Common.escapeHtml(xhr.responseText) - }); - } - }); + /** + * Initialize the modal. + */ + init: function () { + // configure the create template dialog + this.getElement().modal({ + scrollableContentStyle: 'scrollable', + headerText: 'Create Template' + }); + }, - // configure the upload template dialog - this.getElement().modal({ - headerText: 'Upload Template', - buttons: [{ - buttonText: 'Upload', - color: { - base: '#728E9B', - hover: '#004849', - text: '#ffffff' - }, - handler: { - click: function () { - var selectedTemplate = $('#selected-template-name').text(); + /** + * Updates the modal config. + * + * @param {string} name The name of the property to update. + * @param {object|array} config The config for the `name`. + */ + update: function (name, config) { + this.getElement().modal(name, config); + }, - // submit the template if necessary - if (nf.Common.isBlank(selectedTemplate)) { - $('#upload-template-status').text('No template selected. Please browse to select a template.'); - } else { - templateForm.submit(); + /** + * Show the modal. + */ + show: function () { + this.getElement().modal('show'); + }, - // hide the dialog - $('#upload-template-dialog').modal('hide'); - } - } - } - }, { - buttonText: 'Cancel', - color: { - base: '#E3E8EB', - hover: '#C7D2D7', - text: '#004849' - }, - handler: { - click: function () { - // hide the dialog - $('#upload-template-dialog').modal('hide'); - } - } - }], - handler: { - close: function () { - // set the filename - $('#selected-template-name').text(''); - $('#upload-template-status').text(''); - - // reset the form to ensure that the change fire will fire - templateForm.resetForm(); - } - } - }); - - // add a handler for the change file input chain event - $('#template-file-field').on('change', function (e) { - var filename = $(this).val(); - if (!nf.Common.isBlank(filename)) { - filename = filename.replace(/^.*[\\\/]/, ''); - } - - // set the filename and clear any status - $('#selected-template-name').text(filename); - $('#upload-template-status').text(''); - }); - }, - - /** - * Updates the modal config. - * - * @param {string} name The name of the property to update. - * @param {object|array} config The config for the `name`. - */ - update: function (name, config) { - this.getElement().modal(name, config); - }, - - /** - * Show the modal. - */ - show: function () { - this.getElement().modal('show'); - }, - - /** - * Hide the modal. - */ - hide: function () { - this.getElement().modal('hide'); + /** + * Hide the modal. + */ + hide: function () { + this.getElement().modal('hide'); + } } - } - }; - - /** - * The canvas operator's fillcolor component. - */ - this.fillcolor = { + }; /** - * The canvas operator's fillcolor component's modal. + * The canvas operator's create template component. */ - modal: { + this.templateUpload = { /** - * Gets the modal element. - * - * @returns {*|jQuery|HTMLElement} + * The canvas operator's create template component's modal. */ - getElement: function () { - return $('#fill-color-dialog'); - }, + modal: { - /** - * Initialize the modal. - */ - init: function () { - // configure the create fillcolor dialog - this.getElement().modal({ - scrollableContentStyle: 'scrollable', - headerText: 'Change Color', - buttons: [{ - buttonText: 'Apply', - color: { - base: '#728E9B', - hover: '#004849', - text: '#ffffff' + /** + * Gets the modal element. + * + * @returns {*|jQuery|HTMLElement} + */ + getElement: function () { + return $('#upload-template-dialog'); + }, + + /** + * Initialize the modal. + */ + init: function () { + // initialize the form + var templateForm = $('#template-upload-form').ajaxForm({ + url: '../nifi-api/process-groups/', + dataType: 'xml', + beforeSubmit: function (formData, $form, options) { + // ensure uploading to the current process group + options.url += (encodeURIComponent(canvasUtils.getGroupId()) + '/templates/upload'); }, - handler: { - click: function () { - var selection = nf.CanvasUtils.getSelection(); - - // color the selected components - selection.each(function (d) { - var selected = d3.select(this); - var selectedData = selected.datum(); - - // get the color and update the styles - var color = $('#fill-color').minicolors('value'); - - // ensure the color actually changed - if (color !== selectedData.component.style['background-color']) { - // build the request entity - var entity = { - 'revision': nf.Client.getRevision(selectedData), - 'component': { - 'id': selectedData.id, - 'style': { - 'background-color': color - } - } - }; - - // update the style for the specified component - $.ajax({ - type: 'PUT', - url: selectedData.uri, - data: JSON.stringify(entity), - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - // update the component - nf[selectedData.type].set(response); - }).fail(function (xhr, status, error) { - if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) { - nf.Dialog.showOkDialog({ - headerText: 'Error', - dialogContent: nf.Common.escapeHtml(xhr.responseText) - }); - } - }).always(function(){ - nf.Birdseye.refresh(); - }); - } + success: function (response, statusText, xhr, form) { + // see if the import was successful and inform the user + if (response.documentElement.tagName === 'templateEntity') { + dialog.showOkDialog({ + headerText: 'Success', + dialogContent: 'Template successfully imported.' }); + } else { + // import failed + var statusText = 'Unable to import template. Please check the log for errors.'; + if (response.documentElement.tagName === 'errorResponse') { + // if a more specific error was given, use it + var errorMessage = response.documentElement.getAttribute('statusText'); + if (!common.isBlank(errorMessage)) { + statusText = errorMessage; + } + } - // close the dialog - $('#fill-color-dialog').modal('hide'); + // show reason + dialog.showOkDialog({ + headerText: 'Unable to Upload', + dialogContent: common.escapeHtml(statusText) + }); } + }, + error: function (xhr, statusText, error) { + // request failed + dialog.showOkDialog({ + headerText: 'Unable to Upload', + dialogContent: common.escapeHtml(xhr.responseText) + }); } - }, - { + }); + + // configure the upload template dialog + this.getElement().modal({ + headerText: 'Upload Template', + buttons: [{ + buttonText: 'Upload', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, + handler: { + click: function () { + var selectedTemplate = $('#selected-template-name').text(); + + // submit the template if necessary + if (common.isBlank(selectedTemplate)) { + $('#upload-template-status').text('No template selected. Please browse to select a template.'); + } else { + templateForm.submit(); + + // hide the dialog + $('#upload-template-dialog').modal('hide'); + } + } + } + }, { buttonText: 'Cancel', color: { base: '#E3E8EB', @@ -340,130 +224,283 @@ nf.ng.Canvas.OperateCtrl = function () { }, handler: { click: function () { - // close the dialog - $('#fill-color-dialog').modal('hide'); + // hide the dialog + $('#upload-template-dialog').modal('hide'); } } }], - handler: { - close: function () { - // clear the current color - $('#fill-color-value').val(''); - $('#fill-color').minicolors('value', ''); + handler: { + close: function () { + // set the filename + $('#selected-template-name').text(''); + $('#upload-template-status').text(''); + + // reset the form to ensure that the change fire will fire + templateForm.resetForm(); + } } - } - }); - }, + }); - /** - * Updates the modal config. - * - * @param {string} name The name of the property to update. - * @param {object|array} config The config for the `name`. - */ - update: function (name, config) { - this.getElement().modal(name, config); - }, + // add a handler for the change file input chain event + $('#template-file-field').on('change', function (e) { + var filename = $(this).val(); + if (!common.isBlank(filename)) { + filename = filename.replace(/^.*[\\\/]/, ''); + } - /** - * Show the modal. - */ - show: function () { - this.getElement().modal('show'); - }, - - /** - * Hide the modal. - */ - hide: function () { - this.getElement().modal('hide'); - }, - - /** - * The canvas operator's fillcolor component modal's minicolors. - */ - minicolors: { + // set the filename and clear any status + $('#selected-template-name').text(filename); + $('#upload-template-status').text(''); + }); + }, /** - * Gets the minicolors element. + * Updates the modal config. + * + * @param {string} name The name of the property to update. + * @param {object|array} config The config for the `name`. + */ + update: function (name, config) { + this.getElement().modal(name, config); + }, + + /** + * Show the modal. + */ + show: function () { + this.getElement().modal('show'); + }, + + /** + * Hide the modal. + */ + hide: function () { + this.getElement().modal('hide'); + } + } + }; + + /** + * The canvas operator's fillcolor component. + */ + this.fillcolor = { + + /** + * The canvas operator's fillcolor component's modal. + */ + modal: { + + /** + * Gets the modal element. * * @returns {*|jQuery|HTMLElement} */ getElement: function () { - return $('#fill-color'); + return $('#fill-color-dialog'); }, /** - * Initialize the minicolors. + * Initialize the modal. */ init: function () { - // configure the minicolors - this.getElement().minicolors({ - inline: true, - change: function (hex, opacity) { - // update the value - $('#fill-color-value').val(hex); + // configure the create fillcolor dialog + this.getElement().modal({ + scrollableContentStyle: 'scrollable', + headerText: 'Change Color', + buttons: [{ + buttonText: 'Apply', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, + handler: { + click: function () { + var selection = canvasUtils.getSelection(); - // always update the preview - if (hex.toLowerCase() === '#ffffff') { - //special case #ffffff implies default fill - $('#fill-color-processor-preview-icon').css({ - 'color': nf.Processor.defaultIconColor(), - 'background-color': hex - }); - } else { - $('#fill-color-processor-preview-icon').css({ - 'color': nf.Common.determineContrastColor( - nf.Common.substringAfterLast( - hex, '#')), - 'background-color': hex - }); + // color the selected components + selection.each(function (d) { + var selected = d3.select(this); + var selectedData = selected.datum(); + + // get the color and update the styles + var color = $('#fill-color').minicolors('value'); + + // ensure the color actually changed + if (color !== selectedData.component.style['background-color']) { + // build the request entity + var entity = { + 'revision': client.getRevision(selectedData), + 'component': { + 'id': selectedData.id, + 'style': { + 'background-color': color + } + } + }; + + // update the style for the specified component + $.ajax({ + type: 'PUT', + url: selectedData.uri, + data: JSON.stringify(entity), + dataType: 'json', + contentType: 'application/json' + }).done(function (response) { + // update the component + canvasUtils.getComponentByType(selectedData.type).set(response); + }).fail(function (xhr, status, error) { + if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) { + dialog.showOkDialog({ + headerText: 'Error', + dialogContent: common.escapeHtml(xhr.responseText) + }); + } + }).always(function () { + birdseye.refresh(); + }); + } + }); + + // close the dialog + $('#fill-color-dialog').modal('hide'); + } } - - var borderColor = hex; - if (borderColor.toLowerCase() === '#ffffff') { - borderColor = 'rgba(0,0,0,0.25)'; + }, + { + buttonText: 'Cancel', + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, + handler: { + click: function () { + // close the dialog + $('#fill-color-dialog').modal('hide'); + } + } + }], + handler: { + close: function () { + // clear the current color + $('#fill-color-value').val(''); + $('#fill-color').minicolors('value', ''); } - $('#fill-color-processor-preview').css({ - 'border-color': borderColor - }); - - $('#fill-color-label-preview').css({ - 'background': hex - }); - $('#fill-color-label-preview-value').css('color', - nf.Common.determineContrastColor(nf.Common.substringAfterLast(hex, '#')) - ); } }); + }, - // apply fill color from field on blur and enter press - $('#fill-color-value').on('blur', updateColor).on('keyup', function (e) { - var code = e.keyCode ? e.keyCode : e.which; - if (code === $.ui.keyCode.ENTER) { - updateColor(); - } - }); + /** + * Updates the modal config. + * + * @param {string} name The name of the property to update. + * @param {object|array} config The config for the `name`. + */ + update: function (name, config) { + this.getElement().modal(name, config); + }, + + /** + * Show the modal. + */ + show: function () { + this.getElement().modal('show'); + }, + + /** + * Hide the modal. + */ + hide: function () { + this.getElement().modal('hide'); + }, + + /** + * The canvas operator's fillcolor component modal's minicolors. + */ + minicolors: { + + /** + * Gets the minicolors element. + * + * @returns {*|jQuery|HTMLElement} + */ + getElement: function () { + return $('#fill-color'); + }, + + /** + * Initialize the minicolors. + */ + init: function () { + // configure the minicolors + this.getElement().minicolors({ + inline: true, + change: function (hex, opacity) { + // update the value + $('#fill-color-value').val(hex); + + // always update the preview + if (hex.toLowerCase() === '#ffffff') { + //special case #ffffff implies default fill + $('#fill-color-processor-preview-icon').css({ + 'color': processor.defaultIconColor(), + 'background-color': hex + }); + } else { + $('#fill-color-processor-preview-icon').css({ + 'color': common.determineContrastColor( + common.substringAfterLast( + hex, '#')), + 'background-color': hex + }); + } + + var borderColor = hex; + if (borderColor.toLowerCase() === '#ffffff') { + borderColor = 'rgba(0,0,0,0.25)'; + } + $('#fill-color-processor-preview').css({ + 'border-color': borderColor + }); + + $('#fill-color-label-preview').css({ + 'background': hex + }); + $('#fill-color-label-preview-value').css('color', + common.determineContrastColor(common.substringAfterLast(hex, '#')) + ); + } + }); + + // apply fill color from field on blur and enter press + $('#fill-color-value').on('blur', updateColor).on('keyup', function (e) { + var code = e.keyCode ? e.keyCode : e.which; + if (code === $.ui.keyCode.ENTER) { + updateColor(); + } + }); + } } } - } - }; - } - - OperateCtrl.prototype = { - constructor: OperateCtrl, - - /** - * Initializes the canvas operate controller. - */ - init: function () { - this.template.modal.init(); - this.templateUpload.modal.init(); - this.fillcolor.modal.init(); - this.fillcolor.modal.minicolors.init(); + }; } - } - var operateCtrl = new OperateCtrl(); - return operateCtrl; -}; \ No newline at end of file + OperateCtrl.prototype = { + constructor: OperateCtrl, + + /** + * Initializes the canvas operate controller. + */ + init: function () { + this.template.modal.init(); + this.templateUpload.modal.init(); + this.fillcolor.modal.init(); + this.fillcolor.modal.minicolors.init(); + } + } + + var operateCtrl = new OperateCtrl(); + return operateCtrl; + }; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-toolbox-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-toolbox-controller.js index 8bd7fcd983..212ecc3bd7 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-toolbox-controller.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-toolbox-controller.js @@ -15,134 +15,154 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ng.Canvas.ToolboxCtrl = function (processorComponent, - inputPortComponent, - outputPortComponent, - groupComponent, - remoteGroupComponent, - funnelComponent, - templateComponent, - labelComponent) { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['nf.CanvasUtils', + 'nf.ContextMenu'], + function (canvasUtils, contextMenu) { + return (nf.ng.Canvas.ToolboxCtrl = factory(canvasUtils, contextMenu)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.Canvas.ToolboxCtrl = + factory(require('nf.CanvasUtils'), + require('nf.ContextMenu'))); + } else { + nf.ng.Canvas.ToolboxCtrl = factory(root.nf.CanvasUtils, + root.nf.ContextMenu); + } +}(this, function (canvasUtils, contextMenu) { 'use strict'; - function ToolboxCtrl(processorComponent, - inputPortComponent, - outputPortComponent, - groupComponent, - remoteGroupComponent, - funnelComponent, - templateComponent, - labelComponent) { - this.processorComponent = processorComponent; - this.inputPortComponent = inputPortComponent; - this.outputPortComponent = outputPortComponent; - this.groupComponent = groupComponent; - this.remoteGroupComponent = remoteGroupComponent; - this.funnelComponent = funnelComponent; - this.templateComponent = templateComponent; - this.labelComponent = labelComponent; + return function (processorComponent, + inputPortComponent, + outputPortComponent, + groupComponent, + remoteGroupComponent, + funnelComponent, + templateComponent, + labelComponent) { + 'use strict'; - /** - * Config for the toolbox - */ - this.config = { - type: { - processor: 'Processor', - inputPort: 'Input Port', - outputPort: 'Output Port', - processGroup: 'Process Group', - remoteProcessGroup: 'Remote Process Group', - connection: 'Connection', - funnel: 'Funnel', - template: 'Template', - label: 'Label' + function ToolboxCtrl(processorComponent, + inputPortComponent, + outputPortComponent, + groupComponent, + remoteGroupComponent, + funnelComponent, + templateComponent, + labelComponent) { + this.processorComponent = processorComponent; + this.inputPortComponent = inputPortComponent; + this.outputPortComponent = outputPortComponent; + this.groupComponent = groupComponent; + this.remoteGroupComponent = remoteGroupComponent; + this.funnelComponent = funnelComponent; + this.templateComponent = templateComponent; + this.labelComponent = labelComponent; + + /** + * Config for the toolbox + */ + this.config = { + type: { + processor: 'Processor', + inputPort: 'Input Port', + outputPort: 'Output Port', + processGroup: 'Process Group', + remoteProcessGroup: 'Remote Process Group', + connection: 'Connection', + funnel: 'Funnel', + template: 'Template', + label: 'Label' + }, + urls: { + api: '../nifi-api', + controller: '../nifi-api/controller', + processorTypes: '../nifi-api/flow/processor-types' + } + }; + } + + ToolboxCtrl.prototype = { + constructor: ToolboxCtrl, + + /** + * Initialize the toolbox controller. + */ + init: function () { + // initialize modal dialogs + processorComponent.modal.init(); + inputPortComponent.modal.init(); + outputPortComponent.modal.init(); + groupComponent.modal.init(); + remoteGroupComponent.modal.init(); + templateComponent.modal.init(); }, - urls: { - api: '../nifi-api', - controller: '../nifi-api/controller', - processorTypes: '../nifi-api/flow/processor-types' - } - }; - } - ToolboxCtrl.prototype = { - constructor: ToolboxCtrl, - /** - * Initialize the toolbox controller. - */ - init: function() { - // initialize modal dialogs - processorComponent.modal.init(); - inputPortComponent.modal.init(); - outputPortComponent.modal.init(); - groupComponent.modal.init(); - remoteGroupComponent.modal.init(); - templateComponent.modal.init(); - }, + /** + * Gets the draggable configuration for a toolbox component. + * + * @param {object} component The component responsible for handling the stop event. + * @returns {object} The draggable configuration. + * + * NOTE: The `component` must implement a dropHandler. + */ + draggableComponentConfig: function (component) { - /** - * Gets the draggable configuration for a toolbox component. - * - * @param {object} component The component responsible for handling the stop event. - * @returns {object} The draggable configuration. - * - * NOTE: The `component` must implement a dropHandler. - */ - draggableComponentConfig: function(component) { + //add hover effect + component.getElement().hover(function () { + component.getElement().removeClass(component.icon).addClass(component.hoverIcon); + }, function () { + component.getElement().removeClass(component.hoverIcon).addClass(component.icon); + }) - //add hover effect - component.getElement().hover(function () { - component.getElement().removeClass(component.icon).addClass(component.hoverIcon); - }, function () { - component.getElement().removeClass(component.hoverIcon).addClass(component.icon); - }) + return { + zIndex: 1011, + revert: true, + revertDuration: 0, + cancel: false, + containment: 'body', + cursor: '-webkit-grabbing', + start: function (e, ui) { + // hide the context menu if necessary + contextMenu.hide(); + }, + stop: function (e, ui) { + var translate = canvasUtils.translateCanvasView(); + var scale = canvasUtils.scaleCanvasView(); - return { - zIndex: 1011, - revert: true, - revertDuration: 0, - cancel: false, - containment: 'body', - cursor: '-webkit-grabbing', - start: function (e, ui) { - // hide the context menu if necessary - nf.ContextMenu.hide(); - }, - stop: function (e, ui) { - var translate = nf.Canvas.View.translate(); - var scale = nf.Canvas.View.scale(); + var mouseX = e.originalEvent.pageX; + var mouseY = e.originalEvent.pageY - canvasUtils.getCanvasOffset(); - var mouseX = e.originalEvent.pageX; - var mouseY = e.originalEvent.pageY - nf.Canvas.CANVAS_OFFSET; + // invoke the drop handler if we're over the canvas + if (mouseX >= 0 && mouseY >= 0) { + // adjust the x and y coordinates accordingly + var x = (mouseX / scale) - (translate[0] / scale); + var y = (mouseY / scale) - (translate[1] / scale); - // invoke the drop handler if we're over the canvas - if (mouseX >= 0 && mouseY >= 0) { - // adjust the x and y coordinates accordingly - var x = (mouseX / scale) - (translate[0] / scale); - var y = (mouseY / scale) - (translate[1] / scale); - - //each component must implement a dropHandler function - component.dropHandler.apply(component, [{ - x: x, - y: y - }]); - } - }, - helper: component.dragIcon + //each component must implement a dropHandler function + component.dropHandler.apply(component, [{ + x: x, + y: y + }]); + } + }, + helper: component.dragIcon + } } } - } - var toolboxCtrl = - new ToolboxCtrl(processorComponent, - inputPortComponent, - outputPortComponent, - groupComponent, - remoteGroupComponent, - funnelComponent, - templateComponent, - labelComponent); - return toolboxCtrl; -}; \ No newline at end of file + var toolboxCtrl = + new ToolboxCtrl(processorComponent, + inputPortComponent, + outputPortComponent, + groupComponent, + remoteGroupComponent, + funnelComponent, + templateComponent, + labelComponent); + return toolboxCtrl; + }; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-breadcrumbs-directive.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-breadcrumbs-directive.js index 8e487dece0..cb8a8b21e9 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-breadcrumbs-directive.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-breadcrumbs-directive.js @@ -15,20 +15,36 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ng.BreadcrumbsDirective = function (breadcrumbsCtrl) { - return { - restrict: 'E', - templateUrl: 'views/nf-ng-breadcrumbs-directive-view.html', - scope: { - 'breadcrumbs': '=', - 'clickFunc': '=', - 'highlightCrumbId': '=', - 'separatorFunc': '=' - }, - link: function (scope, element, attrs) { - breadcrumbsCtrl.registerMouseWheelEvent(element); - } +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define([], + function () { + return (nf.ng.BreadcrumbsDirective = factory()); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.BreadcrumbsDirective = + factory()); + } else { + nf.ng.BreadcrumbsDirective = factory(); + } +}(this, function () { + 'use strict'; + + return function (breadcrumbsCtrl) { + return { + restrict: 'E', + templateUrl: 'views/nf-ng-breadcrumbs-directive-view.html', + scope: { + 'breadcrumbs': '=', + 'clickFunc': '=', + 'highlightCrumbId': '=', + 'separatorFunc': '=' + }, + link: function (scope, element, attrs) { + breadcrumbsCtrl.registerMouseWheelEvent(element); + } + }; }; -}; \ No newline at end of file +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-draggable-directive.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-draggable-directive.js index 5c47d5eb00..93afc5f549 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-draggable-directive.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-draggable-directive.js @@ -15,13 +15,29 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ng.DraggableDirective = function () { - return { - restrict: 'AE', - link: function (scope, element, attrs) { - element.draggable(scope.$eval(attrs.nfDraggable)); - } +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define([], + function () { + return (nf.ng.DraggableDirective = factory()); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.DraggableDirective = + factory()); + } else { + nf.ng.DraggableDirective = factory(); + } +}(this, function () { + 'use strict'; + + return function () { + return { + restrict: 'AE', + link: function (scope, element, attrs) { + element.draggable(scope.$eval(attrs.nfDraggable)); + } + }; }; -}; \ No newline at end of file +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-funnel-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-funnel-component.js index 334a3fecd3..c324a8dec8 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-funnel-component.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-funnel-component.js @@ -15,102 +15,134 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ng.FunnelComponent = function (serviceProvider) { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'nf.Client', + 'nf.Birdseye', + 'nf.Graph', + 'nf.CanvasUtils', + 'nf.ErrorHandler'], + function ($, client, birdseye, graph, canvasUtils, errorHandler) { + return (nf.ng.FunnelComponent = factory($, client, birdseye, graph, canvasUtils, errorHandler)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.FunnelComponent = + factory(require('jquery'), + require('nf.Client'), + require('nf.Birdseye'), + require('nf.Graph'), + require('nf.CanvasUtils'), + require('nf.ErrorHandler'))); + } else { + nf.ng.FunnelComponent = factory(root.$, + root.nf.Client, + root.nf.Birdseye, + root.nf.Graph, + root.nf.CanvasUtils, + root.nf.ErrorHandler); + } +}(this, function ($, client, birdseye, graph, canvasUtils, errorHandler) { 'use strict'; - function FunnelComponent() { - this.icon = 'icon icon-funnel'; + return function (serviceProvider) { + 'use strict'; - this.hoverIcon = 'icon icon-funnel-add'; - } - FunnelComponent.prototype = { - constructor: FunnelComponent, + function FunnelComponent() { + this.icon = 'icon icon-funnel'; - /** - * Gets the component. - * - * @returns {*|jQuery|HTMLElement} - */ - getElement: function() { - return $('#funnel-component'); - }, - - /** - * Enable the component. - */ - enabled: function() { - this.getElement().attr('disabled', false); - }, - - /** - * Disable the component. - */ - disabled: function() { - this.getElement().attr('disabled', true); - }, - - /** - * Handler function for when component is dropped on the canvas. - * - * @argument {object} pt The point that the component was dropped. - */ - dropHandler: function(pt) { - this.createFunnel(pt); - }, - - /** - * The drag icon for the toolbox component. - * - * @param event - * @returns {*|jQuery|HTMLElement} - */ - dragIcon: function (event) { - return $('
    '); - }, - - /** - * Creates a new funnel at the specified point. - * - * @argument {object} pt The point that the funnel was dropped. - */ - createFunnel: function(pt) { - var outputPortEntity = { - 'revision': nf.Client.getRevision({ - 'revision': { - 'version': 0 - } - }), - 'component': { - 'position': { - 'x': pt.x, - 'y': pt.y - } - } - }; - - // create a new funnel - $.ajax({ - type: 'POST', - url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nf.Canvas.getGroupId()) + '/funnels', - data: JSON.stringify(outputPortEntity), - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - // add the funnel to the graph - nf.Graph.add({ - 'funnels': [response] - }, { - 'selectAll': true - }); - - // update the birdseye - nf.Birdseye.refresh(); - }).fail(nf.ErrorHandler.handleAjaxError); + this.hoverIcon = 'icon icon-funnel-add'; } - } - var funnelComponent = new FunnelComponent(); - return funnelComponent; -}; \ No newline at end of file + FunnelComponent.prototype = { + constructor: FunnelComponent, + + /** + * Gets the component. + * + * @returns {*|jQuery|HTMLElement} + */ + getElement: function () { + return $('#funnel-component'); + }, + + /** + * Enable the component. + */ + enabled: function () { + this.getElement().attr('disabled', false); + }, + + /** + * Disable the component. + */ + disabled: function () { + this.getElement().attr('disabled', true); + }, + + /** + * Handler function for when component is dropped on the canvas. + * + * @argument {object} pt The point that the component was dropped. + */ + dropHandler: function (pt) { + this.createFunnel(pt); + }, + + /** + * The drag icon for the toolbox component. + * + * @param event + * @returns {*|jQuery|HTMLElement} + */ + dragIcon: function (event) { + return $('
    '); + }, + + /** + * Creates a new funnel at the specified point. + * + * @argument {object} pt The point that the funnel was dropped. + */ + createFunnel: function (pt) { + var outputPortEntity = { + 'revision': client.getRevision({ + 'revision': { + 'version': 0 + } + }), + 'component': { + 'position': { + 'x': pt.x, + 'y': pt.y + } + } + }; + + // create a new funnel + $.ajax({ + type: 'POST', + url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(canvasUtils.getGroupId()) + '/funnels', + data: JSON.stringify(outputPortEntity), + dataType: 'json', + contentType: 'application/json' + }).done(function (response) { + // add the funnel to the graph + graph.add({ + 'funnels': [response] + }, { + 'selectAll': true + }); + + // update the birdseye + birdseye.refresh(); + }).fail(errorHandler.handleAjaxError); + } + } + + var funnelComponent = new FunnelComponent(); + return funnelComponent; + }; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-group-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-group-component.js index f654560e21..5e7463a548 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-group-component.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-group-component.js @@ -15,229 +15,260 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ng.GroupComponent = function (serviceProvider) { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'nf.Client', + 'nf.Birdseye', + 'nf.Graph', + 'nf.CanvasUtils', + 'nf.ErrorHandler'], + function ($, client, birdseye, graph, canvasUtils, errorHandler) { + return (nf.ng.GroupComponent = factory($, client, birdseye, graph, canvasUtils, errorHandler)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.GroupComponent = + factory(require('jquery'), + require('nf.Client'), + require('nf.Birdseye'), + require('nf.Graph'), + require('nf.CanvasUtils'), + require('nf.ErrorHandler'))); + } else { + nf.ng.GroupComponent = factory(root.$, + root.nf.Client, + root.nf.Birdseye, + root.nf.Graph, + root.nf.CanvasUtils, + root.nf.ErrorHandler); + } +}(this, function ($, client, birdseye, graph, canvasUtils, errorHandler) { 'use strict'; - /** - * Create the group and add to the graph. - * - * @argument {string} groupName The name of the group. - * @argument {object} pt The point that the group was dropped. - */ - var createGroup = function (groupName, pt) { - var processGroupEntity = { - 'revision': nf.Client.getRevision({ - 'revision': { - 'version': 0 - } - }), - 'component': { - 'name': groupName, - 'position': { - 'x': pt.x, - 'y': pt.y - } - } - }; - - // create a new processor of the defined type - return $.ajax({ - type: 'POST', - url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nf.Canvas.getGroupId()) + '/process-groups', - data: JSON.stringify(processGroupEntity), - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - // add the process group to the graph - nf.Graph.add({ - 'processGroups': [response] - }, { - 'selectAll': true - }); - - // update component visibility - nf.Canvas.View.updateVisibility(); - - // update the birdseye - nf.Birdseye.refresh(); - }).fail(nf.ErrorHandler.handleAjaxError); - }; - - function GroupComponent() { - - this.icon = 'icon icon-group'; - - this.hoverIcon = 'icon icon-group-add'; + return function (serviceProvider) { + 'use strict'; /** - * The group component's modal. + * Create the group and add to the graph. + * + * @argument {string} groupName The name of the group. + * @argument {object} pt The point that the group was dropped. */ - this.modal = { + var createGroup = function (groupName, pt) { + var processGroupEntity = { + 'revision': client.getRevision({ + 'revision': { + 'version': 0 + } + }), + 'component': { + 'name': groupName, + 'position': { + 'x': pt.x, + 'y': pt.y + } + } + }; + + // create a new processor of the defined type + return $.ajax({ + type: 'POST', + url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(canvasUtils.getGroupId()) + '/process-groups', + data: JSON.stringify(processGroupEntity), + dataType: 'json', + contentType: 'application/json' + }).done(function (response) { + // add the process group to the graph + graph.add({ + 'processGroups': [response] + }, { + 'selectAll': true + }); + + // update component visibility + graph.updateVisibility(); + + // update the birdseye + birdseye.refresh(); + }).fail(errorHandler.handleAjaxError); + }; + + function GroupComponent() { + + this.icon = 'icon icon-group'; + + this.hoverIcon = 'icon icon-group-add'; /** - * Gets the modal element. + * The group component's modal. + */ + this.modal = { + + /** + * Gets the modal element. + * + * @returns {*|jQuery|HTMLElement} + */ + getElement: function () { + return $('#new-process-group-dialog'); + }, + + /** + * Initialize the modal. + */ + init: function () { + // configure the new process group dialog + this.getElement().modal({ + scrollableContentStyle: 'scrollable', + headerText: 'Add Process Group', + handler: { + close: function () { + $('#new-process-group-name').val(''); + } + } + }); + }, + + /** + * Updates the modal config. + * + * @param {string} name The name of the property to update. + * @param {object|array} config The config for the `name`. + */ + update: function (name, config) { + this.getElement().modal(name, config); + }, + + /** + * Show the modal. + */ + show: function () { + this.getElement().modal('show'); + }, + + /** + * Hide the modal. + */ + hide: function () { + this.getElement().modal('hide'); + } + }; + } + + GroupComponent.prototype = { + constructor: GroupComponent, + + /** + * Gets the component. * * @returns {*|jQuery|HTMLElement} */ getElement: function () { - return $('#new-process-group-dialog'); + return $('#group-component'); }, /** - * Initialize the modal. + * Enable the component. */ - init: function () { - // configure the new process group dialog - this.getElement().modal({ - scrollableContentStyle: 'scrollable', - headerText: 'Add Process Group', - handler: { - close: function () { - $('#new-process-group-name').val(''); - } - } - }); + enabled: function () { + this.getElement().attr('disabled', false); }, /** - * Updates the modal config. + * Disable the component. + */ + disabled: function () { + this.getElement().attr('disabled', true); + }, + + /** + * Handler function for when component is dropped on the canvas. * - * @param {string} name The name of the property to update. - * @param {object|array} config The config for the `name`. + * @argument {object} pt The point that the component was dropped. */ - update: function (name, config) { - this.getElement().modal(name, config); + dropHandler: function (pt) { + this.promptForGroupName(pt); }, /** - * Show the modal. + * The drag icon for the toolbox component. + * + * @param event + * @returns {*|jQuery|HTMLElement} */ - show: function () { - this.getElement().modal('show'); + dragIcon: function (event) { + return $('
    '); }, /** - * Hide the modal. + * Prompts the user to enter the name for the group. + * + * @argument {object} pt The point that the group was dropped. */ - hide: function () { - this.getElement().modal('hide'); - } - }; - } + promptForGroupName: function (pt) { + var groupComponent = this; + return $.Deferred(function (deferred) { + var addGroup = function () { + // get the name of the group and clear the textfield + var groupName = $('#new-process-group-name').val(); - GroupComponent.prototype = { - constructor: GroupComponent, + // hide the dialog + groupComponent.modal.hide(); - /** - * Gets the component. - * - * @returns {*|jQuery|HTMLElement} - */ - getElement: function () { - return $('#group-component'); - }, + // create the group and resolve the deferred accordingly + createGroup(groupName, pt).done(function (response) { + deferred.resolve(response.component); + }).fail(function () { + deferred.reject(); + }); + }; - /** - * Enable the component. - */ - enabled: function () { - this.getElement().attr('disabled', false); - }, - - /** - * Disable the component. - */ - disabled: function () { - this.getElement().attr('disabled', true); - }, - - /** - * Handler function for when component is dropped on the canvas. - * - * @argument {object} pt The point that the component was dropped. - */ - dropHandler: function (pt) { - this.promptForGroupName(pt); - }, - - /** - * The drag icon for the toolbox component. - * - * @param event - * @returns {*|jQuery|HTMLElement} - */ - dragIcon: function (event) { - return $('
    '); - }, - - /** - * Prompts the user to enter the name for the group. - * - * @argument {object} pt The point that the group was dropped. - */ - promptForGroupName: function (pt) { - var groupComponent = this; - return $.Deferred(function (deferred) { - var addGroup = function () { - // get the name of the group and clear the textfield - var groupName = $('#new-process-group-name').val(); - - // hide the dialog - groupComponent.modal.hide(); - - // create the group and resolve the deferred accordingly - createGroup(groupName, pt).done(function (response) { - deferred.resolve(response.component); - }).fail(function () { - deferred.reject(); - }); - }; - - groupComponent.modal.update('setButtonModel', [{ - buttonText: 'Add', - color: { - base: '#728E9B', - hover: '#004849', - text: '#ffffff' - }, - handler: { - click: addGroup - } - }, - { - buttonText: 'Cancel', + groupComponent.modal.update('setButtonModel', [{ + buttonText: 'Add', color: { - base: '#E3E8EB', - hover: '#C7D2D7', - text: '#004849' + base: '#728E9B', + hover: '#004849', + text: '#ffffff' }, handler: { - click: function () { - // reject the deferred - deferred.reject(); - - // close the dialog - groupComponent.modal.hide(); - } + click: addGroup } - }]); + }, + { + buttonText: 'Cancel', + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, + handler: { + click: function () { + // reject the deferred + deferred.reject(); - // show the dialog - groupComponent.modal.show(); + // close the dialog + groupComponent.modal.hide(); + } + } + }]); - // set up the focus and key handlers - $('#new-process-group-name').focus().off('keyup').on('keyup', function (e) { - var code = e.keyCode ? e.keyCode : e.which; - if (code === $.ui.keyCode.ENTER) { - addGroup(); - } - }); - }).promise(); + // show the dialog + groupComponent.modal.show(); + + // set up the focus and key handlers + $('#new-process-group-name').focus().off('keyup').on('keyup', function (e) { + var code = e.keyCode ? e.keyCode : e.which; + if (code === $.ui.keyCode.ENTER) { + addGroup(); + } + }); + }).promise(); + } } - } - var groupComponent = new GroupComponent(); - return groupComponent; -}; \ No newline at end of file + var groupComponent = new GroupComponent(); + return groupComponent; + }; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-input-port-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-input-port-component.js index 64d310ecb0..9aab07bdaf 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-input-port-component.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-input-port-component.js @@ -15,222 +15,253 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ng.InputPortComponent = function (serviceProvider) { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'nf.Client', + 'nf.Birdseye', + 'nf.Graph', + 'nf.CanvasUtils', + 'nf.ErrorHandler'], + function ($, client, birdseye, graph, canvasUtils, errorHandler) { + return (nf.ng.InputPortComponent = factory($, client, birdseye, graph, canvasUtils, errorHandler)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.InputPortComponent = + factory(require('jquery'), + require('nf.Client'), + require('nf.Birdseye'), + require('nf.Graph'), + require('nf.CanvasUtils'), + require('nf.ErrorHandler'))); + } else { + nf.ng.InputPortComponent = factory(root.$, + root.nf.Client, + root.nf.Birdseye, + root.nf.Graph, + root.nf.CanvasUtils, + root.nf.ErrorHandler); + } +}(this, function ($, client, birdseye, graph, canvasUtils, errorHandler) { 'use strict'; - /** - * Create the input port and add to the graph. - * - * @argument {string} portName The input port name. - * @argument {object} pt The point that the input port was dropped. - */ - var createInputPort = function (portName, pt) { - var inputPortEntity = { - 'revision': nf.Client.getRevision({ - 'revision': { - 'version': 0 - } - }), - 'component': { - 'name': portName, - 'position': { - 'x': pt.x, - 'y': pt.y - } - } - }; - - // create a new processor of the defined type - $.ajax({ - type: 'POST', - url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nf.Canvas.getGroupId()) + '/input-ports', - data: JSON.stringify(inputPortEntity), - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - // add the port to the graph - nf.Graph.add({ - 'inputPorts': [response] - }, { - 'selectAll': true - }); - - // update component visibility - nf.Canvas.View.updateVisibility(); - - // update the birdseye - nf.Birdseye.refresh(); - }).fail(nf.ErrorHandler.handleAjaxError); - }; - - function InputPortComponent() { - - this.icon = 'icon icon-port-in'; - - this.hoverIcon = 'icon icon-port-in-add'; + return function (serviceProvider) { + 'use strict'; /** - * The input port component's modal. + * Create the input port and add to the graph. + * + * @argument {string} portName The input port name. + * @argument {object} pt The point that the input port was dropped. */ - this.modal = { + var createInputPort = function (portName, pt) { + var inputPortEntity = { + 'revision': client.getRevision({ + 'revision': { + 'version': 0 + } + }), + 'component': { + 'name': portName, + 'position': { + 'x': pt.x, + 'y': pt.y + } + } + }; + + // create a new processor of the defined type + $.ajax({ + type: 'POST', + url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(canvasUtils.getGroupId()) + '/input-ports', + data: JSON.stringify(inputPortEntity), + dataType: 'json', + contentType: 'application/json' + }).done(function (response) { + // add the port to the graph + graph.add({ + 'inputPorts': [response] + }, { + 'selectAll': true + }); + + // update component visibility + graph.updateVisibility(); + + // update the birdseye + birdseye.refresh(); + }).fail(errorHandler.handleAjaxError); + }; + + function InputPortComponent() { + + this.icon = 'icon icon-port-in'; + + this.hoverIcon = 'icon icon-port-in-add'; /** - * Gets the modal element. + * The input port component's modal. + */ + this.modal = { + + /** + * Gets the modal element. + * + * @returns {*|jQuery|HTMLElement} + */ + getElement: function () { + return $('#new-port-dialog'); + }, + + /** + * Initialize the modal. + */ + init: function () { + // configure the new port dialog + this.getElement().modal({ + scrollableContentStyle: 'scrollable', + headerText: 'Add Port', + handler: { + close: function () { + $('#new-port-name').val(''); + } + } + }); + }, + + /** + * Updates the modal config. + * + * @param {string} name The name of the property to update. + * @param {object|array} config The config for the `name`. + */ + update: function (name, config) { + this.getElement().modal(name, config); + }, + + /** + * Show the modal. + */ + show: function () { + this.getElement().modal('show'); + }, + + /** + * Hide the modal. + */ + hide: function () { + this.getElement().modal('hide'); + } + }; + } + + InputPortComponent.prototype = { + constructor: InputPortComponent, + + /** + * Gets the component. * * @returns {*|jQuery|HTMLElement} */ getElement: function () { - return $('#new-port-dialog'); + return $('#port-in-component'); }, /** - * Initialize the modal. + * Enable the component. */ - init: function () { - // configure the new port dialog - this.getElement().modal({ - scrollableContentStyle: 'scrollable', - headerText: 'Add Port', - handler: { - close: function () { - $('#new-port-name').val(''); - } - } - }); + enabled: function () { + this.getElement().attr('disabled', false); }, /** - * Updates the modal config. + * Disable the component. + */ + disabled: function () { + this.getElement().attr('disabled', true); + }, + + /** + * Handler function for when component is dropped on the canvas. * - * @param {string} name The name of the property to update. - * @param {object|array} config The config for the `name`. + * @argument {object} pt The point that the component was dropped. */ - update: function (name, config) { - this.getElement().modal(name, config); + dropHandler: function (pt) { + this.promptForInputPortName(pt); }, /** - * Show the modal. + * The drag icon for the toolbox component. + * + * @param event + * @returns {*|jQuery|HTMLElement} */ - show: function () { - this.getElement().modal('show'); + dragIcon: function (event) { + return $('
    '); }, /** - * Hide the modal. + * Prompts the user to enter the name for the input port. + * + * @argument {object} pt The point that the input port was dropped. */ - hide: function () { - this.getElement().modal('hide'); - } - }; - } + promptForInputPortName: function (pt) { + var inputPortComponent = this; + var addInputPort = function () { + // get the name of the input port and clear the textfield + var portName = $('#new-port-name').val(); - InputPortComponent.prototype = { - constructor: InputPortComponent, + // hide the dialog + inputPortComponent.modal.hide(); - /** - * Gets the component. - * - * @returns {*|jQuery|HTMLElement} - */ - getElement: function () { - return $('#port-in-component'); - }, + // create the input port + createInputPort(portName, pt); + }; - /** - * Enable the component. - */ - enabled: function () { - this.getElement().attr('disabled', false); - }, - - /** - * Disable the component. - */ - disabled: function () { - this.getElement().attr('disabled', true); - }, - - /** - * Handler function for when component is dropped on the canvas. - * - * @argument {object} pt The point that the component was dropped. - */ - dropHandler: function (pt) { - this.promptForInputPortName(pt); - }, - - /** - * The drag icon for the toolbox component. - * - * @param event - * @returns {*|jQuery|HTMLElement} - */ - dragIcon: function (event) { - return $('
    '); - }, - - /** - * Prompts the user to enter the name for the input port. - * - * @argument {object} pt The point that the input port was dropped. - */ - promptForInputPortName: function (pt) { - var inputPortComponent = this; - var addInputPort = function () { - // get the name of the input port and clear the textfield - var portName = $('#new-port-name').val(); - - // hide the dialog - inputPortComponent.modal.hide(); - - // create the input port - createInputPort(portName, pt); - }; - - this.modal.update('setButtonModel', [{ - buttonText: 'Add', - color: { - base: '#728E9B', - hover: '#004849', - text: '#ffffff' - }, - handler: { - click: addInputPort - } - }, - { - buttonText: 'Cancel', + this.modal.update('setButtonModel', [{ + buttonText: 'Add', color: { - base: '#E3E8EB', - hover: '#C7D2D7', - text: '#004849' + base: '#728E9B', + hover: '#004849', + text: '#ffffff' }, handler: { - click: function () { - inputPortComponent.modal.hide(); - } + click: addInputPort } - }]); + }, + { + buttonText: 'Cancel', + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, + handler: { + click: function () { + inputPortComponent.modal.hide(); + } + } + }]); - // update the port type - $('#new-port-type').text('Input'); + // update the port type + $('#new-port-type').text('Input'); - // show the dialog - this.modal.show(); + // show the dialog + this.modal.show(); - // set up the focus and key handlers - $('#new-port-name').focus().off('keyup').on('keyup', function (e) { - var code = e.keyCode ? e.keyCode : e.which; - if (code === $.ui.keyCode.ENTER) { - addInputPort(); - } - }); + // set up the focus and key handlers + $('#new-port-name').focus().off('keyup').on('keyup', function (e) { + var code = e.keyCode ? e.keyCode : e.which; + if (code === $.ui.keyCode.ENTER) { + addInputPort(); + } + }); + } } - } - var inputPortComponent = new InputPortComponent(); - return inputPortComponent; -}; \ No newline at end of file + var inputPortComponent = new InputPortComponent(); + return inputPortComponent; + }; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-label-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-label-component.js index a77739e27a..f3c4263e5f 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-label-component.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-label-component.js @@ -15,104 +15,139 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ng.LabelComponent = function (serviceProvider) { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'nf.Client', + 'nf.Birdseye', + 'nf.Graph', + 'nf.CanvasUtils', + 'nf.ErrorHandler', + 'nf.Label'], + function ($, client, birdseye, graph, canvasUtils, errorHandler, label) { + return (nf.ng.LabelComponent = factory($, client, birdseye, graph, canvasUtils, errorHandler, label)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.LabelComponent = + factory(require('jquery'), + require('nf.Client'), + require('nf.Birdseye'), + require('nf.Graph'), + require('nf.CanvasUtils'), + require('nf.ErrorHandler'), + require('nf.Label'))); + } else { + nf.ng.LabelComponent = factory(root.$, + root.nf.Client, + root.nf.Birdseye, + root.nf.Graph, + root.nf.CanvasUtils, + root.nf.ErrorHandler, + root.nf.Label); + } +}(this, function ($, client, birdseye, graph, canvasUtils, errorHandler, label) { 'use strict'; - function LabelComponent() { - this.icon = 'icon icon-label'; + return function (serviceProvider) { + 'use strict'; - this.hoverIcon = 'icon icon-label-add'; - } - LabelComponent.prototype = { - constructor: LabelComponent, + function LabelComponent() { + this.icon = 'icon icon-label'; - /** - * Gets the component. - * - * @returns {*|jQuery|HTMLElement} - */ - getElement: function() { - return $('#label-component'); - }, - - /** - * Enable the component. - */ - enabled: function() { - this.getElement().attr('disabled', false); - }, - - /** - * Disable the component. - */ - disabled: function() { - this.getElement().attr('disabled', true); - }, - - /** - * Handler function for when component is dropped on the canvas. - * - * @argument {object} pt The point that the component was dropped. - */ - dropHandler: function(pt) { - this.createLabel(pt); - }, - - /** - * The drag icon for the toolbox component. - * - * @param event - * @returns {*|jQuery|HTMLElement} - */ - dragIcon: function (event) { - return $('
    '); - }, - - /** - * Create the label and add to the graph. - * - * @argument {object} pt The point that the label was dropped. - */ - createLabel: function(pt) { - var labelEntity = { - 'revision': nf.Client.getRevision({ - 'revision': { - 'version': 0 - } - }), - 'component': { - 'width': nf.Label.config.width, - 'height': nf.Label.config.height, - 'position': { - 'x': pt.x, - 'y': pt.y - } - } - }; - - // create a new label - $.ajax({ - type: 'POST', - url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nf.Canvas.getGroupId()) + '/labels', - data: JSON.stringify(labelEntity), - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - // add the label to the graph - nf.Graph.add({ - 'labels': [response] - }, { - 'selectAll': true - }); - - // update the birdseye - nf.Birdseye.refresh(); - }).fail(nf.ErrorHandler.handleAjaxError); + this.hoverIcon = 'icon icon-label-add'; } - } - var labelComponent = new LabelComponent(); - return labelComponent; -}; \ No newline at end of file + LabelComponent.prototype = { + constructor: LabelComponent, + + /** + * Gets the component. + * + * @returns {*|jQuery|HTMLElement} + */ + getElement: function () { + return $('#label-component'); + }, + + /** + * Enable the component. + */ + enabled: function () { + this.getElement().attr('disabled', false); + }, + + /** + * Disable the component. + */ + disabled: function () { + this.getElement().attr('disabled', true); + }, + + /** + * Handler function for when component is dropped on the canvas. + * + * @argument {object} pt The point that the component was dropped. + */ + dropHandler: function (pt) { + this.createLabel(pt); + }, + + /** + * The drag icon for the toolbox component. + * + * @param event + * @returns {*|jQuery|HTMLElement} + */ + dragIcon: function (event) { + return $('
    '); + }, + + /** + * Create the label and add to the graph. + * + * @argument {object} pt The point that the label was dropped. + */ + createLabel: function (pt) { + var labelEntity = { + 'revision': client.getRevision({ + 'revision': { + 'version': 0 + } + }), + 'component': { + 'width': label.config.width, + 'height': label.config.height, + 'position': { + 'x': pt.x, + 'y': pt.y + } + } + }; + + // create a new label + $.ajax({ + type: 'POST', + url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(canvasUtils.getGroupId()) + '/labels', + data: JSON.stringify(labelEntity), + dataType: 'json', + contentType: 'application/json' + }).done(function (response) { + // add the label to the graph + graph.add({ + 'labels': [response] + }, { + 'selectAll': true + }); + + // update the birdseye + birdseye.refresh(); + }).fail(errorHandler.handleAjaxError); + } + } + + var labelComponent = new LabelComponent(); + return labelComponent; + }; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-output-port-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-output-port-component.js index d856691205..8b4c637c0f 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-output-port-component.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-output-port-component.js @@ -15,213 +15,244 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ng.OutputPortComponent = function (serviceProvider) { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'nf.Client', + 'nf.Birdseye', + 'nf.Graph', + 'nf.CanvasUtils', + 'nf.ErrorHandler'], + function ($, client, birdseye, graph, canvasUtils, errorHandler) { + return (nf.ng.OutputPortComponent = factory($, client, birdseye, graph, canvasUtils, errorHandler)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.OutputPortComponent = + factory(require('jquery'), + require('nf.Client'), + require('nf.Birdseye'), + require('nf.Graph'), + require('nf.CanvasUtils'), + require('nf.ErrorHandler'))); + } else { + nf.ng.OutputPortComponent = factory(root.$, + root.nf.Client, + root.nf.Birdseye, + root.nf.Graph, + root.nf.CanvasUtils, + root.nf.ErrorHandler); + } +}(this, function ($, client, birdseye, graph, canvasUtils, errorHandler) { 'use strict'; - /** - * Create the input port and add to the graph. - * - * @argument {string} portName The output port name. - * @argument {object} pt The point that the output port was dropped. - */ - var createOutputPort = function (portName, pt) { - var outputPortEntity = { - 'revision': nf.Client.getRevision({ - 'revision': { - 'version': 0 - } - }), - 'component': { - 'name': portName, - 'position': { - 'x': pt.x, - 'y': pt.y - } - } - }; - - // create a new processor of the defined type - $.ajax({ - type: 'POST', - url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nf.Canvas.getGroupId()) + '/output-ports', - data: JSON.stringify(outputPortEntity), - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - // add the port to the graph - nf.Graph.add({ - 'outputPorts': [response] - }, { - 'selectAll': true - }); - - // update component visibility - nf.Canvas.View.updateVisibility(); - - // update the birdseye - nf.Birdseye.refresh(); - }).fail(nf.ErrorHandler.handleAjaxError); - }; - - function OutputPortComponent() { - - this.icon = 'icon icon-port-out'; - - this.hoverIcon = 'icon icon-port-out-add'; + return function (serviceProvider) { + 'use strict'; /** - * The output port component's modal. + * Create the input port and add to the graph. + * + * @argument {string} portName The output port name. + * @argument {object} pt The point that the output port was dropped. */ - this.modal = { + var createOutputPort = function (portName, pt) { + var outputPortEntity = { + 'revision': client.getRevision({ + 'revision': { + 'version': 0 + } + }), + 'component': { + 'name': portName, + 'position': { + 'x': pt.x, + 'y': pt.y + } + } + }; + + // create a new processor of the defined type + $.ajax({ + type: 'POST', + url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(canvasUtils.getGroupId()) + '/output-ports', + data: JSON.stringify(outputPortEntity), + dataType: 'json', + contentType: 'application/json' + }).done(function (response) { + // add the port to the graph + graph.add({ + 'outputPorts': [response] + }, { + 'selectAll': true + }); + + // update component visibility + graph.updateVisibility(); + + // update the birdseye + birdseye.refresh(); + }).fail(errorHandler.handleAjaxError); + }; + + function OutputPortComponent() { + + this.icon = 'icon icon-port-out'; + + this.hoverIcon = 'icon icon-port-out-add'; /** - * Gets the modal element. + * The output port component's modal. + */ + this.modal = { + + /** + * Gets the modal element. + * + * @returns {*|jQuery|HTMLElement} + */ + getElement: function () { + return $('#new-port-dialog'); //Reuse the input port dialog.... + }, + + /** + * Initialize the modal. + */ + init: function () { + //Reuse the input port dialog.... + }, + + /** + * Updates the modal config. + * + * @param {string} name The name of the property to update. + * @param {object|array} config The config for the `name`. + */ + update: function (name, config) { + this.getElement().modal(name, config); + }, + + /** + * Show the modal. + */ + show: function () { + this.getElement().modal('show'); + }, + + /** + * Hide the modal. + */ + hide: function () { + this.getElement().modal('hide'); + } + }; + } + + OutputPortComponent.prototype = { + constructor: OutputPortComponent, + + /** + * Gets the component. * * @returns {*|jQuery|HTMLElement} */ getElement: function () { - return $('#new-port-dialog'); //Reuse the input port dialog.... + return $('#port-out-component'); }, /** - * Initialize the modal. + * Enable the component. */ - init: function () { - //Reuse the input port dialog.... + enabled: function () { + this.getElement().attr('disabled', false); }, /** - * Updates the modal config. + * Disable the component. + */ + disabled: function () { + this.getElement().attr('disabled', true); + }, + + /** + * Handler function for when component is dropped on the canvas. * - * @param {string} name The name of the property to update. - * @param {object|array} config The config for the `name`. + * @argument {object} pt The point that the component was dropped. */ - update: function (name, config) { - this.getElement().modal(name, config); + dropHandler: function (pt) { + this.promptForOutputPortName(pt); }, /** - * Show the modal. + * The drag icon for the toolbox component. + * + * @param event + * @returns {*|jQuery|HTMLElement} */ - show: function () { - this.getElement().modal('show'); + dragIcon: function (event) { + return $('
    '); }, /** - * Hide the modal. + * Prompts the user to enter the name for the output port. + * + * @argument {object} pt The point that the output port was dropped. */ - hide: function () { - this.getElement().modal('hide'); - } - }; - } + promptForOutputPortName: function (pt) { + var outputPortComponent = this; + var addOutputPort = function () { + // get the name of the output port and clear the textfield + var portName = $('#new-port-name').val(); - OutputPortComponent.prototype = { - constructor: OutputPortComponent, + // hide the dialog + outputPortComponent.modal.hide(); - /** - * Gets the component. - * - * @returns {*|jQuery|HTMLElement} - */ - getElement: function () { - return $('#port-out-component'); - }, + // create the output port + createOutputPort(portName, pt); + }; - /** - * Enable the component. - */ - enabled: function () { - this.getElement().attr('disabled', false); - }, - - /** - * Disable the component. - */ - disabled: function () { - this.getElement().attr('disabled', true); - }, - - /** - * Handler function for when component is dropped on the canvas. - * - * @argument {object} pt The point that the component was dropped. - */ - dropHandler: function (pt) { - this.promptForOutputPortName(pt); - }, - - /** - * The drag icon for the toolbox component. - * - * @param event - * @returns {*|jQuery|HTMLElement} - */ - dragIcon: function (event) { - return $('
    '); - }, - - /** - * Prompts the user to enter the name for the output port. - * - * @argument {object} pt The point that the output port was dropped. - */ - promptForOutputPortName: function (pt) { - var outputPortComponent = this; - var addOutputPort = function () { - // get the name of the output port and clear the textfield - var portName = $('#new-port-name').val(); - - // hide the dialog - outputPortComponent.modal.hide(); - - // create the output port - createOutputPort(portName, pt); - }; - - this.modal.update('setButtonModel', [{ - buttonText: 'Add', - color: { - base: '#728E9B', - hover: '#004849', - text: '#ffffff' - }, - handler: { - click: addOutputPort - } - }, - { - buttonText: 'Cancel', + this.modal.update('setButtonModel', [{ + buttonText: 'Add', color: { - base: '#E3E8EB', - hover: '#C7D2D7', - text: '#004849' + base: '#728E9B', + hover: '#004849', + text: '#ffffff' }, handler: { - click: function () { - outputPortComponent.modal.hide(); - } + click: addOutputPort } - }]); + }, + { + buttonText: 'Cancel', + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, + handler: { + click: function () { + outputPortComponent.modal.hide(); + } + } + }]); - // update the port type - $('#new-port-type').text('Output'); + // update the port type + $('#new-port-type').text('Output'); - // set the focus and show the dialog - this.modal.show(); + // set the focus and show the dialog + this.modal.show(); - // set up the focus and key handlers - $('#new-port-name').focus().off('keyup').on('keyup', function (e) { - var code = e.keyCode ? e.keyCode : e.which; - if (code === $.ui.keyCode.ENTER) { - addOutputPort(); - } - }); + // set up the focus and key handlers + $('#new-port-name').focus().off('keyup').on('keyup', function (e) { + var code = e.keyCode ? e.keyCode : e.which; + if (code === $.ui.keyCode.ENTER) { + addOutputPort(); + } + }); + } } - } - var outputPortComponent = new OutputPortComponent(); - return outputPortComponent; -}; \ No newline at end of file + var outputPortComponent = new OutputPortComponent(); + return outputPortComponent; + }; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-processor-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-processor-component.js index ad011ca28a..257de23814 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-processor-component.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-processor-component.js @@ -15,656 +15,696 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ng.ProcessorComponent = function (serviceProvider) { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'Slick', + 'nf.Client', + 'nf.Birdseye', + 'nf.Graph', + 'nf.CanvasUtils', + 'nf.ErrorHandler', + 'nf.Dialog', + 'nf.Common'], + function ($, Slick, client, birdseye, graph, canvasUtils, errorHandler, dialog, common) { + return (nf.ng.ProcessorComponent = factory($, Slick, client, birdseye, graph, canvasUtils, errorHandler, dialog, common)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.ProcessorComponent = + factory(require('jquery'), + require('Slick'), + require('nf.Client'), + require('nf.Birdseye'), + require('nf.Graph'), + require('nf.CanvasUtils'), + require('nf.ErrorHandler'), + require('nf.Dialog'), + require('nf.Common'))); + } else { + nf.ng.ProcessorComponent = factory(root.$, + root.Slick, + root.nf.Client, + root.nf.Birdseye, + root.nf.Graph, + root.nf.CanvasUtils, + root.nf.ErrorHandler, + root.nf.Dialog, + root.nf.Common); + } +}(this, function ($, Slick, client, birdseye, graph, canvasUtils, errorHandler, dialog, common) { 'use strict'; - /** - * Filters the processor type table. - */ - var applyFilter = function () { - // get the dataview - var processorTypesGrid = $('#processor-types-table').data('gridInstance'); + return function (serviceProvider) { + 'use strict'; - // ensure the grid has been initialized - if (nf.Common.isDefinedAndNotNull(processorTypesGrid)) { - var processorTypesData = processorTypesGrid.getData(); + /** + * Filters the processor type table. + */ + var applyFilter = function () { + // get the dataview + var processorTypesGrid = $('#processor-types-table').data('gridInstance'); - // update the search criteria - processorTypesData.setFilterArgs({ - searchString: getFilterText() + // ensure the grid has been initialized + if (common.isDefinedAndNotNull(processorTypesGrid)) { + var processorTypesData = processorTypesGrid.getData(); + + // update the search criteria + processorTypesData.setFilterArgs({ + searchString: getFilterText() + }); + processorTypesData.refresh(); + + // update the buttons to possibly trigger the disabled state + $('#new-processor-dialog').modal('refreshButtons'); + + // update the selection if possible + if (processorTypesData.getLength() > 0) { + processorTypesGrid.setSelectedRows([0]); + } + } + }; + + /** + * Determines if the item matches the filter. + * + * @param {object} item The item to filter. + * @param {object} args The filter criteria. + * @returns {boolean} Whether the item matches the filter. + */ + var matchesRegex = function (item, args) { + if (args.searchString === '') { + return true; + } + + try { + // perform the row filtering + var filterExp = new RegExp(args.searchString, 'i'); + } catch (e) { + // invalid regex + return false; + } + + // determine if the item matches the filter + var matchesLabel = item['label'].search(filterExp) >= 0; + var matchesTags = item['tags'].search(filterExp) >= 0; + return matchesLabel || matchesTags; + }; + + /** + * Performs the filtering. + * + * @param {object} item The item subject to filtering. + * @param {object} args Filter arguments. + * @returns {Boolean} Whether or not to include the item. + */ + var filter = function (item, args) { + // determine if the item matches the filter + var matchesFilter = matchesRegex(item, args); + + // determine if the row matches the selected tags + var matchesTags = true; + if (matchesFilter) { + var tagFilters = $('#processor-tag-cloud').tagcloud('getSelectedTags'); + var hasSelectedTags = tagFilters.length > 0; + if (hasSelectedTags) { + matchesTags = matchesSelectedTags(tagFilters, item['tags']); + } + } + + // determine if this row should be visible + var matches = matchesFilter && matchesTags; + + // if this row is currently selected and its being filtered + if (matches === false && $('#selected-processor-type').text() === item['type']) { + // clear the selected row + $('#processor-type-description').text(''); + $('#processor-type-name').text(''); + $('#selected-processor-name').text(''); + $('#selected-processor-type').text(''); + + // clear the active cell the it can be reselected when its included + var processTypesGrid = $('#processor-types-table').data('gridInstance'); + processTypesGrid.resetActiveCell(); + } + + return matches; + }; + + /** + * Determines if the specified tags match all the tags selected by the user. + * + * @argument {string[]} tagFilters The tag filters. + * @argument {string} tags The tags to test. + */ + var matchesSelectedTags = function (tagFilters, tags) { + var selectedTags = []; + $.each(tagFilters, function (_, filter) { + selectedTags.push(filter); }); - processorTypesData.refresh(); - // update the buttons to possibly trigger the disabled state - $('#new-processor-dialog').modal('refreshButtons'); + // normalize the tags + var normalizedTags = tags.toLowerCase(); - // update the selection if possible - if (processorTypesData.getLength() > 0) { - processorTypesGrid.setSelectedRows([0]); - } - } - }; + var matches = true; + $.each(selectedTags, function (i, selectedTag) { + if (normalizedTags.indexOf(selectedTag) === -1) { + matches = false; + return false; + } + }); - /** - * Determines if the item matches the filter. - * - * @param {object} item The item to filter. - * @param {object} args The filter criteria. - * @returns {boolean} Whether the item matches the filter. - */ - var matchesRegex = function (item, args) { - if (args.searchString === '') { - return true; - } + return matches; + }; - try { - // perform the row filtering - var filterExp = new RegExp(args.searchString, 'i'); - } catch (e) { - // invalid regex - return false; - } + /** + * Sorts the specified data using the specified sort details. + * + * @param {object} sortDetails + * @param {object} data + */ + var sort = function (sortDetails, data) { + // defines a function for sorting + var comparer = function (a, b) { + var aString = common.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : ''; + var bString = common.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : ''; + return aString === bString ? 0 : aString > bString ? 1 : -1; + }; - // determine if the item matches the filter - var matchesLabel = item['label'].search(filterExp) >= 0; - var matchesTags = item['tags'].search(filterExp) >= 0; - return matchesLabel || matchesTags; - }; + // perform the sort + data.sort(comparer, sortDetails.sortAsc); + }; - /** - * Performs the filtering. - * - * @param {object} item The item subject to filtering. - * @param {object} args Filter arguments. - * @returns {Boolean} Whether or not to include the item. - */ - var filter = function (item, args) { - // determine if the item matches the filter - var matchesFilter = matchesRegex(item, args); + /** + * Get the text out of the filter field. If the filter field doesn't + * have any text it will contain the text 'filter list' so this method + * accounts for that. + */ + var getFilterText = function () { + return $('#processor-type-filter').val(); + }; - // determine if the row matches the selected tags - var matchesTags = true; - if (matchesFilter) { - var tagFilters = $('#processor-tag-cloud').tagcloud('getSelectedTags'); - var hasSelectedTags = tagFilters.length > 0; - if (hasSelectedTags) { - matchesTags = matchesSelectedTags(tagFilters, item['tags']); - } - } + /** + * Resets the filtered processor types. + */ + var resetProcessorDialog = function () { + // clear the selected tag cloud + $('#processor-tag-cloud').tagcloud('clearSelectedTags'); - // determine if this row should be visible - var matches = matchesFilter && matchesTags; + // clear any filter strings + $('#processor-type-filter').val(''); + + // reapply the filter + applyFilter(); - // if this row is currently selected and its being filtered - if (matches === false && $('#selected-processor-type').text() === item['type']) { // clear the selected row $('#processor-type-description').text(''); $('#processor-type-name').text(''); $('#selected-processor-name').text(''); $('#selected-processor-type').text(''); - // clear the active cell the it can be reselected when its included + // unselect any current selection var processTypesGrid = $('#processor-types-table').data('gridInstance'); + processTypesGrid.setSelectedRows([]); processTypesGrid.resetActiveCell(); - } - - return matches; - }; - - /** - * Determines if the specified tags match all the tags selected by the user. - * - * @argument {string[]} tagFilters The tag filters. - * @argument {string} tags The tags to test. - */ - var matchesSelectedTags = function (tagFilters, tags) { - var selectedTags = []; - $.each(tagFilters, function (_, filter) { - selectedTags.push(filter); - }); - - // normalize the tags - var normalizedTags = tags.toLowerCase(); - - var matches = true; - $.each(selectedTags, function (i, selectedTag) { - if (normalizedTags.indexOf(selectedTag) === -1) { - matches = false; - return false; - } - }); - - return matches; - }; - - /** - * Sorts the specified data using the specified sort details. - * - * @param {object} sortDetails - * @param {object} data - */ - var sort = function (sortDetails, data) { - // defines a function for sorting - var comparer = function (a, b) { - var aString = nf.Common.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : ''; - var bString = nf.Common.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : ''; - return aString === bString ? 0 : aString > bString ? 1 : -1; }; - // perform the sort - data.sort(comparer, sortDetails.sortAsc); - }; - - /** - * Get the text out of the filter field. If the filter field doesn't - * have any text it will contain the text 'filter list' so this method - * accounts for that. - */ - var getFilterText = function () { - return $('#processor-type-filter').val(); - }; - - /** - * Resets the filtered processor types. - */ - var resetProcessorDialog = function () { - // clear the selected tag cloud - $('#processor-tag-cloud').tagcloud('clearSelectedTags'); - - // clear any filter strings - $('#processor-type-filter').val(''); - - // reapply the filter - applyFilter(); - - // clear the selected row - $('#processor-type-description').text(''); - $('#processor-type-name').text(''); - $('#selected-processor-name').text(''); - $('#selected-processor-type').text(''); - - // unselect any current selection - var processTypesGrid = $('#processor-types-table').data('gridInstance'); - processTypesGrid.setSelectedRows([]); - processTypesGrid.resetActiveCell(); - }; - - /** - * Create the processor and add to the graph. - * - * @argument {string} name The processor name. - * @argument {string} processorType The processor type. - * @argument {object} pt The point that the processor was dropped. - */ - var createProcessor = function (name, processorType, pt) { - var processorEntity = { - 'revision': nf.Client.getRevision({ - 'revision': { - 'version': 0 - } - }), - 'component': { - 'type': processorType, - 'name': name, - 'position': { - 'x': pt.x, - 'y': pt.y - } - } - }; - - // create a new processor of the defined type - $.ajax({ - type: 'POST', - url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nf.Canvas.getGroupId()) + '/processors', - data: JSON.stringify(processorEntity), - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - // add the processor to the graph - nf.Graph.add({ - 'processors': [response] - }, { - 'selectAll': true - }); - - // update component visibility - nf.Canvas.View.updateVisibility(); - - // update the birdseye - nf.Birdseye.refresh(); - }).fail(nf.ErrorHandler.handleAjaxError); - }; - - /** - * Whether the specified item is selectable. - * - * @param item process type - */ - var isSelectable = function (item) { - return nf.Common.isBlank(item.usageRestriction) || nf.Common.canAccessRestrictedComponents(); - }; - - function ProcessorComponent() { - - this.icon = 'icon icon-processor'; - - this.hoverIcon = 'icon icon-processor-add'; - /** - * The processor component's modal. + * Create the processor and add to the graph. + * + * @argument {string} name The processor name. + * @argument {string} processorType The processor type. + * @argument {object} pt The point that the processor was dropped. */ - this.modal = { + var createProcessor = function (name, processorType, pt) { + var processorEntity = { + 'revision': client.getRevision({ + 'revision': { + 'version': 0 + } + }), + 'component': { + 'type': processorType, + 'name': name, + 'position': { + 'x': pt.x, + 'y': pt.y + } + } + }; + + // create a new processor of the defined type + $.ajax({ + type: 'POST', + url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(canvasUtils.getGroupId()) + '/processors', + data: JSON.stringify(processorEntity), + dataType: 'json', + contentType: 'application/json' + }).done(function (response) { + // add the processor to the graph + graph.add({ + 'processors': [response] + }, { + 'selectAll': true + }); + + // update component visibility + graph.updateVisibility(); + + // update the birdseye + birdseye.refresh(); + }).fail(errorHandler.handleAjaxError); + }; + + /** + * Whether the specified item is selectable. + * + * @param item process type + */ + var isSelectable = function (item) { + return common.isBlank(item.usageRestriction) || common.canAccessRestrictedComponents(); + }; + + function ProcessorComponent() { + + this.icon = 'icon icon-processor'; + + this.hoverIcon = 'icon icon-processor-add'; /** - * The processor component modal's filter. + * The processor component's modal. */ - filter: { + this.modal = { /** - * Initialize the filter. + * The processor component modal's filter. + */ + filter: { + + /** + * Initialize the filter. + */ + init: function () { + // initialize the processor type table + var processorTypesColumns = [ + { + id: 'type', + name: 'Type', + field: 'label', + formatter: common.typeFormatter, + sortable: true, + resizable: true + }, + { + id: 'tags', + name: 'Tags', + field: 'tags', + sortable: true, + resizable: true + } + ]; + + var processorTypesOptions = { + forceFitColumns: true, + enableTextSelectionOnCells: true, + enableCellNavigation: true, + enableColumnReorder: false, + autoEdit: false, + multiSelect: false, + rowHeight: 24 + }; + + // initialize the dataview + var processorTypesData = new Slick.Data.DataView({ + inlineFilters: false + }); + processorTypesData.setItems([]); + processorTypesData.setFilterArgs({ + searchString: getFilterText() + }); + processorTypesData.setFilter(filter); + + // initialize the sort + sort({ + columnId: 'type', + sortAsc: true + }, processorTypesData); + + // initialize the grid + var processorTypesGrid = new Slick.Grid('#processor-types-table', processorTypesData, processorTypesColumns, processorTypesOptions); + processorTypesGrid.setSelectionModel(new Slick.RowSelectionModel()); + processorTypesGrid.registerPlugin(new Slick.AutoTooltips()); + processorTypesGrid.setSortColumn('type', true); + processorTypesGrid.onSort.subscribe(function (e, args) { + sort({ + columnId: args.sortCol.field, + sortAsc: args.sortAsc + }, processorTypesData); + }); + processorTypesGrid.onSelectedRowsChanged.subscribe(function (e, args) { + if ($.isArray(args.rows) && args.rows.length === 1) { + var processorTypeIndex = args.rows[0]; + var processorType = processorTypesGrid.getDataItem(processorTypeIndex); + + // set the processor type description + if (common.isDefinedAndNotNull(processorType)) { + if (common.isBlank(processorType.description)) { + $('#processor-type-description') + .attr('title', '') + .html('No description specified'); + } else { + $('#processor-type-description') + .width($('#processor-description-container').innerWidth() - 1) + .html(processorType.description) + .ellipsis(); + } + + // populate the dom + $('#processor-type-name').text(processorType.label).ellipsis(); + $('#selected-processor-name').text(processorType.label); + $('#selected-processor-type').text(processorType.type); + + // refresh the buttons based on the current selection + $('#new-processor-dialog').modal('refreshButtons'); + } + } + }); + processorTypesGrid.onViewportChanged.subscribe(function (e, args) { + common.cleanUpTooltips($('#processor-types-table'), 'div.view-usage-restriction'); + }); + + // wire up the dataview to the grid + processorTypesData.onRowCountChanged.subscribe(function (e, args) { + processorTypesGrid.updateRowCount(); + processorTypesGrid.render(); + + // update the total number of displayed processors + $('#displayed-processor-types').text(args.current); + }); + processorTypesData.onRowsChanged.subscribe(function (e, args) { + processorTypesGrid.invalidateRows(args.rows); + processorTypesGrid.render(); + }); + processorTypesData.syncGridSelection(processorTypesGrid, false); + + // hold onto an instance of the grid + $('#processor-types-table').data('gridInstance', processorTypesGrid).on('mouseenter', 'div.slick-cell', function (e) { + var usageRestriction = $(this).find('div.view-usage-restriction'); + if (usageRestriction.length && !usageRestriction.data('qtip')) { + var rowId = $(this).find('span.row-id').text(); + + // get the status item + var item = processorTypesData.getItemById(rowId); + + // show the tooltip + if (common.isDefinedAndNotNull(item.usageRestriction)) { + usageRestriction.qtip($.extend({}, common.config.tooltipConfig, { + content: item.usageRestriction, + position: { + container: $('#summary'), + at: 'bottom right', + my: 'top left', + adjust: { + x: 4, + y: 4 + } + } + })); + } + } + }); + + // load the available processor types, this select is shown in the + // new processor dialog when a processor is dragged onto the screen + $.ajax({ + type: 'GET', + url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.processorTypes, + dataType: 'json' + }).done(function (response) { + var tags = []; + + // begin the update + processorTypesData.beginUpdate(); + + // go through each processor type + $.each(response.processorTypes, function (i, documentedType) { + var type = documentedType.type; + + // create the row for the processor type + processorTypesData.addItem({ + id: i, + label: common.substringAfterLast(type, '.'), + type: type, + description: common.escapeHtml(documentedType.description), + usageRestriction: common.escapeHtml(documentedType.usageRestriction), + tags: documentedType.tags.join(', ') + }); + + // count the frequency of each tag for this type + $.each(documentedType.tags, function (i, tag) { + tags.push(tag.toLowerCase()); + }); + }); + + // end the udpate + processorTypesData.endUpdate(); + + // set the total number of processors + $('#total-processor-types, #displayed-processor-types').text(response.processorTypes.length); + + // create the tag cloud + $('#processor-tag-cloud').tagcloud({ + tags: tags, + select: applyFilter, + remove: applyFilter + }); + }).fail(errorHandler.handleAjaxError); + } + }, + + /** + * Gets the modal element. + * + * @returns {*|jQuery|HTMLElement} + */ + getElement: function () { + return $('#new-processor-dialog'); + }, + + /** + * Initialize the modal. */ init: function () { - // initialize the processor type table - var processorTypesColumns = [ - { - id: 'type', - name: 'Type', - field: 'label', - formatter: nf.Common.typeFormatter, - sortable: true, - resizable: true - }, - { - id: 'tags', - name: 'Tags', - field: 'tags', - sortable: true, - resizable: true - } - ]; + this.filter.init(); - var processorTypesOptions = { - forceFitColumns: true, - enableTextSelectionOnCells: true, - enableCellNavigation: true, - enableColumnReorder: false, - autoEdit: false, - multiSelect: false, - rowHeight: 24 - }; - - // initialize the dataview - var processorTypesData = new Slick.Data.DataView({ - inlineFilters: false - }); - processorTypesData.setItems([]); - processorTypesData.setFilterArgs({ - searchString: getFilterText() - }); - processorTypesData.setFilter(filter); - - // initialize the sort - sort({ - columnId: 'type', - sortAsc: true - }, processorTypesData); - - // initialize the grid - var processorTypesGrid = new Slick.Grid('#processor-types-table', processorTypesData, processorTypesColumns, processorTypesOptions); - processorTypesGrid.setSelectionModel(new Slick.RowSelectionModel()); - processorTypesGrid.registerPlugin(new Slick.AutoTooltips()); - processorTypesGrid.setSortColumn('type', true); - processorTypesGrid.onSort.subscribe(function (e, args) { - sort({ - columnId: args.sortCol.field, - sortAsc: args.sortAsc - }, processorTypesData); - }); - processorTypesGrid.onSelectedRowsChanged.subscribe(function (e, args) { - if ($.isArray(args.rows) && args.rows.length === 1) { - var processorTypeIndex = args.rows[0]; - var processorType = processorTypesGrid.getDataItem(processorTypeIndex); - - // set the processor type description - if (nf.Common.isDefinedAndNotNull(processorType)) { - if (nf.Common.isBlank(processorType.description)) { - $('#processor-type-description') - .attr('title', '') - .html('No description specified'); - } else { - $('#processor-type-description') - .width($('#processor-description-container').innerWidth() - 1) - .html(processorType.description) - .ellipsis(); - } - - // populate the dom - $('#processor-type-name').text(processorType.label).ellipsis(); - $('#selected-processor-name').text(processorType.label); - $('#selected-processor-type').text(processorType.type); - - // refresh the buttons based on the current selection - $('#new-processor-dialog').modal('refreshButtons'); + // configure the new processor dialog + this.getElement().modal({ + scrollableContentStyle: 'scrollable', + headerText: 'Add Processor', + handler: { + resize: function () { + $('#processor-type-description') + .width($('#processor-description-container').innerWidth() - 1) + .text($('#processor-type-description').attr('title')) + .ellipsis(); } } }); - processorTypesGrid.onViewportChanged.subscribe(function (e, args) { - nf.Common.cleanUpTooltips($('#processor-types-table'), 'div.view-usage-restriction'); - }); + }, - // wire up the dataview to the grid - processorTypesData.onRowCountChanged.subscribe(function (e, args) { - processorTypesGrid.updateRowCount(); - processorTypesGrid.render(); + /** + * Updates the modal config. + * + * @param {string} name The name of the property to update. + * @param {object|array} config The config for the `name`. + */ + update: function (name, config) { + this.getElement().modal(name, config); + }, - // update the total number of displayed processors - $('#displayed-processor-types').text(args.current); - }); - processorTypesData.onRowsChanged.subscribe(function (e, args) { - processorTypesGrid.invalidateRows(args.rows); - processorTypesGrid.render(); - }); - processorTypesData.syncGridSelection(processorTypesGrid, false); + /** + * Show the modal + */ + show: function () { + this.getElement().modal('show'); + }, - // hold onto an instance of the grid - $('#processor-types-table').data('gridInstance', processorTypesGrid).on('mouseenter', 'div.slick-cell', function (e) { - var usageRestriction = $(this).find('div.view-usage-restriction'); - if (usageRestriction.length && !usageRestriction.data('qtip')) { - var rowId = $(this).find('span.row-id').text(); - - // get the status item - var item = processorTypesData.getItemById(rowId); - - // show the tooltip - if (nf.Common.isDefinedAndNotNull(item.usageRestriction)) { - usageRestriction.qtip($.extend({}, nf.Common.config.tooltipConfig, { - content: item.usageRestriction, - position: { - container: $('#summary'), - at: 'bottom right', - my: 'top left', - adjust: { - x: 4, - y: 4 - } - } - })); - } - } - }); - - // load the available processor types, this select is shown in the - // new processor dialog when a processor is dragged onto the screen - $.ajax({ - type: 'GET', - url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.processorTypes, - dataType: 'json' - }).done(function (response) { - var tags = []; - - // begin the update - processorTypesData.beginUpdate(); - - // go through each processor type - $.each(response.processorTypes, function (i, documentedType) { - var type = documentedType.type; - - // create the row for the processor type - processorTypesData.addItem({ - id: i, - label: nf.Common.substringAfterLast(type, '.'), - type: type, - description: nf.Common.escapeHtml(documentedType.description), - usageRestriction: nf.Common.escapeHtml(documentedType.usageRestriction), - tags: documentedType.tags.join(', ') - }); - - // count the frequency of each tag for this type - $.each(documentedType.tags, function (i, tag) { - tags.push(tag.toLowerCase()); - }); - }); - - // end the udpate - processorTypesData.endUpdate(); - - // set the total number of processors - $('#total-processor-types, #displayed-processor-types').text(response.processorTypes.length); - - // create the tag cloud - $('#processor-tag-cloud').tagcloud({ - tags: tags, - select: applyFilter, - remove: applyFilter - }); - }).fail(nf.ErrorHandler.handleAjaxError); + /** + * Hide the modal + */ + hide: function () { + this.getElement().modal('hide'); } - }, + }; + } + + ProcessorComponent.prototype = { + constructor: ProcessorComponent, /** - * Gets the modal element. + * Gets the component. * * @returns {*|jQuery|HTMLElement} */ getElement: function () { - return $('#new-processor-dialog'); + return $('#processor-component'); }, /** - * Initialize the modal. + * Enable the component. */ - init: function () { - this.filter.init(); - - // configure the new processor dialog - this.getElement().modal({ - scrollableContentStyle: 'scrollable', - headerText: 'Add Processor', - handler: { - resize: function () { - $('#processor-type-description') - .width($('#processor-description-container').innerWidth() - 1) - .text($('#processor-type-description').attr('title')) - .ellipsis(); - } - } - }); + enabled: function () { + this.getElement().attr('disabled', false); }, /** - * Updates the modal config. + * Disable the component. + */ + disabled: function () { + this.getElement().attr('disabled', true); + }, + + /** + * Handler function for when component is dropped on the canvas. * - * @param {string} name The name of the property to update. - * @param {object|array} config The config for the `name`. + * @argument {object} pt The point that the component was dropped */ - update: function (name, config) { - this.getElement().modal(name, config); + dropHandler: function (pt) { + this.promptForProcessorType(pt); }, /** - * Show the modal + * The drag icon for the toolbox component. + * + * @param event + * @returns {*|jQuery|HTMLElement} */ - show: function () { - this.getElement().modal('show'); + dragIcon: function (event) { + return $('
    '); }, /** - * Hide the modal + * Prompts the user to select the type of new processor to create. + * + * @argument {object} pt The point that the processor was dropped */ - hide: function () { - this.getElement().modal('hide'); - } - }; - } + promptForProcessorType: function (pt) { + var processorComponent = this; - ProcessorComponent.prototype = { - constructor: ProcessorComponent, + // handles adding the selected processor at the specified point + var addProcessor = function () { + // get the type of processor currently selected + var name = $('#selected-processor-name').text(); + var processorType = $('#selected-processor-type').text(); - /** - * Gets the component. - * - * @returns {*|jQuery|HTMLElement} - */ - getElement: function () { - return $('#processor-component'); - }, - - /** - * Enable the component. - */ - enabled: function () { - this.getElement().attr('disabled', false); - }, - - /** - * Disable the component. - */ - disabled: function () { - this.getElement().attr('disabled', true); - }, - - /** - * Handler function for when component is dropped on the canvas. - * - * @argument {object} pt The point that the component was dropped - */ - dropHandler: function (pt) { - this.promptForProcessorType(pt); - }, - - /** - * The drag icon for the toolbox component. - * - * @param event - * @returns {*|jQuery|HTMLElement} - */ - dragIcon: function (event) { - return $('
    '); - }, - - /** - * Prompts the user to select the type of new processor to create. - * - * @argument {object} pt The point that the processor was dropped - */ - promptForProcessorType: function (pt) { - var processorComponent = this; - - // handles adding the selected processor at the specified point - var addProcessor = function () { - // get the type of processor currently selected - var name = $('#selected-processor-name').text(); - var processorType = $('#selected-processor-type').text(); - - // ensure something was selected - if (name === '' || processorType === '') { - nf.Dialog.showOkDialog({ - headerText: 'Add Processor', - dialogContent: 'The type of processor to create must be selected.' - }); - } else { - // create the new processor - createProcessor(name, processorType, pt); - } - - // hide the dialog - processorComponent.modal.hide(); - }; - - // get the grid reference - var grid = $('#processor-types-table').data('gridInstance'); - - // add the processor when its double clicked in the table - var gridDoubleClick = function (e, args) { - var processorType = grid.getDataItem(args.row); - - if (isSelectable(processorType)) { - $('#selected-processor-name').text(processorType.label); - $('#selected-processor-type').text(processorType.type); - - addProcessor(); - } - }; - - // register a handler for double click events - grid.onDblClick.subscribe(gridDoubleClick); - - // update the button model - this.modal.update('setButtonModel', [{ - buttonText: 'Add', - color: { - base: '#728E9B', - hover: '#004849', - text: '#ffffff' - }, - disabled: function () { - var selected = grid.getSelectedRows(); - - if (selected.length > 0) { - // grid configured with multi-select = false - var item = grid.getDataItem(selected[0]); - return isSelectable(item) === false; + // ensure something was selected + if (name === '' || processorType === '') { + dialog.showOkDialog({ + headerText: 'Add Processor', + dialogContent: 'The type of processor to create must be selected.' + }); } else { - return grid.getData().getLength() === 0; + // create the new processor + createProcessor(name, processorType, pt); } - }, - handler: { - click: addProcessor - } - }, - { - buttonText: 'Cancel', + + // hide the dialog + processorComponent.modal.hide(); + }; + + // get the grid reference + var grid = $('#processor-types-table').data('gridInstance'); + + // add the processor when its double clicked in the table + var gridDoubleClick = function (e, args) { + var processorType = grid.getDataItem(args.row); + + if (isSelectable(processorType)) { + $('#selected-processor-name').text(processorType.label); + $('#selected-processor-type').text(processorType.type); + + addProcessor(); + } + }; + + // register a handler for double click events + grid.onDblClick.subscribe(gridDoubleClick); + + // update the button model + this.modal.update('setButtonModel', [{ + buttonText: 'Add', color: { - base: '#E3E8EB', - hover: '#C7D2D7', - text: '#004849' + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, + disabled: function () { + var selected = grid.getSelectedRows(); + + if (selected.length > 0) { + // grid configured with multi-select = false + var item = grid.getDataItem(selected[0]); + return isSelectable(item) === false; + } else { + return grid.getData().getLength() === 0; + } }, handler: { - click: function () { - $('#new-processor-dialog').modal('hide'); - } + click: addProcessor } - }]); - - // set a new handler for closing the the dialog - this.modal.update('setCloseHandler', function () { - // remove the handler - grid.onDblClick.unsubscribe(gridDoubleClick); - - // clear the current filters - resetProcessorDialog(); - }); - - // show the dialog - this.modal.show(); - - // setup the filter - $('#processor-type-filter').focus().off('keyup').on('keyup', function (e) { - var code = e.keyCode ? e.keyCode : e.which; - if (code === $.ui.keyCode.ENTER) { - var selected = grid.getSelectedRows(); - - if (selected.length > 0) { - // grid configured with multi-select = false - var item = grid.getDataItem(selected[0]); - if (isSelectable(item)) { - addProcessor(); + }, + { + buttonText: 'Cancel', + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, + handler: { + click: function () { + $('#new-processor-dialog').modal('hide'); + } } - } - } else { - applyFilter(); - } - }); + }]); - // adjust the grid canvas now that its been rendered - grid.resizeCanvas(); - grid.setSelectedRows([0]); + // set a new handler for closing the the dialog + this.modal.update('setCloseHandler', function () { + // remove the handler + grid.onDblClick.unsubscribe(gridDoubleClick); + + // clear the current filters + resetProcessorDialog(); + }); + + // show the dialog + this.modal.show(); + + // setup the filter + $('#processor-type-filter').focus().off('keyup').on('keyup', function (e) { + var code = e.keyCode ? e.keyCode : e.which; + if (code === $.ui.keyCode.ENTER) { + var selected = grid.getSelectedRows(); + + if (selected.length > 0) { + // grid configured with multi-select = false + var item = grid.getDataItem(selected[0]); + if (isSelectable(item)) { + addProcessor(); + } + } + } else { + applyFilter(); + } + }); + + // adjust the grid canvas now that its been rendered + grid.resizeCanvas(); + grid.setSelectedRows([0]); + } } - } - var processorComponent = new ProcessorComponent(); - return processorComponent; -}; \ No newline at end of file + var processorComponent = new ProcessorComponent(); + return processorComponent; + }; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-remote-process-group-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-remote-process-group-component.js index 8985f16eb1..d911ece84e 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-remote-process-group-component.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-remote-process-group-component.js @@ -15,265 +15,302 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ng.RemoteProcessGroupComponent = function (serviceProvider) { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'nf.Client', + 'nf.Birdseye', + 'nf.Graph', + 'nf.CanvasUtils', + 'nf.ErrorHandler', + 'nf.Dialog', + 'nf.Common'], + function ($, client, birdseye, graph, canvasUtils, errorHandler, dialog, common) { + return (nf.ng.RemoteProcessGroupComponent = factory($, client, birdseye, graph, canvasUtils, errorHandler, dialog, common)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.RemoteProcessGroupComponent = + factory(require('jquery'), + require('nf.Client'), + require('nf.Birdseye'), + require('nf.Graph'), + require('nf.CanvasUtils'), + require('nf.ErrorHandler'), + require('nf.Dialog'), + require('nf.Common'))); + } else { + nf.ng.RemoteProcessGroupComponent = factory(root.$, + root.nf.Client, + root.nf.Birdseye, + root.nf.Graph, + root.nf.CanvasUtils, + root.nf.ErrorHandler, + root.nf.Dialog, + root.nf.Common); + } +}(this, function ($, client, birdseye, graph, canvasUtils, errorHandler, dialog, common) { 'use strict'; - /** - * Create the controller and add to the graph. - * - * @argument {object} pt The point that the remote group was dropped. - */ - var createRemoteProcessGroup = function (pt) { - - var remoteProcessGroupEntity = { - 'revision': nf.Client.getRevision({ - 'revision': { - 'version': 0 - } - }), - 'component': { - 'targetUris': $('#new-remote-process-group-uris').val(), - 'position': { - 'x': pt.x, - 'y': pt.y - }, - 'communicationsTimeout': $('#new-remote-process-group-timeout').val(), - 'yieldDuration': $('#new-remote-process-group-yield-duration').val(), - 'transportProtocol': $('#new-remote-process-group-transport-protocol-combo').combo('getSelectedOption').value, - 'proxyHost': $('#new-remote-process-group-proxy-host').val(), - 'proxyPort': $('#new-remote-process-group-proxy-port').val(), - 'proxyUser': $('#new-remote-process-group-proxy-user').val(), - 'proxyPassword': $('#new-remote-process-group-proxy-password').val() - } - }; - - // create a new processor of the defined type - $.ajax({ - type: 'POST', - url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nf.Canvas.getGroupId()) + '/remote-process-groups', - data: JSON.stringify(remoteProcessGroupEntity), - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - // add the processor to the graph - nf.Graph.add({ - 'remoteProcessGroups': [response] - }, { - 'selectAll': true - }); - - // hide the dialog - $('#new-remote-process-group-dialog').modal('hide'); - - // update component visibility - nf.Canvas.View.updateVisibility(); - - // update the birdseye - nf.Birdseye.refresh(); - }).fail(function (xhr, status, error) { - if (xhr.status === 400) { - var errors = xhr.responseText.split('\n'); - - var content; - if (errors.length === 1) { - content = $('').text(errors[0]); - } else { - content = nf.Common.formatUnorderedList(errors); - } - - nf.Dialog.showOkDialog({ - dialogContent: content, - headerText: 'Configuration Error' - }); - } else { - nf.ErrorHandler.handleAjaxError(xhr, status, error); - } - }); - }; - - function RemoteProcessGroupComponent() { - - this.icon = 'icon icon-group-remote'; - - this.hoverIcon = 'icon icon-group-remote-add'; + return function (serviceProvider) { + 'use strict'; /** - * The remote group component's modal. + * Create the controller and add to the graph. + * + * @argument {object} pt The point that the remote group was dropped. */ - this.modal = { + var createRemoteProcessGroup = function (pt) { - /** - * Gets the modal element. - * - * @returns {*|jQuery|HTMLElement} - */ - getElement: function () { - return $('#new-remote-process-group-dialog'); - }, - - /** - * Initialize the modal. - */ - init: function () { - var defaultTimeout = "30 sec"; - var defaultYieldDuration = "10 sec"; - // configure the new remote process group dialog - this.getElement().modal({ - scrollableContentStyle: 'scrollable', - headerText: 'Add Remote Process Group', - handler: { - close: function () { - $('#new-remote-process-group-uris').val(''); - $('#new-remote-process-group-timeout').val(defaultTimeout); - $('#new-remote-process-group-yield-duration').val(defaultYieldDuration); - $('#new-remote-process-group-transport-protocol-combo').combo('setSelectedOption', { - value: 'RAW' - }); - $('#new-remote-process-group-proxy-host').val(''); - $('#new-remote-process-group-proxy-port').val(''); - $('#new-remote-process-group-proxy-user').val(''); - $('#new-remote-process-group-proxy-password').val(''); - } + var remoteProcessGroupEntity = { + 'revision': client.getRevision({ + 'revision': { + 'version': 0 } + }), + 'component': { + 'targetUris': $('#new-remote-process-group-uris').val(), + 'position': { + 'x': pt.x, + 'y': pt.y + }, + 'communicationsTimeout': $('#new-remote-process-group-timeout').val(), + 'yieldDuration': $('#new-remote-process-group-yield-duration').val(), + 'transportProtocol': $('#new-remote-process-group-transport-protocol-combo').combo('getSelectedOption').value, + 'proxyHost': $('#new-remote-process-group-proxy-host').val(), + 'proxyPort': $('#new-remote-process-group-proxy-port').val(), + 'proxyUser': $('#new-remote-process-group-proxy-user').val(), + 'proxyPassword': $('#new-remote-process-group-proxy-password').val() + } + }; + + // create a new processor of the defined type + $.ajax({ + type: 'POST', + url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(canvasUtils.getGroupId()) + '/remote-process-groups', + data: JSON.stringify(remoteProcessGroupEntity), + dataType: 'json', + contentType: 'application/json' + }).done(function (response) { + // add the processor to the graph + graph.add({ + 'remoteProcessGroups': [response] + }, { + 'selectAll': true }); - // set default values - $('#new-remote-process-group-timeout').val(defaultTimeout); - $('#new-remote-process-group-yield-duration').val(defaultYieldDuration); - // initialize the transport protocol combo - $('#new-remote-process-group-transport-protocol-combo').combo({ - options: [{ + + // hide the dialog + $('#new-remote-process-group-dialog').modal('hide'); + + // update component visibility + graph.updateVisibility(); + + // update the birdseye + birdseye.refresh(); + }).fail(function (xhr, status, error) { + if (xhr.status === 400) { + var errors = xhr.responseText.split('\n'); + + var content; + if (errors.length === 1) { + content = $('').text(errors[0]); + } else { + content = common.formatUnorderedList(errors); + } + + dialog.showOkDialog({ + dialogContent: content, + headerText: 'Configuration Error' + }); + } else { + errorHandler.handleAjaxError(xhr, status, error); + } + }); + }; + + function RemoteProcessGroupComponent() { + + this.icon = 'icon icon-group-remote'; + + this.hoverIcon = 'icon icon-group-remote-add'; + + /** + * The remote group component's modal. + */ + this.modal = { + + /** + * Gets the modal element. + * + * @returns {*|jQuery|HTMLElement} + */ + getElement: function () { + return $('#new-remote-process-group-dialog'); + }, + + /** + * Initialize the modal. + */ + init: function () { + var defaultTimeout = "30 sec"; + var defaultYieldDuration = "10 sec"; + // configure the new remote process group dialog + this.getElement().modal({ + scrollableContentStyle: 'scrollable', + headerText: 'Add Remote Process Group', + handler: { + close: function () { + $('#new-remote-process-group-uris').val(''); + $('#new-remote-process-group-timeout').val(defaultTimeout); + $('#new-remote-process-group-yield-duration').val(defaultYieldDuration); + $('#new-remote-process-group-transport-protocol-combo').combo('setSelectedOption', { + value: 'RAW' + }); + $('#new-remote-process-group-proxy-host').val(''); + $('#new-remote-process-group-proxy-port').val(''); + $('#new-remote-process-group-proxy-user').val(''); + $('#new-remote-process-group-proxy-password').val(''); + } + } + }); + // set default values + $('#new-remote-process-group-timeout').val(defaultTimeout); + $('#new-remote-process-group-yield-duration').val(defaultYieldDuration); + // initialize the transport protocol combo + $('#new-remote-process-group-transport-protocol-combo').combo({ + options: [{ text: 'RAW', value: 'RAW' }, { text: 'HTTP', value: 'HTTP' }] - }); - }, - - /** - * Updates the modal config. - * - * @param {string} name The name of the property to update. - * @param {object|array} config The config for the `name`. - */ - update: function (name, config) { - this.getElement().modal(name, config); - }, - - /** - * Show the modal. - */ - show: function () { - this.getElement().modal('show'); - }, - - /** - * Hide the modal. - */ - hide: function () { - this.getElement().modal('hide'); - } - }; - } - - RemoteProcessGroupComponent.prototype = { - constructor: RemoteProcessGroupComponent, - - /** - * Gets the component. - * - * @returns {*|jQuery|HTMLElement} - */ - getElement: function () { - return $('#group-remote-component'); - }, - - /** - * Enable the component. - */ - enabled: function () { - this.getElement().attr('disabled', false); - }, - - /** - * Disable the component. - */ - disabled: function () { - this.getElement().attr('disabled', true); - }, - - /** - * Handler function for when component is dropped on the canvas. - * - * @argument {object} pt The point that the component was dropped. - */ - dropHandler: function (pt) { - this.promptForRemoteProcessGroupUri(pt); - }, - - /** - * The drag icon for the toolbox component. - * - * @param event - * @returns {*|jQuery|HTMLElement} - */ - dragIcon: function (event) { - return $('
    '); - }, - - /** - * Prompts the user to enter the URI for the remote process group. - * - * @argument {object} pt The point that the remote group was dropped. - */ - promptForRemoteProcessGroupUri: function (pt) { - var remoteProcessGroupComponent = this; - var addRemoteProcessGroup = function () { - // create the remote process group - createRemoteProcessGroup(pt); - }; - - this.modal.update('setButtonModel', [{ - buttonText: 'Add', - color: { - base: '#728E9B', - hover: '#004849', - text: '#ffffff' + }); }, - handler: { - click: addRemoteProcessGroup + + /** + * Updates the modal config. + * + * @param {string} name The name of the property to update. + * @param {object|array} config The config for the `name`. + */ + update: function (name, config) { + this.getElement().modal(name, config); + }, + + /** + * Show the modal. + */ + show: function () { + this.getElement().modal('show'); + }, + + /** + * Hide the modal. + */ + hide: function () { + this.getElement().modal('hide'); } + }; + } + + RemoteProcessGroupComponent.prototype = { + constructor: RemoteProcessGroupComponent, + + /** + * Gets the component. + * + * @returns {*|jQuery|HTMLElement} + */ + getElement: function () { + return $('#group-remote-component'); }, - { - buttonText: 'Cancel', + + /** + * Enable the component. + */ + enabled: function () { + this.getElement().attr('disabled', false); + }, + + /** + * Disable the component. + */ + disabled: function () { + this.getElement().attr('disabled', true); + }, + + /** + * Handler function for when component is dropped on the canvas. + * + * @argument {object} pt The point that the component was dropped. + */ + dropHandler: function (pt) { + this.promptForRemoteProcessGroupUri(pt); + }, + + /** + * The drag icon for the toolbox component. + * + * @param event + * @returns {*|jQuery|HTMLElement} + */ + dragIcon: function (event) { + return $('
    '); + }, + + /** + * Prompts the user to enter the URI for the remote process group. + * + * @argument {object} pt The point that the remote group was dropped. + */ + promptForRemoteProcessGroupUri: function (pt) { + var remoteProcessGroupComponent = this; + var addRemoteProcessGroup = function () { + // create the remote process group + createRemoteProcessGroup(pt); + }; + + this.modal.update('setButtonModel', [{ + buttonText: 'Add', color: { - base: '#E3E8EB', - hover: '#C7D2D7', - text: '#004849' + base: '#728E9B', + hover: '#004849', + text: '#ffffff' }, handler: { - click: function () { - remoteProcessGroupComponent.modal.hide(); - } + click: addRemoteProcessGroup } - }]); + }, + { + buttonText: 'Cancel', + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, + handler: { + click: function () { + remoteProcessGroupComponent.modal.hide(); + } + } + }]); - // show the dialog - this.modal.show(); + // show the dialog + this.modal.show(); - // set the focus and key handlers - $('#new-remote-process-group-uris').focus().off('keyup').on('keyup', function (e) { - var code = e.keyCode ? e.keyCode : e.which; - if (code === $.ui.keyCode.ENTER) { - addRemoteProcessGroup(); - } - }); + // set the focus and key handlers + $('#new-remote-process-group-uris').focus().off('keyup').on('keyup', function (e) { + var code = e.keyCode ? e.keyCode : e.which; + if (code === $.ui.keyCode.ENTER) { + addRemoteProcessGroup(); + } + }); + } } - } - var remoteProcessGroupComponent = new RemoteProcessGroupComponent(); - return remoteProcessGroupComponent; -}; \ No newline at end of file + var remoteProcessGroupComponent = new RemoteProcessGroupComponent(); + return remoteProcessGroupComponent; + }; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-template-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-template-component.js index a4945f6de7..7dc3b8b443 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-template-component.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-template-component.js @@ -15,236 +15,273 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ng.TemplateComponent = function (serviceProvider) { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'nf.Client', + 'nf.Birdseye', + 'nf.Graph', + 'nf.CanvasUtils', + 'nf.ErrorHandler', + 'nf.Dialog', + 'nf.Common'], + function ($, client, birdseye, graph, canvasUtils, errorHandler, dialog, common) { + return (nf.ng.TemplateComponent = factory($, client, birdseye, graph, canvasUtils, errorHandler, dialog, common)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.TemplateComponent = + factory(require('jquery'), + require('nf.Client'), + require('nf.Birdseye'), + require('nf.Graph'), + require('nf.CanvasUtils'), + require('nf.ErrorHandler'), + require('nf.Dialog'), + require('nf.Common'))); + } else { + nf.ng.TemplateComponent = factory(root.$, + root.nf.Client, + root.nf.Birdseye, + root.nf.Graph, + root.nf.CanvasUtils, + root.nf.ErrorHandler, + root.nf.Dialog, + root.nf.Common); + } +}(this, function ($, client, birdseye, graph, canvasUtils, errorHandler, dialog, common) { 'use strict'; - /** - * Instantiates the specified template. - * - * @argument {string} templateId The template id. - * @argument {object} pt The point that the template was dropped. - */ - var createTemplate = function (templateId, pt) { - var instantiateTemplateInstance = { - 'templateId': templateId, - 'originX': pt.x, - 'originY': pt.y - }; - - // create a new instance of the new template - $.ajax({ - type: 'POST', - url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nf.Canvas.getGroupId()) + '/template-instance', - data: JSON.stringify(instantiateTemplateInstance), - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - // populate the graph accordingly - nf.Graph.add(response.flow, { - 'selectAll': true - }); - - // update component visibility - nf.Canvas.View.updateVisibility(); - - // update the birdseye - nf.Birdseye.refresh(); - }).fail(nf.ErrorHandler.handleAjaxError); - }; - - function TemplateComponent() { - - this.icon = 'icon icon-template'; - - this.hoverIcon = 'icon icon-template-add'; + return function (serviceProvider) { + 'use strict'; /** - * The template component's modal. + * Instantiates the specified template. + * + * @argument {string} templateId The template id. + * @argument {object} pt The point that the template was dropped. */ - this.modal = { + var createTemplate = function (templateId, pt) { + var instantiateTemplateInstance = { + 'templateId': templateId, + 'originX': pt.x, + 'originY': pt.y + }; + + // create a new instance of the new template + $.ajax({ + type: 'POST', + url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(canvasUtils.getGroupId()) + '/template-instance', + data: JSON.stringify(instantiateTemplateInstance), + dataType: 'json', + contentType: 'application/json' + }).done(function (response) { + // populate the graph accordingly + graph.add(response.flow, { + 'selectAll': true + }); + + // update component visibility + graph.updateVisibility(); + + // update the birdseye + birdseye.refresh(); + }).fail(errorHandler.handleAjaxError); + }; + + function TemplateComponent() { + + this.icon = 'icon icon-template'; + + this.hoverIcon = 'icon icon-template-add'; /** - * Gets the modal element. + * The template component's modal. + */ + this.modal = { + + /** + * Gets the modal element. + * + * @returns {*|jQuery|HTMLElement} + */ + getElement: function () { + return $('#instantiate-template-dialog'); + }, + + /** + * Initialize the modal. + */ + init: function () { + // configure the instantiate template dialog + this.getElement().modal({ + scrollableContentStyle: 'scrollable', + headerText: 'Add Template' + }); + }, + + /** + * Updates the modal config. + * + * @param {string} name The name of the property to update. + * @param {object|array} config The config for the `name`. + */ + update: function (name, config) { + this.getElement().modal(name, config); + }, + + /** + * Show the modal. + */ + show: function () { + this.getElement().modal('show'); + }, + + /** + * Hide the modal. + */ + hide: function () { + this.getElement().modal('hide'); + } + }; + } + + TemplateComponent.prototype = { + constructor: TemplateComponent, + + /** + * Gets the component. * * @returns {*|jQuery|HTMLElement} */ getElement: function () { - return $('#instantiate-template-dialog'); + return $('#template-component'); }, /** - * Initialize the modal. + * Enable the component. */ - init: function () { - // configure the instantiate template dialog - this.getElement().modal({ - scrollableContentStyle: 'scrollable', - headerText: 'Add Template' - }); + enabled: function () { + this.getElement().attr('disabled', false); }, /** - * Updates the modal config. + * Disable the component. + */ + disabled: function () { + this.getElement().attr('disabled', true); + }, + + /** + * Handler function for when component is dropped on the canvas. * - * @param {string} name The name of the property to update. - * @param {object|array} config The config for the `name`. + * @argument {object} pt The point that the component was dropped. */ - update: function (name, config) { - this.getElement().modal(name, config); + dropHandler: function (pt) { + this.promptForTemplate(pt); }, /** - * Show the modal. + * The drag icon for the toolbox component. + * + * @param event + * @returns {*|jQuery|HTMLElement} */ - show: function () { - this.getElement().modal('show'); + dragIcon: function (event) { + return $('
    '); }, /** - * Hide the modal. + * Prompts the user to select a template. + * + * @argument {object} pt The point that the template was dropped. */ - hide: function () { - this.getElement().modal('hide'); - } - }; - } + promptForTemplate: function (pt) { + var templateComponent = this; + $.ajax({ + type: 'GET', + url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/flow/templates', + dataType: 'json' + }).done(function (response) { + var templates = response.templates; + if (common.isDefinedAndNotNull(templates) && templates.length > 0) { + // sort the templates + templates = templates.sort(function (one, two) { + var oneDate = common.parseDateTime(one.template.timestamp); + var twoDate = common.parseDateTime(two.template.timestamp); - TemplateComponent.prototype = { - constructor: TemplateComponent, + // newest templates first + return twoDate.getTime() - oneDate.getTime(); + }); - /** - * Gets the component. - * - * @returns {*|jQuery|HTMLElement} - */ - getElement: function () { - return $('#template-component'); - }, - - /** - * Enable the component. - */ - enabled: function () { - this.getElement().attr('disabled', false); - }, - - /** - * Disable the component. - */ - disabled: function () { - this.getElement().attr('disabled', true); - }, - - /** - * Handler function for when component is dropped on the canvas. - * - * @argument {object} pt The point that the component was dropped. - */ - dropHandler: function (pt) { - this.promptForTemplate(pt); - }, - - /** - * The drag icon for the toolbox component. - * - * @param event - * @returns {*|jQuery|HTMLElement} - */ - dragIcon: function (event) { - return $('
    '); - }, - - /** - * Prompts the user to select a template. - * - * @argument {object} pt The point that the template was dropped. - */ - promptForTemplate: function (pt) { - var templateComponent = this; - $.ajax({ - type: 'GET', - url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/flow/templates', - dataType: 'json' - }).done(function (response) { - var templates = response.templates; - if (nf.Common.isDefinedAndNotNull(templates) && templates.length > 0) { - // sort the templates - templates = templates.sort(function (one, two) { - var oneDate = nf.Common.parseDateTime(one.template.timestamp); - var twoDate = nf.Common.parseDateTime(two.template.timestamp); - - // newest templates first - return twoDate.getTime() - oneDate.getTime(); - }); - - var options = []; - $.each(templates, function (_, templateEntity) { - if (templateEntity.permissions.canRead === true) { - options.push({ - text: templateEntity.template.name, - value: templateEntity.id, - description: nf.Common.escapeHtml(templateEntity.template.description) - }); - } - }); - - // configure the templates combo - $('#available-templates').combo({ - maxHeight: 300, - options: options - }); - - // update the button model - templateComponent.modal.update('setButtonModel', [{ - buttonText: 'Add', - color: { - base: '#728E9B', - hover: '#004849', - text: '#ffffff' - }, - handler: { - click: function () { - // get the type of processor currently selected - var selectedOption = $('#available-templates').combo('getSelectedOption'); - var templateId = selectedOption.value; - - // hide the dialog - templateComponent.modal.hide(); - - // instantiate the specified template - createTemplate(templateId, pt); + var options = []; + $.each(templates, function (_, templateEntity) { + if (templateEntity.permissions.canRead === true) { + options.push({ + text: templateEntity.template.name, + value: templateEntity.id, + description: common.escapeHtml(templateEntity.template.description) + }); } - } - }, - { - buttonText: 'Cancel', + }); + + // configure the templates combo + $('#available-templates').combo({ + maxHeight: 300, + options: options + }); + + // update the button model + templateComponent.modal.update('setButtonModel', [{ + buttonText: 'Add', color: { - base: '#E3E8EB', - hover: '#C7D2D7', - text: '#004849' + base: '#728E9B', + hover: '#004849', + text: '#ffffff' }, handler: { click: function () { + // get the type of processor currently selected + var selectedOption = $('#available-templates').combo('getSelectedOption'); + var templateId = selectedOption.value; + + // hide the dialog templateComponent.modal.hide(); + + // instantiate the specified template + createTemplate(templateId, pt); } } - }]); + }, + { + buttonText: 'Cancel', + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, + handler: { + click: function () { + templateComponent.modal.hide(); + } + } + }]); - // show the dialog - templateComponent.modal.show(); - } else { - nf.Dialog.showOkDialog({ - headerText: 'Instantiate Template', - dialogContent: 'No templates have been loaded into this NiFi.' - }); - } + // show the dialog + templateComponent.modal.show(); + } else { + dialog.showOkDialog({ + headerText: 'Instantiate Template', + dialogContent: 'No templates have been loaded into this NiFi.' + }); + } - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); + } } - } - var templateComponent = new TemplateComponent(); - return templateComponent; -}; \ No newline at end of file + var templateComponent = new TemplateComponent(); + return templateComponent; + }; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js index 52786b668e..e8d677b72f 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js @@ -15,9 +15,121 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.Actions = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'd3', + 'nf.CanvasUtils', + 'nf.Common', + 'nf.Dialog', + 'nf.Client', + 'nf.ErrorHandler', + 'nf.Clipboard', + 'nf.Snippet', + 'nf.GoTo', + 'nf.ng.Bridge', + 'nf.Shell', + 'nf.ComponentState', + 'nf.Draggable', + 'nf.Birdseye', + 'nf.Connection', + 'nf.Graph', + 'nf.ProcessGroupConfiguration', + 'nf.ProcessorConfiguration', + 'nf.ProcessorDetails', + 'nf.LabelConfiguration', + 'nf.RemoteProcessGroupConfiguration', + 'nf.RemoteProcessGroupDetails', + 'nf.PortConfiguration', + 'nf.PortDetails', + 'nf.ConnectionConfiguration', + 'nf.ConnectionDetails', + 'nf.PolicyManagement', + 'nf.RemoteProcessGroup', + 'nf.Label', + 'nf.Processor', + 'nf.RemoteProcessGroupPorts', + 'nf.QueueListing', + 'nf.StatusHistory'], + function ($, d3, canvasUtils, common, dialog, client, errorHandler, clipboard, nfSnippet, nfGoto, angularBridge, shell, componentState, draggable, birdseye, nfConnection, graph, processGroupConfiguration, processorConfiguration, processorDetails, labelConfiguration, remoteProcessGroupConfiguration, remoteProcessGroupDetails, portConfiguration, portDetails, connectionConfiguration, connectionDetails, policyManagement, remoteProcessGroup, label, processor, remoteProcessGroupPorts, queueListing, statusHistory) { + return (nf.Actions = factory($, d3, canvasUtils, common, dialog, client, errorHandler, clipboard, nfSnippet, nfGoto, angularBridge, shell, componentState, draggable, birdseye, nfConnection, graph, processGroupConfiguration, processorConfiguration, processorDetails, labelConfiguration, remoteProcessGroupConfiguration, remoteProcessGroupDetails, portConfiguration, portDetails, connectionConfiguration, connectionDetails, policyManagement, remoteProcessGroup, label, processor, remoteProcessGroupPorts, queueListing, statusHistory)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.Actions = + factory(require('jquery'), + require('d3'), + require('nf.CanvasUtils'), + require('nf.Common'), + require('nf.Dialog'), + require('nf.Client'), + require('nf.ErrorHandler'), + require('nf.Clipboard'), + require('nf.Snippet'), + require('nf.GoTo'), + require('nf.ng.Bridge'), + require('nf.Shell'), + require('nf.ComponentState'), + require('nf.Draggable'), + require('nf.Birdseye'), + require('nf.Connection'), + require('nf.Graph'), + require('nf.ProcessGroupConfiguration'), + require('nf.ProcessorConfiguration'), + require('nf.ProcessorDetails'), + require('nf.LabelConfiguration'), + require('nf.RemoteProcessGroupConfiguration'), + require('nf.RemoteProcessGroupDetails'), + require('nf.PortConfiguration'), + require('nf.PortDetails'), + require('nf.ConnectionConfiguration'), + require('nf.ConnectionDetails'), + require('nf.PolicyManagement'), + require('nf.RemoteProcessGroup'), + require('nf.Label'), + require('nf.Processor'), + require('nf.RemoteProcessGroupPorts'), + require('nf.QueueListing'), + require('nf.StatusHistory'))); + } else { + nf.Actions = factory(root.$, + root.d3, + root.nf.CanvasUtils, + root.nf.Common, + root.nf.Dialog, + root.nf.Client, + root.nf.ErrorHandler, + root.nf.Clipboard, + root.nf.Snippet, + root.nf.GoTo, + root.nf.ng.Bridge, + root.nf.Shell, + root.nf.ComponentState, + root.nf.Draggable, + root.nf.Birdseye, + root.nf.Connection, + root.nf.Graph, + root.nf.ProcessGroupConfiguration, + root.nf.ProcessorConfiguration, + root.nf.ProcessorDetails, + root.nf.LabelConfiguration, + root.nf.RemoteProcessGroupConfiguration, + root.nf.RemoteProcessGroupDetails, + root.nf.PortConfiguration, + root.nf.PortDetails, + root.nf.ConnectionConfiguration, + root.nf.ConnectionDetails, + root.nf.PolicyManagement, + root.nf.RemoteProcessGroup, + root.nf.Label, + root.nf.Processor, + root.nf.RemoteProcessGroupPorts, + root.nf.QueueListing, + root.nf.StatusHistory); + } +}(this, function ($, d3, canvasUtils, common, dialog, client, errorHandler, clipboard, nfSnippet, nfGoto, angularBridge, shell, componentState, draggable, birdseye, nfConnection, graph, processGroupConfiguration, processorConfiguration, processorDetails, labelConfiguration, remoteProcessGroupConfiguration, remoteProcessGroupDetails, portConfiguration, portDetails, connectionConfiguration, connectionDetails, policyManagement, remoteProcessGroup, label, processor, remoteProcessGroupPorts, queueListing, statusHistory) { + 'use strict'; var config = { urls: { @@ -57,9 +169,9 @@ nf.Actions = (function () { dataType: 'json', contentType: 'application/json' }).fail(function (xhr, status, error) { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Update Resource', - dialogContent: nf.Common.escapeHtml(xhr.responseText) + dialogContent: common.escapeHtml(xhr.responseText) }); }); }; @@ -71,18 +183,18 @@ nf.Actions = (function () { url: config.urls.api + '/flow/process-groups/' + encodeURIComponent(response.id), dataType: 'json' }).done(function (response) { - nf.Graph.set(response.processGroupFlow.flow); + graph.set(response.processGroupFlow.flow); }); }; // determine if the source of this connection is part of the selection var isSourceSelected = function (connection, selection) { return selection.filter(function (d) { - return nf.CanvasUtils.getConnectionSourceComponentId(connection) === d.id; + return canvasUtils.getConnectionSourceComponentId(connection) === d.id; }).size() > 0; }; - return { + var nfActions = { /** * Initializes the actions. */ @@ -96,9 +208,9 @@ nf.Actions = (function () { * @param {selection} selection The the currently selected component */ enterGroup: function (selection) { - if (selection.size() === 1 && nf.CanvasUtils.isProcessGroup(selection)) { + if (selection.size() === 1 && canvasUtils.isProcessGroup(selection)) { var selectionData = selection.datum(); - nf.CanvasUtils.enterGroup(selectionData.id); + canvasUtils.getComponentByType('ProcessGroup').enterGroup(selectionData.id); } }, @@ -106,7 +218,7 @@ nf.Actions = (function () { * Exits the current process group but entering the parent group. */ leaveGroup: function () { - nf.CanvasUtils.enterGroup(nf.Canvas.getParentGroupId()); + canvasUtils.getComponentByType('ProcessGroup').enterGroup(canvasUtils.getParentGroupId()); }, /** @@ -115,7 +227,7 @@ nf.Actions = (function () { * @param {selection} selection */ refreshRemoteFlow: function (selection) { - if (selection.size() === 1 && nf.CanvasUtils.isRemoteProcessGroup(selection)) { + if (selection.size() === 1 && canvasUtils.isRemoteProcessGroup(selection)) { var d = selection.datum(); var refreshTimestamp = d.component.flowRefreshed; @@ -144,13 +256,13 @@ nf.Actions = (function () { if (refreshTimestamp === remoteProcessGroup.flowRefreshed) { schedule(nextDelay); } else { - nf.RemoteProcessGroup.set(response); + remoteProcessGroup.set(response); // reload the group's connections - var connections = nf.Connection.getComponentConnections(remoteProcessGroup.id); + var connections = nfConnection.getComponentConnections(remoteProcessGroup.id); $.each(connections, function (_, connection) { if (connection.permissions.canRead) { - nf.Connection.reload(connection.id); + nfConnection.reload(connection.id); } }); } @@ -179,14 +291,14 @@ nf.Actions = (function () { * @param {selection} selection The selection */ openUri: function (selection) { - if (selection.size() === 1 && nf.CanvasUtils.isRemoteProcessGroup(selection)) { + if (selection.size() === 1 && canvasUtils.isRemoteProcessGroup(selection)) { var selectionData = selection.datum(); var uri = selectionData.component.targetUri; - if (!nf.Common.isBlank(uri)) { + if (!common.isBlank(uri)) { window.open(encodeURI(uri)); } else { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Remote Process Group', dialogContent: 'No target URI defined.' }); @@ -200,20 +312,20 @@ nf.Actions = (function () { * @param {selection} selection The selection */ showSource: function (selection) { - if (selection.size() === 1 && nf.CanvasUtils.isConnection(selection)) { + if (selection.size() === 1 && canvasUtils.isConnection(selection)) { var selectionData = selection.datum(); // the source is in the current group - if (selectionData.sourceGroupId === nf.Canvas.getGroupId()) { + if (selectionData.sourceGroupId === canvasUtils.getGroupId()) { var source = d3.select('#id-' + selectionData.sourceId); - nf.Actions.show(source); + nfActions.show(source); } else if (selectionData.sourceType === 'REMOTE_OUTPUT_PORT') { // if the source is remote var remoteSource = d3.select('#id-' + selectionData.sourceGroupId); - nf.Actions.show(remoteSource); + nfActions.show(remoteSource); } else { // if the source is local but in a sub group - nf.CanvasUtils.showComponent(selectionData.sourceGroupId, selectionData.sourceId); + canvasUtils.showComponent(selectionData.sourceGroupId, selectionData.sourceId); } } }, @@ -224,20 +336,20 @@ nf.Actions = (function () { * @param {selection} selection The selection */ showDestination: function (selection) { - if (selection.size() === 1 && nf.CanvasUtils.isConnection(selection)) { + if (selection.size() === 1 && canvasUtils.isConnection(selection)) { var selectionData = selection.datum(); // the destination is in the current group or its remote - if (selectionData.destinationGroupId === nf.Canvas.getGroupId()) { + if (selectionData.destinationGroupId === canvasUtils.getGroupId()) { var destination = d3.select('#id-' + selectionData.destinationId); - nf.Actions.show(destination); + nfActions.show(destination); } else if (selectionData.destinationType === 'REMOTE_INPUT_PORT') { // if the destination is remote var remoteDestination = d3.select('#id-' + selectionData.destinationGroupId); - nf.Actions.show(remoteDestination); + nfActions.show(remoteDestination); } else { // if the destination is local but in a sub group - nf.CanvasUtils.showComponent(selectionData.destinationGroupId, selectionData.destinationId); + canvasUtils.showComponent(selectionData.destinationGroupId, selectionData.destinationId); } } }, @@ -248,19 +360,19 @@ nf.Actions = (function () { * @param {selection} selection The selection */ showDownstream: function (selection) { - if (selection.size() === 1 && !nf.CanvasUtils.isConnection(selection)) { + if (selection.size() === 1 && !canvasUtils.isConnection(selection)) { // open the downstream dialog according to the selection - if (nf.CanvasUtils.isProcessor(selection)) { - nf.GoTo.showDownstreamFromProcessor(selection); - } else if (nf.CanvasUtils.isFunnel(selection)) { - nf.GoTo.showDownstreamFromFunnel(selection); - } else if (nf.CanvasUtils.isInputPort(selection)) { - nf.GoTo.showDownstreamFromInputPort(selection); - } else if (nf.CanvasUtils.isOutputPort(selection)) { - nf.GoTo.showDownstreamFromOutputPort(selection); - } else if (nf.CanvasUtils.isProcessGroup(selection) || nf.CanvasUtils.isRemoteProcessGroup(selection)) { - nf.GoTo.showDownstreamFromGroup(selection); + if (canvasUtils.isProcessor(selection)) { + nfGoto.showDownstreamFromProcessor(selection); + } else if (canvasUtils.isFunnel(selection)) { + nfGoto.showDownstreamFromFunnel(selection); + } else if (canvasUtils.isInputPort(selection)) { + nfGoto.showDownstreamFromInputPort(selection); + } else if (canvasUtils.isOutputPort(selection)) { + nfGoto.showDownstreamFromOutputPort(selection); + } else if (canvasUtils.isProcessGroup(selection) || canvasUtils.isRemoteProcessGroup(selection)) { + nfGoto.showDownstreamFromGroup(selection); } } }, @@ -271,19 +383,19 @@ nf.Actions = (function () { * @param {selection} selection The selection */ showUpstream: function (selection) { - if (selection.size() === 1 && !nf.CanvasUtils.isConnection(selection)) { + if (selection.size() === 1 && !canvasUtils.isConnection(selection)) { // open the downstream dialog according to the selection - if (nf.CanvasUtils.isProcessor(selection)) { - nf.GoTo.showUpstreamFromProcessor(selection); - } else if (nf.CanvasUtils.isFunnel(selection)) { - nf.GoTo.showUpstreamFromFunnel(selection); - } else if (nf.CanvasUtils.isInputPort(selection)) { - nf.GoTo.showUpstreamFromInputPort(selection); - } else if (nf.CanvasUtils.isOutputPort(selection)) { - nf.GoTo.showUpstreamFromOutputPort(selection); - } else if (nf.CanvasUtils.isProcessGroup(selection) || nf.CanvasUtils.isRemoteProcessGroup(selection)) { - nf.GoTo.showUpstreamFromGroup(selection); + if (canvasUtils.isProcessor(selection)) { + nfGoto.showUpstreamFromProcessor(selection); + } else if (canvasUtils.isFunnel(selection)) { + nfGoto.showUpstreamFromFunnel(selection); + } else if (canvasUtils.isInputPort(selection)) { + nfGoto.showUpstreamFromInputPort(selection); + } else if (canvasUtils.isOutputPort(selection)) { + nfGoto.showUpstreamFromOutputPort(selection); + } else if (canvasUtils.isProcessGroup(selection) || canvasUtils.isRemoteProcessGroup(selection)) { + nfGoto.showUpstreamFromGroup(selection); } } }, @@ -296,15 +408,15 @@ nf.Actions = (function () { show: function (selection) { if (selection.size() === 1) { // deselect the current selection - var currentlySelected = nf.CanvasUtils.getSelection(); + var currentlySelected = canvasUtils.getSelection(); currentlySelected.classed('selected', false); // select only the component/connection in question selection.classed('selected', true); - nf.Actions.center(selection); + nfActions.center(selection); // inform Angular app that values have changed - nf.ng.Bridge.digest(); + angularBridge.digest(); } }, @@ -321,7 +433,7 @@ nf.Actions = (function () { * Selects all components. */ selectAll: function () { - nf.Actions.select(d3.selectAll('g.component, g.connection')); + nfActions.select(d3.selectAll('g.component, g.connection')); }, /** @@ -332,7 +444,7 @@ nf.Actions = (function () { center: function (selection) { if (selection.size() === 1) { var box; - if (nf.CanvasUtils.isConnection(selection)) { + if (canvasUtils.isConnection(selection)) { var x, y; var d = selection.datum(); @@ -365,10 +477,10 @@ nf.Actions = (function () { } // center on the component - nf.CanvasUtils.centerBoundingBox(box); + canvasUtils.centerBoundingBox(box); // refresh the canvas - nf.Canvas.View.refresh({ + canvasUtils.refreshCanvasView({ transition: true }); } @@ -380,10 +492,10 @@ nf.Actions = (function () { * @argument {selection} selection The selection */ enable: function (selection) { - var componentsToEnable = nf.CanvasUtils.filterEnable(selection); + var componentsToEnable = canvasUtils.filterEnable(selection); if (componentsToEnable.empty()) { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Enable Components', dialogContent: 'No eligible components are selected. Please select the components to be enabled and ensure they are no longer running.' }); @@ -396,7 +508,7 @@ nf.Actions = (function () { // build the entity var entity = { - 'revision': nf.Client.getRevision(d), + 'revision': client.getRevision(d), 'component': { 'id': d.id, 'state': 'STOPPED' @@ -404,14 +516,14 @@ nf.Actions = (function () { }; enableRequests.push(updateResource(d.uri, entity).done(function (response) { - nf[d.type].set(response); + canvasUtils.getComponentByType(d.type).set(response); })); }); // inform Angular app once the updates have completed if (enableRequests.length > 0) { $.when.apply(window, enableRequests).always(function () { - nf.ng.Bridge.digest(); + angularBridge.digest(); }); } } @@ -423,10 +535,10 @@ nf.Actions = (function () { * @argument {selection} selection The selection */ disable: function (selection) { - var componentsToDisable = nf.CanvasUtils.filterDisable(selection); + var componentsToDisable = canvasUtils.filterDisable(selection); if (componentsToDisable.empty()) { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Disable Components', dialogContent: 'No eligible components are selected. Please select the components to be disabled and ensure they are no longer running.' }); @@ -439,7 +551,7 @@ nf.Actions = (function () { // build the entity var entity = { - 'revision': nf.Client.getRevision(d), + 'revision': client.getRevision(d), 'component': { 'id': d.id, 'state': 'DISABLED' @@ -447,14 +559,14 @@ nf.Actions = (function () { }; disableRequests.push(updateResource(d.uri, entity).done(function (response) { - nf[d.type].set(response); + canvasUtils.getComponentByType(d.type).set(response); })); }); // inform Angular app once the updates have completed if (disableRequests.length > 0) { $.when.apply(window, disableRequests).always(function () { - nf.ng.Bridge.digest(); + angularBridge.digest(); }); } } @@ -470,7 +582,7 @@ nf.Actions = (function () { var selectionData = selection.datum(); // open the provenance page with the specified component - nf.Shell.showPage('provenance?' + $.param({ + shell.showPage('provenance?' + $.param({ componentId: selectionData.id })); } @@ -485,19 +597,19 @@ nf.Actions = (function () { if (selection.empty()) { // build the entity var entity = { - 'id': nf.Canvas.getGroupId(), + 'id': canvasUtils.getGroupId(), 'state': 'RUNNING' }; - updateResource(config.urls.api + '/flow/process-groups/' + encodeURIComponent(nf.Canvas.getGroupId()), entity).done(updateProcessGroup); + updateResource(config.urls.api + '/flow/process-groups/' + encodeURIComponent(canvasUtils.getGroupId()), entity).done(updateProcessGroup); } else { var componentsToStart = selection.filter(function (d) { - return nf.CanvasUtils.isRunnable(d3.select(this)); + return canvasUtils.isRunnable(d3.select(this)); }); // ensure there are startable components selected if (componentsToStart.empty()) { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Start Components', dialogContent: 'No eligible components are selected. Please select the components to be started and ensure they are no longer running.' }); @@ -510,7 +622,7 @@ nf.Actions = (function () { // prepare the request var uri, entity; - if (nf.CanvasUtils.isProcessGroup(selected)) { + if (canvasUtils.isProcessGroup(selected)) { uri = config.urls.api + '/flow/process-groups/' + encodeURIComponent(d.id); entity = { 'id': d.id, @@ -519,7 +631,7 @@ nf.Actions = (function () { } else { uri = d.uri; entity = { - 'revision': nf.Client.getRevision(d), + 'revision': client.getRevision(d), 'component': { 'id': d.id, 'state': 'RUNNING' @@ -528,10 +640,10 @@ nf.Actions = (function () { } startRequests.push(updateResource(uri, entity).done(function (response) { - if (nf.CanvasUtils.isProcessGroup(selected)) { - nf.ProcessGroup.reload(d.id); + if (canvasUtils.isProcessGroup(selected)) { + canvasUtils.getComponentByType('ProcessGroup').reload(d.id); } else { - nf[d.type].set(response); + canvasUtils.getComponentByType(d.type).set(response); } })); }); @@ -539,7 +651,7 @@ nf.Actions = (function () { // inform Angular app once the updates have completed if (startRequests.length > 0) { $.when.apply(window, startRequests).always(function () { - nf.ng.Bridge.digest(); + angularBridge.digest(); }); } } @@ -555,19 +667,19 @@ nf.Actions = (function () { if (selection.empty()) { // build the entity var entity = { - 'id': nf.Canvas.getGroupId(), + 'id': canvasUtils.getGroupId(), 'state': 'STOPPED' }; - updateResource(config.urls.api + '/flow/process-groups/' + encodeURIComponent(nf.Canvas.getGroupId()), entity).done(updateProcessGroup); + updateResource(config.urls.api + '/flow/process-groups/' + encodeURIComponent(canvasUtils.getGroupId()), entity).done(updateProcessGroup); } else { var componentsToStop = selection.filter(function (d) { - return nf.CanvasUtils.isStoppable(d3.select(this)); + return canvasUtils.isStoppable(d3.select(this)); }); // ensure there are some component to stop if (componentsToStop.empty()) { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Stop Components', dialogContent: 'No eligible components are selected. Please select the components to be stopped.' }); @@ -580,7 +692,7 @@ nf.Actions = (function () { // prepare the request var uri, entity; - if (nf.CanvasUtils.isProcessGroup(selected)) { + if (canvasUtils.isProcessGroup(selected)) { uri = config.urls.api + '/flow/process-groups/' + encodeURIComponent(d.id); entity = { 'id': d.id, @@ -589,7 +701,7 @@ nf.Actions = (function () { } else { uri = d.uri; entity = { - 'revision': nf.Client.getRevision(d), + 'revision': client.getRevision(d), 'component': { 'id': d.id, 'state': 'STOPPED' @@ -598,10 +710,10 @@ nf.Actions = (function () { } stopRequests.push(updateResource(uri, entity).done(function (response) { - if (nf.CanvasUtils.isProcessGroup(selected)) { - nf.ProcessGroup.reload(d.id); + if (canvasUtils.isProcessGroup(selected)) { + canvasUtils.getComponentByType('ProcessGroup').reload(d.id); } else { - nf[d.type].set(response); + canvasUtils.getComponentByType(d.type).set(response); } })); }); @@ -609,7 +721,7 @@ nf.Actions = (function () { // inform Angular app once the updates have completed if (stopRequests.length > 0) { $.when.apply(window, stopRequests).always(function () { - nf.ng.Bridge.digest(); + angularBridge.digest(); }); } } @@ -623,14 +735,14 @@ nf.Actions = (function () { */ enableTransmission: function (selection) { var componentsToEnable = selection.filter(function (d) { - return nf.CanvasUtils.canStartTransmitting(d3.select(this)); + return canvasUtils.canStartTransmitting(d3.select(this)); }); // start each selected component componentsToEnable.each(function (d) { // build the entity var entity = { - 'revision': nf.Client.getRevision(d), + 'revision': client.getRevision(d), 'component': { 'id': d.id, 'transmitting': true @@ -639,7 +751,7 @@ nf.Actions = (function () { // start transmitting updateResource(d.uri, entity).done(function (response) { - nf.RemoteProcessGroup.set(response); + remoteProcessGroup.set(response); }); }); }, @@ -651,14 +763,14 @@ nf.Actions = (function () { */ disableTransmission: function (selection) { var componentsToDisable = selection.filter(function (d) { - return nf.CanvasUtils.canStopTransmitting(d3.select(this)); + return canvasUtils.canStopTransmitting(d3.select(this)); }); // stop each selected component componentsToDisable.each(function (d) { // build the entity var entity = { - 'revision': nf.Client.getRevision(d), + 'revision': client.getRevision(d), 'component': { 'id': d.id, 'transmitting': false @@ -666,7 +778,7 @@ nf.Actions = (function () { }; updateResource(d.uri, entity).done(function (response) { - nf.RemoteProcessGroup.set(response); + remoteProcessGroup.set(response); }); }); }, @@ -678,21 +790,21 @@ nf.Actions = (function () { */ showConfiguration: function (selection) { if (selection.empty()) { - nf.ProcessGroupConfiguration.showConfiguration(nf.Canvas.getGroupId()); + processGroupConfiguration.showConfiguration(canvasUtils.getGroupId()); } else if (selection.size() === 1) { var selectionData = selection.datum(); - if (nf.CanvasUtils.isProcessor(selection)) { - nf.ProcessorConfiguration.showConfiguration(selection); - } else if (nf.CanvasUtils.isLabel(selection)) { - nf.LabelConfiguration.showConfiguration(selection); - } else if (nf.CanvasUtils.isProcessGroup(selection)) { - nf.ProcessGroupConfiguration.showConfiguration(selectionData.id); - } else if (nf.CanvasUtils.isRemoteProcessGroup(selection)) { - nf.RemoteProcessGroupConfiguration.showConfiguration(selection); - } else if (nf.CanvasUtils.isInputPort(selection) || nf.CanvasUtils.isOutputPort(selection)) { - nf.PortConfiguration.showConfiguration(selection); - } else if (nf.CanvasUtils.isConnection(selection)) { - nf.ConnectionConfiguration.showConfiguration(selection); + if (canvasUtils.isProcessor(selection)) { + processorConfiguration.showConfiguration(selection); + } else if (canvasUtils.isLabel(selection)) { + labelConfiguration.showConfiguration(selection); + } else if (canvasUtils.isProcessGroup(selection)) { + processGroupConfiguration.showConfiguration(selectionData.id); + } else if (canvasUtils.isRemoteProcessGroup(selection)) { + remoteProcessGroupConfiguration.showConfiguration(selection); + } else if (canvasUtils.isInputPort(selection) || canvasUtils.isOutputPort(selection)) { + portConfiguration.showConfiguration(selection); + } else if (canvasUtils.isConnection(selection)) { + connectionConfiguration.showConfiguration(selection); } } }, @@ -704,26 +816,26 @@ nf.Actions = (function () { */ managePolicies: function(selection) { if (selection.size() <= 1) { - nf.PolicyManagement.showComponentPolicy(selection); + policyManagement.showComponentPolicy(selection); } }, // Defines an action for showing component details (like configuration but read only). showDetails: function (selection) { if (selection.empty()) { - nf.ProcessGroupConfiguration.showConfiguration(nf.Canvas.getGroupId()); + processGroupConfiguration.showConfiguration(canvasUtils.getGroupId()); } else if (selection.size() === 1) { var selectionData = selection.datum(); - if (nf.CanvasUtils.isProcessor(selection)) { - nf.ProcessorDetails.showDetails(nf.Canvas.getGroupId(), selectionData.id); - } else if (nf.CanvasUtils.isProcessGroup(selection)) { - nf.ProcessGroupConfiguration.showConfiguration(selectionData.id); - } else if (nf.CanvasUtils.isRemoteProcessGroup(selection)) { - nf.RemoteProcessGroupDetails.showDetails(selection); - } else if (nf.CanvasUtils.isInputPort(selection) || nf.CanvasUtils.isOutputPort(selection)) { - nf.PortDetails.showDetails(selection); - } else if (nf.CanvasUtils.isConnection(selection)) { - nf.ConnectionDetails.showDetails(nf.Canvas.getGroupId(), selectionData.id); + if (canvasUtils.isProcessor(selection)) { + processorDetails.showDetails(canvasUtils.getGroupId(), selectionData.id); + } else if (canvasUtils.isProcessGroup(selection)) { + processGroupConfiguration.showConfiguration(selectionData.id); + } else if (canvasUtils.isRemoteProcessGroup(selection)) { + remoteProcessGroupDetails.showDetails(selection); + } else if (canvasUtils.isInputPort(selection) || canvasUtils.isOutputPort(selection)) { + portDetails.showDetails(selection); + } else if (canvasUtils.isConnection(selection)) { + connectionDetails.showDetails(canvasUtils.getGroupId(), selectionData.id); } } }, @@ -734,10 +846,10 @@ nf.Actions = (function () { * @param {selection} selection The selection */ showUsage: function (selection) { - if (selection.size() === 1 && nf.CanvasUtils.isProcessor(selection)) { + if (selection.size() === 1 && canvasUtils.isProcessor(selection)) { var selectionData = selection.datum(); - nf.Shell.showPage('../nifi-docs/documentation?' + $.param({ - select: nf.Common.substringAfterLast(selectionData.component.type, '.') + shell.showPage('../nifi-docs/documentation?' + $.param({ + select: common.substringAfterLast(selectionData.component.type, '.') })); } }, @@ -750,14 +862,14 @@ nf.Actions = (function () { showStats: function (selection) { if (selection.size() === 1) { var selectionData = selection.datum(); - if (nf.CanvasUtils.isProcessor(selection)) { - nf.StatusHistory.showProcessorChart(nf.Canvas.getGroupId(), selectionData.id); - } else if (nf.CanvasUtils.isProcessGroup(selection)) { - nf.StatusHistory.showProcessGroupChart(nf.Canvas.getGroupId(), selectionData.id); - } else if (nf.CanvasUtils.isRemoteProcessGroup(selection)) { - nf.StatusHistory.showRemoteProcessGroupChart(nf.Canvas.getGroupId(), selectionData.id); - } else if (nf.CanvasUtils.isConnection(selection)) { - nf.StatusHistory.showConnectionChart(nf.Canvas.getGroupId(), selectionData.id); + if (canvasUtils.isProcessor(selection)) { + statusHistory.showProcessorChart(canvasUtils.getGroupId(), selectionData.id); + } else if (canvasUtils.isProcessGroup(selection)) { + statusHistory.showProcessGroupChart(canvasUtils.getGroupId(), selectionData.id); + } else if (canvasUtils.isRemoteProcessGroup(selection)) { + statusHistory.showRemoteProcessGroupChart(canvasUtils.getGroupId(), selectionData.id); + } else if (canvasUtils.isConnection(selection)) { + statusHistory.showConnectionChart(canvasUtils.getGroupId(), selectionData.id); } } }, @@ -768,8 +880,8 @@ nf.Actions = (function () { * @param {selection} selection The selection */ remotePorts: function (selection) { - if (selection.size() === 1 && nf.CanvasUtils.isRemoteProcessGroup(selection)) { - nf.RemoteProcessGroupPorts.showPorts(selection); + if (selection.size() === 1 && canvasUtils.isRemoteProcessGroup(selection)) { + remoteProcessGroupPorts.showPorts(selection); } }, @@ -777,7 +889,7 @@ nf.Actions = (function () { * Reloads the status for the entire canvas (components and flow.) */ reload: function () { - nf.Canvas.reload({ + canvasUtils.reload({ 'transition': true }); }, @@ -788,15 +900,15 @@ nf.Actions = (function () { * @param {selection} selection The selection containing the component to be removed */ 'delete': function (selection) { - if (nf.Common.isUndefined(selection) || selection.empty()) { - nf.Dialog.showOkDialog({ + if (common.isUndefined(selection) || selection.empty()) { + dialog.showOkDialog({ headerText: 'Reload', dialogContent: 'No eligible components are selected. Please select the components to be deleted.' }); } else { if (selection.size() === 1) { var selectionData = selection.datum(); - var revision = nf.Client.getRevision(selectionData); + var revision = client.getRevision(selectionData); $.ajax({ type: 'DELETE', @@ -807,11 +919,11 @@ nf.Actions = (function () { dataType: 'json' }).done(function (response) { // remove the component/connection in question - nf[selectionData.type].remove(selectionData.id); + canvasUtils.getComponentByType(selectionData.type).remove(selectionData.id); // if the selection is a connection, reload the source and destination accordingly - if (nf.CanvasUtils.isConnection(selection) === false) { - var connections = nf.Connection.getComponentConnections(selectionData.id); + if (canvasUtils.isConnection(selection) === false) { + var connections = nfConnection.getComponentConnections(selectionData.id); if (connections.length > 0) { var ids = []; $.each(connections, function (_, connection) { @@ -819,21 +931,21 @@ nf.Actions = (function () { }); // remove the corresponding connections - nf.Connection.remove(ids); + nfConnection.remove(ids); } } // refresh the birdseye - nf.Birdseye.refresh(); + birdseye.refresh(); // inform Angular app values have changed - nf.ng.Bridge.digest(); - }).fail(nf.ErrorHandler.handleAjaxError); + angularBridge.digest(); + }).fail(errorHandler.handleAjaxError); } else { // create a snippet for the specified component and link to the data flow - var snippet = nf.Snippet.marshal(selection); - nf.Snippet.create(snippet).done(function (response) { + var snippet = nfSnippet.marshal(selection); + nfSnippet.create(snippet).done(function (response) { // remove the snippet, effectively removing the components - nf.Snippet.remove(response.snippet.id).done(function () { + nfSnippet.remove(response.snippet.id).done(function () { var components = d3.map(); // add the id to the type's array @@ -851,7 +963,7 @@ nf.Actions = (function () { // if this is not a connection, see if it has any connections that need to be removed if (d.type !== 'Connection') { - var connections = nf.Connection.getComponentConnections(d.id); + var connections = nfConnection.getComponentConnections(d.id); if (connections.length > 0) { $.each(connections, function (_, connection) { addComponent('Connection', connection.id); @@ -863,22 +975,22 @@ nf.Actions = (function () { // remove all the non connections in the snippet first components.forEach(function (type, ids) { if (type !== 'Connection') { - nf[type].remove(ids); + canvasUtils.getComponentByType(type).remove(ids); } }); // then remove all the connections if (components.has('Connection')) { - nf.Connection.remove(components.get('Connection')); + nfConnection.remove(components.get('Connection')); } // refresh the birdseye - nf.Birdseye.refresh(); + birdseye.refresh(); // inform Angular app values have changed - nf.ng.Bridge.digest(); - }).fail(nf.ErrorHandler.handleAjaxError); - }).fail(nf.ErrorHandler.handleAjaxError); + angularBridge.digest(); + }).fail(errorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); } } }, @@ -889,12 +1001,12 @@ nf.Actions = (function () { * @param {type} selection */ emptyQueue: function (selection) { - if (selection.size() !== 1 || !nf.CanvasUtils.isConnection(selection)) { + if (selection.size() !== 1 || !canvasUtils.isConnection(selection)) { return; } // prompt the user before emptying the queue - nf.Dialog.showYesNoDialog({ + dialog.showYesNoDialog({ headerText: 'Empty Queue', dialogContent: 'Are you sure you want to empty this queue? All FlowFiles waiting at the time of the request will be removed.', noText: 'Cancel', @@ -917,7 +1029,7 @@ nf.Actions = (function () { // update the progress bar var label = $('
    ').text(percentComplete + '%'); - (nf.ng.Bridge.injector.get('$compile')($(''))(nf.ng.Bridge.rootScope)).appendTo(progressBar); + (angularBridge.injector.get('$compile')($(''))(angularBridge.rootScope)).appendTo(progressBar); progressBar.append(label); }; @@ -948,10 +1060,10 @@ nf.Actions = (function () { // completes the drop request by removing it and showing how many flowfiles were deleted var completeDropRequest = function () { // reload the connection status - nf.Connection.reloadStatus(connection.id); + nfConnection.reloadStatus(connection.id); // clean up as appropriate - if (nf.Common.isDefinedAndNotNull(dropRequest)) { + if (common.isDefinedAndNotNull(dropRequest)) { $.ajax({ type: 'DELETE', url: dropRequest.uri, @@ -975,12 +1087,12 @@ nf.Actions = (function () { $('').text(' were removed from the queue.').appendTo(results); // if this request failed so the error - if (nf.Common.isDefinedAndNotNull(dropRequest.failureReason)) { + if (common.isDefinedAndNotNull(dropRequest.failureReason)) { $('

    ').text(dropRequest.failureReason).appendTo(results); } // display the results - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Empty Queue', dialogContent: results }); @@ -989,7 +1101,7 @@ nf.Actions = (function () { }); } else { // nothing was removed - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Empty Queue', dialogContent: 'No FlowFiles were removed.' }); @@ -1033,7 +1145,7 @@ nf.Actions = (function () { processDropRequest(nextDelay); }).fail(function (xhr, status, error) { if (xhr.status === 403) { - nf.ErrorHandler.handleAjaxError(xhr, status, error); + errorHandler.handleAjaxError(xhr, status, error); } else { completeDropRequest() } @@ -1058,7 +1170,7 @@ nf.Actions = (function () { processDropRequest(1); }).fail(function (xhr, status, error) { if (xhr.status === 403) { - nf.ErrorHandler.handleAjaxError(xhr, status, error); + errorHandler.handleAjaxError(xhr, status, error); } else { completeDropRequest() } @@ -1073,7 +1185,7 @@ nf.Actions = (function () { * @param {selection} selection */ listQueue: function (selection) { - if (selection.size() !== 1 || !nf.CanvasUtils.isConnection(selection)) { + if (selection.size() !== 1 || !canvasUtils.isConnection(selection)) { return; } @@ -1081,7 +1193,7 @@ nf.Actions = (function () { var connection = selection.datum(); // list the flow files in the specified connection - nf.QueueListing.listQueue(connection); + queueListing.listQueue(connection); }, /** @@ -1090,7 +1202,7 @@ nf.Actions = (function () { * @param {selection} selection */ viewState: function (selection) { - if (selection.size() !== 1 || !nf.CanvasUtils.isProcessor(selection)) { + if (selection.size() !== 1 || !canvasUtils.isProcessor(selection)) { return; } @@ -1098,7 +1210,7 @@ nf.Actions = (function () { var processor = selection.datum(); // view the state for the selected processor - nf.ComponentState.showState(processor, nf.CanvasUtils.isConfigurable(selection)); + componentState.showState(processor, canvasUtils.isConfigurable(selection)); }, /** @@ -1109,8 +1221,8 @@ nf.Actions = (function () { alignVertical: function (selection) { var updates = d3.map(); // ensure every component is writable - if (nf.CanvasUtils.canModify(selection) === false) { - nf.Dialog.showOkDialog({ + if (canvasUtils.canModify(selection) === false) { + dialog.showOkDialog({ headerText: 'Component Position', dialogContent: 'Must be authorized to modify every component selected.' }); @@ -1141,32 +1253,32 @@ nf.Actions = (function () { // if this component is already centered, no need to updated it if (delta.x !== 0) { // consider any connections - var connections = nf.Connection.getComponentConnections(d.id); + var connections = nfConnection.getComponentConnections(d.id); $.each(connections, function(_, connection) { var connectionSelection = d3.select('#id-' + connection.id); - if (!updates.has(connection.id) && nf.CanvasUtils.getConnectionSourceComponentId(connection) === nf.CanvasUtils.getConnectionDestinationComponentId(connection)) { + if (!updates.has(connection.id) && canvasUtils.getConnectionSourceComponentId(connection) === canvasUtils.getConnectionDestinationComponentId(connection)) { // this connection is self looping and hasn't been updated by the delta yet - var connectionUpdate = nf.Draggable.updateConnectionPosition(nf.Connection.get(connection.id), delta); + var connectionUpdate = draggable.updateConnectionPosition(nfConnection.get(connection.id), delta); if (connectionUpdate !== null) { updates.set(connection.id, connectionUpdate); } - } else if (!updates.has(connection.id) && connectionSelection.classed('selected') && nf.CanvasUtils.canModify(connectionSelection)) { + } else if (!updates.has(connection.id) && connectionSelection.classed('selected') && canvasUtils.canModify(connectionSelection)) { // this is a selected connection that hasn't been updated by the delta yet - if (nf.CanvasUtils.getConnectionSourceComponentId(connection) === d.id || !isSourceSelected(connection, selection)) { + if (canvasUtils.getConnectionSourceComponentId(connection) === d.id || !isSourceSelected(connection, selection)) { // the connection is either outgoing or incoming when the source of the connection is not part of the selection - var connectionUpdate = nf.Draggable.updateConnectionPosition(nf.Connection.get(connection.id), delta); + var connectionUpdate = draggable.updateConnectionPosition(nfConnection.get(connection.id), delta); if (connectionUpdate !== null) { updates.set(connection.id, connectionUpdate); } } } }); - updates.set(d.id, nf.Draggable.updateComponentPosition(d, delta)); + updates.set(d.id, draggable.updateComponentPosition(d, delta)); } } }); - nf.Draggable.refreshConnections(updates); + draggable.refreshConnections(updates); }, /** @@ -1177,8 +1289,8 @@ nf.Actions = (function () { alignHorizontal: function (selection) { var updates = d3.map(); // ensure every component is writable - if (nf.CanvasUtils.canModify(selection) === false) { - nf.Dialog.showOkDialog({ + if (canvasUtils.canModify(selection) === false) { + dialog.showOkDialog({ headerText: 'Component Position', dialogContent: 'Must be authorized to modify every component selected.' }); @@ -1211,33 +1323,33 @@ nf.Actions = (function () { // if this component is already centered, no need to updated it if (delta.y !== 0) { // consider any connections - var connections = nf.Connection.getComponentConnections(d.id); + var connections = nfConnection.getComponentConnections(d.id); $.each(connections, function(_, connection) { var connectionSelection = d3.select('#id-' + connection.id); - if (!updates.has(connection.id) && nf.CanvasUtils.getConnectionSourceComponentId(connection) === nf.CanvasUtils.getConnectionDestinationComponentId(connection)) { + if (!updates.has(connection.id) && canvasUtils.getConnectionSourceComponentId(connection) === canvasUtils.getConnectionDestinationComponentId(connection)) { // this connection is self looping and hasn't been updated by the delta yet - var connectionUpdate = nf.Draggable.updateConnectionPosition(nf.Connection.get(connection.id), delta); + var connectionUpdate = draggable.updateConnectionPosition(nfConnection.get(connection.id), delta); if (connectionUpdate !== null) { updates.set(connection.id, connectionUpdate); } - } else if (!updates.has(connection.id) && connectionSelection.classed('selected') && nf.CanvasUtils.canModify(connectionSelection)) { + } else if (!updates.has(connection.id) && connectionSelection.classed('selected') && canvasUtils.canModify(connectionSelection)) { // this is a selected connection that hasn't been updated by the delta yet - if (nf.CanvasUtils.getConnectionSourceComponentId(connection) === d.id || !isSourceSelected(connection, selection)) { + if (canvasUtils.getConnectionSourceComponentId(connection) === d.id || !isSourceSelected(connection, selection)) { // the connection is either outgoing or incoming when the source of the connection is not part of the selection - var connectionUpdate = nf.Draggable.updateConnectionPosition(nf.Connection.get(connection.id), delta); + var connectionUpdate = draggable.updateConnectionPosition(nfConnection.get(connection.id), delta); if (connectionUpdate !== null) { updates.set(connection.id, connectionUpdate); } } } }); - updates.set(d.id, nf.Draggable.updateComponentPosition(d, delta)); + updates.set(d.id, draggable.updateComponentPosition(d, delta)); } } }); - nf.Draggable.refreshConnections(updates); + draggable.refreshConnections(updates); }, /** @@ -1246,16 +1358,16 @@ nf.Actions = (function () { * @param {type} selection The selection */ fillColor: function (selection) { - if (nf.CanvasUtils.isColorable(selection)) { + if (canvasUtils.isColorable(selection)) { // we know that the entire selection is processors or labels... this // checks if the first item is a processor... if true, all processors - var allProcessors = nf.CanvasUtils.isProcessor(selection); + var allProcessors = canvasUtils.isProcessor(selection); var color; if (allProcessors) { - color = nf.Processor.defaultFillColor(); + color = processor.defaultFillColor(); } else { - color = nf.Label.defaultColor(); + color = label.defaultColor(); } // if there is only one component selected, get its color otherwise use default @@ -1263,7 +1375,7 @@ nf.Actions = (function () { var selectionData = selection.datum(); // use the specified color if appropriate - if (nf.Common.isDefinedAndNotNull(selectionData.component.style['background-color'])) { + if (common.isDefinedAndNotNull(selectionData.component.style['background-color'])) { color = selectionData.component.style['background-color']; } } @@ -1289,7 +1401,7 @@ nf.Actions = (function () { * Groups the currently selected components into a new group. */ group: function () { - var selection = nf.CanvasUtils.getSelection(); + var selection = canvasUtils.getSelection(); // ensure that components have been specified if (selection.empty()) { @@ -1297,12 +1409,12 @@ nf.Actions = (function () { } // determine the origin of the bounding box for the selected components - var origin = nf.CanvasUtils.getOrigin(selection); + var origin = canvasUtils.getOrigin(selection); var pt = {'x': origin.x, 'y': origin.y}; - $.when(nf.ng.Bridge.injector.get('groupComponent').promptForGroupName(pt)).done(function (processGroup) { + $.when(angularBridge.injector.get('groupComponent').promptForGroupName(pt)).done(function (processGroup) { var group = d3.select('#id-' + processGroup.id); - nf.CanvasUtils.moveComponents(selection, group); + canvasUtils.moveComponents(selection, group); }); }, @@ -1310,7 +1422,7 @@ nf.Actions = (function () { * Moves the currently selected component into the current parent group. */ moveIntoParent: function () { - var selection = nf.CanvasUtils.getSelection(); + var selection = canvasUtils.getSelection(); // ensure that components have been specified if (selection.empty()) { @@ -1318,7 +1430,7 @@ nf.Actions = (function () { } // move the current selection into the parent group - nf.CanvasUtils.moveComponentsToParent(selection); + canvasUtils.moveComponentsToParent(selection); }, /** @@ -1333,7 +1445,7 @@ nf.Actions = (function () { * are selected, a template of the entire canvas is made. */ template: function () { - var selection = nf.CanvasUtils.getSelection(); + var selection = canvasUtils.getSelection(); // if no components are selected, use the entire graph if (selection.empty()) { @@ -1342,7 +1454,7 @@ nf.Actions = (function () { // ensure that components have been specified if (selection.empty()) { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Create Template', dialogContent: "The current selection is not valid to create a template." }); @@ -1350,11 +1462,11 @@ nf.Actions = (function () { } // remove dangling edges (where only the source or destination is also selected) - selection = nf.CanvasUtils.trimDanglingEdges(selection); + selection = canvasUtils.trimDanglingEdges(selection); // ensure that components specified are valid if (selection.empty()) { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Create Template', dialogContent: "The current selection is not valid to create a template." }); @@ -1375,8 +1487,8 @@ nf.Actions = (function () { var templateName = $('#new-template-name').val(); // ensure the template name is not blank - if (nf.Common.isBlank(templateName)) { - nf.Dialog.showOkDialog({ + if (common.isBlank(templateName)) { + dialog.showOkDialog({ headerText: 'Create Template', dialogContent: "The template name cannot be blank." }); @@ -1390,10 +1502,10 @@ nf.Actions = (function () { var templateDescription = $('#new-template-description').val(); // create a snippet - var snippet = nf.Snippet.marshal(selection); + var snippet = nfSnippet.marshal(selection); // create the snippet - nf.Snippet.create(snippet).done(function (response) { + nfSnippet.create(snippet).done(function (response) { var createSnippetEntity = { 'name': templateName, 'description': templateDescription, @@ -1403,22 +1515,22 @@ nf.Actions = (function () { // create the template $.ajax({ type: 'POST', - url: config.urls.api + '/process-groups/' + encodeURIComponent(nf.Canvas.getGroupId()) + '/templates', + url: config.urls.api + '/process-groups/' + encodeURIComponent(canvasUtils.getGroupId()) + '/templates', data: JSON.stringify(createSnippetEntity), dataType: 'json', contentType: 'application/json' }).done(function () { // show the confirmation dialog - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Create Template', - dialogContent: "Template '" + nf.Common.escapeHtml(templateName) + "' was successfully created." + dialogContent: "Template '" + common.escapeHtml(templateName) + "' was successfully created." }); }).always(function () { // clear the template dialog fields $('#new-template-name').val(''); $('#new-template-description').val(''); - }).fail(nf.ErrorHandler.handleAjaxError); - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); } } }, { @@ -1454,11 +1566,11 @@ nf.Actions = (function () { } // determine the origin of the bounding box of the selection - var origin = nf.CanvasUtils.getOrigin(selection); + var origin = canvasUtils.getOrigin(selection); // copy the snippet details - nf.Clipboard.copy({ - snippet: nf.Snippet.marshal(selection), + clipboard.copy({ + snippet: nfSnippet.marshal(selection), origin: origin }); }, @@ -1470,13 +1582,13 @@ nf.Actions = (function () { * @param {obj} evt The mouse event */ paste: function (selection, evt) { - if (nf.Common.isDefinedAndNotNull(evt)) { + if (common.isDefinedAndNotNull(evt)) { // get the current scale and translation - var scale = nf.Canvas.View.scale(); - var translate = nf.Canvas.View.translate(); + var scale = canvasUtils.scaleCanvasView(); + var translate = canvasUtils.translateCanvasView(); var mouseX = evt.pageX; - var mouseY = evt.pageY - nf.Canvas.CANVAS_OFFSET; + var mouseY = evt.pageY - canvasUtils.getCanvasOffset(); // adjust the x and y coordinates accordingly var x = (mouseX / scale) - (translate[0] / scale); @@ -1490,48 +1602,48 @@ nf.Actions = (function () { } // perform the paste - nf.Clipboard.paste().done(function (data) { + clipboard.paste().done(function (data) { var copySnippet = $.Deferred(function (deferred) { var reject = function (xhr, status, error) { deferred.reject(xhr.responseText); }; // create a snippet from the details - nf.Snippet.create(data['snippet']).done(function (createResponse) { + nfSnippet.create(data['snippet']).done(function (createResponse) { // determine the origin of the bounding box of the copy var origin = pasteLocation; var snippetOrigin = data['origin']; // determine the appropriate origin - if (!nf.Common.isDefinedAndNotNull(origin)) { + if (!common.isDefinedAndNotNull(origin)) { snippetOrigin.x += 25; snippetOrigin.y += 25; origin = snippetOrigin; } // copy the snippet to the new location - nf.Snippet.copy(createResponse.snippet.id, origin).done(function (copyResponse) { + nfSnippet.copy(createResponse.snippet.id, origin).done(function (copyResponse) { var snippetFlow = copyResponse.flow; // update the graph accordingly - nf.Graph.add(snippetFlow, { + graph.add(snippetFlow, { 'selectAll': true }); // update component visibility - nf.Canvas.View.updateVisibility(); + graph.updateVisibility(); // refresh the birdseye/toolbar - nf.Birdseye.refresh(); + birdseye.refresh(); }).fail(function () { // an error occured while performing the copy operation, reload the // graph in case it was a partial success - nf.Canvas.reload().done(function () { + canvasUtils.reload().done(function () { // update component visibility - nf.Canvas.View.updateVisibility(); + graph.updateVisibility(); // refresh the birdseye/toolbar - nf.Birdseye.refresh(); + birdseye.refresh(); }); }).fail(reject); }).fail(reject); @@ -1545,9 +1657,9 @@ nf.Actions = (function () { message = responseText; } - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Paste Error', - dialogContent: nf.Common.escapeHtml(message) + dialogContent: common.escapeHtml(message) }); }); }); @@ -1559,7 +1671,7 @@ nf.Actions = (function () { * @param {selection} selection */ toFront: function (selection) { - if (selection.size() !== 1 || !nf.CanvasUtils.isConnection(selection)) { + if (selection.size() !== 1 || !canvasUtils.isConnection(selection)) { return; } @@ -1568,7 +1680,7 @@ nf.Actions = (function () { // determine the current max zIndex var maxZIndex = -1; - $.each(nf.Connection.get(), function (_, otherConnection) { + $.each(nfConnection.get(), function (_, otherConnection) { if (connection.id !== otherConnection.id && otherConnection.zIndex > maxZIndex) { maxZIndex = otherConnection.zIndex; } @@ -1581,7 +1693,7 @@ nf.Actions = (function () { // build the connection entity var connectionEntity = { - 'revision': nf.Client.getRevision(connection), + 'revision': client.getRevision(connection), 'component': { 'id': connection.id, 'zIndex': zIndex @@ -1596,9 +1708,11 @@ nf.Actions = (function () { dataType: 'json', contentType: 'application/json' }).done(function (response) { - nf.Connection.set(response); + nfConnection.set(response); }); } } }; -}()); \ No newline at end of file + + return nfActions; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-birdseye.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-birdseye.js index dc4fca2865..5d9f419e6b 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-birdseye.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-birdseye.js @@ -15,17 +15,49 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.Birdseye = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'd3', + 'nf.ErrorHandler', + 'nf.Common', + 'nf.CanvasUtils', + 'nf.ContextMenu', + 'nf.Label'], + function ($, d3, errorHandler, common, canvasUtils, contextMenu, label) { + return (nf.Birdseye = factory($, d3, errorHandler, common, canvasUtils, contextMenu, label)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.Birdseye = + factory(require('jquery'), + require('d3'), + require('nf.ErrorHandler'), + require('nf.Common'), + require('nf.CanvasUtils'), + require('nf.ContextMenu'), + require('nf.Label'))); + } else { + nf.Birdseye = factory(root.$, + root.d3, + root.nf.ErrorHandler, + root.nf.Common, + root.nf.CanvasUtils, + root.nf.ContextMenu, + root.nf.Label); + } +}(this, function ($, d3, errorHandler, common, canvasUtils, contextMenu, label) { + 'use strict'; + var nfGraph; var birdseyeGroup; var componentGroup; // refreshes the birdseye var refresh = function (components) { - var translate = nf.Canvas.View.translate(); - var scale = nf.Canvas.View.scale(); + var translate = canvasUtils.translateCanvasView(); + var scale = canvasUtils.scaleCanvasView(); // scale the translation translate = [translate[0] / scale, translate[1] / scale]; @@ -33,7 +65,7 @@ nf.Birdseye = (function () { // get the bounding box for the graph and convert into canvas space var graphBox = d3.select('#canvas').node().getBoundingClientRect(); var graphLeft = (graphBox.left / scale) - translate[0]; - var graphTop = ((graphBox.top - nf.Canvas.CANVAS_OFFSET) / scale) - translate[1]; + var graphTop = ((graphBox.top - canvasUtils.getCanvasOffset()) / scale) - translate[1]; var graphRight = (graphBox.right / scale) - translate[0]; var graphBottom = (graphBox.bottom / scale) - translate[1]; @@ -149,11 +181,11 @@ nf.Birdseye = (function () { // labels $.each(components.labels, function (_, d) { - var color = nf.Label.defaultColor(); + var color = label.defaultColor(); if (d.permissions.canRead) { // use the specified color if appropriate - if (nf.Common.isDefinedAndNotNull(d.component.style['background-color'])) { + if (common.isDefinedAndNotNull(d.component.style['background-color'])) { color = d.component.style['background-color']; } } @@ -192,7 +224,7 @@ nf.Birdseye = (function () { if (d.permissions.canRead) { // use the specified color if appropriate - if (nf.Common.isDefinedAndNotNull(d.component.style['background-color'])) { + if (common.isDefinedAndNotNull(d.component.style['background-color'])) { color = d.component.style['background-color']; //if the background color is #ffffff use the default instead @@ -212,8 +244,10 @@ nf.Birdseye = (function () { // whether or not the birdseye is open, don't adjust unless necessary var visible = true; - return { - init: function () { + var nfBirdseye = { + init: function (graph) { + nfGraph = graph; + var birdseye = $('#birdseye'); d3.select('#birdseye').append('canvas') @@ -244,7 +278,7 @@ nf.Birdseye = (function () { }) .on('dragstart', function () { // hide the context menu - nf.ContextMenu.hide(); + contextMenu.hide(); }) .on('drag', function (d) { d.x += d3.event.dx; @@ -255,17 +289,17 @@ nf.Birdseye = (function () { return 'translate(' + d.x + ', ' + d.y + ')'; }); // get the current transformation - var scale = nf.Canvas.View.scale(); - var translate = nf.Canvas.View.translate(); + var scale = canvasUtils.scaleCanvasView(); + var translate = canvasUtils.translateCanvasView(); // update the translation according to the delta translate = [(-d3.event.dx * scale) + translate[0], (-d3.event.dy * scale) + translate[1]]; // record the current transforms - nf.Canvas.View.translate(translate); + canvasUtils.translateCanvasView(translate); // refresh the canvas - nf.Canvas.View.refresh({ + canvasUtils.refreshCanvasView({ persist: false, transition: false, refreshComponents: false, @@ -274,13 +308,13 @@ nf.Birdseye = (function () { }) .on('dragend', function () { // update component visibility - nf.Canvas.View.updateVisibility(); + nfGraph.updateVisibility(); // persist the users view - nf.CanvasUtils.persistUserView(); + canvasUtils.persistUserView(); // refresh the birdseye - nf.Birdseye.refresh(); + nfBirdseye.refresh(); }); // context area @@ -303,7 +337,7 @@ nf.Birdseye = (function () { */ refresh: function () { if (visible) { - refresh(nf.Graph.get()); + refresh(nfGraph.get()); } }, @@ -322,7 +356,7 @@ nf.Birdseye = (function () { visible = true; // refresh the birdseye as it may have changed - refresh(nf.Graph.get()); + refresh(nfGraph.get()); } else { // hide the outline birdseye.hide(); @@ -330,4 +364,6 @@ nf.Birdseye = (function () { } } }; -}()); \ No newline at end of file + + return nfBirdseye; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-bootstrap.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-bootstrap.js new file mode 100644 index 0000000000..3669495da8 --- /dev/null +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-bootstrap.js @@ -0,0 +1,400 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/* global define, module, require, exports */ + +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'angular', + 'nf.Common', + 'nf.CanvasUtils', + 'nf.ErrorHandler', + 'nf.Client', + 'nf.ClusterSummary', + 'nf.Dialog', + 'nf.Storage', + 'nf.Canvas', + 'nf.Graph', + 'nf.ContextMenu', + 'nf.Shell', + 'nf.Settings', + 'nf.Snippet', + 'nf.Actions', + 'nf.QueueListing', + 'nf.ComponentState', + 'nf.Draggable', + 'nf.Connectable', + 'nf.StatusHistory', + 'nf.Birdseye', + 'nf.ConnectionConfiguration', + 'nf.ControllerService', + 'nf.ReportingTask', + 'nf.PolicyManagement', + 'nf.ProcessorConfiguration', + 'nf.ProcessGroupConfiguration', + 'nf.ControllerServices', + 'nf.RemoteProcessGroupConfiguration', + 'nf.RemoteProcessGroupPorts', + 'nf.PortConfiguration', + 'nf.LabelConfiguration', + 'nf.ProcessorDetails', + 'nf.PortDetails', + 'nf.ConnectionDetails', + 'nf.RemoteProcessGroupDetails', + 'nf.GoTo', + 'nf.ng.Bridge', + 'nf.ng.AppCtrl', + 'nf.ng.AppConfig', + 'nf.ng.ServiceProvider', + 'nf.ng.BreadcrumbsCtrl', + 'nf.ng.Canvas.HeaderCtrl', + 'nf.ng.Canvas.FlowStatusCtrl', + 'nf.ng.Canvas.GlobalMenuCtrl', + 'nf.ng.Canvas.ToolboxCtrl', + 'nf.ng.ProcessorComponent', + 'nf.ng.InputPortComponent', + 'nf.ng.OutputPortComponent', + 'nf.ng.GroupComponent', + 'nf.ng.RemoteProcessGroupComponent', + 'nf.ng.FunnelComponent', + 'nf.ng.TemplateComponent', + 'nf.ng.LabelComponent', + 'nf.ng.Canvas.GraphControlsCtrl', + 'nf.ng.Canvas.NavigateCtrl', + 'nf.ng.Canvas.OperateCtrl', + 'nf.ng.BreadcrumbsDirective', + 'nf.ng.DraggableDirective'], + function ($, angular, common, canvasUtils, errorHandler, client, clusterSummary, dialog, storage, canvas, graph, contextMenu, shell, settings, actions, snippet, queueListing, componentState, draggable, connectable, statusHistory, birdseye, connectionConfiguration, controllerService, reportingTask, policyManagement, processorConfiguration, processGroupConfiguration, controllerServices, remoteProcessGroupConfiguration, remoteProcessGroupPorts, portConfiguration, labelConfiguration, processorDetails, portDetails, connectionDetails, remoteProcessGroupDetails, nfGoto, angularBridge, appCtrl, appConfig, serviceProvider, breadcrumbsCtrl, headerCtrl, flowStatusCtrl, globalMenuCtrl, toolboxCtrl, processorComponent, inputPortComponent, outputPortComponent, processGroupComponent, remoteProcessGroupComponent, funnelComponent, templateComponent, labelComponent, graphControlsCtrl, navigateCtrl, operateCtrl, breadcrumbsDirective, draggableDirective) { + return factory($, angular, common, canvasUtils, errorHandler, client, clusterSummary, dialog, storage, canvas, graph, contextMenu, shell, settings, actions, snippet, queueListing, componentState, draggable, connectable, statusHistory, birdseye, connectionConfiguration, controllerService, reportingTask, policyManagement, processorConfiguration, processGroupConfiguration, controllerServices, remoteProcessGroupConfiguration, remoteProcessGroupPorts, portConfiguration, labelConfiguration, processorDetails, portDetails, connectionDetails, remoteProcessGroupDetails, nfGoto, angularBridge, appCtrl, appConfig, serviceProvider, breadcrumbsCtrl, headerCtrl, flowStatusCtrl, globalMenuCtrl, toolboxCtrl, processorComponent, inputPortComponent, outputPortComponent, processGroupComponent, remoteProcessGroupComponent, funnelComponent, templateComponent, labelComponent, graphControlsCtrl, navigateCtrl, operateCtrl, breadcrumbsDirective, draggableDirective); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = factory(require('jquery'), + require('angular'), + require('nf.Common'), + require('nf.CanvasUtils'), + require('nf.ErrorHandler'), + require('nf.Client'), + require('nf.ClusterSummary'), + require('nf.Dialog'), + require('f.Storage'), + require('nf.Canvas'), + require('nf.Graph'), + require('nf.ContextMenu'), + require('nf.Shell'), + require('nf.Settings'), + require('nf.Actions'), + require('nf.Snippet'), + require('nf.QueueListing'), + require('nf.ComponentState'), + require('nf.Draggable'), + require('nf.Connectable'), + require('nf.StatusHistory'), + require('nf.Birdseye'), + require('nf.ConnectionConfiguration'), + require('nf.ControllerService'), + require('nf.ReportingTask'), + require('nf.PolicyManagement'), + require('nf.ProcessorConfiguration'), + require('nf.ProcessGroupConfiguration'), + require('nf.ControllerServices'), + require('nf.RemoteProcessGroupConfiguration'), + require('nf.RemoteProcessGroupPorts'), + require('nf.PortConfiguration'), + require('nf.LabelConfiguration'), + require('nf.ProcessorDetails'), + require('nf.PortDetails'), + require('nf.ConnectionDetails'), + require('nf.RemoteProcessGroupDetails'), + require('nf.GoTo'), + require('nf.ng.Bridge'), + require('nf.ng.AppCtrl'), + require('nf.ng.AppConfig'), + require('nf.ng.ServiceProvider'), + require('nf.ng.BreadcrumbsCtrl'), + require('nf.ng.Canvas.HeaderCtrl'), + require('nf.ng.Canvas.FlowStatusCtrl'), + require('nf.ng.Canvas.GlobalMenuCtrl'), + require('nf.ng.Canvas.ToolboxCtrl'), + require('nf.ng.ProcessorComponent'), + require('nf.ng.InputPortComponent'), + require('nf.ng.OutputPortComponent'), + require('nf.ng.GroupComponent'), + require('nf.ng.RemoteProcessGroupComponent'), + require('nf.ng.FunnelComponent'), + require('nf.ng.TemplateComponent'), + require('nf.ng.LabelComponent'), + require('nf.ng.Canvas.GraphControlsCtrl'), + require('nf.ng.Canvas.NavigateCtrl'), + require('nf.ng.Canvas.OperateCtrl'), + require('nf.ng.BreadcrumbsDirective'), + require('nf.ng.DraggableDirective')); + } else { + factory(root.$, + root.angular, + root.nf.Common, + root.nf.CanvasUtils, + root.nf.ErrorHandler, + root.nf.Client, + root.nf.ClusterSummary, + root.nf.Dialog, + root.nf.Storage, + root.nf.Canvas, + root.nf.Graph, + root.nf.ContextMenu, + root.nf.Shell, + root.nf.Settings, + root.nf.Actions, + root.nf.Snippet, + root.nf.QueueListing, + root.nf.ComponentState, + root.nf.Draggable, + root.nf.Connectable, + root.nf.StatusHistory, + root.nf.Birdseye, + root.nf.ConnectionConfiguration, + root.nf.ControllerService, + root.nf.ReportingTask, + root.nf.PolicyManagement, + root.nf.ProcessorConfiguration, + root.nf.ProcessGroupConfiguration, + root.nf.ControllerServices, + root.nf.RemoteProcessGroupConfiguration, + root.nf.RemoteProcessGroupPorts, + root.nf.PortConfiguration, + root.nf.LabelConfiguration, + root.nf.ProcessorDetails, + root.nf.PortDetails, + root.nf.ConnectionDetails, + root.nf.RemoteProcessGroupDetails, + root.nf.GoTo, + root.nf.ng.Bridge, + root.nf.ng.AppCtrl, + root.nf.ng.AppConfig, + root.nf.ng.ServiceProvider, + root.nf.ng.BreadcrumbsCtrl, + root.nf.ng.Canvas.HeaderCtrl, + root.nf.ng.Canvas.FlowStatusCtrl, + root.nf.ng.Canvas.GlobalMenuCtrl, + root.nf.ng.Canvas.ToolboxCtrl, + root.nf.ng.ProcessorComponent, + root.nf.ng.InputPortComponent, + root.nf.ng.OutputPortComponent, + root.nf.ng.GroupComponent, + root.nf.ng.RemoteProcessGroupComponent, + root.nf.ng.FunnelComponent, + root.nf.ng.TemplateComponent, + root.nf.ng.LabelComponent, + root.nf.ng.Canvas.GraphControlsCtrl, + root.nf.ng.Canvas.NavigateCtrl, + root.nf.ng.Canvas.OperateCtrl, + root.nf.ng.BreadcrumbsDirective, + root.nf.ng.DraggableDirective); + } +}(this, function ($, angular, common, canvasUtils, errorHandler, client, clusterSummary, dialog, storage, canvas, graph, contextMenu, shell, settings, actions, snippet, queueListing, componentState, draggable, connectable, statusHistory, birdseye, connectionConfiguration, controllerService, reportingTask, policyManagement, processorConfiguration, processGroupConfiguration, controllerServices, remoteProcessGroupConfiguration, remoteProcessGroupPorts, portConfiguration, labelConfiguration, processorDetails, portDetails, connectionDetails, remoteProcessGroupDetails, nfGoto, angularBridge, appCtrl, appConfig, serviceProvider, breadcrumbsCtrl, headerCtrl, flowStatusCtrl, globalMenuCtrl, toolboxCtrl, processorComponent, inputPortComponent, outputPortComponent, processGroupComponent, remoteProcessGroupComponent, funnelComponent, templateComponent, labelComponent, graphControlsCtrl, navigateCtrl, operateCtrl, breadcrumbsDirective, draggableDirective) { + + var config = { + urls: { + flowConfig: '../nifi-api/flow/config' + } + }; + + /** + * Bootstrap the canvas application. + */ + $(document).ready(function () { + if (canvas.SUPPORTS_SVG) { + + //Create Angular App + var app = angular.module('ngCanvasApp', ['ngResource', 'ngRoute', 'ngMaterial', 'ngMessages']); + + //Define Dependency Injection Annotations + appConfig.$inject = ['$mdThemingProvider', '$compileProvider']; + appCtrl.$inject = ['$scope', 'serviceProvider', '$compile', 'headerCtrl', 'graphControlsCtrl']; + serviceProvider.$inject = []; + breadcrumbsCtrl.$inject = ['serviceProvider']; + headerCtrl.$inject = ['serviceProvider', 'toolboxCtrl', 'globalMenuCtrl', 'flowStatusCtrl']; + flowStatusCtrl.$inject = ['serviceProvider']; + globalMenuCtrl.$inject = ['serviceProvider']; + toolboxCtrl.$inject = ['processorComponent', + 'inputPortComponent', + 'outputPortComponent', + 'groupComponent', + 'remoteGroupComponent', + 'funnelComponent', + 'templateComponent', + 'labelComponent']; + processorComponent.$inject = ['serviceProvider']; + inputPortComponent.$inject = ['serviceProvider']; + outputPortComponent.$inject = ['serviceProvider']; + processGroupComponent.$inject = ['serviceProvider']; + remoteProcessGroupComponent.$inject = ['serviceProvider']; + funnelComponent.$inject = ['serviceProvider']; + templateComponent.$inject = ['serviceProvider']; + labelComponent.$inject = ['serviceProvider']; + graphControlsCtrl.$inject = ['serviceProvider', 'navigateCtrl', 'operateCtrl']; + navigateCtrl.$inject = []; + operateCtrl.$inject = []; + breadcrumbsDirective.$inject = ['breadcrumbsCtrl']; + draggableDirective.$inject = []; + + //Configure Angular App + app.config(appConfig); + + //Define Angular App Controllers + app.controller('ngCanvasAppCtrl', appCtrl); + + //Define Angular App Services + app.service('serviceProvider', serviceProvider); + app.service('breadcrumbsCtrl', breadcrumbsCtrl); + app.service('headerCtrl', headerCtrl); + app.service('flowStatusCtrl', flowStatusCtrl); + app.service('globalMenuCtrl', globalMenuCtrl); + app.service('toolboxCtrl', toolboxCtrl); + app.service('processorComponent', processorComponent); + app.service('inputPortComponent', inputPortComponent); + app.service('outputPortComponent', outputPortComponent); + app.service('groupComponent', processGroupComponent); + app.service('remoteGroupComponent', remoteProcessGroupComponent); + app.service('funnelComponent', funnelComponent); + app.service('templateComponent', templateComponent); + app.service('labelComponent', labelComponent); + app.service('graphControlsCtrl', graphControlsCtrl); + app.service('navigateCtrl', navigateCtrl); + app.service('operateCtrl', operateCtrl); + + //Define Angular App Directives + app.directive('nfBreadcrumbs', breadcrumbsDirective); + app.directive('nfDraggable', draggableDirective); + + // initialize the canvas utils and invert control of the canvas, + // actions, snippet, birdseye, and graph + canvasUtils.init(canvas, actions, snippet, birdseye, graph); + + //Manually Boostrap Angular App + angularBridge.injector = angular.bootstrap($('body'), ['ngCanvasApp'], {strictDi: true}); + + // initialize the NiFi + var userXhr = canvas.init(); + + userXhr.done(function () { + // load the client id + var clientXhr = client.init(); + + // get the controller config to register the status poller + var configXhr = $.ajax({ + type: 'GET', + url: config.urls.flowConfig, + dataType: 'json' + }); + + // ensure the config requests are loaded + $.when(configXhr, clusterSummary.loadClusterSummary(), userXhr, clientXhr).done(function (configResult) { + var configResponse = configResult[0]; + + // calculate the canvas offset + var canvasContainer = $('#canvas-container'); + canvas.CANVAS_OFFSET = canvasContainer.offset().top; + + // get the config details + var configDetails = configResponse.flowConfiguration; + + // show disconnected message on load if necessary + if (clusterSummary.isClustered() && !clusterSummary.isConnectedToCluster()) { + dialog.showDisconnectedFromClusterMessage(); + } + + // get the auto refresh interval + var autoRefreshIntervalSeconds = parseInt(configDetails.autoRefreshIntervalSeconds, 10); + + // record whether we can configure the authorizer + canvas.setConfigurableAuthorizer(configDetails.supportsConfigurableAuthorizer); + + // init storage + storage.init(); + + // initialize the application + canvas.initCanvas(); + canvas.View.init(); + // initialize the context menu and invert control of the actions + contextMenu.init(actions); + // initialize the shell and invert control of the context menu + shell.init(contextMenu); + angularBridge.injector.get('headerCtrl').init(); + settings.init(); + actions.init(); + queueListing.init(); + componentState.init(); + + // initialize the component behaviors + draggable.init(); + connectable.init(); + + // initialize the chart + statusHistory.init(configDetails.timeOffset); + + // initialize the birdseye + birdseye.init(graph); + + // initialize the connection config and invert control of the birdseye and graph + connectionConfiguration.init(birdseye, graph); + controllerService.init(); + reportingTask.init(settings); + policyManagement.init(); + processorConfiguration.init(); + // initialize the PG config and invert control of the controllerServices + processGroupConfiguration.init(controllerServices); + remoteProcessGroupConfiguration.init(); + remoteProcessGroupPorts.init(); + portConfiguration.init(); + labelConfiguration.init(); + processorDetails.init(true); + portDetails.init(); + connectionDetails.init(); + remoteProcessGroupDetails.init(); + nfGoto.init(); + graph.init().done(function () { + angularBridge.injector.get('graphControlsCtrl').init(); + + // determine the split between the polling + var pollingSplit = autoRefreshIntervalSeconds / 2; + + // register the polling + setTimeout(function () { + canvas.startPolling(autoRefreshIntervalSeconds); + }, pollingSplit * 1000); + + // hide the splash screen + canvas.hideSplash(); + }).fail(errorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); + + //initialize toolbox components tooltips + $('.component-button').qtip($.extend({}, common.config.tooltipConfig)); + } else { + $('#message-title').text('Unsupported Browser'); + $('#message-content').text('Flow graphs are shown using SVG. Please use a browser that supports rendering SVG.'); + + // show the error pane + $('#message-pane').show(); + + // hide the splash screen + canvas.hideSplash(); + } + }); +})); diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-error-handler.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-error-handler.js index 88dc4ec555..a4879d20df 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-error-handler.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-error-handler.js @@ -15,22 +15,34 @@ * limitations under the License. */ -/* global nf, define, module, require, exports */ +/* global define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { - define(['nf.ErrorHandler', 'nf.Common', 'nf.Canvas', 'nf.ContextMenu'], function (ajaxErrorHandler, common, canvas, contextMenu) { - return (nf.ErrorHandler = factory(ajaxErrorHandler, common, canvas, contextMenu)); - }); + define(['nf.ErrorHandler', + 'nf.Common', + 'nf.Canvas', + 'nf.ContextMenu'], + function (ajaxErrorHandler, common, canvas, contextMenu) { + return (nf.ErrorHandler = factory(ajaxErrorHandler, common, canvas, contextMenu)); + }); } else if (typeof exports === 'object' && typeof module === 'object') { - module.exports = (nf.ErrorHandler = factory(require('nf.ErrorHandler'), require('nf.Common'), require('nf.Canvas'), require('nf.ContextMenu'))); + module.exports = (nf.ErrorHandler = + factory(require('nf.ErrorHandler'), + require('nf.Common'), + require('nf.Canvas'), + require('nf.ContextMenu'))); } else { - nf.ErrorHandler = factory(root.nf.ErrorHandler, root.nf.Common, root.nf.Canvas, root.nf.ContextMenu); + nf.ErrorHandler = factory(root.nf.ErrorHandler, + root.nf.Common, + root.nf.Canvas, + root.nf.ContextMenu); } }(this, function (ajaxErrorHandler, common, canvas, contextMenu) { 'use strict'; return { + /** * Method for handling ajax errors. This also closes the canvas. * diff --git a/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-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js index 05bf2afe07..4be72993a9 100644 --- a/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-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js @@ -14,10 +14,44 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +/* global define, module, require, exports */ -/* global nf, d3 */ +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['d3', + 'jquery', + 'nf.Common', + 'nf.Dialog', + 'nf.Clipboard', + 'nf.Storage'], + function (d3, $, common, dialog, clipboard, storage) { + return (nf.CanvasUtils = factory(d3, $, common, dialog, clipboard, storage)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.CanvasUtils = factory( + require('d3'), + require('jquery'), + require('nf.Common'), + require('nf.Dialog'), + require('nf.Clipboard'), + require('nf.Storage'))); + } else { + nf.CanvasUtils = factory( + root.d3, + root.$, + root.nf.Common, + root.nf.Dialog, + root.nf.Clipboard, + root.nf.Storage); + } +}(this, function (d3, $, common, dialog, clipboard, storage) { + 'use strict'; -nf.CanvasUtils = (function () { + var nfCanvas; + var nfActions; + var nfSnippet; + var nfBirdseye; + var nfGraph; var config = { storage: { @@ -50,14 +84,14 @@ nf.CanvasUtils = (function () { return mid; }; - + var moveComponents = function (components, groupId) { return $.Deferred(function (deferred) { // create a snippet for the specified components - var snippet = nf.Snippet.marshal(components); - nf.Snippet.create(snippet).done(function (response) { + var snippet = nfSnippet.marshal(components); + nfSnippet.create(snippet).done(function (response) { // move the snippet into the target - nf.Snippet.move(response.snippet.id, groupId).done(function () { + nfSnippet.move(response.snippet.id, groupId).done(function () { var componentMap = d3.map(); // add the id to the type's array @@ -75,22 +109,41 @@ nf.CanvasUtils = (function () { // refresh all component types as necessary (handle components that have been removed) componentMap.forEach(function (type, ids) { - nf[type].remove(ids); - }); + nfCanvasUtils.getComponentByType(type).remove(ids); + });

 // refresh the birdseye - nf.Birdseye.refresh(); + nfBirdseye.refresh(); + deferred.resolve(); - }).fail(nf.Common.handleAjaxError).fail(function () { + }).fail(common.handleAjaxError).fail(function () { deferred.reject(); }); - }).fail(nf.Common.handleAjaxError).fail(function () { + }).fail(common.handleAjaxError).fail(function () { deferred.reject(); }); }).promise(); }; - return { + var nfCanvasUtils = { + + /** + * Initialize the canvas utils. + * + * @param canvas The reference to the canvas controller. + * @param actions The reference to the actions controller. + * @param snippet The reference to the snippet controller. + * @param birdseye The reference to the birdseye controller. + * @param graph The reference to the graph controller. + */ + init: function(canvas, actions, snippet, birdseye, graph){ + nfCanvas = canvas; + nfActions = actions; + nfSnippet = snippet; + nfBirdseye = birdseye; + nfGraph = graph; + }, + config: { systemTooltipConfig: { style: { @@ -110,10 +163,19 @@ nf.CanvasUtils = (function () { } }, + /** + * Gets a graph component `type`. + * + * @param type The type of component. + */ + getComponentByType: function (type) { + return nfGraph.getComponentByType(type); + }, + /** * Calculates the point on the specified bounding box that is closest to the * specified point. - * + * * @param {object} p The point * @param {object} bBox The bounding box */ @@ -170,7 +232,7 @@ nf.CanvasUtils = (function () { }; } }, - + /** * Shows the specified component in the specified group. * @@ -179,19 +241,19 @@ nf.CanvasUtils = (function () { */ showComponent: function (groupId, componentId) { // ensure the group id is specified - if (nf.Common.isDefinedAndNotNull(groupId)) { + if (common.isDefinedAndNotNull(groupId)) { // initiate a graph refresh var refreshGraph = $.Deferred(function (deferred) { // load a different group if necessary - if (groupId !== nf.Canvas.getGroupId()) { + if (groupId !== nfCanvas.getGroupId()) { // set the new group id - nf.Canvas.setGroupId(groupId); + nfCanvas.setGroupId(groupId); // reload - nf.Canvas.reload().done(function () { + nfCanvas.reload().done(function () { deferred.resolve(); }).fail(function () { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Process Group', dialogContent: 'Unable to load the group for the specified component.' }); @@ -207,9 +269,9 @@ nf.CanvasUtils = (function () { // attempt to locate the corresponding component var component = d3.select('#id-' + componentId); if (!component.empty()) { - nf.Actions.show(component); + nfActions.show(component); } else { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Process Group', dialogContent: 'Unable to find the specified component.' }); @@ -217,10 +279,10 @@ nf.CanvasUtils = (function () { }); } }, - + /** * Gets the currently selected components and connections. - * + * * @returns {selection} The currently selected components and connections */ getSelection: function () { @@ -229,11 +291,11 @@ nf.CanvasUtils = (function () { /** * Centers the specified bounding box. - * + * * @param {type} boundingBox */ centerBoundingBox: function (boundingBox) { - var scale = nf.Canvas.View.scale(); + var scale = nfCanvas.View.scale(); // get the canvas normalized width and height var canvasContainer = $('#canvas-container'); @@ -244,32 +306,32 @@ nf.CanvasUtils = (function () { var center = [(screenWidth / 2) - (boundingBox.width / 2), (screenHeight / 2) - (boundingBox.height / 2)]; // calculate the difference between the center point and the position of this component and convert to screen space - nf.Canvas.View.translate([(center[0] - boundingBox.x) * scale, (center[1] - boundingBox.y) * scale]); + nfCanvas.View.translate([(center[0] - boundingBox.x) * scale, (center[1] - boundingBox.y) * scale]); }, /** * Enables/disables the editable behavior for the specified selection based on their access policies. - * + * * @param selection selection */ - editable: function (selection) { - if (nf.CanvasUtils.canModify(selection)) { + editable: function (selection, connectable, draggable) { + if (nfCanvasUtils.canModify(selection)) { if (!selection.classed('connectable')) { - selection.call(nf.Connectable.activate); + selection.call(connectable.activate); } if (!selection.classed('moveable')) { - selection.call(nf.Draggable.activate); + selection.call(draggable.activate); } } else { if (selection.classed('connectable')) { - selection.call(nf.Connectable.deactivate); + selection.call(connectable.deactivate); } if (selection.classed('moveable')) { - selection.call(nf.Draggable.deactivate); + selection.call(draggable.deactivate); } } }, - + /** * Conditionally apply the transition. * @@ -286,23 +348,23 @@ nf.CanvasUtils = (function () { /** * Position the component accordingly. - * + * * @param {selection} updated */ position: function (updated, transition) { if (updated.empty()) { return; } - - return nf.CanvasUtils.transition(updated, transition) + + return nfCanvasUtils.transition(updated, transition) .attr('transform', function (d) { return 'translate(' + d.position.x + ', ' + d.position.y + ')'; }); }, - + /** * Applies single line ellipsis to the component in the specified selection if necessary. - * + * * @param {selection} selection * @param {string} text */ @@ -335,11 +397,11 @@ nf.CanvasUtils = (function () { selection.text(text.substring(0, i) + String.fromCharCode(8230)); } }, - + /** * Applies multiline ellipsis to the component in the specified seleciton. Text will * wrap for the specified number of lines. The last line will be ellipsis if necessary. - * + * * @param {selection} selection * @param {integer} lineCount * @param {string} text @@ -355,15 +417,15 @@ nf.CanvasUtils = (function () { var line = []; var tspan = selection.append('tspan') - .attr({ - 'x': x, - 'y': y, - 'width': width - }); + .attr({ + 'x': x, + 'y': y, + 'width': width + }); // go through each word var word = words.pop(); - while (nf.Common.isDefinedAndNotNull(word)) { + while (common.isDefinedAndNotNull(word)) { // add the current word line.push(word); @@ -380,20 +442,20 @@ nf.CanvasUtils = (function () { // create the tspan for the next line tspan = selection.append('tspan') - .attr({ - 'x': x, - 'dy': '1.2em', - 'width': width - }); + .attr({ + 'x': x, + 'dy': '1.2em', + 'width': width + }); // if we've reached the last line, use single line ellipsis if (++i >= lineCount) { - // get the remainder using the current word and + // get the remainder using the current word and // reversing whats left var remainder = [word].concat(words.reverse()); // apply ellipsis to the last line - nf.CanvasUtils.ellipsis(tspan, remainder.join(' ')); + nfCanvasUtils.ellipsis(tspan, remainder.join(' ')); // we've reached the line count break; @@ -409,52 +471,52 @@ nf.CanvasUtils = (function () { word = words.pop(); } }, - + /** * Updates the active thread count on the specified selection. - * + * * @param {selection} selection The selection * @param {object} d The data * @param {function} setOffset Optional function to handle the width of the active thread count component - * @return + * @return */ activeThreadCount: function (selection, d, setOffset) { // if there is active threads show the count, otherwise hide if (d.status.aggregateSnapshot.activeThreadCount > 0) { // update the active thread count var activeThreadCount = selection.select('text.active-thread-count') - .text(function () { - return d.status.aggregateSnapshot.activeThreadCount; - }) - .style('display', 'block') - .each(function () { - var bBox = this.getBBox(); - d3.select(this).attr('x', function () { - return d.dimensions.width - bBox.width - 15; - }); + .text(function () { + return d.status.aggregateSnapshot.activeThreadCount; + }) + .style('display', 'block') + .each(function () { + var bBox = this.getBBox(); + d3.select(this).attr('x', function () { + return d.dimensions.width - bBox.width - 15; }); + }); // update the background width selection.select('text.active-thread-count-icon') - .attr('x', function () { - var bBox = activeThreadCount.node().getBBox(); + .attr('x', function () { + var bBox = activeThreadCount.node().getBBox(); - // update the offset - if (typeof setOffset === 'function') { - setOffset(bBox.width + 6); - } + // update the offset + if (typeof setOffset === 'function') { + setOffset(bBox.width + 6); + } - return d.dimensions.width - bBox.width - 20; - }) - .style('display', 'block'); + return d.dimensions.width - bBox.width - 20; + }) + .style('display', 'block'); } else { selection.selectAll('text.active-thread-count, text.active-thread-count-icon').style('display', 'none'); } }, - + /** * Disables the default browser behavior of following image href when control clicking. - * + * * @param {selection} selection The image */ disableImageHref: function (selection) { @@ -464,30 +526,30 @@ nf.CanvasUtils = (function () { } }); }, - + /** * Handles component bulletins. - * + * * @param {selection} selection The component * @param {object} d The data * @param {function} getTooltipContainer Function to get the tooltip container * @param {function} offset Optional offset */ bulletins: function (selection, d, getTooltipContainer, offset) { - offset = nf.Common.isDefinedAndNotNull(offset) ? offset : 0; + offset = common.isDefinedAndNotNull(offset) ? offset : 0; // get the tip var tip = d3.select('#bulletin-tip-' + d.id); var hasBulletins = false; - if (!nf.Common.isEmpty(d.bulletins)) { + if (!common.isEmpty(d.bulletins)) { // format the bulletins - var bulletins = nf.Common.getFormattedBulletins(d.bulletins); + var bulletins = common.getFormattedBulletins(d.bulletins); hasBulletins = bulletins.length > 0; if (hasBulletins) { // create the unordered list based off the formatted bulletins - var list = nf.Common.formatUnorderedList(bulletins); + var list = common.formatUnorderedList(bulletins); } } @@ -495,24 +557,24 @@ nf.CanvasUtils = (function () { if (hasBulletins) { // update the tooltip selection.select('text.bulletin-icon') - .each(function () { - // create the tip if necessary - if (tip.empty()) { - tip = getTooltipContainer().append('div') - .attr('id', function () { - return 'bulletin-tip-' + d.id; - }) - .attr('class', 'tooltip nifi-tooltip'); - } + .each(function () { + // create the tip if necessary + if (tip.empty()) { + tip = getTooltipContainer().append('div') + .attr('id', function () { + return 'bulletin-tip-' + d.id; + }) + .attr('class', 'tooltip nifi-tooltip'); + } - // add the tooltip - tip.html(function () { - return $('
    ').append(list).html(); - }); - - nf.CanvasUtils.canvasTooltip(tip, d3.select(this)); + // add the tooltip + tip.html(function () { + return $('
    ').append(list).html(); }); + nfCanvasUtils.canvasTooltip(tip, d3.select(this)); + }); + // update the tooltip background selection.select('text.bulletin-icon').style("visibility", "visible"); selection.select('rect.bulletin-background').style("visibility", "visible"); @@ -527,10 +589,10 @@ nf.CanvasUtils = (function () { selection.select('rect.bulletin-background').style("visibility", "hidden"); } }, - + /** * Adds the specified tooltip to the specified target. - * + * * @param {selection} tip The tooltip * @param {selection} target The target of the tooltip */ @@ -538,12 +600,12 @@ nf.CanvasUtils = (function () { target.on('mouseenter', function () { tip.style('top', (d3.event.pageY + 15) + 'px').style('left', (d3.event.pageX + 15) + 'px').style('display', 'block'); }) - .on('mousemove', function () { - tip.style('top', (d3.event.pageY + 15) + 'px').style('left', (d3.event.pageX + 15) + 'px'); - }) - .on('mouseleave', function () { - tip.style('display', 'none'); - }); + .on('mousemove', function () { + tip.style('top', (d3.event.pageY + 15) + 'px').style('left', (d3.event.pageX + 15) + 'px'); + }) + .on('mouseleave', function () { + tip.style('display', 'none'); + }); }, /** @@ -558,7 +620,7 @@ nf.CanvasUtils = (function () { // determine if the current selection is entirely connections var selectedConnections = selection.filter(function(d) { var connection = d3.select(this); - return nf.CanvasUtils.isConnection(connection); + return nfCanvasUtils.isConnection(connection); }); // require multiple selections besides connections @@ -567,16 +629,16 @@ nf.CanvasUtils = (function () { } // require write permissions - if (nf.CanvasUtils.canModify(selection) === false) { + if (nfCanvasUtils.canModify(selection) === false) { canAlign = false; } return canAlign; }, - + /** * Determines if the specified selection is colorable (in a single action). - * + * * @param {selection} selection The selection * @returns {boolean} */ @@ -586,26 +648,26 @@ nf.CanvasUtils = (function () { } // require read and write permissions - if (nf.CanvasUtils.canRead(selection) === false || nf.CanvasUtils.canModify(selection) === false) { + if (nfCanvasUtils.canRead(selection) === false || nfCanvasUtils.canModify(selection) === false) { return false; } - + // determine if the current selection is entirely processors or labels var selectedProcessors = selection.filter(function(d) { var processor = d3.select(this); - return nf.CanvasUtils.isProcessor(processor) && nf.CanvasUtils.canModify(processor); + return nfCanvasUtils.isProcessor(processor) && nfCanvasUtils.canModify(processor); }); var selectedLabels = selection.filter(function(d) { var label = d3.select(this); - return nf.CanvasUtils.isLabel(label) && nf.CanvasUtils.canModify(label); + return nfCanvasUtils.isLabel(label) && nfCanvasUtils.canModify(label); }); var allProcessors = selectedProcessors.size() === selection.size(); var allLabels = selectedLabels.size() === selection.size(); - + return allProcessors || allLabels; }, - + /** * Determines if the specified selection is a connection. * @@ -614,7 +676,7 @@ nf.CanvasUtils = (function () { isConnection: function (selection) { return selection.classed('connection'); }, - + /** * Determines if the specified selection is a remote process group. * @@ -623,7 +685,7 @@ nf.CanvasUtils = (function () { isRemoteProcessGroup: function (selection) { return selection.classed('remote-process-group'); }, - + /** * Determines if the specified selection is a processor. * @@ -632,7 +694,7 @@ nf.CanvasUtils = (function () { isProcessor: function (selection) { return selection.classed('processor'); }, - + /** * Determines if the specified selection is a label. * @@ -641,7 +703,7 @@ nf.CanvasUtils = (function () { isLabel: function (selection) { return selection.classed('label'); }, - + /** * Determines if the specified selection is an input port. * @@ -650,7 +712,7 @@ nf.CanvasUtils = (function () { isInputPort: function (selection) { return selection.classed('input-port'); }, - + /** * Determines if the specified selection is an output port. * @@ -659,7 +721,7 @@ nf.CanvasUtils = (function () { isOutputPort: function (selection) { return selection.classed('output-port'); }, - + /** * Determines if the specified selection is a process group. * @@ -668,7 +730,7 @@ nf.CanvasUtils = (function () { isProcessGroup: function (selection) { return selection.classed('process-group'); }, - + /** * Determines if the specified selection is a funnel. * @@ -677,7 +739,7 @@ nf.CanvasUtils = (function () { isFunnel: function (selection) { return selection.classed('funnel'); }, - + /** * Determines if the components in the specified selection are runnable. * @@ -691,7 +753,7 @@ nf.CanvasUtils = (function () { var runnable = true; selection.each(function () { - if (!nf.CanvasUtils.isRunnable(d3.select(this))) { + if (!nfCanvasUtils.isRunnable(d3.select(this))) { runnable = false; return false; } @@ -699,7 +761,7 @@ nf.CanvasUtils = (function () { return runnable; }, - + /** * Determines if the component in the specified selection is runnable. * @@ -711,23 +773,23 @@ nf.CanvasUtils = (function () { return false; } - if (nf.CanvasUtils.isProcessGroup(selection)) { + if (nfCanvasUtils.isProcessGroup(selection)) { return true; } - if (nf.CanvasUtils.canModify(selection) === false) { + if (nfCanvasUtils.canModify(selection) === false) { return false; } var runnable = false; var selectionData = selection.datum(); - if (nf.CanvasUtils.isProcessor(selection) || nf.CanvasUtils.isInputPort(selection) || nf.CanvasUtils.isOutputPort(selection)) { - runnable = nf.CanvasUtils.supportsModification(selection) && selectionData.status.aggregateSnapshot.runStatus === 'Stopped'; + if (nfCanvasUtils.isProcessor(selection) || nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection)) { + runnable = nfCanvasUtils.supportsModification(selection) && selectionData.status.aggregateSnapshot.runStatus === 'Stopped'; } return runnable; }, - + /** * Determines if the components in the specified selection are stoppable. * @@ -741,7 +803,7 @@ nf.CanvasUtils = (function () { var stoppable = true; selection.each(function () { - if (!nf.CanvasUtils.isStoppable(d3.select(this))) { + if (!nfCanvasUtils.isStoppable(d3.select(this))) { stoppable = false; return false; } @@ -749,7 +811,7 @@ nf.CanvasUtils = (function () { return stoppable; }, - + /** * Determines if the component in the specified selection is runnable. * @@ -761,17 +823,17 @@ nf.CanvasUtils = (function () { return false; } - if (nf.CanvasUtils.isProcessGroup(selection)) { + if (nfCanvasUtils.isProcessGroup(selection)) { return true; } - if (nf.CanvasUtils.canModify(selection) === false) { + if (nfCanvasUtils.canModify(selection) === false) { return false; } var stoppable = false; var selectionData = selection.datum(); - if (nf.CanvasUtils.isProcessor(selection) || nf.CanvasUtils.isInputPort(selection) || nf.CanvasUtils.isOutputPort(selection)) { + if (nfCanvasUtils.isProcessor(selection) || nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection)) { stoppable = selectionData.status.aggregateSnapshot.runStatus === 'Running'; } @@ -789,9 +851,9 @@ nf.CanvasUtils = (function () { var selectedData = selected.datum(); // ensure its a processor, input port, or output port and supports modification and is disabled (can enable) - return ((nf.CanvasUtils.isProcessor(selected) || nf.CanvasUtils.isInputPort(selected) || nf.CanvasUtils.isOutputPort(selected)) && - nf.CanvasUtils.supportsModification(selected) && - selectedData.status.aggregateSnapshot.runStatus === 'Disabled'); + return ((nfCanvasUtils.isProcessor(selected) || nfCanvasUtils.isInputPort(selected) || nfCanvasUtils.isOutputPort(selected)) && + nfCanvasUtils.supportsModification(selected) && + selectedData.status.aggregateSnapshot.runStatus === 'Disabled'); }); }, @@ -805,11 +867,11 @@ nf.CanvasUtils = (function () { return false; } - if (nf.CanvasUtils.canModify(selection) === false) { + if (nfCanvasUtils.canModify(selection) === false) { return false; } - return nf.CanvasUtils.filterEnable(selection).size() === selection.size(); + return nfCanvasUtils.filterEnable(selection).size() === selection.size(); }, /** @@ -823,10 +885,10 @@ nf.CanvasUtils = (function () { var selectedData = selected.datum(); // ensure its a processor, input port, or output port and supports modification and is stopped (can disable) - return ((nf.CanvasUtils.isProcessor(selected) || nf.CanvasUtils.isInputPort(selected) || nf.CanvasUtils.isOutputPort(selected)) && - nf.CanvasUtils.supportsModification(selected) && - (selectedData.status.aggregateSnapshot.runStatus === 'Stopped' || - selectedData.status.aggregateSnapshot.runStatus === 'Invalid')); + return ((nfCanvasUtils.isProcessor(selected) || nfCanvasUtils.isInputPort(selected) || nfCanvasUtils.isOutputPort(selected)) && + nfCanvasUtils.supportsModification(selected) && + (selectedData.status.aggregateSnapshot.runStatus === 'Stopped' || + selectedData.status.aggregateSnapshot.runStatus === 'Invalid')); }); }, @@ -840,11 +902,11 @@ nf.CanvasUtils = (function () { return false; } - if (nf.CanvasUtils.canModify(selection) === false) { + if (nfCanvasUtils.canModify(selection) === false) { return false; } - return nf.CanvasUtils.filterDisable(selection).size() === selection.size(); + return nfCanvasUtils.filterDisable(selection).size() === selection.size(); }, @@ -861,7 +923,7 @@ nf.CanvasUtils = (function () { var canStartTransmitting = true; selection.each(function () { - if (!nf.CanvasUtils.canStartTransmitting(d3.select(this))) { + if (!nfCanvasUtils.canStartTransmitting(d3.select(this))) { canStartTransmitting = false; } }); @@ -878,13 +940,13 @@ nf.CanvasUtils = (function () { return false; } - if (nf.CanvasUtils.canModify(selection) === false || nf.CanvasUtils.canRead(selection) === false) { + if (nfCanvasUtils.canModify(selection) === false || nfCanvasUtils.canRead(selection) === false) { return false; } - return nf.CanvasUtils.isRemoteProcessGroup(selection); + return nfCanvasUtils.isRemoteProcessGroup(selection); }, - + /** * Determines if the specified selection can all stop transmitting. * @@ -898,13 +960,13 @@ nf.CanvasUtils = (function () { var canStopTransmitting = true; selection.each(function () { - if (!nf.CanvasUtils.canStopTransmitting(d3.select(this))) { + if (!nfCanvasUtils.canStopTransmitting(d3.select(this))) { canStopTransmitting = false; } }); return canStopTransmitting; }, - + /** * Determines if the specified selection can stop transmission. * @@ -915,11 +977,11 @@ nf.CanvasUtils = (function () { return false; } - if (nf.CanvasUtils.canModify(selection) === false || nf.CanvasUtils.canRead(selection) === false) { + if (nfCanvasUtils.canModify(selection) === false || nfCanvasUtils.canRead(selection) === false) { return false; } - return nf.CanvasUtils.isRemoteProcessGroup(selection); + return nfCanvasUtils.isRemoteProcessGroup(selection); }, /** @@ -935,7 +997,7 @@ nf.CanvasUtils = (function () { var isDeletable = true; selection.each(function () { - if (!nf.CanvasUtils.isDeletable(d3.select(this))) { + if (!nfCanvasUtils.isDeletable(d3.select(this))) { isDeletable = false; } }); @@ -954,15 +1016,15 @@ nf.CanvasUtils = (function () { } // ensure the user has write permissions to the current process group - if (nf.Canvas.canWrite() === false) { + if (nfCanvas.canWrite() === false) { return false; } - if (nf.CanvasUtils.canModify(selection) === false) { + if (nfCanvasUtils.canModify(selection) === false) { return false; } - return nf.CanvasUtils.supportsModification(selection); + return nfCanvasUtils.supportsModification(selection); }, /** @@ -976,17 +1038,17 @@ nf.CanvasUtils = (function () { return false; } - if (nf.CanvasUtils.isProcessGroup(selection)) { + if (nfCanvasUtils.isProcessGroup(selection)) { return true; } - if (nf.CanvasUtils.canRead(selection) === false || nf.CanvasUtils.canModify(selection) === false) { + if (nfCanvasUtils.canRead(selection) === false || nfCanvasUtils.canModify(selection) === false) { return false; } - if (nf.CanvasUtils.isFunnel(selection)) { + if (nfCanvasUtils.isFunnel(selection)) { return false; } - return nf.CanvasUtils.supportsModification(selection); + return nfCanvasUtils.supportsModification(selection); }, /** @@ -1000,15 +1062,15 @@ nf.CanvasUtils = (function () { return false; } - if (nf.CanvasUtils.canRead(selection) === false) { + if (nfCanvasUtils.canRead(selection) === false) { return false; } - if (nf.CanvasUtils.canModify(selection)) { - if (nf.CanvasUtils.isProcessor(selection) || nf.CanvasUtils.isInputPort(selection) || nf.CanvasUtils.isOutputPort(selection) || nf.CanvasUtils.isRemoteProcessGroup(selection) || nf.CanvasUtils.isConnection(selection)) { - return !nf.CanvasUtils.isConfigurable(selection); + if (nfCanvasUtils.canModify(selection)) { + if (nfCanvasUtils.isProcessor(selection) || nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection) || nfCanvasUtils.isRemoteProcessGroup(selection) || nfCanvasUtils.isConnection(selection)) { + return !nfCanvasUtils.isConfigurable(selection); } } else { - return nf.CanvasUtils.isProcessor(selection) || nf.CanvasUtils.isConnection(selection) || nf.CanvasUtils.isInputPort(selection) || nf.CanvasUtils.isOutputPort(selection) || nf.CanvasUtils.isRemoteProcessGroup(selection); + return nfCanvasUtils.isProcessor(selection) || nfCanvasUtils.isConnection(selection) || nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection) || nfCanvasUtils.isRemoteProcessGroup(selection); } return false; @@ -1025,7 +1087,7 @@ nf.CanvasUtils = (function () { var writableSize = selection.filter(function (d) { return d.permissions.canWrite; }).size(); - + return selectionSize === writableSize; }, @@ -1043,7 +1105,7 @@ nf.CanvasUtils = (function () { return selectionSize === readableSize; }, - + /** * Determines whether the specified selection is in a state to support modification. * @@ -1058,37 +1120,37 @@ nf.CanvasUtils = (function () { var selectionData = selection.datum(); var supportsModification = false; - if (nf.CanvasUtils.isProcessor(selection) || nf.CanvasUtils.isInputPort(selection) || nf.CanvasUtils.isOutputPort(selection)) { + if (nfCanvasUtils.isProcessor(selection) || nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection)) { supportsModification = !(selectionData.status.aggregateSnapshot.runStatus === 'Running' || selectionData.status.aggregateSnapshot.activeThreadCount > 0); - } else if (nf.CanvasUtils.isRemoteProcessGroup(selection)) { + } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) { supportsModification = !(selectionData.status.transmissionStatus === 'Transmitting' || selectionData.status.aggregateSnapshot.activeThreadCount > 0); - } else if (nf.CanvasUtils.isProcessGroup(selection)) { + } else if (nfCanvasUtils.isProcessGroup(selection)) { supportsModification = true; - } else if (nf.CanvasUtils.isFunnel(selection)) { + } else if (nfCanvasUtils.isFunnel(selection)) { supportsModification = true; - } else if (nf.CanvasUtils.isLabel(selection)) { + } else if (nfCanvasUtils.isLabel(selection)) { supportsModification = true; - } else if (nf.CanvasUtils.isConnection(selection)) { + } else if (nfCanvasUtils.isConnection(selection)) { var isSourceConfigurable = false; var isDestinationConfigurable = false; - var sourceComponentId = nf.CanvasUtils.getConnectionSourceComponentId(selectionData); + var sourceComponentId = nfCanvasUtils.getConnectionSourceComponentId(selectionData); var source = d3.select('#id-' + sourceComponentId); if (!source.empty()) { - if (nf.CanvasUtils.isRemoteProcessGroup(source) || nf.CanvasUtils.isProcessGroup(source)) { + if (nfCanvasUtils.isRemoteProcessGroup(source) || nfCanvasUtils.isProcessGroup(source)) { isSourceConfigurable = true; } else { - isSourceConfigurable = nf.CanvasUtils.supportsModification(source); + isSourceConfigurable = nfCanvasUtils.supportsModification(source); } } - var destinationComponentId = nf.CanvasUtils.getConnectionDestinationComponentId(selectionData); + var destinationComponentId = nfCanvasUtils.getConnectionDestinationComponentId(selectionData); var destination = d3.select('#id-' + destinationComponentId); if (!destination.empty()) { - if (nf.CanvasUtils.isRemoteProcessGroup(destination) || nf.CanvasUtils.isProcessGroup(destination)) { + if (nfCanvasUtils.isRemoteProcessGroup(destination) || nfCanvasUtils.isProcessGroup(destination)) { isDestinationConfigurable = true; } else { - isDestinationConfigurable = nf.CanvasUtils.supportsModification(destination); + isDestinationConfigurable = nfCanvasUtils.supportsModification(destination); } } @@ -1104,20 +1166,20 @@ nf.CanvasUtils = (function () { */ getConnectableTypeForSource: function (selection) { var type; - if (nf.CanvasUtils.isProcessor(selection)) { + if (nfCanvasUtils.isProcessor(selection)) { type = 'PROCESSOR'; - } else if (nf.CanvasUtils.isRemoteProcessGroup(selection)) { + } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) { type = 'REMOTE_OUTPUT_PORT'; - } else if (nf.CanvasUtils.isProcessGroup(selection)) { + } else if (nfCanvasUtils.isProcessGroup(selection)) { type = 'OUTPUT_PORT'; - } else if (nf.CanvasUtils.isInputPort(selection)) { + } else if (nfCanvasUtils.isInputPort(selection)) { type = 'INPUT_PORT'; - } else if (nf.CanvasUtils.isFunnel(selection)) { + } else if (nfCanvasUtils.isFunnel(selection)) { type = 'FUNNEL'; } return type; }, - + /** * Determines the connectable type for the specified destination selection. * @@ -1125,20 +1187,20 @@ nf.CanvasUtils = (function () { */ getConnectableTypeForDestination: function (selection) { var type; - if (nf.CanvasUtils.isProcessor(selection)) { + if (nfCanvasUtils.isProcessor(selection)) { type = 'PROCESSOR'; - } else if (nf.CanvasUtils.isRemoteProcessGroup(selection)) { + } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) { type = 'REMOTE_INPUT_PORT'; - } else if (nf.CanvasUtils.isProcessGroup(selection)) { + } else if (nfCanvasUtils.isProcessGroup(selection)) { type = 'INPUT_PORT'; - } else if (nf.CanvasUtils.isOutputPort(selection)) { + } else if (nfCanvasUtils.isOutputPort(selection)) { type = 'OUTPUT_PORT'; - } else if (nf.CanvasUtils.isFunnel(selection)) { + } else if (nfCanvasUtils.isFunnel(selection)) { type = 'FUNNEL'; } return type; }, - + /** * Determines if the graph is currently in a state to copy. * @@ -1150,143 +1212,122 @@ nf.CanvasUtils = (function () { return false; } - if (nf.CanvasUtils.canRead(selection) === false) { + if (nfCanvasUtils.canRead(selection) === false) { return false; } // determine how many copyable components are selected var copyable = selection.filter(function (d) { var selected = d3.select(this); - if (nf.CanvasUtils.isConnection(selected)) { + if (nfCanvasUtils.isConnection(selected)) { var sourceIncluded = !selection.filter(function (source) { - var sourceComponentId = nf.CanvasUtils.getConnectionSourceComponentId(d); + var sourceComponentId = nfCanvasUtils.getConnectionSourceComponentId(d); return sourceComponentId === source.id; }).empty(); var destinationIncluded = !selection.filter(function (destination) { - var destinationComponentId = nf.CanvasUtils.getConnectionDestinationComponentId(d); + var destinationComponentId = nfCanvasUtils.getConnectionDestinationComponentId(d); return destinationComponentId === destination.id; }).empty(); return sourceIncluded && destinationIncluded; } else { - return nf.CanvasUtils.isProcessor(selected) || nf.CanvasUtils.isFunnel(selected) || nf.CanvasUtils.isLabel(selected) || nf.CanvasUtils.isProcessGroup(selected) || nf.CanvasUtils.isRemoteProcessGroup(selected) || nf.CanvasUtils.isInputPort(selected) || nf.CanvasUtils.isOutputPort(selected); + return nfCanvasUtils.isProcessor(selected) || nfCanvasUtils.isFunnel(selected) || nfCanvasUtils.isLabel(selected) || nfCanvasUtils.isProcessGroup(selected) || nfCanvasUtils.isRemoteProcessGroup(selected) || nfCanvasUtils.isInputPort(selected) || nfCanvasUtils.isOutputPort(selected); } }); // ensure everything selected is copyable return selection.size() === copyable.size(); }, - + /** * Determines if something is currently pastable. */ isPastable: function () { - return nf.Canvas.canWrite() && nf.Clipboard.isCopied(); + return nfCanvas.canWrite() && clipboard.isCopied(); }, - + /** * Persists the current user view. */ persistUserView: function () { - var name = config.storage.namePrefix + nf.Canvas.getGroupId(); + var name = config.storage.namePrefix + nfCanvas.getGroupId(); // create the item to store - var translate = nf.Canvas.View.translate(); + var translate = nfCanvas.View.translate(); var item = { - scale: nf.Canvas.View.scale(), + scale: nfCanvas.View.scale(), translateX: translate[0], translateY: translate[1] }; // store the item - nf.Storage.setItem(name, item); + storage.setItem(name, item); }, - + /** * Gets the name for this connection. - * + * * @param {object} connection */ formatConnectionName: function (connection) { - if (!nf.Common.isBlank(connection.name)) { + if (!common.isBlank(connection.name)) { return connection.name; - } else if (nf.Common.isDefinedAndNotNull(connection.selectedRelationships)) { + } else if (common.isDefinedAndNotNull(connection.selectedRelationships)) { return connection.selectedRelationships.join(', '); } return ''; }, - + /** * Reloads a connection's source and destination. - * + * * @param {string} sourceComponentId The connection source id * @param {string} destinationComponentId The connection destination id */ reloadConnectionSourceAndDestination: function (sourceComponentId, destinationComponentId) { - if (nf.Common.isBlank(sourceComponentId) === false) { + if (common.isBlank(sourceComponentId) === false) { var source = d3.select('#id-' + sourceComponentId); if (source.empty() === false) { - var sourceData = source.datum(); - - if (sourceData.permissions.canRead) { - // update the source status if necessary - if (nf.CanvasUtils.isProcessor(source)) { - nf.Processor.reload(sourceData.id); - } else if (nf.CanvasUtils.isInputPort(source)) { - nf.Port.reload(sourceData.id); - } else if (nf.CanvasUtils.isRemoteProcessGroup(source)) { - nf.RemoteProcessGroup.reload(sourceData.id); - } - } + nfGraph.reload(source); } } - - if (nf.Common.isBlank(destinationComponentId) === false) { + if (common.isBlank(destinationComponentId) === false) { var destination = d3.select('#id-' + destinationComponentId); if (destination.empty() === false) { - var destinationData = destination.datum(); - - if (destinationData.permissions.canRead) { - // update the destination component accordingly - if (nf.CanvasUtils.isProcessor(destination)) { - nf.Processor.reload(destinationData.id); - } else if (nf.CanvasUtils.isRemoteProcessGroup(destination)) { - nf.RemoteProcessGroup.reload(destinationData.id); - } - } + nfGraph.reload(destination); } } }, - + /** * Returns the component id of the source of this processor. If the connection is attached * to a port in a [sub|remote] group, the component id will be that of the group. Otherwise * it is the component itself. - * + * * @param {object} connection The connection in question */ getConnectionSourceComponentId: function (connection) { var sourceId = connection.sourceId; - if (connection.sourceGroupId !== nf.Canvas.getGroupId()) { + if (connection.sourceGroupId !== nfCanvas.getGroupId()) { sourceId = connection.sourceGroupId; } return sourceId; }, - + /** * Returns the component id of the source of this processor. If the connection is attached * to a port in a [sub|remote] group, the component id will be that of the group. Otherwise * it is the component itself. - * + * * @param {object} connection The connection in question */ getConnectionDestinationComponentId: function (connection) { var destinationId = connection.destinationId; - if (connection.destinationGroupId !== nf.Canvas.getGroupId()) { + if (connection.destinationGroupId !== nfCanvas.getGroupId()) { destinationId = connection.destinationGroupId; } return destinationId; }, - + /** * Attempts to restore a persisted view. Returns a flag that indicates if the * view was restored. @@ -1296,18 +1337,18 @@ nf.CanvasUtils = (function () { try { // see if we can restore the view position from storage - var name = config.storage.namePrefix + nf.Canvas.getGroupId(); - var item = nf.Storage.getItem(name); + var name = config.storage.namePrefix + nfCanvas.getGroupId(); + var item = storage.getItem(name); // ensure the item is valid - if (nf.Common.isDefinedAndNotNull(item)) { + if (common.isDefinedAndNotNull(item)) { if (isFinite(item.scale) && isFinite(item.translateX) && isFinite(item.translateY)) { // restore previous view - nf.Canvas.View.translate([item.translateX, item.translateY]); - nf.Canvas.View.scale(item.scale); + nfCanvas.View.translate([item.translateX, item.translateY]); + nfCanvas.View.scale(item.scale); // refresh the canvas - nf.Canvas.View.refresh({ + nfCanvas.View.refresh({ transition: true }); @@ -1321,41 +1362,7 @@ nf.CanvasUtils = (function () { return viewRestored; }, - - /** - * Enters the specified group. - * - * @param {string} groupId - */ - enterGroup: function (groupId) { - // hide the context menu - nf.ContextMenu.hide(); - // set the new group id - nf.Canvas.setGroupId(groupId); - - // reload the graph - return nf.Canvas.reload().done(function () { - // attempt to restore the view - var viewRestored = nf.CanvasUtils.restoreUserView(); - - // if the view was not restore attempt to fit - if (viewRestored === false) { - nf.Canvas.View.fit(); - - // refresh the canvas - nf.Canvas.View.refresh({ - transition: true - }); - } - }).fail(function () { - nf.Dialog.showOkDialog({ - headerText: 'Process Group', - dialogContent: 'Unable to enter the selected group.' - }); - }); - }, - /** * Gets the origin of the bounding box for the specified selection. * @@ -1366,11 +1373,11 @@ nf.CanvasUtils = (function () { selection.each(function (d) { var selected = d3.select(this); - if (!nf.CanvasUtils.isConnection(selected)) { - if (nf.Common.isUndefined(origin.x) || d.position.x < origin.x) { + if (!nfCanvasUtils.isConnection(selected)) { + if (common.isUndefined(origin.x) || d.position.x < origin.x) { origin.x = d.position.x; } - if (nf.Common.isUndefined(origin.y) || d.position.y < origin.y) { + if (common.isUndefined(origin.y) || d.position.y < origin.y) { origin.y = d.position.y; } } @@ -1378,18 +1385,18 @@ nf.CanvasUtils = (function () { return origin; }, - + /** * Moves the specified components into the current parent group. - * + * * @param {selection} components */ moveComponentsToParent: function (components) { - var groupId = nf.Canvas.getParentGroupId(); - + var groupId = nfCanvas.getParentGroupId(); + // if the group id is null, we're already in the top most group if (groupId === null) { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Process Group', dialogContent: 'Components are already in the topmost group.' }); @@ -1397,23 +1404,23 @@ nf.CanvasUtils = (function () { moveComponents(components, groupId); } }, - + /** * Moves the specified components into the specified group. - * + * * @param {selection} components The components to move * @param {selection} group The destination group */ moveComponents: function (components, group) { var groupData = group.datum(); - + // move the components into the destination and... moveComponents(components, groupData.id).done(function () { // reload the target group - nf.ProcessGroup.reload(groupData.id); + nfCanvasUtils.getComponentByType('ProcessGroup').reload(groupData.id); }); }, - + /** * Removes any dangling edges. All components are retained as well as any * edges whose source and destination are also retained. @@ -1424,8 +1431,8 @@ nf.CanvasUtils = (function () { trimDanglingEdges: function (selection) { // returns whether the source and destination of the specified connection are present in the specified selection var keepConnection = function (connection) { - var sourceComponentId = nf.CanvasUtils.getConnectionSourceComponentId(connection); - var destinationComponentId = nf.CanvasUtils.getConnectionDestinationComponentId(connection); + var sourceComponentId = nfCanvasUtils.getConnectionSourceComponentId(connection); + var destinationComponentId = nfCanvasUtils.getConnectionDestinationComponentId(connection); // determine if both source and destination are selected var includesSource = false; @@ -1451,61 +1458,10 @@ nf.CanvasUtils = (function () { } }); }, - - /** - * Determines if the specified selection is disconnected from other nodes. - * - * @argument {selection} selection The selection - */ - isDisconnected: function (selection) { - // if nothing is selected return - if (selection.empty()) { - return false; - } - - var connections = d3.map(); - var components = d3.map(); - var isDisconnected = true; - // include connections - selection.filter(function (d) { - return d.type === 'Connection'; - }).each(function (d) { - connections.set(d.id, d); - }); - - // include components and ensure their connections are included - selection.filter(function (d) { - return d.type !== 'Connection'; - }).each(function (d) { - components.set(d.id, d.component); - - // check all connections of this component - $.each(nf.Connection.getComponentConnections(d.id), function (_, connection) { - if (!connections.has(connection.id)) { - isDisconnected = false; - return false; - } - }); - }); - - if (isDisconnected) { - // go through each connection to ensure its source and destination are included - connections.forEach(function (id, connection) { - if (isDisconnected) { - // determine whether this connection and its components are included within the selection - isDisconnected = components.has(nf.CanvasUtils.getConnectionSourceComponentId(connection)) && - components.has(nf.CanvasUtils.getConnectionDestinationComponentId(connection)); - } - }); - } - - return isDisconnected; - }, - /** * Determines if the component in the specified selection is a valid connection source. - * + * * @param {selection} selection The selection * @return {boolean} Whether the selection is a valid connection source */ @@ -1515,22 +1471,22 @@ nf.CanvasUtils = (function () { } // always allow connections from process groups - if (nf.CanvasUtils.isProcessGroup(selection)) { + if (nfCanvasUtils.isProcessGroup(selection)) { return true; } // require read and write for a connection source since we'll need to read the source to obtain valid relationships, etc - if (nf.CanvasUtils.canRead(selection) === false || nf.CanvasUtils.canModify(selection) === false) { + if (nfCanvasUtils.canRead(selection) === false || nfCanvasUtils.canModify(selection) === false) { return false; } - return nf.CanvasUtils.isProcessor(selection) || nf.CanvasUtils.isRemoteProcessGroup(selection) || - nf.CanvasUtils.isInputPort(selection) || nf.CanvasUtils.isFunnel(selection); + return nfCanvasUtils.isProcessor(selection) || nfCanvasUtils.isRemoteProcessGroup(selection) || + nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isFunnel(selection); }, - + /** * Determines if the component in the specified selection is a valid connection destination. - * + * * @param {selection} selection The selection * @return {boolean} Whether the selection is a valid connection destination */ @@ -1539,24 +1495,160 @@ nf.CanvasUtils = (function () { return false; } - if (nf.CanvasUtils.isProcessGroup(selection)) { + if (nfCanvasUtils.isProcessGroup(selection)) { return true; } // require write for a connection destination - if (nf.CanvasUtils.canModify(selection) === false) { + if (nfCanvasUtils.canModify(selection) === false) { return false; } - if (nf.CanvasUtils.isRemoteProcessGroup(selection) || nf.CanvasUtils.isOutputPort(selection) || nf.CanvasUtils.isFunnel(selection)) { + if (nfCanvasUtils.isRemoteProcessGroup(selection) || nfCanvasUtils.isOutputPort(selection) || nfCanvasUtils.isFunnel(selection)) { return true; } // if processor, ensure it supports input - if (nf.CanvasUtils.isProcessor(selection)) { + if (nfCanvasUtils.isProcessor(selection)) { var destinationData = selection.datum(); return destinationData.inputRequirement !== 'INPUT_FORBIDDEN'; } + }, + + /** + * Returns whether the authorizer is configurable. + */ + isConfigurableAuthorizer: function () { + return nfCanvas.isConfigurableAuthorizer(); + }, + + /** + * Set the group id. + * + * @argument {string} gi The group id + */ + setGroupId: function (gi) { + return nfCanvas.setGroupId(gi); + }, + + /** + * Get the group id. + */ + getGroupId: function () { + return nfCanvas.getGroupId(); + }, + + /** + * Get the group name. + */ + getGroupName: function () { + return nfCanvas.getGroupName(); + }, + + /** + * Get the parent group id. + */ + getParentGroupId: function () { + return nfCanvas.getParentGroupId(); + }, + + /** + * Reloads the status for the entire canvas (components and flow.) + */ + reload: function () { + return nfCanvas.reload({ + 'transition': true + }); + }, + + /** + * Whether the current user can read from this group. + * + * @returns {boolean} can write + */ + canReadFromGroup: function () { + return nfCanvas.canRead(); + }, + + /** + * Whether the current user can write in this group. + * + * @returns {boolean} can write + */ + canWrite: function () { + return nfCanvas.canWrite(); + }, + + /** + * Refreshes the view based on the configured translation and scale. + * + * @param {object} options Options for the refresh operation + */ + refreshCanvasView: function (options) { + return nfCanvas.View.refresh(options); + }, + + /** + * Sets/gets the current scale. + * + * @param {number} scale The new scale + */ + scaleCanvasView: function (scale) { + return nfCanvas.View.scale(scale); + }, + + /** + * Sets/gets the current translation. + * + * @param {array} translate [x, y] + */ + translateCanvasView: function (translate) { + return nfCanvas.View.translate(translate); + }, + + /** + * Zooms to fit the entire graph on the canvas. + */ + fitCanvasView: function () { + return nfCanvas.View.fit(); + }, + + /** + * Zooms in a single zoom increment. + */ + zoomCanvasViewIn: function () { + return nfCanvas.View.zoomIn(); + }, + + /** + * Zooms out a single zoom increment. + */ + zoomCanvasViewOut: function () { + return nfCanvas.View.zoomOut(); + }, + + /** + * Zooms to the actual size (1 to 1). + */ + actualSizeCanvasView: function () { + return nfCanvas.View.actualSize(); + }, + + /** + * Whether or not a component should be rendered based solely on the current scale. + * + * @returns {Boolean} + */ + shouldRenderPerScale: function () { + return nfCanvas.View.shouldRenderPerScale(); + }, + + /** + * Gets the canvas offset. + */ + getCanvasOffset: function () { + return nfCanvas.CANVAS_OFFSET; } }; -}()); \ No newline at end of file + return nfCanvasUtils; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js index be4dde8019..97be460b7b 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js @@ -15,94 +15,61 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -$(document).ready(function () { - if (nf.Canvas.SUPPORTS_SVG) { - - //Create Angular App - var app = angular.module('ngCanvasApp', ['ngResource', 'ngRoute', 'ngMaterial', 'ngMessages']); - - //Define Dependency Injection Annotations - nf.ng.AppConfig.$inject = ['$mdThemingProvider', '$compileProvider']; - nf.ng.AppCtrl.$inject = ['$scope', 'serviceProvider', '$compile', 'headerCtrl', 'graphControlsCtrl']; - nf.ng.ServiceProvider.$inject = []; - nf.ng.BreadcrumbsCtrl.$inject = ['serviceProvider']; - nf.ng.Canvas.HeaderCtrl.$inject = ['serviceProvider', 'toolboxCtrl', 'globalMenuCtrl', 'flowStatusCtrl']; - nf.ng.Canvas.FlowStatusCtrl.$inject = ['serviceProvider']; - nf.ng.Canvas.GlobalMenuCtrl.$inject = ['serviceProvider']; - nf.ng.Canvas.ToolboxCtrl.$inject = ['processorComponent', - 'inputPortComponent', - 'outputPortComponent', - 'groupComponent', - 'remoteGroupComponent', - 'funnelComponent', - 'templateComponent', - 'labelComponent']; - nf.ng.ProcessorComponent.$inject = ['serviceProvider']; - nf.ng.InputPortComponent.$inject = ['serviceProvider']; - nf.ng.OutputPortComponent.$inject = ['serviceProvider']; - nf.ng.GroupComponent.$inject = ['serviceProvider']; - nf.ng.RemoteProcessGroupComponent.$inject = ['serviceProvider']; - nf.ng.FunnelComponent.$inject = ['serviceProvider']; - nf.ng.TemplateComponent.$inject = ['serviceProvider']; - nf.ng.LabelComponent.$inject = ['serviceProvider']; - nf.ng.Canvas.GraphControlsCtrl.$inject = ['serviceProvider', 'navigateCtrl', 'operateCtrl']; - nf.ng.Canvas.NavigateCtrl.$inject = []; - nf.ng.Canvas.OperateCtrl.$inject = []; - nf.ng.BreadcrumbsDirective.$inject = ['breadcrumbsCtrl']; - nf.ng.DraggableDirective.$inject = []; - - //Configure Angular App - app.config(nf.ng.AppConfig); - - //Define Angular App Controllers - app.controller('ngCanvasAppCtrl', nf.ng.AppCtrl); - - //Define Angular App Services - app.service('serviceProvider', nf.ng.ServiceProvider); - app.service('breadcrumbsCtrl', nf.ng.BreadcrumbsCtrl); - app.service('headerCtrl', nf.ng.Canvas.HeaderCtrl); - app.service('globalMenuCtrl', nf.ng.Canvas.GlobalMenuCtrl); - app.service('toolboxCtrl', nf.ng.Canvas.ToolboxCtrl); - app.service('flowStatusCtrl', nf.ng.Canvas.FlowStatusCtrl); - app.service('processorComponent', nf.ng.ProcessorComponent); - app.service('inputPortComponent', nf.ng.InputPortComponent); - app.service('outputPortComponent', nf.ng.OutputPortComponent); - app.service('groupComponent', nf.ng.GroupComponent); - app.service('remoteGroupComponent', nf.ng.RemoteProcessGroupComponent); - app.service('funnelComponent', nf.ng.FunnelComponent); - app.service('templateComponent', nf.ng.TemplateComponent); - app.service('labelComponent', nf.ng.LabelComponent); - app.service('graphControlsCtrl', nf.ng.Canvas.GraphControlsCtrl); - app.service('navigateCtrl', nf.ng.Canvas.NavigateCtrl); - app.service('operateCtrl', nf.ng.Canvas.OperateCtrl); - - //Define Angular App Directives - app.directive('nfBreadcrumbs', nf.ng.BreadcrumbsDirective); - app.directive('nfDraggable', nf.ng.DraggableDirective); - - //Manually Boostrap Angular App - nf.ng.Bridge.injector = angular.bootstrap($('body'), ['ngCanvasApp'], { strictDi: true }); - - // initialize the NiFi - nf.Canvas.init(); - - //initialize toolbox components tooltips - $('.component-button').qtip($.extend({}, nf.Common.config.tooltipConfig)); +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'd3', + 'nf.Common', + 'nf.Graph', + 'nf.Shell', + 'nf.ng.Bridge', + 'nf.ClusterSummary', + 'nf.ErrorHandler', + 'nf.Storage', + 'nf.CanvasUtils', + 'nf.Birdseye', + 'nf.ContextMenu', + 'nf.Actions', + 'nf.ProcessGroup'], + function ($, d3, common, nfGraph, nfShell, angularBridge, nfClusterSummary, errorHandler, storage, canvasUtils, birdseye, contextMenu, actions, processGroup) { + return (nf.Canvas = factory($, d3, common, nfGraph, nfShell, angularBridge, nfClusterSummary, errorHandler, storage, canvasUtils, birdseye, contextMenu, actions, processGroup)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.Canvas = + factory(require('jquery'), + require('d3'), + require('nf.Common'), + require('nf.Graph'), + require('nf.Shell'), + require('nf.ng.Bridge'), + require('nf.ClusterSummary'), + require('nf.ErrorHandler'), + require('nf.Storage'), + require('nf.CanvasUtils'), + require('nf.Birdseye'), + require('nf.ContextMenu'), + require('nf.Actions'), + require('nf.ProcessGroup'))); } else { - $('#message-title').text('Unsupported Browser'); - $('#message-content').text('Flow graphs are shown using SVG. Please use a browser that supports rendering SVG.'); - - // show the error pane - $('#message-pane').show(); - - // hide the splash screen - nf.Canvas.hideSplash(); + nf.Canvas = factory(root.$, + root.d3, + root.nf.Common, + root.nf.Graph, + root.nf.Shell, + root.nf.ng.Bridge, + root.nf.ClusterSummary, + root.nf.ErrorHandler, + root.nf.Storage, + root.nf.CanvasUtils, + root.nf.Birdseye, + root.nf.ContextMenu, + root.nf.Actions, + root.nf.ProcessGroup); } -}); - -nf.Canvas = (function () { +}(this, function ($, d3, common, nfGraph, nfShell, angularBridge, nfClusterSummary, errorHandler, storage, canvasUtils, birdseye, contextMenu, actions, processGroup) { + 'use strict'; var SCALE = 1; var TRANSLATE = [0, 0]; @@ -131,22 +98,10 @@ nf.Canvas = (function () { controllerBulletins: '../nifi-api/flow/controller/bulletins', kerberos: '../nifi-api/access/kerberos', revision: '../nifi-api/flow/revision', - banners: '../nifi-api/flow/banners', - flowConfig: '../nifi-api/flow/config' + banners: '../nifi-api/flow/banners' } }; - /** - * Starts polling. - * - * @argument {int} autoRefreshInterval The auto refresh interval - */ - var startPolling = function (autoRefreshInterval) { - // set polling flag - polling = true; - poll(autoRefreshInterval); - }; - /** * Register the poller. * @@ -156,7 +111,7 @@ nf.Canvas = (function () { // ensure we're suppose to poll if (polling) { // reload the status - nf.Canvas.reload({ + nfCanvas.reload({ 'transition': true }).done(function () { // start the wait to poll again @@ -167,497 +122,6 @@ nf.Canvas = (function () { } }; - /** - * Initializes the canvas. - */ - var initCanvas = function () { - var canvasContainer = $('#canvas-container'); - - // create the canvas - svg = d3.select('#canvas-container').append('svg') - .on('contextmenu', function () { - // reset the canvas click flag - canvasClicked = false; - - // since the context menu event propagated back to the canvas, clear the selection - nf.CanvasUtils.getSelection().classed('selected', false); - - // show the context menu on the canvas - nf.ContextMenu.show(); - - // prevent default browser behavior - d3.event.preventDefault(); - }); - - // create the definitions element - var defs = svg.append('defs'); - - // create arrow definitions for the various line types - defs.selectAll('marker') - .data(['normal', 'ghost', 'unauthorized', 'full']) - .enter().append('marker') - .attr({ - 'id': function (d) { - return d; - }, - 'viewBox': '0 0 6 6', - 'refX': 5, - 'refY': 3, - 'markerWidth': 6, - 'markerHeight': 6, - 'orient': 'auto', - 'fill': function (d) { - if (d === 'ghost') { - return '#aaaaaa'; - } else if (d === 'unauthorized') { - return '#ba554a'; - } else if (d === 'full') { - return '#ba554a'; - } else { - return '#000000'; - } - } - }) - .append('path') - .attr('d', 'M2,3 L0,6 L6,3 L0,0 z'); - - // filter for drop shadow - var componentDropShadowFilter = defs.append('filter') - .attr({ - 'id': 'component-drop-shadow', - 'height': '140%', - 'y': '-20%' - }); - - // blur - componentDropShadowFilter.append('feGaussianBlur') - .attr({ - 'in': 'SourceAlpha', - 'stdDeviation': 3, - 'result': 'blur' - }); - - // offset - componentDropShadowFilter.append('feOffset') - .attr({ - 'in': 'blur', - 'dx': 0, - 'dy': 1, - 'result': 'offsetBlur' - }); - - // color/opacity - componentDropShadowFilter.append('feFlood') - .attr({ - 'flood-color': '#000000', - 'flood-opacity': 0.4, - 'result': 'offsetColor' - }); - - // combine - componentDropShadowFilter.append('feComposite') - .attr({ - 'in': 'offsetColor', - 'in2': 'offsetBlur', - 'operator': 'in', - 'result': 'offsetColorBlur' - }); - - // stack the effect under the source graph - var componentDropShadowFeMerge = componentDropShadowFilter.append('feMerge'); - componentDropShadowFeMerge.append('feMergeNode') - .attr('in', 'offsetColorBlur'); - componentDropShadowFeMerge.append('feMergeNode') - .attr('in', 'SourceGraphic'); - - // filter for drop shadow - var connectionFullDropShadowFilter = defs.append('filter') - .attr({ - 'id': 'connection-full-drop-shadow', - 'height': '140%', - 'y': '-20%' - }); - - // blur - connectionFullDropShadowFilter.append('feGaussianBlur') - .attr({ - 'in': 'SourceAlpha', - 'stdDeviation': 3, - 'result': 'blur' - }); - - // offset - connectionFullDropShadowFilter.append('feOffset') - .attr({ - 'in': 'blur', - 'dx': 0, - 'dy': 1, - 'result': 'offsetBlur' - }); - - // color/opacity - connectionFullDropShadowFilter.append('feFlood') - .attr({ - 'flood-color': '#ba554a', - 'flood-opacity': 1, - 'result': 'offsetColor' - }); - - // combine - connectionFullDropShadowFilter.append('feComposite') - .attr({ - 'in': 'offsetColor', - 'in2': 'offsetBlur', - 'operator': 'in', - 'result': 'offsetColorBlur' - }); - - // stack the effect under the source graph - var connectionFullFeMerge = connectionFullDropShadowFilter.append('feMerge'); - connectionFullFeMerge.append('feMergeNode') - .attr('in', 'offsetColorBlur'); - connectionFullFeMerge.append('feMergeNode') - .attr('in', 'SourceGraphic'); - - // create the canvas element - canvas = svg.append('g') - .attr({ - 'transform': 'translate(' + TRANSLATE + ') scale(' + SCALE + ')', - 'pointer-events': 'all', - 'id': 'canvas' - }); - - // handle canvas events - svg.on('mousedown.selection', function () { - canvasClicked = true; - - if (d3.event.button !== 0) { - // prevent further propagation (to parents and others handlers - // on the same element to prevent zoom behavior) - d3.event.stopImmediatePropagation(); - return; - } - - // show selection box if shift is held down - if (d3.event.shiftKey) { - var position = d3.mouse(canvas.node()); - canvas.append('rect') - .attr('rx', 6) - .attr('ry', 6) - .attr('x', position[0]) - .attr('y', position[1]) - .attr('class', 'selection') - .attr('width', 0) - .attr('height', 0) - .attr('stroke-width', function () { - return 1 / nf.Canvas.View.scale(); - }) - .attr('stroke-dasharray', function () { - return 4 / nf.Canvas.View.scale(); - }) - .datum(position); - - // prevent further propagation (to parents and others handlers - // on the same element to prevent zoom behavior) - d3.event.stopImmediatePropagation(); - - // prevents the browser from changing to a text selection cursor - d3.event.preventDefault(); - } - }) - .on('mousemove.selection', function () { - // update selection box if shift is held down - if (d3.event.shiftKey) { - // get the selection box - var selectionBox = d3.select('rect.selection'); - if (!selectionBox.empty()) { - // get the original position - var originalPosition = selectionBox.datum(); - var position = d3.mouse(canvas.node()); - - var d = {}; - if (originalPosition[0] < position[0]) { - d.x = originalPosition[0]; - d.width = position[0] - originalPosition[0]; - } else { - d.x = position[0]; - d.width = originalPosition[0] - position[0]; - } - - if (originalPosition[1] < position[1]) { - d.y = originalPosition[1]; - d.height = position[1] - originalPosition[1]; - } else { - d.y = position[1]; - d.height = originalPosition[1] - position[1]; - } - - // update the selection box - selectionBox.attr(d); - - // prevent further propagation (to parents) - d3.event.stopPropagation(); - } - } - }) - .on('mouseup.selection', function () { - // ensure this originated from clicking the canvas, not a component. - // when clicking on a component, the event propagation is stopped so - // it never reaches the canvas. we cannot do this however on up events - // since the drag events break down - if (canvasClicked === false) { - return; - } - - // reset the canvas click flag - canvasClicked = false; - - // get the selection box - var selectionBox = d3.select('rect.selection'); - if (!selectionBox.empty()) { - var selectionBoundingBox = { - x: parseInt(selectionBox.attr('x'), 10), - y: parseInt(selectionBox.attr('y'), 10), - width: parseInt(selectionBox.attr('width'), 10), - height: parseInt(selectionBox.attr('height'), 10) - }; - - // see if a component should be selected or not - d3.selectAll('g.component').classed('selected', function (d) { - // consider it selected if its already selected or enclosed in the bounding box - return d3.select(this).classed('selected') || - d.position.x >= selectionBoundingBox.x && (d.position.x + d.dimensions.width) <= (selectionBoundingBox.x + selectionBoundingBox.width) && - d.position.y >= selectionBoundingBox.y && (d.position.y + d.dimensions.height) <= (selectionBoundingBox.y + selectionBoundingBox.height); - }); - - // see if a connection should be selected or not - d3.selectAll('g.connection').classed('selected', function (d) { - // consider all points - var points = [d.start].concat(d.bends, [d.end]); - - // determine the bounding box - var x = d3.extent(points, function (pt) { - return pt.x; - }); - var y = d3.extent(points, function (pt) { - return pt.y; - }); - - // consider it selected if its already selected or enclosed in the bounding box - return d3.select(this).classed('selected') || - x[0] >= selectionBoundingBox.x && x[1] <= (selectionBoundingBox.x + selectionBoundingBox.width) && - y[0] >= selectionBoundingBox.y && y[1] <= (selectionBoundingBox.y + selectionBoundingBox.height); - }); - - // remove the selection box - selectionBox.remove(); - } else if (panning === false) { - // deselect as necessary if we are not panning - nf.CanvasUtils.getSelection().classed('selected', false); - } - - // inform Angular app values have changed - nf.ng.Bridge.digest(); - }); - - // define a function for update the graph dimensions - var updateGraphSize = function () { - // get the location of the bottom of the graph - var footer = $('#banner-footer'); - var bottom = 0; - if (footer.is(':visible')) { - bottom = footer.height(); - } - - // calculate size - var top = parseInt(canvasContainer.css('top'), 10); - var windowHeight = $(window).height(); - var canvasHeight = (windowHeight - (bottom + top)); - - // canvas/svg - canvasContainer.css({ - 'height': canvasHeight + 'px', - 'bottom': bottom + 'px' - }); - svg.attr({ - 'height': canvasContainer.height(), - 'width': $(window).width() - }); - - //breadcrumbs - nf.ng.Bridge.injector.get('breadcrumbsCtrl').updateBreadcrumbsCss({'bottom': bottom + 'px'}); - - // body - $('#canvas-body').css({ - 'height': windowHeight + 'px', - 'width': $(window).width() + 'px' - }); - }; - - // define a function for update the flow status dimensions - var updateFlowStatusContainerSize = function () { - $('#flow-status-container').css({ - 'width': ((($('#nifi-logo').width() + $('#component-container').width())/$(window).width())*100)*2 + '%' - }); - }; - updateFlowStatusContainerSize(); - - // listen for events to go to components - $('body').on('GoTo:Component', function (e, item) { - nf.CanvasUtils.showComponent(item.parentGroupId, item.id); - }); - - // listen for events to go to process groups - $('body').on('GoTo:ProcessGroup', function (e, item) { - nf.CanvasUtils.enterGroup(item.id).done(function () { - nf.CanvasUtils.getSelection().classed('selected', false); - - // inform Angular app that values have changed - nf.ng.Bridge.digest(); - }); - }); - - // listen for browser resize events to reset the graph size - $(window).on('resize', function (e) { - if (e.target === window) { - // close the hamburger menu if open - if($('.md-menu-backdrop').is(':visible') === true){ - $('.md-menu-backdrop').click(); - } - - updateGraphSize(); - updateFlowStatusContainerSize(); - - // resize shell when appropriate - var shell = $('#shell-dialog'); - if (shell.is(':visible')){ - setTimeout(function(shell){ - nf.Shell.resizeContent(shell); - if(shell.find('#shell-iframe').is(':visible')) { - nf.Shell.resizeIframe(shell); - } - }, 50, shell); - } - - // resize dialogs when appropriate - var dialogs = $('.dialog'); - for (var i = 0, len = dialogs.length; i < len; i++) { - if ($(dialogs[i]).is(':visible')){ - setTimeout(function(dialog){ - dialog.modal('resize'); - }, 50, $(dialogs[i])); - } - } - - // resize grids when appropriate - var gridElements = $('*[class*="slickgrid_"]'); - for (var j = 0, len = gridElements.length; j < len; j++) { - if ($(gridElements[j]).is(':visible')){ - setTimeout(function(gridElement){ - gridElement.data('gridInstance').resizeCanvas(); - }, 50, $(gridElements[j])); - } - } - - // toggle tabs .scrollable when appropriate - var tabsContainers = $('.tab-container'); - var tabsContents = []; - for (var k = 0, len = tabsContainers.length; k < len; k++) { - if ($(tabsContainers[k]).is(':visible')){ - tabsContents.push($('#' + $(tabsContainers[k]).attr('id') + '-content')); - } - } - $.each(tabsContents, function (index, tabsContent) { - nf.Common.toggleScrollable(tabsContent.get(0)); - }); - } - }).on('keydown', function (evt) { - // if a dialog is open, disable canvas shortcuts - if ($('.dialog').is(':visible') || $('#search-field').is(':focus')) { - return; - } - - // get the current selection - var selection = nf.CanvasUtils.getSelection(); - - // handle shortcuts - var isCtrl = evt.ctrlKey || evt.metaKey; - if (isCtrl) { - if (evt.keyCode === 82) { - if (allowPageRefresh === true) { - location.reload(); - return; - } - // ctrl-r - nf.Actions.reload(); - - // default prevented in nf-universal-capture.js - } else if (evt.keyCode === 65) { - // ctrl-a - nf.Actions.selectAll(); - nf.ng.Bridge.digest(); - - // only want to prevent default if the action was performed, otherwise default select all would be overridden - evt.preventDefault(); - } else if (evt.keyCode === 67) { - // ctrl-c - if (nf.Canvas.canWrite() && nf.CanvasUtils.isCopyable(selection)) { - nf.Actions.copy(selection); - } - } else if (evt.keyCode === 86) { - // ctrl-v - if (nf.Canvas.canWrite() && nf.CanvasUtils.isPastable()) { - nf.Actions.paste(selection); - - // only want to prevent default if the action was performed, otherwise default paste would be overridden - evt.preventDefault(); - } - } - } else { - if (evt.keyCode === 8 || evt.keyCode === 46) { - // backspace or delete - if (nf.Canvas.canWrite() && nf.CanvasUtils.areDeletable(selection)) { - nf.Actions['delete'](selection); - } - - // default prevented in nf-universal-capture.js - } - } - }); - - // get the banners and update the page accordingly - $.ajax({ - type: 'GET', - url: config.urls.banners, - dataType: 'json' - }).done(function (response) { - // ensure the banners response is specified - if (nf.Common.isDefinedAndNotNull(response.banners)) { - if (nf.Common.isDefinedAndNotNull(response.banners.headerText) && response.banners.headerText !== '') { - // update the header text and show it - $('#banner-header').addClass('banner-header-background').text(response.banners.headerText).show(); - $('#canvas-container').css('top', '98px'); - } - - if (nf.Common.isDefinedAndNotNull(response.banners.footerText) && response.banners.footerText !== '') { - // update the footer text and show it - var bannerFooter = $('#banner-footer').text(response.banners.footerText).show(); - - var updateBottom = function (elementId) { - var element = $('#' + elementId); - element.css('bottom', parseInt(bannerFooter.css('height'), 10) + 'px'); - }; - - // update the position of elements affected by bottom banners - updateBottom('graph'); - } - } - - // update the graph dimensions - updateGraphSize(); - }).fail(nf.ErrorHandler.handleAjaxError); - }; - /** * Refreshes the graph. * @@ -677,46 +141,48 @@ nf.Canvas = (function () { var processGroupFlow = flowResponse.processGroupFlow; // set the group details - nf.Canvas.setGroupId(processGroupFlow.id); + nfCanvas.setGroupId(processGroupFlow.id); // get the current group name from the breadcrumb var breadcrumb = processGroupFlow.breadcrumb; if (breadcrumb.permissions.canRead) { - nf.Canvas.setGroupName(breadcrumb.breadcrumb.name); + nfCanvas.setGroupName(breadcrumb.breadcrumb.name); } else { - nf.Canvas.setGroupName(breadcrumb.id); + nfCanvas.setGroupName(breadcrumb.id); } // update the access policies permissions = flowResponse.permissions; // update the breadcrumbs - nf.ng.Bridge.injector.get('breadcrumbsCtrl').resetBreadcrumbs(); - nf.ng.Bridge.injector.get('breadcrumbsCtrl').generateBreadcrumbs(breadcrumb); - nf.ng.Bridge.injector.get('breadcrumbsCtrl').resetScrollPosition(); + angularBridge.injector.get('breadcrumbsCtrl').resetBreadcrumbs(); + // inform Angular app values have changed + angularBridge.digest(); + angularBridge.injector.get('breadcrumbsCtrl').generateBreadcrumbs(breadcrumb); + angularBridge.injector.get('breadcrumbsCtrl').resetScrollPosition(); // update the timestamp $('#stats-last-refreshed').text(processGroupFlow.lastRefreshed); // set the parent id if applicable - if (nf.Common.isDefinedAndNotNull(processGroupFlow.parentGroupId)) { - nf.Canvas.setParentGroupId(processGroupFlow.parentGroupId); + if (common.isDefinedAndNotNull(processGroupFlow.parentGroupId)) { + nfCanvas.setParentGroupId(processGroupFlow.parentGroupId); } else { - nf.Canvas.setParentGroupId(null); + nfCanvas.setParentGroupId(null); } // refresh the graph - nf.Graph.expireCaches(now); - nf.Graph.set(processGroupFlow.flow, $.extend({ + nfGraph.expireCaches(now); + nfGraph.set(processGroupFlow.flow, $.extend({ 'selectAll': false }, options)); // update component visibility - nf.Canvas.View.updateVisibility(); + nfCanvas.View.updateVisibility(); // update the birdseye - nf.Birdseye.refresh(); - }).fail(nf.ErrorHandler.handleAjaxError); + birdseye.refresh(); + }).fail(errorHandler.handleAjaxError); }; /** @@ -732,11 +198,11 @@ nf.Canvas = (function () { dataType: 'json' }).done(function (currentUser) { // set the current user - nf.Common.setCurrentUser(currentUser); + common.setCurrentUser(currentUser); }); }; - return { + var nfCanvas = { CANVAS_OFFSET: 0, /** @@ -768,32 +234,32 @@ nf.Canvas = (function () { /** * Reloads the flow from the server based on the currently specified group id. - * To load another group, update nf.Canvas.setGroupId, clear the canvas, and call nf.Canvas.reload. + * To load another group, update nfCanvas.setGroupId, clear the canvas, and call nfCanvas.reload. */ reload: function (options) { return $.Deferred(function (deferred) { // issue the requests - var processGroupXhr = reloadProcessGroup(nf.Canvas.getGroupId(), options); - var statusXhr = nf.ng.Bridge.injector.get('flowStatusCtrl').reloadFlowStatus(); + var processGroupXhr = reloadProcessGroup(nfCanvas.getGroupId(), options); + var statusXhr = angularBridge.injector.get('flowStatusCtrl').reloadFlowStatus(); var currentUserXhr = loadCurrentUser(); var controllerBulletins = $.ajax({ type: 'GET', url: config.urls.controllerBulletins, dataType: 'json' }).done(function (response) { - nf.ng.Bridge.injector.get('flowStatusCtrl').updateBulletins(response); + angularBridge.injector.get('flowStatusCtrl').updateBulletins(response); }); - var clusterSummary = nf.ClusterSummary.loadClusterSummary().done(function (response) { + var clusterSummary = nfClusterSummary.loadClusterSummary().done(function (response) { var clusterSummary = response.clusterSummary; // update the cluster summary - nf.ng.Bridge.injector.get('flowStatusCtrl').updateClusterSummary(clusterSummary); + angularBridge.injector.get('flowStatusCtrl').updateClusterSummary(clusterSummary); }); // wait for all requests to complete $.when(processGroupXhr, statusXhr, currentUserXhr, controllerBulletins, clusterSummary).done(function (processGroupResult) { // inform Angular app values have changed - nf.ng.Bridge.digest(); + angularBridge.digest(); // resolve the deferred deferred.resolve(processGroupResult); @@ -803,13 +269,504 @@ nf.Canvas = (function () { }).promise(); }, + /** + * Initializes the canvas. + */ + initCanvas: function () { + var canvasContainer = $('#canvas-container'); + + // create the canvas + svg = d3.select('#canvas-container').append('svg') + .on('contextmenu', function () { + // reset the canvas click flag + canvasClicked = false; + + // since the context menu event propagated back to the canvas, clear the selection + canvasUtils.getSelection().classed('selected', false); + + // show the context menu on the canvas + contextMenu.show(); + + // prevent default browser behavior + d3.event.preventDefault(); + }); + + // create the definitions element + var defs = svg.append('defs'); + + // create arrow definitions for the various line types + defs.selectAll('marker') + .data(['normal', 'ghost', 'unauthorized', 'full']) + .enter().append('marker') + .attr({ + 'id': function (d) { + return d; + }, + 'viewBox': '0 0 6 6', + 'refX': 5, + 'refY': 3, + 'markerWidth': 6, + 'markerHeight': 6, + 'orient': 'auto', + 'fill': function (d) { + if (d === 'ghost') { + return '#aaaaaa'; + } else if (d === 'unauthorized') { + return '#ba554a'; + } else if (d === 'full') { + return '#ba554a'; + } else { + return '#000000'; + } + } + }) + .append('path') + .attr('d', 'M2,3 L0,6 L6,3 L0,0 z'); + + // filter for drop shadow + var componentDropShadowFilter = defs.append('filter') + .attr({ + 'id': 'component-drop-shadow', + 'height': '140%', + 'y': '-20%' + }); + + // blur + componentDropShadowFilter.append('feGaussianBlur') + .attr({ + 'in': 'SourceAlpha', + 'stdDeviation': 3, + 'result': 'blur' + }); + + // offset + componentDropShadowFilter.append('feOffset') + .attr({ + 'in': 'blur', + 'dx': 0, + 'dy': 1, + 'result': 'offsetBlur' + }); + + // color/opacity + componentDropShadowFilter.append('feFlood') + .attr({ + 'flood-color': '#000000', + 'flood-opacity': 0.4, + 'result': 'offsetColor' + }); + + // combine + componentDropShadowFilter.append('feComposite') + .attr({ + 'in': 'offsetColor', + 'in2': 'offsetBlur', + 'operator': 'in', + 'result': 'offsetColorBlur' + }); + + // stack the effect under the source graph + var componentDropShadowFeMerge = componentDropShadowFilter.append('feMerge'); + componentDropShadowFeMerge.append('feMergeNode') + .attr('in', 'offsetColorBlur'); + componentDropShadowFeMerge.append('feMergeNode') + .attr('in', 'SourceGraphic'); + + // filter for drop shadow + var connectionFullDropShadowFilter = defs.append('filter') + .attr({ + 'id': 'connection-full-drop-shadow', + 'height': '140%', + 'y': '-20%' + }); + + // blur + connectionFullDropShadowFilter.append('feGaussianBlur') + .attr({ + 'in': 'SourceAlpha', + 'stdDeviation': 3, + 'result': 'blur' + }); + + // offset + connectionFullDropShadowFilter.append('feOffset') + .attr({ + 'in': 'blur', + 'dx': 0, + 'dy': 1, + 'result': 'offsetBlur' + }); + + // color/opacity + connectionFullDropShadowFilter.append('feFlood') + .attr({ + 'flood-color': '#ba554a', + 'flood-opacity': 1, + 'result': 'offsetColor' + }); + + // combine + connectionFullDropShadowFilter.append('feComposite') + .attr({ + 'in': 'offsetColor', + 'in2': 'offsetBlur', + 'operator': 'in', + 'result': 'offsetColorBlur' + }); + + // stack the effect under the source graph + var connectionFullFeMerge = connectionFullDropShadowFilter.append('feMerge'); + connectionFullFeMerge.append('feMergeNode') + .attr('in', 'offsetColorBlur'); + connectionFullFeMerge.append('feMergeNode') + .attr('in', 'SourceGraphic'); + + // create the canvas element + canvas = svg.append('g') + .attr({ + 'transform': 'translate(' + TRANSLATE + ') scale(' + SCALE + ')', + 'pointer-events': 'all', + 'id': 'canvas' + }); + + // handle canvas events + svg.on('mousedown.selection', function () { + canvasClicked = true; + + if (d3.event.button !== 0) { + // prevent further propagation (to parents and others handlers + // on the same element to prevent zoom behavior) + d3.event.stopImmediatePropagation(); + return; + } + + // show selection box if shift is held down + if (d3.event.shiftKey) { + var position = d3.mouse(canvas.node()); + canvas.append('rect') + .attr('rx', 6) + .attr('ry', 6) + .attr('x', position[0]) + .attr('y', position[1]) + .attr('class', 'selection') + .attr('width', 0) + .attr('height', 0) + .attr('stroke-width', function () { + return 1 / nfCanvas.View.scale(); + }) + .attr('stroke-dasharray', function () { + return 4 / nfCanvas.View.scale(); + }) + .datum(position); + + // prevent further propagation (to parents and others handlers + // on the same element to prevent zoom behavior) + d3.event.stopImmediatePropagation(); + + // prevents the browser from changing to a text selection cursor + d3.event.preventDefault(); + } + }) + .on('mousemove.selection', function () { + // update selection box if shift is held down + if (d3.event.shiftKey) { + // get the selection box + var selectionBox = d3.select('rect.selection'); + if (!selectionBox.empty()) { + // get the original position + var originalPosition = selectionBox.datum(); + var position = d3.mouse(canvas.node()); + + var d = {}; + if (originalPosition[0] < position[0]) { + d.x = originalPosition[0]; + d.width = position[0] - originalPosition[0]; + } else { + d.x = position[0]; + d.width = originalPosition[0] - position[0]; + } + + if (originalPosition[1] < position[1]) { + d.y = originalPosition[1]; + d.height = position[1] - originalPosition[1]; + } else { + d.y = position[1]; + d.height = originalPosition[1] - position[1]; + } + + // update the selection box + selectionBox.attr(d); + + // prevent further propagation (to parents) + d3.event.stopPropagation(); + } + } + }) + .on('mouseup.selection', function () { + // ensure this originated from clicking the canvas, not a component. + // when clicking on a component, the event propagation is stopped so + // it never reaches the canvas. we cannot do this however on up events + // since the drag events break down + if (canvasClicked === false) { + return; + } + + // reset the canvas click flag + canvasClicked = false; + + // get the selection box + var selectionBox = d3.select('rect.selection'); + if (!selectionBox.empty()) { + var selectionBoundingBox = { + x: parseInt(selectionBox.attr('x'), 10), + y: parseInt(selectionBox.attr('y'), 10), + width: parseInt(selectionBox.attr('width'), 10), + height: parseInt(selectionBox.attr('height'), 10) + }; + + // see if a component should be selected or not + d3.selectAll('g.component').classed('selected', function (d) { + // consider it selected if its already selected or enclosed in the bounding box + return d3.select(this).classed('selected') || + d.position.x >= selectionBoundingBox.x && (d.position.x + d.dimensions.width) <= (selectionBoundingBox.x + selectionBoundingBox.width) && + d.position.y >= selectionBoundingBox.y && (d.position.y + d.dimensions.height) <= (selectionBoundingBox.y + selectionBoundingBox.height); + }); + + // see if a connection should be selected or not + d3.selectAll('g.connection').classed('selected', function (d) { + // consider all points + var points = [d.start].concat(d.bends, [d.end]); + + // determine the bounding box + var x = d3.extent(points, function (pt) { + return pt.x; + }); + var y = d3.extent(points, function (pt) { + return pt.y; + }); + + // consider it selected if its already selected or enclosed in the bounding box + return d3.select(this).classed('selected') || + x[0] >= selectionBoundingBox.x && x[1] <= (selectionBoundingBox.x + selectionBoundingBox.width) && + y[0] >= selectionBoundingBox.y && y[1] <= (selectionBoundingBox.y + selectionBoundingBox.height); + }); + + // remove the selection box + selectionBox.remove(); + } else if (panning === false) { + // deselect as necessary if we are not panning + canvasUtils.getSelection().classed('selected', false); + } + + // inform Angular app values have changed + angularBridge.digest(); + }); + + // define a function for update the graph dimensions + var updateGraphSize = function () { + // get the location of the bottom of the graph + var footer = $('#banner-footer'); + var bottom = 0; + if (footer.is(':visible')) { + bottom = footer.height(); + } + + // calculate size + var top = parseInt(canvasContainer.css('top'), 10); + var windowHeight = $(window).height(); + var canvasHeight = (windowHeight - (bottom + top)); + + // canvas/svg + canvasContainer.css({ + 'height': canvasHeight + 'px', + 'bottom': bottom + 'px' + }); + svg.attr({ + 'height': canvasContainer.height(), + 'width': $(window).width() + }); + + //breadcrumbs + angularBridge.injector.get('breadcrumbsCtrl').updateBreadcrumbsCss({'bottom': bottom + 'px'}); + + // body + $('#canvas-body').css({ + 'height': windowHeight + 'px', + 'width': $(window).width() + 'px' + }); + }; + + // define a function for update the flow status dimensions + var updateFlowStatusContainerSize = function () { + $('#flow-status-container').css({ + 'width': ((($('#nifi-logo').width() + $('#component-container').width())/$(window).width())*100)*2 + '%' + }); + }; + updateFlowStatusContainerSize(); + + // listen for events to go to components + $('body').on('GoTo:Component', function (e, item) { + canvasUtils.showComponent(item.parentGroupId, item.id); + }); + + // listen for events to go to process groups + $('body').on('GoTo:ProcessGroup', function (e, item) { + processGroup.enterGroup(item.id).done(function () { + canvasUtils.getSelection().classed('selected', false); + + // inform Angular app that values have changed + angularBridge.digest(); + }); + }); + + // listen for browser resize events to reset the graph size + $(window).on('resize', function (e) { + if (e.target === window) { + // close the hamburger menu if open + if($('.md-menu-backdrop').is(':visible') === true){ + $('.md-menu-backdrop').click(); + } + + updateGraphSize(); + updateFlowStatusContainerSize(); + + // resize shell when appropriate + var shell = $('#shell-dialog'); + if (shell.is(':visible')){ + setTimeout(function(shell){ + nfShell.resizeContent(shell); + if(shell.find('#shell-iframe').is(':visible')) { + nfShell.resizeIframe(shell); + } + }, 50, shell); + } + + // resize dialogs when appropriate + var dialogs = $('.dialog'); + for (var i = 0, len = dialogs.length; i < len; i++) { + if ($(dialogs[i]).is(':visible')){ + setTimeout(function(dialog){ + dialog.modal('resize'); + }, 50, $(dialogs[i])); + } + } + + // resize grids when appropriate + var gridElements = $('*[class*="slickgrid_"]'); + for (var j = 0, len = gridElements.length; j < len; j++) { + if ($(gridElements[j]).is(':visible')){ + setTimeout(function(gridElement){ + gridElement.data('gridInstance').resizeCanvas(); + }, 50, $(gridElements[j])); + } + } + + // toggle tabs .scrollable when appropriate + var tabsContainers = $('.tab-container'); + var tabsContents = []; + for (var k = 0, len = tabsContainers.length; k < len; k++) { + if ($(tabsContainers[k]).is(':visible')){ + tabsContents.push($('#' + $(tabsContainers[k]).attr('id') + '-content')); + } + } + $.each(tabsContents, function (index, tabsContent) { + common.toggleScrollable(tabsContent.get(0)); + }); + } + }).on('keydown', function (evt) { + // if a dialog is open, disable canvas shortcuts + if ($('.dialog').is(':visible') || $('#search-field').is(':focus')) { + return; + } + + // get the current selection + var selection = canvasUtils.getSelection(); + + // handle shortcuts + var isCtrl = evt.ctrlKey || evt.metaKey; + if (isCtrl) { + if (evt.keyCode === 82) { + if (allowPageRefresh === true) { + location.reload(); + return; + } + // ctrl-r + actions.reload(); + + // default prevented in nf-universal-capture.js + } else if (evt.keyCode === 65) { + // ctrl-a + actions.selectAll(); + angularBridge.digest(); + + // only want to prevent default if the action was performed, otherwise default select all would be overridden + evt.preventDefault(); + } else if (evt.keyCode === 67) { + // ctrl-c + if (nfCanvas.canWrite() && canvasUtils.isCopyable(selection)) { + actions.copy(selection); + } + } else if (evt.keyCode === 86) { + // ctrl-v + if (nfCanvas.canWrite() && canvasUtils.isPastable()) { + actions.paste(selection); + + // only want to prevent default if the action was performed, otherwise default paste would be overridden + evt.preventDefault(); + } + } + } else { + if (evt.keyCode === 8 || evt.keyCode === 46) { + // backspace or delete + if (nfCanvas.canWrite() && canvasUtils.areDeletable(selection)) { + actions['delete'](selection); + } + + // default prevented in nf-universal-capture.js + } + } + }); + + // get the banners and update the page accordingly + $.ajax({ + type: 'GET', + url: config.urls.banners, + dataType: 'json' + }).done(function (response) { + // ensure the banners response is specified + if (common.isDefinedAndNotNull(response.banners)) { + if (common.isDefinedAndNotNull(response.banners.headerText) && response.banners.headerText !== '') { + // update the header text and show it + $('#banner-header').addClass('banner-header-background').text(response.banners.headerText).show(); + $('#canvas-container').css('top', '98px'); + } + + if (common.isDefinedAndNotNull(response.banners.footerText) && response.banners.footerText !== '') { + // update the footer text and show it + var bannerFooter = $('#banner-footer').text(response.banners.footerText).show(); + + var updateBottom = function (elementId) { + var element = $('#' + elementId); + element.css('bottom', parseInt(bannerFooter.css('height'), 10) + 'px'); + }; + + // update the position of elements affected by bottom banners + updateBottom('graph'); + } + } + + // update the graph dimensions + updateGraphSize(); + }).fail(errorHandler.handleAjaxError); + }, + /** * Initialize NiFi. */ init: function () { // attempt kerberos authentication var ticketExchange = $.Deferred(function (deferred) { - if (nf.Storage.hasItem('jwt')) { + if (storage.hasItem('jwt')) { deferred.resolve(); } else { $.ajax({ @@ -818,9 +775,9 @@ nf.Canvas = (function () { dataType: 'text' }).done(function (jwt) { // get the payload and store the token with the appropriate expiration - var token = nf.Common.getJwtPayload(jwt); - var expiration = parseInt(token['exp'], 10) * nf.Common.MILLIS_PER_SECOND; - nf.Storage.setItem('jwt', jwt, expiration); + var token = common.getJwtPayload(jwt); + var expiration = parseInt(token['exp'], 10) * common.MILLIS_PER_SECOND; + storage.setItem('jwt', jwt, expiration); deferred.resolve(); }).fail(function () { deferred.reject(); @@ -829,7 +786,7 @@ nf.Canvas = (function () { }).promise(); // load the current user - var userXhr = $.Deferred(function (deferred) { + return $.Deferred(function (deferred) { ticketExchange.always(function () { loadCurrentUser().done(function (currentUser) { // if the user is logged, we want to determine if they were logged in using a certificate @@ -838,12 +795,12 @@ nf.Canvas = (function () { $('#current-user').text(currentUser.identity).show(); // render the logout button if there is a token locally - if (nf.Storage.getItem('jwt') !== null) { + if (storage.getItem('jwt') !== null) { $('#logout-link-container').show(); } } else { // set the anonymous user label - nf.Common.setAnonymousUserLabel(); + common.setAnonymousUserLabel(); } deferred.resolve(); }).fail(function (xhr, status, error) { @@ -856,96 +813,6 @@ nf.Canvas = (function () { }); }); }).promise(); - - userXhr.done(function () { - // load the client id - var clientXhr = nf.Client.init(); - - // get the controller config to register the status poller - var configXhr = $.ajax({ - type: 'GET', - url: config.urls.flowConfig, - dataType: 'json' - }); - - // ensure the config requests are loaded - $.when(configXhr, nf.ClusterSummary.loadClusterSummary(), userXhr, clientXhr).done(function (configResult) { - var configResponse = configResult[0]; - - // calculate the canvas offset - var canvasContainer = $('#canvas-container'); - nf.Canvas.CANVAS_OFFSET = canvasContainer.offset().top; - - // get the config details - var configDetails = configResponse.flowConfiguration; - - // show disconnected message on load if necessary - if (nf.ClusterSummary.isClustered() && !nf.ClusterSummary.isConnectedToCluster()) { - nf.Dialog.showDisconnectedFromClusterMessage(); - } - - // get the auto refresh interval - var autoRefreshIntervalSeconds = parseInt(configDetails.autoRefreshIntervalSeconds, 10); - - // record whether we can configure the authorizer - configurableAuthorizer = configDetails.supportsConfigurableAuthorizer; - - // init storage - nf.Storage.init(); - - // initialize the application - initCanvas(); - nf.Canvas.View.init(); - nf.ContextMenu.init(); - nf.ng.Bridge.injector.get('headerCtrl').init(); - nf.Settings.init(); - nf.Actions.init(); - nf.QueueListing.init(); - nf.ComponentState.init(); - - // initialize the component behaviors - nf.Draggable.init(); - nf.Selectable.init(); - nf.Connectable.init(); - - // initialize the chart - nf.StatusHistory.init(configDetails.timeOffset); - - // initialize the birdseye - nf.Birdseye.init(); - - // initialize components - nf.ConnectionConfiguration.init(); - nf.ControllerService.init(); - nf.ReportingTask.init(); - nf.PolicyManagement.init(); - nf.ProcessorConfiguration.init(); - nf.ProcessGroupConfiguration.init(); - nf.RemoteProcessGroupConfiguration.init(); - nf.RemoteProcessGroupPorts.init(); - nf.PortConfiguration.init(); - nf.LabelConfiguration.init(); - nf.ProcessorDetails.init(true); - nf.PortDetails.init(); - nf.ConnectionDetails.init(); - nf.RemoteProcessGroupDetails.init(); - nf.GoTo.init(); - nf.Graph.init().done(function () { - nf.ng.Bridge.injector.get('graphControlsCtrl').init(); - - // determine the split between the polling - var pollingSplit = autoRefreshIntervalSeconds / 2; - - // register the polling - setTimeout(function () { - startPolling(autoRefreshIntervalSeconds); - }, pollingSplit * 1000); - - // hide the splash screen - nf.Canvas.hideSplash(); - }).fail(nf.ErrorHandler.handleAjaxError); - }).fail(nf.ErrorHandler.handleAjaxError); - }).fail(nf.ErrorHandler.handleAjaxError); }, /** @@ -996,6 +863,15 @@ nf.Canvas = (function () { return parentGroupId; }, + /** + * Set whether the authorizer is configurable. + * + * @param bool The boolean value representing whether the authorizer is configurable. + */ + setConfigurableAuthorizer: function(bool){ + configurableAuthorizer = bool; + }, + /** * Returns whether the authorizer is configurable. */ @@ -1004,7 +880,7 @@ nf.Canvas = (function () { }, /** - * Whether the current user can write in this group. + * Whether the current user can read from this group. * * @returns {boolean} can write */ @@ -1029,6 +905,17 @@ nf.Canvas = (function () { } }, + /** + * Starts polling. + * + * @argument {int} autoRefreshInterval The auto refresh interval + */ + startPolling: function (autoRefreshInterval) { + // set polling flag + polling = true; + poll(autoRefreshInterval); + }, + View: (function () { /** @@ -1036,8 +923,8 @@ nf.Canvas = (function () { */ var updateComponentVisibility = function () { var canvasContainer = $('#canvas-container'); - var translate = nf.Canvas.View.translate(); - var scale = nf.Canvas.View.scale(); + var translate = nfCanvas.View.translate(); + var scale = nfCanvas.View.scale(); // scale the translation translate = [translate[0] / scale, translate[1] / scale]; @@ -1054,7 +941,7 @@ nf.Canvas = (function () { // detects whether a component is visible and should be rendered var isComponentVisible = function (d) { - if (!nf.Canvas.View.shouldRenderPerScale()) { + if (!nfCanvas.View.shouldRenderPerScale()) { return false; } @@ -1069,7 +956,7 @@ nf.Canvas = (function () { // detects whether a connection is visible and should be rendered var isConnectionVisible = function (d) { - if (!nf.Canvas.View.shouldRenderPerScale()) { + if (!nfCanvas.View.shouldRenderPerScale()) { return false; } @@ -1102,7 +989,7 @@ nf.Canvas = (function () { }; // get the all components - var graph = nf.Graph.get(); + var graph = nfGraph.get(); // update the visibility for each component $.each(graph.processors, function (_, d) { @@ -1137,7 +1024,7 @@ nf.Canvas = (function () { .scale(SCALE) .on('zoomstart', function () { // hide the context menu - nf.ContextMenu.hide(); + contextMenu.hide(); }) .on('zoom', function () { // if we have zoomed, indicate that we are panning @@ -1154,7 +1041,7 @@ nf.Canvas = (function () { var transition = d3.event.sourceEvent.type === 'wheel' || d3.event.sourceEvent.type === 'mousewheel'; // refresh the canvas - refreshed = nf.Canvas.View.refresh({ + refreshed = nfCanvas.View.refresh({ persist: false, transition: transition, refreshComponents: false, @@ -1163,16 +1050,16 @@ nf.Canvas = (function () { }) .on('zoomend', function () { // ensure the canvas was actually refreshed - if (nf.Common.isDefinedAndNotNull(refreshed)) { - nf.Canvas.View.updateVisibility(); + if (common.isDefinedAndNotNull(refreshed)) { + nfCanvas.View.updateVisibility(); // refresh the birdseye refreshed.done(function () { - nf.Birdseye.refresh(); + birdseye.refresh(); }); // persist the users view - nf.CanvasUtils.persistUserView(); + canvasUtils.persistUserView(); // reset the refreshed deferred refreshed = null; @@ -1192,7 +1079,7 @@ nf.Canvas = (function () { * @returns {Boolean} */ shouldRenderPerScale: function () { - return nf.Canvas.View.scale() >= MIN_SCALE_TO_RENDER; + return nfCanvas.View.scale() >= MIN_SCALE_TO_RENDER; }, /** @@ -1200,7 +1087,7 @@ nf.Canvas = (function () { */ updateVisibility: function () { updateComponentVisibility(); - nf.Graph.pan(); + nfGraph.pan(); }, /** @@ -1209,7 +1096,7 @@ nf.Canvas = (function () { * @param {array} translate [x, y] */ translate: function (translate) { - if (nf.Common.isUndefined(translate)) { + if (common.isUndefined(translate)) { return behavior.translate(); } else { behavior.translate(translate); @@ -1222,7 +1109,7 @@ nf.Canvas = (function () { * @param {number} scale The new scale */ scale: function (scale) { - if (nf.Common.isUndefined(scale)) { + if (common.isUndefined(scale)) { return behavior.scale(); } else { behavior.scale(scale); @@ -1233,8 +1120,8 @@ nf.Canvas = (function () { * Zooms in a single zoom increment. */ zoomIn: function () { - var translate = nf.Canvas.View.translate(); - var scale = nf.Canvas.View.scale(); + var translate = nfCanvas.View.translate(); + var scale = nfCanvas.View.scale(); var newScale = Math.min(scale * INCREMENT, MAX_SCALE); // get the canvas normalized width and height @@ -1243,10 +1130,10 @@ nf.Canvas = (function () { var screenHeight = canvasContainer.height() / scale; // adjust the scale - nf.Canvas.View.scale(newScale); + nfCanvas.View.scale(newScale); // center around the center of the screen accounting for the translation accordingly - nf.CanvasUtils.centerBoundingBox({ + canvasUtils.centerBoundingBox({ x: (screenWidth / 2) - (translate[0] / scale), y: (screenHeight / 2) - (translate[1] / scale), width: 1, @@ -1258,8 +1145,8 @@ nf.Canvas = (function () { * Zooms out a single zoom increment. */ zoomOut: function () { - var translate = nf.Canvas.View.translate(); - var scale = nf.Canvas.View.scale(); + var translate = nfCanvas.View.translate(); + var scale = nfCanvas.View.scale(); var newScale = Math.max(scale / INCREMENT, MIN_SCALE); // get the canvas normalized width and height @@ -1268,10 +1155,10 @@ nf.Canvas = (function () { var screenHeight = canvasContainer.height() / scale; // adjust the scale - nf.Canvas.View.scale(newScale); + nfCanvas.View.scale(newScale); // center around the center of the screen accounting for the translation accordingly - nf.CanvasUtils.centerBoundingBox({ + canvasUtils.centerBoundingBox({ x: (screenWidth / 2) - (translate[0] / scale), y: (screenHeight / 2) - (translate[1] / scale), width: 1, @@ -1283,8 +1170,8 @@ nf.Canvas = (function () { * Zooms to fit the entire graph on the canvas. */ fit: function () { - var translate = nf.Canvas.View.translate(); - var scale = nf.Canvas.View.scale(); + var translate = nfCanvas.View.translate(); + var scale = nfCanvas.View.scale(); var newScale; // get the canvas normalized width and height @@ -1297,7 +1184,7 @@ nf.Canvas = (function () { var graphWidth = graphBox.width / scale; var graphHeight = graphBox.height / scale; var graphLeft = graphBox.left / scale; - var graphTop = (graphBox.top - nf.Canvas.CANVAS_OFFSET) / scale; + var graphTop = (graphBox.top - nfCanvas.CANVAS_OFFSET) / scale; // adjust the scale to ensure the entire graph is visible @@ -1315,10 +1202,10 @@ nf.Canvas = (function () { } // set the new scale - nf.Canvas.View.scale(newScale); + nfCanvas.View.scale(newScale); // center as appropriate - nf.CanvasUtils.centerBoundingBox({ + canvasUtils.centerBoundingBox({ x: graphLeft - (translate[0] / scale), y: graphTop - (translate[1] / scale), width: canvasWidth / newScale, @@ -1330,14 +1217,14 @@ nf.Canvas = (function () { * Zooms to the actual size (1 to 1). */ actualSize: function () { - var translate = nf.Canvas.View.translate(); - var scale = nf.Canvas.View.scale(); + var translate = nfCanvas.View.translate(); + var scale = nfCanvas.View.scale(); // get the first selected component - var selection = nf.CanvasUtils.getSelection(); + var selection = canvasUtils.getSelection(); // set the updated scale - nf.Canvas.View.scale(1); + nfCanvas.View.scale(1); // box to zoom towards var box; @@ -1350,7 +1237,7 @@ nf.Canvas = (function () { // get the bounding box for the selected components box = { x: (selectionBox.left / scale) - (translate[0] / scale), - y: ((selectionBox.top - nf.Canvas.CANVAS_OFFSET) / scale) - (translate[1] / scale), + y: ((selectionBox.top - nfCanvas.CANVAS_OFFSET) / scale) - (translate[1] / scale), width: selectionBox.width / scale, height: selectionBox.height / scale }; @@ -1372,7 +1259,7 @@ nf.Canvas = (function () { } // center as appropriate - nf.CanvasUtils.centerBoundingBox(box); + canvasUtils.centerBoundingBox(box); }, /** @@ -1389,21 +1276,21 @@ nf.Canvas = (function () { var refreshBirdseye = true; // extract the options if specified - if (nf.Common.isDefinedAndNotNull(options)) { - persist = nf.Common.isDefinedAndNotNull(options.persist) ? options.persist : persist; - transition = nf.Common.isDefinedAndNotNull(options.transition) ? options.transition : transition; - refreshComponents = nf.Common.isDefinedAndNotNull(options.refreshComponents) ? options.refreshComponents : refreshComponents; - refreshBirdseye = nf.Common.isDefinedAndNotNull(options.refreshBirdseye) ? options.refreshBirdseye : refreshBirdseye; + if (common.isDefinedAndNotNull(options)) { + persist = common.isDefinedAndNotNull(options.persist) ? options.persist : persist; + transition = common.isDefinedAndNotNull(options.transition) ? options.transition : transition; + refreshComponents = common.isDefinedAndNotNull(options.refreshComponents) ? options.refreshComponents : refreshComponents; + refreshBirdseye = common.isDefinedAndNotNull(options.refreshBirdseye) ? options.refreshBirdseye : refreshBirdseye; } // update component visibility if (refreshComponents) { - nf.Canvas.View.updateVisibility(); + nfCanvas.View.updateVisibility(); } // persist if appropriate if (persist === true) { - nf.CanvasUtils.persistUserView(); + canvasUtils.persistUserView(); } // update the canvas @@ -1416,7 +1303,7 @@ nf.Canvas = (function () { .each('end', function () { // refresh birdseye if appropriate if (refreshBirdseye === true) { - nf.Birdseye.refresh(); + birdseye.refresh(); } deferred.resolve(); @@ -1428,7 +1315,7 @@ nf.Canvas = (function () { // refresh birdseye if appropriate if (refreshBirdseye === true) { - nf.Birdseye.refresh(); + birdseye.refresh(); } deferred.resolve(); @@ -1438,4 +1325,6 @@ nf.Canvas = (function () { }; }()) }; -}()); \ No newline at end of file + + return nfCanvas; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-clipboard.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-clipboard.js index ce0ea1d9cc..d5dd80c579 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-clipboard.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-clipboard.js @@ -15,12 +15,28 @@ * limitations under the License. */ -/* global nf */ +/* global define, module, require, exports */ /** * Clipboard used for copying and pasting content. */ -nf.Clipboard = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'nf.Common'], + function ($, common) { + return (nf.Clipboard = factory($, common)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.Clipboard = + factory(require('jquery'), + require('nf.Common'))); + } else { + nf.Clipboard = factory(root.$, + root.nf.Common); + } +}(this, function ($, common) { + 'use strict'; var COPY = 'copy'; var PASTE = 'paste'; @@ -30,28 +46,28 @@ nf.Clipboard = (function () { return { /** * Add a listener to receive copy and paste events. - * + * * @argument {object} listener A clipboard listener * @argument {function} funct Callback when clipboard events occur */ addListener: function (listener, funct) { listeners[listener] = funct; }, - + /** * Remove the specified listener. - * + * * @argument {object} listener A clipboard listener */ removeListener: function (listener) { - if (nf.Common.isDefinedAndNotNull(listeners[listener])) { + if (common.isDefinedAndNotNull(listeners[listener])) { delete listeners[listener]; } }, - + /** * Copy the specified data. - * + * * @argument {object} d The data to copy to the clipboard */ copy: function (d) { @@ -62,14 +78,14 @@ nf.Clipboard = (function () { listeners[listener].call(listener, COPY, data); } }, - + /** * Checks to see if any data has been copied. */ isCopied: function () { - return nf.Common.isDefinedAndNotNull(data); + return common.isDefinedAndNotNull(data); }, - + /** * Gets the most recent data thats copied. This operation * will remove the corresponding data from the clipboard. @@ -77,7 +93,7 @@ nf.Clipboard = (function () { paste: function () { return $.Deferred(function (deferred) { // ensure there was data - if (nf.Common.isDefinedAndNotNull(data)) { + if (common.isDefinedAndNotNull(data)) { var clipboardData = data; // resolve the deferred @@ -96,4 +112,4 @@ nf.Clipboard = (function () { }).promise(); } }; -}()); \ No newline at end of file +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js index 0d5c198097..e362b461e3 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js @@ -15,12 +15,40 @@ * limitations under the License. */ -/* global nf */ +/* global define, module, require, exports */ /** * Views state for a given component. */ -nf.ComponentState = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'Slick', + 'nf.ClusterSummary', + 'nf.ErrorHandler', + 'nf.Dialog', + 'nf.Common'], + function ($, Slick, clusterSummary, errorHandler, dialog, common) { + return (nf.ComponentState = factory($, Slick, clusterSummary, errorHandler, dialog, common)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ComponentState = + factory(require('jquery'), + require('Slick'), + require('nf.ClusterSummary'), + require('nf.ErrorHandler'), + require('nf.Dialog'), + require('nf.Common'))); + } else { + nf.ComponentState = factory(root.$, + root.Slick, + root.nf.ClusterSummary, + root.nf.ErrorHandler, + root.nf.Dialog, + root.nf.Common); + } +}(this, function ($, Slick, clusterSummary, errorHandler, dialog, common) { + 'use strict'; /** * Filters the component state table. @@ -30,7 +58,7 @@ nf.ComponentState = (function () { var componentStateTable = $('#component-state-table').data('gridInstance'); // ensure the grid has been initialized - if (nf.Common.isDefinedAndNotNull(componentStateTable)) { + if (common.isDefinedAndNotNull(componentStateTable)) { var componentStateData = componentStateTable.getData(); // update the search criteria @@ -67,7 +95,7 @@ nf.ComponentState = (function () { // conditionally consider the scope var matchesScope = false; - if (nf.Common.isDefinedAndNotNull(item['scope'])) { + if (common.isDefinedAndNotNull(item['scope'])) { matchesScope = item['scope'].search(filterExp) >= 0; } @@ -83,8 +111,8 @@ nf.ComponentState = (function () { var sort = function (sortDetails, data) { // defines a function for sorting var comparer = function (a, b) { - var aString = nf.Common.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : ''; - var bString = nf.Common.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : ''; + var aString = common.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : ''; + var bString = common.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : ''; return aString === bString ? 0 : aString > bString ? 1 : -1; }; @@ -134,7 +162,7 @@ nf.ComponentState = (function () { componentStateData.beginUpdate(); // local state - if (nf.Common.isDefinedAndNotNull(localState)) { + if (common.isDefinedAndNotNull(localState)) { $.each(localState.state, function (i, stateEntry) { componentStateData.addItem($.extend({ id: count++, @@ -143,12 +171,12 @@ nf.ComponentState = (function () { }); totalEntries += localState.totalEntryCount; - if (nf.Common.isDefinedAndNotNull(localState.state) && localState.totalEntryCount !== localState.state.length) { + if (common.isDefinedAndNotNull(localState.state) && localState.totalEntryCount !== localState.state.length) { showPartialDetails = true; } } - if (nf.Common.isDefinedAndNotNull(clusterState)) { + if (common.isDefinedAndNotNull(clusterState)) { $.each(clusterState.state, function (i, stateEntry) { componentStateData.addItem($.extend({ id: count++, @@ -157,7 +185,7 @@ nf.ComponentState = (function () { }); totalEntries += clusterState.totalEntryCount; - if (nf.Common.isDefinedAndNotNull(clusterState.state) && clusterState.totalEntryCount !== clusterState.state.length) { + if (common.isDefinedAndNotNull(clusterState.state) && clusterState.totalEntryCount !== clusterState.state.length) { showPartialDetails = true; } } @@ -171,7 +199,7 @@ nf.ComponentState = (function () { } // update the total number of state entries - $('#total-component-state-entries').text(nf.Common.formatInteger(totalEntries)); + $('#total-component-state-entries').text(common.formatInteger(totalEntries)); }; /** @@ -253,9 +281,9 @@ nf.ComponentState = (function () { // reload the table with no state loadComponentState() - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); } else { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Component State', dialogContent: 'This component has no state to clear.' }); @@ -282,7 +310,7 @@ nf.ComponentState = (function () { ]; // conditionally show the cluster node identifier - if (nf.ClusterSummary.isClustered()) { + if (clusterSummary.isClustered()) { componentStateColumns.push({ id: 'scope', field: 'scope', @@ -390,7 +418,7 @@ nf.ComponentState = (function () { // reset the grid size var componentStateGrid = componentStateTable.data('gridInstance'); componentStateGrid.resizeCanvas(); - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); } }; -}()); \ No newline at end of file +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js index d81c3f591d..3da81e39e2 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js @@ -15,9 +15,31 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.Connectable = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['d3', + 'nf.Connection', + 'nf.ConnectionConfiguration', + 'nf.CanvasUtils'], + function (d3, connection, connectionConfiguration, canvasUtils) { + return (nf.Connectable = factory(d3, connection, connectionConfiguration, canvasUtils)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.Connectable = + factory(require('d3'), + require('nf.Connection'), + require('nf.ConnectionConfiguration'), + require('nf.CanvasUtils'))); + } else { + nf.Connectable = factory(root.d3, + root.nf.Connection, + root.nf.ConnectionConfiguration, + root.nf.CanvasUtils); + } +}(this, function (d3, connection, connectionConfiguration, canvasUtils) { + 'use strict'; var connect; var canvas; @@ -56,7 +78,7 @@ nf.Connectable = (function () { d3.event.sourceEvent.stopPropagation(); // unselect the previous components - nf.CanvasUtils.getSelection().classed('selected', false); + canvasUtils.getSelection().classed('selected', false); // mark the source component has selected var source = d3.select(this.parentNode).classed('selected', true); @@ -106,7 +128,7 @@ nf.Connectable = (function () { // component to itself. requiring the mouse to have actually moved before // checking the eligiblity of the destination addresses the issue return (Math.abs(origin[0] - d3.event.x) > 10 || Math.abs(origin[1] - d3.event.y) > 10) && - nf.CanvasUtils.isValidConnectionDestination(d3.select(this)); + canvasUtils.isValidConnectionDestination(d3.select(this)); }); // update the drag line @@ -126,12 +148,12 @@ nf.Connectable = (function () { var x = pathDatum.x; var y = pathDatum.y; var componentOffset = pathDatum.sourceWidth / 2; - var xOffset = nf.Connection.config.selfLoopXOffset; - var yOffset = nf.Connection.config.selfLoopYOffset; + var xOffset = connection.config.selfLoopXOffset; + var yOffset = connection.config.selfLoopYOffset; return 'M' + x + ' ' + y + 'L' + (x + componentOffset + xOffset) + ' ' + (y - yOffset) + 'L' + (x + componentOffset + xOffset) + ' ' + (y + yOffset) + 'Z'; } else { // get the position on the destination perimeter - var end = nf.CanvasUtils.getPerimeterPoint(pathDatum, { + var end = canvasUtils.getPerimeterPoint(pathDatum, { 'x': destinationData.position.x, 'y': destinationData.position.y, 'width': destinationData.dimensions.width, @@ -190,11 +212,16 @@ nf.Connectable = (function () { // create the connection var destinationData = destination.datum(); - nf.ConnectionConfiguration.createConnection(connectorData.sourceId, destinationData.id); + connectionConfiguration.createConnection(connectorData.sourceId, destinationData.id); } }); }, + /** + * Activates the connect behavior for the components in the specified selection. + * + * @param {selection} components + */ activate: function (components) { components .classed('connectable', true) @@ -203,7 +230,7 @@ nf.Connectable = (function () { var selection = d3.select(this); // ensure the current component supports connection source - if (nf.CanvasUtils.isValidConnectionSource(selection)) { + if (canvasUtils.isValidConnectionSource(selection)) { // see if theres already a connector rendered var addConnect = d3.select('text.add-connect'); if (addConnect.empty()) { @@ -245,6 +272,11 @@ nf.Connectable = (function () { }); }, + /** + * Deactivates the connect behavior for the components in the specified selection. + * + * @param {selection} components + */ deactivate: function (components) { components .classed('connectable', false) @@ -254,4 +286,4 @@ nf.Connectable = (function () { .on('mouseout.connectable', null); } }; -}()); \ No newline at end of file +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js index a0424aa678..5f0dfc2039 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js @@ -15,9 +15,46 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ConnectionConfiguration = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'd3', + 'nf.ErrorHandler', + 'nf.Common', + 'nf.Dialog', + 'nf.Client', + 'nf.CanvasUtils', + 'nf.Connection'], + function ($, d3, errorHandler, common, dialog, client, canvasUtils, connection) { + return (nf.ConnectionConfiguration = factory($, d3, errorHandler, common, dialog, client, canvasUtils, connection)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ConnectionConfiguration = + factory(require('jquery'), + require('d3'), + require('nf.ErrorHandler'), + require('nf.Common'), + require('nf.Dialog'), + require('nf.Client'), + require('nf.CanvasUtils'), + require('nf.Connection'))); + } else { + nf.ConnectionConfiguration = factory(root.$, + root.d3, + root.nf.ErrorHandler, + root.nf.Common, + root.nf.Dialog, + root.nf.Client, + root.nf.CanvasUtils, + root.nf.Connection); + } +}(this, function ($, d3, errorHandler, common, dialog, client, canvasUtils, connection) { + 'use strict'; + + var nfBirdseye; + var nfGraph; var CONNECTION_OFFSET_Y_INCREMENT = 75; var CONNECTION_OFFSET_X_INCREMENT = 200; @@ -43,11 +80,11 @@ nf.ConnectionConfiguration = (function () { */ var initializeSourceNewConnectionDialog = function (source) { // handle the selected source - if (nf.CanvasUtils.isProcessor(source)) { + if (canvasUtils.isProcessor(source)) { return $.Deferred(function (deferred) { // initialize the source processor initializeSourceProcessor(source).done(function (processor) { - if (!nf.Common.isEmpty(processor.relationships)) { + if (!common.isEmpty(processor.relationships)) { // populate the available connections $.each(processor.relationships, function (i, relationship) { createRelationshipOption(relationship.name); @@ -77,7 +114,7 @@ nf.ConnectionConfiguration = (function () { addConnection(selectedRelationships); } else { // inform users that no relationships were selected - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Connection Configuration', dialogContent: 'The connection must have at least one relationship selected.' }); @@ -106,9 +143,9 @@ nf.ConnectionConfiguration = (function () { deferred.resolve(); } else { // there are no relationships for this processor - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Connection Configuration', - dialogContent: '\'' + nf.Common.escapeHtml(processor.name) + '\' does not support any relationships.' + dialogContent: '\'' + common.escapeHtml(processor.name) + '\' does not support any relationships.' }); // reset the dialog @@ -124,11 +161,11 @@ nf.ConnectionConfiguration = (function () { return $.Deferred(function (deferred) { // determine how to initialize the source var connectionSourceDeferred; - if (nf.CanvasUtils.isInputPort(source)) { + if (canvasUtils.isInputPort(source)) { connectionSourceDeferred = initializeSourceInputPort(source); - } else if (nf.CanvasUtils.isRemoteProcessGroup(source)) { + } else if (canvasUtils.isRemoteProcessGroup(source)) { connectionSourceDeferred = initializeSourceRemoteProcessGroup(source); - } else if (nf.CanvasUtils.isProcessGroup(source)) { + } else if (canvasUtils.isProcessGroup(source)) { connectionSourceDeferred = initializeSourceProcessGroup(source); } else { connectionSourceDeferred = initializeSourceFunnel(source); @@ -196,8 +233,8 @@ nf.ConnectionConfiguration = (function () { $('#connection-source-component-id').val(inputPortData.id); // populate the group details - $('#connection-source-group-id').val(nf.Canvas.getGroupId()); - $('#connection-source-group-name').text(nf.Canvas.getGroupName()); + $('#connection-source-group-id').val(canvasUtils.getGroupId()); + $('#connection-source-group-name').text(canvasUtils.getGroupName()); // resolve the deferred deferred.resolve(); @@ -222,8 +259,8 @@ nf.ConnectionConfiguration = (function () { $('#connection-source-component-id').val(funnelData.id); // populate the group details - $('#connection-source-group-id').val(nf.Canvas.getGroupId()); - $('#connection-source-group-name').text(nf.Canvas.getGroupName()); + $('#connection-source-group-id').val(canvasUtils.getGroupId()); + $('#connection-source-group-name').text(canvasUtils.getGroupName()); // resolve the deferred deferred.resolve(); @@ -240,7 +277,7 @@ nf.ConnectionConfiguration = (function () { // get the processor data var processorData = source.datum(); var processorName = processorData.permissions.canRead ? processorData.component.name : processorData.id; - var processorType = processorData.permissions.canRead ? nf.Common.substringAfterLast(processorData.component.type, '.') : 'Processor'; + var processorType = processorData.permissions.canRead ? common.substringAfterLast(processorData.component.type, '.') : 'Processor'; // populate the source processor information $('#processor-source').show(); @@ -252,8 +289,8 @@ nf.ConnectionConfiguration = (function () { $('#connection-source-component-id').val(processorData.id); // populate the group details - $('#connection-source-group-id').val(nf.Canvas.getGroupId()); - $('#connection-source-group-name').text(nf.Canvas.getGroupName()); + $('#connection-source-group-id').val(canvasUtils.getGroupId()); + $('#connection-source-group-name').text(canvasUtils.getGroupName()); // show the available relationships $('#relationship-names-container').show(); @@ -290,13 +327,13 @@ nf.ConnectionConfiguration = (function () { options.push({ text: component.name, value: component.id, - description: nf.Common.escapeHtml(component.comments) + description: common.escapeHtml(component.comments) }); } }); // only proceed if there are output ports - if (!nf.Common.isEmpty(options)) { + if (!common.isEmpty(options)) { $('#output-port-source').show(); // sort the options @@ -322,13 +359,13 @@ nf.ConnectionConfiguration = (function () { deferred.resolve(); } else { - var message = '\'' + nf.Common.escapeHtml(processGroupName) + '\' does not have any output ports.'; - if (nf.Common.isEmpty(processGroupContents.outputPorts) === false) { - message = 'Not authorized for any output ports in \'' + nf.Common.escapeHtml(processGroupName) + '\'.'; + var message = '\'' + common.escapeHtml(processGroupName) + '\' does not have any output ports.'; + if (common.isEmpty(processGroupContents.outputPorts) === false) { + message = 'Not authorized for any output ports in \'' + common.escapeHtml(processGroupName) + '\'.'; } // there are no output ports for this process group - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Connection Configuration', dialogContent: message }); @@ -340,7 +377,7 @@ nf.ConnectionConfiguration = (function () { } }).fail(function (xhr, status, error) { // handle the error - nf.ErrorHandler.handleAjaxError(xhr, status, error); + errorHandler.handleAjaxError(xhr, status, error); deferred.reject(); }); @@ -366,7 +403,7 @@ nf.ConnectionConfiguration = (function () { var remoteProcessGroupContents = remoteProcessGroup.contents; // only proceed if there are output ports - if (!nf.Common.isEmpty(remoteProcessGroupContents.outputPorts)) { + if (!common.isEmpty(remoteProcessGroupContents.outputPorts)) { $('#output-port-source').show(); // show the output port options @@ -376,7 +413,7 @@ nf.ConnectionConfiguration = (function () { text: outputPort.name, value: outputPort.id, disabled: outputPort.exists === false, - description: nf.Common.escapeHtml(outputPort.comments) + description: common.escapeHtml(outputPort.comments) }); }); @@ -404,9 +441,9 @@ nf.ConnectionConfiguration = (function () { deferred.resolve(); } else { // there are no relationships for this processor - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Connection Configuration', - dialogContent: '\'' + nf.Common.escapeHtml(remoteProcessGroup.name) + '\' does not have any output ports.' + dialogContent: '\'' + common.escapeHtml(remoteProcessGroup.name) + '\' does not have any output ports.' }); // reset the dialog @@ -416,7 +453,7 @@ nf.ConnectionConfiguration = (function () { } }).fail(function (xhr, status, error) { // handle the error - nf.ErrorHandler.handleAjaxError(xhr, status, error); + errorHandler.handleAjaxError(xhr, status, error); deferred.reject(); }); @@ -424,13 +461,13 @@ nf.ConnectionConfiguration = (function () { }; var initializeDestinationNewConnectionDialog = function (destination) { - if (nf.CanvasUtils.isOutputPort(destination)) { + if (canvasUtils.isOutputPort(destination)) { return initializeDestinationOutputPort(destination); - } else if (nf.CanvasUtils.isProcessor(destination)) { + } else if (canvasUtils.isProcessor(destination)) { return initializeDestinationProcessor(destination); - } else if (nf.CanvasUtils.isRemoteProcessGroup(destination)) { + } else if (canvasUtils.isRemoteProcessGroup(destination)) { return initializeDestinationRemoteProcessGroup(destination); - } else if (nf.CanvasUtils.isFunnel(destination)) { + } else if (canvasUtils.isFunnel(destination)) { return initializeDestinationFunnel(destination); } else { return initializeDestinationProcessGroup(destination); @@ -450,8 +487,8 @@ nf.ConnectionConfiguration = (function () { $('#connection-destination-component-id').val(outputPortData.id); // populate the group details - $('#connection-destination-group-id').val(nf.Canvas.getGroupId()); - $('#connection-destination-group-name').text(nf.Canvas.getGroupName()); + $('#connection-destination-group-id').val(canvasUtils.getGroupId()); + $('#connection-destination-group-name').text(canvasUtils.getGroupName()); deferred.resolve(); }).promise(); @@ -468,8 +505,8 @@ nf.ConnectionConfiguration = (function () { $('#connection-destination-component-id').val(funnelData.id); // populate the group details - $('#connection-destination-group-id').val(nf.Canvas.getGroupId()); - $('#connection-destination-group-name').text(nf.Canvas.getGroupName()); + $('#connection-destination-group-id').val(canvasUtils.getGroupId()); + $('#connection-destination-group-name').text(canvasUtils.getGroupName()); deferred.resolve(); }).promise(); @@ -479,7 +516,7 @@ nf.ConnectionConfiguration = (function () { return $.Deferred(function (deferred) { var processorData = destination.datum(); var processorName = processorData.permissions.canRead ? processorData.component.name : processorData.id; - var processorType = processorData.permissions.canRead ? nf.Common.substringAfterLast(processorData.component.type, '.') : 'Processor'; + var processorType = processorData.permissions.canRead ? common.substringAfterLast(processorData.component.type, '.') : 'Processor'; $('#processor-destination').show(); $('#processor-destination-name').text(processorName).attr('title', processorName); @@ -490,8 +527,8 @@ nf.ConnectionConfiguration = (function () { $('#connection-destination-component-id').val(processorData.id); // populate the group details - $('#connection-destination-group-id').val(nf.Canvas.getGroupId()); - $('#connection-destination-group-name').text(nf.Canvas.getGroupName()); + $('#connection-destination-group-id').val(canvasUtils.getGroupId()); + $('#connection-destination-group-name').text(canvasUtils.getGroupName()); deferred.resolve(); }).promise(); @@ -521,12 +558,12 @@ nf.ConnectionConfiguration = (function () { options.push({ text: inputPort.permissions.canRead ? inputPort.component.name : inputPort.id, value: inputPort.id, - description: inputPort.permissions.canRead ? nf.Common.escapeHtml(inputPort.component.comments) : null + description: inputPort.permissions.canRead ? common.escapeHtml(inputPort.component.comments) : null }); }); // only proceed if there are output ports - if (!nf.Common.isEmpty(options)) { + if (!common.isEmpty(options)) { $('#input-port-destination').show(); // sort the options @@ -553,9 +590,9 @@ nf.ConnectionConfiguration = (function () { deferred.resolve(); } else { // there are no relationships for this processor - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Connection Configuration', - dialogContent: '\'' + nf.Common.escapeHtml(processGroupName) + '\' does not have any input ports.' + dialogContent: '\'' + common.escapeHtml(processGroupName) + '\' does not have any input ports.' }); // reset the dialog @@ -565,7 +602,7 @@ nf.ConnectionConfiguration = (function () { } }).fail(function (xhr, status, error) { // handle the error - nf.ErrorHandler.handleAjaxError(xhr, status, error); + errorHandler.handleAjaxError(xhr, status, error); deferred.reject(); }); @@ -591,7 +628,7 @@ nf.ConnectionConfiguration = (function () { var remoteProcessGroupContents = remoteProcessGroup.contents; // only proceed if there are output ports - if (!nf.Common.isEmpty(remoteProcessGroupContents.inputPorts)) { + if (!common.isEmpty(remoteProcessGroupContents.inputPorts)) { $('#input-port-destination').show(); // show the input port options @@ -601,7 +638,7 @@ nf.ConnectionConfiguration = (function () { text: inputPort.name, value: inputPort.id, disabled: inputPort.exists === false, - description: nf.Common.escapeHtml(inputPort.comments) + description: common.escapeHtml(inputPort.comments) }); }); @@ -629,9 +666,9 @@ nf.ConnectionConfiguration = (function () { deferred.resolve(); } else { // there are no relationships for this processor - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Connection Configuration', - dialogContent: '\'' + nf.Common.escapeHtml(remoteProcessGroup.name) + '\' does not have any input ports.' + dialogContent: '\'' + common.escapeHtml(remoteProcessGroup.name) + '\' does not have any input ports.' }); // reset the dialog @@ -641,7 +678,7 @@ nf.ConnectionConfiguration = (function () { } }).fail(function (xhr, status, error) { // handle the error - nf.ErrorHandler.handleAjaxError(xhr, status, error); + errorHandler.handleAjaxError(xhr, status, error); deferred.reject(); }); @@ -679,11 +716,11 @@ nf.ConnectionConfiguration = (function () { * @argument {selection} source The source */ var initializeSourceEditConnectionDialog = function (source) { - if (nf.CanvasUtils.isProcessor(source)) { + if (canvasUtils.isProcessor(source)) { return initializeSourceProcessor(source); - } else if (nf.CanvasUtils.isInputPort(source)) { + } else if (canvasUtils.isInputPort(source)) { return initializeSourceInputPort(source); - } else if (nf.CanvasUtils.isFunnel(source)) { + } else if (canvasUtils.isFunnel(source)) { return initializeSourceFunnel(source); } else { return initializeSourceReadOnlyGroup(source); @@ -697,13 +734,13 @@ nf.ConnectionConfiguration = (function () { * @argument {object} connectionDestination The connection destination object */ var initializeDestinationEditConnectionDialog = function (destination, connectionDestination) { - if (nf.CanvasUtils.isProcessor(destination)) { + if (canvasUtils.isProcessor(destination)) { return initializeDestinationProcessor(destination); - } else if (nf.CanvasUtils.isOutputPort(destination)) { + } else if (canvasUtils.isOutputPort(destination)) { return initializeDestinationOutputPort(destination); - } else if (nf.CanvasUtils.isRemoteProcessGroup(destination)) { + } else if (canvasUtils.isRemoteProcessGroup(destination)) { return initializeDestinationRemoteProcessGroup(destination, connectionDestination); - } else if (nf.CanvasUtils.isFunnel(destination)) { + } else if (canvasUtils.isFunnel(destination)) { return initializeDestinationFunnel(destination); } else { return initializeDestinationProcessGroup(destination); @@ -750,8 +787,8 @@ nf.ConnectionConfiguration = (function () { y: sourceData.position.y + (sourceData.dimensions.height / 2) }; - var xOffset = nf.Connection.config.selfLoopXOffset; - var yOffset = nf.Connection.config.selfLoopYOffset; + var xOffset = connection.config.selfLoopXOffset; + var yOffset = connection.config.selfLoopYOffset; bends.push({ 'x': (rightCenter.x + xOffset), 'y': (rightCenter.y - yOffset) @@ -764,11 +801,11 @@ nf.ConnectionConfiguration = (function () { var existingConnections = []; // get all connections for the source component - var connectionsForSourceComponent = nf.Connection.getComponentConnections(sourceComponentId); + var connectionsForSourceComponent = connection.getComponentConnections(sourceComponentId); $.each(connectionsForSourceComponent, function (_, connectionForSourceComponent) { // get the id for the source/destination component - var connectionSourceComponentId = nf.CanvasUtils.getConnectionSourceComponentId(connectionForSourceComponent); - var connectionDestinationComponentId = nf.CanvasUtils.getConnectionDestinationComponentId(connectionForSourceComponent); + var connectionSourceComponentId = canvasUtils.getConnectionSourceComponentId(connectionForSourceComponent); + var connectionDestinationComponentId = canvasUtils.getConnectionDestinationComponentId(connectionForSourceComponent); // if the connection is between these same components, consider it for collisions if ((connectionSourceComponentId === sourceComponentId && connectionDestinationComponentId === destinationComponentId) || @@ -785,7 +822,7 @@ nf.ConnectionConfiguration = (function () { $.each(existingConnections, function (_, existingConnection) { // only consider multiple connections with no bend points a collision, the existance of // bend points suggests that the user has placed the connection into a desired location - if (nf.Common.isEmpty(existingConnection.bends)) { + if (common.isEmpty(existingConnection.bends)) { avoidCollision = true; return false; } @@ -805,7 +842,7 @@ nf.ConnectionConfiguration = (function () { var collides = function (x, y) { var collides = false; $.each(existingConnections, function (_, existingConnection) { - if (!nf.Common.isEmpty(existingConnection.bends)) { + if (!common.isEmpty(existingConnection.bends)) { if (isMoreHorizontal) { // horizontal lines are adjusted in the y space if (existingConnection.bends[0].y === y) { @@ -863,8 +900,8 @@ nf.ConnectionConfiguration = (function () { var destinationGroupId = $('#connection-destination-group-id').val(); // determine the source and destination types - var sourceType = nf.CanvasUtils.getConnectableTypeForSource(source); - var destinationType = nf.CanvasUtils.getConnectableTypeForDestination(destination); + var sourceType = canvasUtils.getConnectableTypeForSource(source); + var destinationType = canvasUtils.getConnectableTypeForDestination(destination); // get the settings var connectionName = $('#connection-name').val(); @@ -875,7 +912,7 @@ nf.ConnectionConfiguration = (function () { if (validateSettings()) { var connectionEntity = { - 'revision': nf.Client.getRevision({ + 'revision': client.getRevision({ 'revision': { 'version': 0 } @@ -904,29 +941,29 @@ nf.ConnectionConfiguration = (function () { // create the new connection $.ajax({ type: 'POST', - url: config.urls.api + '/process-groups/' + encodeURIComponent(nf.Canvas.getGroupId()) + '/connections', + url: config.urls.api + '/process-groups/' + encodeURIComponent(canvasUtils.getGroupId()) + '/connections', data: JSON.stringify(connectionEntity), dataType: 'json', contentType: 'application/json' }).done(function (response) { // add the connection - nf.Graph.add({ + nfGraph.add({ 'connections': [response] }, { 'selectAll': true }); // reload the connections source/destination components - nf.CanvasUtils.reloadConnectionSourceAndDestination(sourceComponentId, destinationComponentId); + canvasUtils.reloadConnectionSourceAndDestination(sourceComponentId, destinationComponentId); // update component visibility - nf.Canvas.View.updateVisibility(); + nfGraph.updateVisibility(); // update the birdseye - nf.Birdseye.refresh(); + nfBirdseye.refresh(); }).fail(function (xhr, status, error) { // handle the error - nf.ErrorHandler.handleAjaxError(xhr, status, error); + errorHandler.handleAjaxError(xhr, status, error); }); } }; @@ -947,7 +984,7 @@ nf.ConnectionConfiguration = (function () { // get the destination details var destinationComponentId = $('#connection-destination-component-id').val(); var destination = d3.select('#id-' + destinationComponentId); - var destinationType = nf.CanvasUtils.getConnectableTypeForDestination(destination); + var destinationType = canvasUtils.getConnectableTypeForDestination(destination); // get the destination details var destinationId = $('#connection-destination-id').val(); @@ -961,9 +998,9 @@ nf.ConnectionConfiguration = (function () { var prioritizers = $('#prioritizer-selected').sortable('toArray'); if (validateSettings()) { - var d = nf.Connection.get(connectionId); + var d = connection.get(connectionId); var connectionEntity = { - 'revision': nf.Client.getRevision(d), + 'revision': client.getRevision(d), 'component': { 'id': connectionId, 'name': connectionName, @@ -989,18 +1026,18 @@ nf.ConnectionConfiguration = (function () { contentType: 'application/json' }).done(function (response) { // update this connection - nf.Connection.set(response); + connection.set(response); // reload the connections source/destination components - nf.CanvasUtils.reloadConnectionSourceAndDestination(sourceComponentId, destinationComponentId); + canvasUtils.reloadConnectionSourceAndDestination(sourceComponentId, destinationComponentId); }).fail(function (xhr, status, error) { if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Connection Configuration', - dialogContent: nf.Common.escapeHtml(xhr.responseText), + dialogContent: common.escapeHtml(xhr.responseText), }); } else { - nf.ErrorHandler.handleAjaxError(xhr, status, error); + errorHandler.handleAjaxError(xhr, status, error); } }); } else { @@ -1041,20 +1078,20 @@ nf.ConnectionConfiguration = (function () { var errors = []; // validate the settings - if (nf.Common.isBlank($('#flow-file-expiration').val())) { + if (common.isBlank($('#flow-file-expiration').val())) { errors.push('File expiration must be specified'); } if (!$.isNumeric($('#back-pressure-object-threshold').val())) { errors.push('Back pressure object threshold must be an integer value'); } - if (nf.Common.isBlank($('#back-pressure-data-size-threshold').val())) { + if (common.isBlank($('#back-pressure-data-size-threshold').val())) { errors.push('Back pressure data size threshold must be specified'); } if (errors.length > 0) { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Connection Configuration', - dialogContent: nf.Common.formatUnorderedList(errors) + dialogContent: common.formatUnorderedList(errors) }); return false; } else { @@ -1093,7 +1130,7 @@ nf.ConnectionConfiguration = (function () { $('#relationship-names-container').hide(); // clear the id field - nf.Common.clearField('connection-id'); + common.clearField('connection-id'); // hide all the connection source panels $('#processor-source').hide(); @@ -1126,8 +1163,18 @@ nf.ConnectionConfiguration = (function () { removeTempEdge(); }; - return { - init: function () { + var nfConnectionConfiguration = { + + /** + * Initialize the connection configuration. + * + * @param birdseye The reference to the birdseye controller. + * @param graph The reference to the graph controller. + */ + init: function (birdseye, graph) { + nfBirdseye = birdseye; + nfGraph = graph; + // initially hide the relationship names container $('#relationship-names-container').hide(); @@ -1141,7 +1188,7 @@ nf.ConnectionConfiguration = (function () { resetDialog(); }, open: function () { - nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0)); + common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0)); } } }); @@ -1168,7 +1215,7 @@ nf.ConnectionConfiguration = (function () { }).done(function (response) { // create an element for each available prioritizer $.each(response.prioritizerTypes, function (i, documentedType) { - nf.ConnectionConfiguration.addAvailablePrioritizer('#prioritizer-available', documentedType); + nfConnectionConfiguration.addAvailablePrioritizer('#prioritizer-available', documentedType); }); // make the prioritizer containers sortable @@ -1179,7 +1226,7 @@ nf.ConnectionConfiguration = (function () { opacity: 0.6 }); $('#prioritizer-available, #prioritizer-selected').disableSelection(); - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); }, /** @@ -1190,17 +1237,17 @@ nf.ConnectionConfiguration = (function () { */ addAvailablePrioritizer: function (prioritizerContainer, prioritizerType) { var type = prioritizerType.type; - var name = nf.Common.substringAfterLast(type, '.'); + var name = common.substringAfterLast(type, '.'); // add the prioritizers to the available list var prioritizerList = $(prioritizerContainer); var prioritizer = $('
  • ').append($('').text(name)).attr('id', type).addClass('ui-state-default').appendTo(prioritizerList); // add the description if applicable - if (nf.Common.isDefinedAndNotNull(prioritizerType.description)) { + if (common.isDefinedAndNotNull(prioritizerType.description)) { $('
    ').appendTo(prioritizer).qtip($.extend({ - content: nf.Common.escapeHtml(prioritizerType.description) - }, nf.Common.config.tooltipConfig)); + content: common.escapeHtml(prioritizerType.description) + }, common.config.tooltipConfig)); } }, @@ -1236,7 +1283,7 @@ nf.ConnectionConfiguration = (function () { $('#connection-configuration div.relationship-name').ellipsis(); // fill in the connection id - nf.Common.populateField('connection-id', null); + common.populateField('connection-id', null); // show the border if necessary var relationshipNames = $('#relationship-names'); @@ -1262,12 +1309,12 @@ nf.ConnectionConfiguration = (function () { var connection = connectionEntry.component; // identify the source component - var sourceComponentId = nf.CanvasUtils.getConnectionSourceComponentId(connectionEntry); + var sourceComponentId = canvasUtils.getConnectionSourceComponentId(connectionEntry); var source = d3.select('#id-' + sourceComponentId); // identify the destination component - if (nf.Common.isUndefinedOrNull(destination)) { - var destinationComponentId = nf.CanvasUtils.getConnectionDestinationComponentId(connectionEntry); + if (common.isUndefinedOrNull(destination)) { + var destinationComponentId = canvasUtils.getConnectionDestinationComponentId(connectionEntry); destination = d3.select('#id-' + destinationComponentId); } @@ -1277,7 +1324,7 @@ nf.ConnectionConfiguration = (function () { var selectedRelationships = connection.selectedRelationships; // show the available relationship if applicable - if (nf.Common.isDefinedAndNotNull(availableRelationships) || nf.Common.isDefinedAndNotNull(selectedRelationships)) { + if (common.isDefinedAndNotNull(availableRelationships) || common.isDefinedAndNotNull(selectedRelationships)) { // populate the available connections $.each(availableRelationships, function (i, name) { createRelationshipOption(name); @@ -1304,14 +1351,14 @@ nf.ConnectionConfiguration = (function () { } // if the source is a process group or remote process group, select the appropriate port if applicable - if (nf.CanvasUtils.isProcessGroup(source) || nf.CanvasUtils.isRemoteProcessGroup(source)) { + if (canvasUtils.isProcessGroup(source) || canvasUtils.isRemoteProcessGroup(source)) { // populate the connection source details $('#connection-source-id').val(connection.source.id); $('#read-only-output-port-name').text(connection.source.name).attr('title', connection.source.name); } // if the destination is a process gorup or remote process group, select the appropriate port if applicable - if (nf.CanvasUtils.isProcessGroup(destination) || nf.CanvasUtils.isRemoteProcessGroup(destination)) { + if (canvasUtils.isProcessGroup(destination) || canvasUtils.isRemoteProcessGroup(destination)) { var destinationData = destination.datum(); // when the group ids differ, its a new destination component so we don't want to preselect any port @@ -1329,7 +1376,7 @@ nf.ConnectionConfiguration = (function () { $('#back-pressure-data-size-threshold').val(connection.backPressureDataSizeThreshold); // format the connection id - nf.Common.populateField('connection-id', connection.id); + common.populateField('connection-id', connection.id); // handle each prioritizer $.each(connection.prioritizers, function (i, type) { @@ -1353,7 +1400,7 @@ nf.ConnectionConfiguration = (function () { var selectedRelationships = getSelectedRelationships(); // see if we're working with a processor as the source - if (nf.CanvasUtils.isProcessor(source)) { + if (canvasUtils.isProcessor(source)) { if (selectedRelationships.length > 0) { // if there are relationships selected update updateConnection(selectedRelationships).done(function () { @@ -1363,7 +1410,7 @@ nf.ConnectionConfiguration = (function () { }); } else { // inform users that no relationships were selected and the source is a processor - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Connection Configuration', dialogContent: 'The connection must have at least one relationship selected.' }); @@ -1423,4 +1470,6 @@ nf.ConnectionConfiguration = (function () { }).promise(); } }; -}()); \ No newline at end of file + + return nfConnectionConfiguration; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection.js index e6252cbfdc..2dbb5131a0 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection.js @@ -15,9 +15,44 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.Connection = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'd3', + 'nf.Common', + 'nf.Dialog', + 'nf.ErrorHandler', + 'nf.Client', + 'nf.CanvasUtils'], + function ($, d3, common, dialog, errorHandler, client, canvasUtils) { + return (nf.Connection = factory($, d3, common, dialog, errorHandler, client, canvasUtils)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.Connection = + factory(require('jquery'), + require('d3'), + require('nf.Common'), + require('nf.Dialog'), + require('nf.ErrorHandler'), + require('nf.Client'), + require('nf.CanvasUtils'))); + } else { + nf.Connection = factory(root.$, + root.d3, + root.nf.Common, + root.nf.Dialog, + root.nf.ErrorHandler, + root.nf.Client, + root.nf.CanvasUtils); + } +}(this, function ($, d3, common, dialog, errorHandler, client, canvasUtils) { + 'use strict'; + + var nfCanvas; + var nfSelectable; + var nfContextMenu; // the dimensions for the connection label var dimensions = { @@ -162,7 +197,7 @@ nf.Connection = (function () { for (var i = 0; i < line.length; i++) { if (i + 1 < line.length) { var distance = distanceToSegment(p, line[i], line[i + 1]); - if (nf.Common.isUndefined(minimumDistance) || distance < minimumDistance) { + if (common.isUndefined(minimumDistance) || distance < minimumDistance) { minimumDistance = distance; index = i; } @@ -197,7 +232,7 @@ nf.Connection = (function () { * @param {object} terminal */ var isGroup = function (terminal) { - return terminal.groupId !== nf.Canvas.getGroupId() && (isInputPortType(terminal.type) || isOutputPortType(terminal.type)); + return terminal.groupId !== canvasUtils.getGroupId() && (isInputPortType(terminal.type) || isOutputPortType(terminal.type)); }; /** @@ -207,7 +242,7 @@ nf.Connection = (function () { * @return {boolean} Whether expiration is configured */ var isExpirationConfigured = function (connection) { - if (nf.Common.isDefinedAndNotNull(connection.flowFileExpiration)) { + if (common.isDefinedAndNotNull(connection.flowFileExpiration)) { var match = connection.flowFileExpiration.match(/^(\d+).*/); if (match !== null && match.length > 0) { if (parseInt(match[0], 10) > 0) { @@ -274,9 +309,9 @@ nf.Connection = (function () { }) .on('mousedown.selection', function () { // select the connection when clicking the selectable path - nf.Selectable.select(d3.select(this.parentNode)); + nfSelectable.select(d3.select(this.parentNode)); }) - .call(nf.ContextMenu.activate); + .call(nfContextMenu.activate); }; // determines whether the specified connection contains an unsupported relationship @@ -284,7 +319,7 @@ nf.Connection = (function () { var unavailable = false; // verify each selected relationship is still available - if (nf.Common.isDefinedAndNotNull(d.component.selectedRelationships) && nf.Common.isDefinedAndNotNull(d.component.availableRelationships)) { + if (common.isDefinedAndNotNull(d.component.selectedRelationships) && common.isDefinedAndNotNull(d.component.availableRelationships)) { $.each(d.component.selectedRelationships, function (_, selectedRelationship) { if ($.inArray(selectedRelationship, d.component.availableRelationships) === -1) { unavailable = true; @@ -331,7 +366,7 @@ nf.Connection = (function () { // determines whether the connection is in warning based on the object count threshold var isWarningCount = function (d) { var percentUseCount = d.status.aggregateSnapshot.percentUseCount; - if (nf.Common.isDefinedAndNotNull(percentUseCount)) { + if (common.isDefinedAndNotNull(percentUseCount)) { return percentUseCount >= 61 && percentUseCount <= 85; } @@ -341,7 +376,7 @@ nf.Connection = (function () { // determines whether the connection is in error based on the object count threshold var isErrorCount = function (d) { var percentUseCount = d.status.aggregateSnapshot.percentUseCount; - if (nf.Common.isDefinedAndNotNull(percentUseCount)) { + if (common.isDefinedAndNotNull(percentUseCount)) { return percentUseCount > 85; } @@ -356,7 +391,7 @@ nf.Connection = (function () { // determines whether the connection is in warning based on the data size threshold var isWarningBytes = function (d) { var percentUseBytes = d.status.aggregateSnapshot.percentUseBytes; - if (nf.Common.isDefinedAndNotNull(percentUseBytes)) { + if (common.isDefinedAndNotNull(percentUseBytes)) { return percentUseBytes >= 61 && percentUseBytes <= 85; } @@ -366,7 +401,7 @@ nf.Connection = (function () { // determines whether the connection is in error based on the data size threshold var isErrorBytes = function (d) { var percentUseBytes = d.status.aggregateSnapshot.percentUseBytes; - if (nf.Common.isDefinedAndNotNull(percentUseBytes)) { + if (common.isDefinedAndNotNull(percentUseBytes)) { return percentUseBytes > 85; } @@ -384,10 +419,10 @@ nf.Connection = (function () { var transition = false; // extract the options if specified - if (nf.Common.isDefinedAndNotNull(options)) { - updatePath = nf.Common.isDefinedAndNotNull(options.updatePath) ? options.updatePath : updatePath; - updateLabel = nf.Common.isDefinedAndNotNull(options.updateLabel) ? options.updateLabel : updateLabel; - transition = nf.Common.isDefinedAndNotNull(options.transition) ? options.transition : transition; + if (common.isDefinedAndNotNull(options)) { + updatePath = common.isDefinedAndNotNull(options.updatePath) ? options.updatePath : updatePath; + updateLabel = common.isDefinedAndNotNull(options.updateLabel) ? options.updateLabel : updateLabel; + transition = common.isDefinedAndNotNull(options.transition) ? options.transition : transition; } if (updatePath === true) { @@ -397,7 +432,7 @@ nf.Connection = (function () { if (d.permissions.canRead) { // if there are more than one selected relationship, mark this as grouped - if (nf.Common.isDefinedAndNotNull(d.component.selectedRelationships) && d.component.selectedRelationships.length > 1) { + if (common.isDefinedAndNotNull(d.component.selectedRelationships) && d.component.selectedRelationships.length > 1) { grouped = true; } } @@ -472,7 +507,7 @@ nf.Connection = (function () { if (updatePath === true) { // calculate the start and end points - var sourceComponentId = nf.CanvasUtils.getConnectionSourceComponentId(d); + var sourceComponentId = canvasUtils.getConnectionSourceComponentId(d); var sourceData = d3.select('#id-' + sourceComponentId).datum(); var end; @@ -487,9 +522,9 @@ nf.Connection = (function () { }; } - // if we are currently dragging the endpoint to a new target, use that + // if we are currently dragging the endpoint to a new target, use that // position, otherwise we need to calculate it for the current target - if (nf.Common.isDefinedAndNotNull(d.end) && d.end.dragging === true) { + if (common.isDefinedAndNotNull(d.end) && d.end.dragging === true) { // since we're dragging, use the same object thats bound to the endpoint drag event end = d.end; @@ -499,7 +534,7 @@ nf.Connection = (function () { var newDestinationData = newDestination.datum(); // get the position on the new destination perimeter - var newEnd = nf.CanvasUtils.getPerimeterPoint(endAnchor, { + var newEnd = canvasUtils.getPerimeterPoint(endAnchor, { 'x': newDestinationData.position.x, 'y': newDestinationData.position.y, 'width': newDestinationData.dimensions.width, @@ -511,11 +546,11 @@ nf.Connection = (function () { end.y = newEnd.y; } } else { - var destinationComponentId = nf.CanvasUtils.getConnectionDestinationComponentId(d); + var destinationComponentId = canvasUtils.getConnectionDestinationComponentId(d); var destinationData = d3.select('#id-' + destinationComponentId).datum(); // get the position on the destination perimeter - end = nf.CanvasUtils.getPerimeterPoint(endAnchor, { + end = canvasUtils.getPerimeterPoint(endAnchor, { 'x': destinationData.position.x, 'y': destinationData.position.y, 'width': destinationData.dimensions.width, @@ -532,7 +567,7 @@ nf.Connection = (function () { } // get the position on the source perimeter - var start = nf.CanvasUtils.getPerimeterPoint(startAnchor, { + var start = canvasUtils.getPerimeterPoint(startAnchor, { 'x': sourceData.position.x, 'y': sourceData.position.y, 'width': sourceData.dimensions.width, @@ -544,21 +579,21 @@ nf.Connection = (function () { d.end = end; // update the connection paths - nf.CanvasUtils.transition(connection.select('path.connection-path'), transition) + canvasUtils.transition(connection.select('path.connection-path'), transition) .attr({ 'd': function () { var datum = [d.start].concat(d.bends, [d.end]); return lineGenerator(datum); } }); - nf.CanvasUtils.transition(connection.select('path.connection-selection-path'), transition) + canvasUtils.transition(connection.select('path.connection-selection-path'), transition) .attr({ 'd': function () { var datum = [d.start].concat(d.bends, [d.end]); return lineGenerator(datum); } }); - nf.CanvasUtils.transition(connection.select('path.connection-path-selectable'), transition) + canvasUtils.transition(connection.select('path.connection-path-selectable'), transition) .attr({ 'd': function () { var datum = [d.start].concat(d.bends, [d.end]); @@ -594,12 +629,12 @@ nf.Connection = (function () { }) .on('mousedown.selection', function () { // select the connection when clicking the label - nf.Selectable.select(d3.select(this.parentNode)); + nfSelectable.select(d3.select(this.parentNode)); }) - .call(nf.ContextMenu.activate); + .call(nfContextMenu.activate); // update the start point - nf.CanvasUtils.transition(startpoints, transition) + canvasUtils.transition(startpoints, transition) .attr('transform', function (p) { return 'translate(' + (p.x - 4) + ', ' + (p.y - 4) + ')'; }); @@ -624,12 +659,12 @@ nf.Connection = (function () { }) .on('mousedown.selection', function () { // select the connection when clicking the label - nf.Selectable.select(d3.select(this.parentNode)); + nfSelectable.select(d3.select(this.parentNode)); }) - .call(nf.ContextMenu.activate); + .call(nfContextMenu.activate); // update the end point - nf.CanvasUtils.transition(endpoints, transition) + canvasUtils.transition(endpoints, transition) .attr('transform', function (p) { return 'translate(' + (p.x - 4) + ', ' + (p.y - 4) + ')'; }); @@ -660,10 +695,10 @@ nf.Connection = (function () { var connectionData = connection.datum(); // if this is a self loop prevent removing the last two bends - var sourceComponentId = nf.CanvasUtils.getConnectionSourceComponentId(connectionData); - var destinationComponentId = nf.CanvasUtils.getConnectionDestinationComponentId(connectionData); + var sourceComponentId = canvasUtils.getConnectionSourceComponentId(connectionData); + var destinationComponentId = canvasUtils.getConnectionDestinationComponentId(connectionData); if (sourceComponentId === destinationComponentId && d.component.bends.length <= 2) { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Connection', dialogContent: 'Looping connections must have at least two bend points.' }); @@ -704,12 +739,12 @@ nf.Connection = (function () { }) .on('mousedown.selection', function () { // select the connection when clicking the label - nf.Selectable.select(d3.select(this.parentNode)); + nfSelectable.select(d3.select(this.parentNode)); }) - .call(nf.ContextMenu.activate); + .call(nfContextMenu.activate); // update the midpoints - nf.CanvasUtils.transition(midpoints, transition) + canvasUtils.transition(midpoints, transition) .attr('transform', function (p) { return 'translate(' + (p.x - 4) + ', ' + (p.y - 4) + ')'; }); @@ -730,7 +765,7 @@ nf.Connection = (function () { // update visible connections if (connection.classed('visible')) { - // if there is no connection label this connection is becoming + // if there is no connection label this connection is becoming // visible so we need to render it if (connectionLabelContainer.empty()) { // connection label container @@ -741,9 +776,9 @@ nf.Connection = (function () { }) .on('mousedown.selection', function () { // select the connection when clicking the label - nf.Selectable.select(d3.select(this.parentNode)); + nfSelectable.select(d3.select(this.parentNode)); }) - .call(nf.ContextMenu.activate); + .call(nfContextMenu.activate); // connection label connectionLabelContainer.append('rect') @@ -846,7 +881,7 @@ nf.Connection = (function () { connectionFromLabel.text(null).selectAll('title').remove(); // apply ellipsis to the label as necessary - nf.CanvasUtils.ellipsis(connectionFromLabel, d.component.source.name); + canvasUtils.ellipsis(connectionFromLabel, d.component.source.name); }).append('title').text(function () { return d.component.source.name; }); @@ -955,7 +990,7 @@ nf.Connection = (function () { connectionToLabel.text(null).selectAll('title').remove(); // apply ellipsis to the label as necessary - nf.CanvasUtils.ellipsis(connectionToLabel, d.component.destination.name); + canvasUtils.ellipsis(connectionToLabel, d.component.destination.name); }).append('title').text(function (d) { return d.component.destination.name; }); @@ -998,10 +1033,10 @@ nf.Connection = (function () { // ----------------------- // get the connection name - var connectionNameValue = nf.CanvasUtils.formatConnectionName(d.component); + var connectionNameValue = canvasUtils.formatConnectionName(d.component); // is there a name to render - if (!nf.Common.isBlank(connectionNameValue)) { + if (!common.isBlank(connectionNameValue)) { // see if the connection name label is already rendered if (connectionName.empty()) { connectionName = connectionLabelContainer.append('g') @@ -1060,7 +1095,7 @@ nf.Connection = (function () { connectionToLabel.text(null).selectAll('title').remove(); // apply ellipsis to the label as necessary - nf.CanvasUtils.ellipsis(connectionToLabel, connectionNameValue); + canvasUtils.ellipsis(connectionToLabel, connectionNameValue); }).append('title').text(function () { return connectionNameValue; }); @@ -1288,31 +1323,31 @@ nf.Connection = (function () { } }) .select('title').text(function () { - if (d.permissions.canRead) { - return 'Expires FlowFiles older than ' + d.component.flowFileExpiration; - } else { - return ''; - } - }); + if (d.permissions.canRead) { + return 'Expires FlowFiles older than ' + d.component.flowFileExpiration; + } else { + return ''; + } + }); // update backpressure object fill connectionLabelContainer.select('rect.backpressure-object') .classed('not-configured', function () { - return nf.Common.isUndefinedOrNull(d.status.aggregateSnapshot.percentUseCount); + return common.isUndefinedOrNull(d.status.aggregateSnapshot.percentUseCount); }); connectionLabelContainer.selectAll('rect.backpressure-tick.object') .classed('not-configured', function () { - return nf.Common.isUndefinedOrNull(d.status.aggregateSnapshot.percentUseCount); + return common.isUndefinedOrNull(d.status.aggregateSnapshot.percentUseCount); }); // update backpressure data size fill connectionLabelContainer.select('rect.backpressure-data-size') .classed('not-configured', function () { - return nf.Common.isUndefinedOrNull(d.status.aggregateSnapshot.percentUseBytes); + return common.isUndefinedOrNull(d.status.aggregateSnapshot.percentUseBytes); }); connectionLabelContainer.selectAll('rect.backpressure-tick.data-size') .classed('not-configured', function () { - return nf.Common.isUndefinedOrNull(d.status.aggregateSnapshot.percentUseBytes); + return common.isUndefinedOrNull(d.status.aggregateSnapshot.percentUseBytes); }); if (d.permissions.canWrite) { @@ -1330,7 +1365,7 @@ nf.Connection = (function () { } // update the position of the label if possible - nf.CanvasUtils.transition(connection.select('g.connection-label-container'), transition) + canvasUtils.transition(connection.select('g.connection-label-container'), transition) .attr('transform', function () { var label = d3.select(this).select('rect.body'); var position = getLabelPosition(label); @@ -1354,7 +1389,7 @@ nf.Connection = (function () { // queued count value updated.select('text.queued tspan.count') .text(function (d) { - return nf.Common.substringBeforeFirst(d.status.aggregateSnapshot.queued, ' '); + return common.substringBeforeFirst(d.status.aggregateSnapshot.queued, ' '); }); var backpressurePercentDataSize = updated.select('rect.backpressure-percent.data-size'); @@ -1362,26 +1397,26 @@ nf.Connection = (function () { .duration(400) .attr({ 'width': function (d) { - if (nf.Common.isDefinedAndNotNull(d.status.aggregateSnapshot.percentUseBytes)) { + if (common.isDefinedAndNotNull(d.status.aggregateSnapshot.percentUseBytes)) { return (backpressureBarWidth * d.status.aggregateSnapshot.percentUseBytes) / 100; } else { return 0; } } }).each('end', function () { - backpressurePercentDataSize - .classed('warning', function (d) { - return isWarningBytes(d); - }) - .classed('error', function (d) { - return isErrorBytes(d); - }); + backpressurePercentDataSize + .classed('warning', function (d) { + return isWarningBytes(d); + }) + .classed('error', function (d) { + return isErrorBytes(d); + }); - deferred.resolve(); - }); + deferred.resolve(); + }); updated.select('rect.backpressure-data-size').select('title').text(function (d) { - if (nf.Common.isDefinedAndNotNull(d.status.aggregateSnapshot.percentUseBytes)) { + if (common.isDefinedAndNotNull(d.status.aggregateSnapshot.percentUseBytes)) { return 'Queue is ' + d.status.aggregateSnapshot.percentUseBytes + '% full based on Back Pressure Data Size Threshold'; } else { return 'Back Pressure Data Size Threshold is not configured'; @@ -1394,7 +1429,7 @@ nf.Connection = (function () { // queued size value updated.select('text.queued tspan.size') .text(function (d) { - return ' ' + nf.Common.substringAfterFirst(d.status.aggregateSnapshot.queued, ' '); + return ' ' + common.substringAfterFirst(d.status.aggregateSnapshot.queued, ' '); }); var backpressurePercentObject = updated.select('rect.backpressure-percent.object'); @@ -1402,26 +1437,26 @@ nf.Connection = (function () { .duration(400) .attr({ 'width': function (d) { - if (nf.Common.isDefinedAndNotNull(d.status.aggregateSnapshot.percentUseCount)) { + if (common.isDefinedAndNotNull(d.status.aggregateSnapshot.percentUseCount)) { return (backpressureBarWidth * d.status.aggregateSnapshot.percentUseCount) / 100; } else { return 0; } } }).each('end', function () { - backpressurePercentObject - .classed('warning', function (d) { - return isWarningCount(d); - }) - .classed('error', function (d) { - return isErrorCount(d); - }); + backpressurePercentObject + .classed('warning', function (d) { + return isWarningCount(d); + }) + .classed('error', function (d) { + return isErrorCount(d); + }); - deferred.resolve(); - }); + deferred.resolve(); + }); updated.select('rect.backpressure-object').select('title').text(function (d) { - if (nf.Common.isDefinedAndNotNull(d.status.aggregateSnapshot.percentUseCount)) { + if (common.isDefinedAndNotNull(d.status.aggregateSnapshot.percentUseCount)) { return 'Queue is ' + d.status.aggregateSnapshot.percentUseCount + '% full based on Back Pressure Object Threshold'; } else { return 'Back Pressure Object Threshold is not configured'; @@ -1463,7 +1498,7 @@ nf.Connection = (function () { */ var save = function (d, connection) { var entity = { - 'revision': nf.Client.getRevision(d), + 'revision': client.getRevision(d), 'component': connection }; @@ -1475,15 +1510,15 @@ nf.Connection = (function () { contentType: 'application/json' }).done(function (response) { // request was successful, update the entry - nf.Connection.set(response); + nfConnection.set(response); }).fail(function (xhr, status, error) { if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Connection', - dialogContent: nf.Common.escapeHtml(xhr.responseText) + dialogContent: common.escapeHtml(xhr.responseText) }); } else { - nf.ErrorHandler.handleAjaxError(xhr, status, error); + errorHandler.handleAjaxError(xhr, status, error); } }); }; @@ -1492,20 +1527,23 @@ nf.Connection = (function () { var removeConnections = function (removed) { // consider reloading source/destination of connection being removed removed.each(function (d) { - nf.CanvasUtils.reloadConnectionSourceAndDestination(d.sourceId, d.destinationId); + canvasUtils.reloadConnectionSourceAndDestination(d.sourceId, d.destinationId); }); // remove the connection removed.remove(); }; - return { + var nfConnection = { config: { selfLoopXOffset: (dimensions.width / 2) + 5, selfLoopYOffset: 25 }, - init: function () { + init: function (selectable, contextMenu) { + nfSelectable = selectable; + nfContextMenu = contextMenu; + connectionMap = d3.map(); removedCache = d3.map(); addedCache = d3.map(); @@ -1600,7 +1638,7 @@ nf.Connection = (function () { // ensure the new destination is valid d3.select('g.hover').classed('connectable-destination', function () { - return nf.CanvasUtils.isValidConnectionDestination(d3.select(this)); + return canvasUtils.isValidConnectionDestination(d3.select(this)); }); // redraw this connection @@ -1629,11 +1667,11 @@ nf.Connection = (function () { }); } else { // prompt for the new port if appropriate - if (nf.CanvasUtils.isProcessGroup(destination) || nf.CanvasUtils.isRemoteProcessGroup(destination)) { + if (canvasUtils.isProcessGroup(destination) || canvasUtils.isRemoteProcessGroup(destination)) { // user will select new port and updated connect details will be set accordingly - nf.ConnectionConfiguration.showConfiguration(connection, destination).done(function () { + nfConnectionConfiguration.showConfiguration(connection, destination).done(function () { // reload the previous destination - nf.CanvasUtils.reloadConnectionSourceAndDestination(null, previousDestinationId); + canvasUtils.reloadConnectionSourceAndDestination(null, previousDestinationId); }).fail(function () { // reset the connection connection.call(updateConnections, { @@ -1644,15 +1682,15 @@ nf.Connection = (function () { } else { // get the destination details var destinationData = destination.datum(); - var destinationType = nf.CanvasUtils.getConnectableTypeForDestination(destination); + var destinationType = canvasUtils.getConnectableTypeForDestination(destination); var connectionEntity = { - 'revision': nf.Client.getRevision(connectionData), + 'revision': client.getRevision(connectionData), 'component': { 'id': connectionData.id, 'destination': { 'id': destinationData.id, - 'groupId': nf.Canvas.getGroupId(), + 'groupId': canvasUtils.getGroupId(), 'type': destinationType } } @@ -1664,8 +1702,8 @@ nf.Connection = (function () { x: destinationData.position.x + (destinationData.dimensions.width), y: destinationData.position.y + (destinationData.dimensions.height / 2) }; - var xOffset = nf.Connection.config.selfLoopXOffset; - var yOffset = nf.Connection.config.selfLoopYOffset; + var xOffset = nfConnection.config.selfLoopXOffset; + var yOffset = nfConnection.config.selfLoopYOffset; connectionEntity.component.bends = []; connectionEntity.component.bends.push({ @@ -1688,16 +1726,16 @@ nf.Connection = (function () { var updatedConnectionData = response.component; // refresh to update the label - nf.Connection.set(response); + nfConnection.set(response); // reload the previous destination and the new source/destination - nf.CanvasUtils.reloadConnectionSourceAndDestination(null, previousDestinationId); - nf.CanvasUtils.reloadConnectionSourceAndDestination(response.sourceId, response.destinationId); + canvasUtils.reloadConnectionSourceAndDestination(null, previousDestinationId); + canvasUtils.reloadConnectionSourceAndDestination(response.sourceId, response.destinationId); }).fail(function (xhr, status, error) { if (xhr.status === 400 || xhr.status === 401 || xhr.status === 403 || xhr.status === 404 || xhr.status === 409) { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Connection', - dialogContent: nf.Common.escapeHtml(xhr.responseText) + dialogContent: common.escapeHtml(xhr.responseText) }); // reset the connection @@ -1706,7 +1744,7 @@ nf.Connection = (function () { 'updateLabel': false }); } else { - nf.ErrorHandler.handleAjaxError(xhr, status, error); + errorHandler.handleAjaxError(xhr, status, error); } }); } @@ -1743,10 +1781,10 @@ nf.Connection = (function () { .attr('width', width) .attr('height', height) .attr('stroke-width', function () { - return 1 / nf.Canvas.View.scale(); + return 1 / canvasUtils.scaleCanvasView(); }) .attr('stroke-dasharray', function () { - return 4 / nf.Canvas.View.scale(); + return 4 / canvasUtils.scaleCanvasView(); }) .datum({ x: position.x, @@ -1847,8 +1885,8 @@ nf.Connection = (function () { */ add: function (connectionEntities, options) { var selectAll = false; - if (nf.Common.isDefinedAndNotNull(options)) { - selectAll = nf.Common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; + if (common.isDefinedAndNotNull(options)) { + selectAll = common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; } // get the current time @@ -1868,7 +1906,7 @@ nf.Connection = (function () { $.each(connectionEntities, function (_, connectionEntity) { add(connectionEntity); }); - } else if (nf.Common.isDefinedAndNotNull(connectionEntities)) { + } else if (common.isDefinedAndNotNull(connectionEntities)) { add(connectionEntities); } @@ -1881,6 +1919,56 @@ nf.Connection = (function () { }).call(sort); }, + /** + * Determines if the specified selection is disconnected from other nodes. + * + * @argument {selection} selection The selection + */ + isDisconnected: function (selection) {
 + + // if nothing is selected return + if (selection.empty()) { + return false; + } + var connections = d3.map(); + var components = d3.map(); + var isDisconnected = true;

 + + // include connections + selection.filter(function (d) { + return d.type === 'Connection'; + }).each(function (d) { + connections.set(d.id, d); + });

 + + // include components and ensure their connections are included + selection.filter(function (d) { + return d.type !== 'Connection'; + }).each(function (d) { + components.set(d.id, d.component);

 + + // check all connections of this component + $.each(nfConnection.getComponentConnections(d.id), function (_, connection) { + if (!connections.has(connection.id)) { + isDisconnected = false; + return false; + } + }); + }); + if (isDisconnected) {
 + + // go through each connection to ensure its source and destination are included + connections.forEach(function (id, connection) { + if (isDisconnected) {
 + + // determine whether this connection and its components are included within the selection + isDisconnected = components.has(canvasUtils.getConnectionSourceComponentId(connection)) && components.has(canvasUtils.getConnectionDestinationComponentId(connection)); + } + }); + } + return isDisconnected; + }, + /** * Populates the graph with the specified connections. * @@ -1890,16 +1978,16 @@ nf.Connection = (function () { set: function (connectionEntities, options) { var selectAll = false; var transition = false; - if (nf.Common.isDefinedAndNotNull(options)) { - selectAll = nf.Common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; - transition = nf.Common.isDefinedAndNotNull(options.transition) ? options.transition : transition; + if (common.isDefinedAndNotNull(options)) { + selectAll = common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; + transition = common.isDefinedAndNotNull(options.transition) ? options.transition : transition; } var set = function (proposedConnectionEntity) { var currentConnectionEntity = connectionMap.get(proposedConnectionEntity.id); // set the connection if appropriate due to revision and wasn't previously removed - if (nf.Client.isNewerRevision(currentConnectionEntity, proposedConnectionEntity) && !removedCache.has(proposedConnectionEntity.id)) { + if (client.isNewerRevision(currentConnectionEntity, proposedConnectionEntity) && !removedCache.has(proposedConnectionEntity.id)) { connectionMap.set(proposedConnectionEntity.id, $.extend({ type: 'Connection' }, proposedConnectionEntity)); @@ -1922,7 +2010,7 @@ nf.Connection = (function () { $.each(connectionEntities, function (_, connectionEntity) { set(connectionEntity); }); - } else if (nf.Common.isDefinedAndNotNull(connectionEntities)) { + } else if (common.isDefinedAndNotNull(connectionEntities)) { set(connectionEntities); } @@ -1943,7 +2031,7 @@ nf.Connection = (function () { * @param {string} connectionId */ refresh: function (connectionId) { - if (nf.Common.isDefinedAndNotNull(connectionId)) { + if (common.isDefinedAndNotNull(connectionId)) { d3.select('#id-' + connectionId).call(updateConnections, { 'updatePath': true, 'updateLabel': true @@ -1992,7 +2080,7 @@ nf.Connection = (function () { * Removes all processors. */ removeAll: function () { - nf.Connection.remove(connectionMap.keys()); + nfConnection.remove(connectionMap.keys()); }, /** @@ -2008,7 +2096,7 @@ nf.Connection = (function () { url: connectionEntity.uri, dataType: 'json' }).done(function (response) { - nf.Connection.set(response); + nfConnection.set(response); }); } }, @@ -2046,7 +2134,7 @@ nf.Connection = (function () { var connections = []; connectionMap.forEach(function (_, entry) { // see if this component is the source or destination of this connection - if (nf.CanvasUtils.getConnectionSourceComponentId(entry) === id || nf.CanvasUtils.getConnectionDestinationComponentId(entry) === id) { + if (canvasUtils.getConnectionSourceComponentId(entry) === id || canvasUtils.getConnectionDestinationComponentId(entry) === id) { connections.push(entry); } }); @@ -2060,7 +2148,7 @@ nf.Connection = (function () { * @param {string} id */ get: function (id) { - if (nf.Common.isUndefined(id)) { + if (common.isUndefined(id)) { return connectionMap.values(); } else { return connectionMap.get(id); @@ -2085,4 +2173,6 @@ nf.Connection = (function () { expire(removedCache); } }; -}()); \ No newline at end of file + + return nfConnection; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js index b51ddb069a..ba0acb06fb 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js @@ -15,9 +15,39 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ContextMenu = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'd3', + 'nf.ErrorHandler', + 'nf.Common', + 'nf.CanvasUtils', + 'nf.ng.Bridge'], + function ($, d3, errorHandler, common, canvasUtils, angularBridge) { + return (nf.ContextMenu = factory($, d3, errorHandler, common, canvasUtils, angularBridge)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ContextMenu = + factory(require('jquery'), + require('d3'), + require('nf.ErrorHandler'), + require('nf.Common'), + require('nf.CanvasUtils'), + require('nf.ng.Bridge'))); + } else { + nf.ContextMenu = factory(root.$, + root.d3, + root.nf.ErrorHandler, + root.nf.Common, + root.nf.CanvasUtils, + root.nf.ng.Bridge); + } +}(this, function ($, d3, errorHandler, common, canvasUtils, angularBridge) { + 'use strict'; + + var nfActions; /** * Returns whether the current group is not the root group. @@ -25,57 +55,57 @@ nf.ContextMenu = (function () { * @param {selection} selection The selection of currently selected components */ var isNotRootGroup = function (selection) { - return nf.Canvas.getParentGroupId() !== null && selection.empty(); + return canvasUtils.getParentGroupId() !== null && selection.empty(); }; /** * Determines whether the component in the specified selection is configurable. - * + * * @param {selection} selection The selection of currently selected components */ var isConfigurable = function (selection) { - return nf.CanvasUtils.isConfigurable(selection); + return canvasUtils.isConfigurable(selection); }; /** * Determines whether the component in the specified selection has configuration details. - * + * * @param {selection} selection The selection of currently selected components */ var hasDetails = function (selection) { - return nf.CanvasUtils.hasDetails(selection); + return canvasUtils.hasDetails(selection); }; /** * Determines whether the components in the specified selection are deletable. - * - * @param {selection} selection The selection of currently selected components + * + * @param {selection} selection The selection of currently selected components */ var isDeletable = function (selection) { - return nf.CanvasUtils.areDeletable(selection); + return canvasUtils.areDeletable(selection); }; /** * Determines whether the components in the specified selection are runnable. - * - * @param {selection} selection The selection of currently selected components + * + * @param {selection} selection The selection of currently selected components */ var isRunnable = function (selection) { - return nf.CanvasUtils.areRunnable(selection); + return canvasUtils.areRunnable(selection); }; /** * Determines whether the components in the specified selection are stoppable. - * - * @param {selection} selection The selection of currently selected components + * + * @param {selection} selection The selection of currently selected components */ var isStoppable = function (selection) { - return nf.CanvasUtils.areStoppable(selection); + return canvasUtils.areStoppable(selection); }; /** * Determines whether the components in the specified selection support stats. - * + * * @param {selection} selection The selection of currently selected components */ var supportsStats = function (selection) { @@ -84,12 +114,12 @@ nf.ContextMenu = (function () { return false; } - return nf.CanvasUtils.isProcessor(selection) || nf.CanvasUtils.isProcessGroup(selection) || nf.CanvasUtils.isRemoteProcessGroup(selection) || nf.CanvasUtils.isConnection(selection); + return canvasUtils.isProcessor(selection) || canvasUtils.isProcessGroup(selection) || canvasUtils.isRemoteProcessGroup(selection) || canvasUtils.isConnection(selection); }; /** * Determines whether the components in the specified selection has usage documentation. - * + * * @param {selection} selection The selection of currently selected components */ var hasUsage = function (selection) { @@ -97,43 +127,43 @@ nf.ContextMenu = (function () { if (selection.size() !== 1) { return false; } - if (nf.CanvasUtils.canRead(selection) === false) { + if (canvasUtils.canRead(selection) === false) { return false; } - return nf.CanvasUtils.isProcessor(selection); + return canvasUtils.isProcessor(selection); }; /** * Determines whether there is one component selected. - * + * * @param {selection} selection The selection of currently selected components */ var isNotConnection = function (selection) { - return selection.size() === 1 && !nf.CanvasUtils.isConnection(selection); + return selection.size() === 1 && !canvasUtils.isConnection(selection); }; /** * Determines whether the components in the specified selection are copyable. - * + * * @param {selection} selection The selection of currently selected components */ var isCopyable = function (selection) { - return nf.CanvasUtils.isCopyable(selection); + return canvasUtils.isCopyable(selection); }; /** * Determines whether the components in the specified selection are pastable. - * + * * @param {selection} selection The selection of currently selected components */ var isPastable = function (selection) { - return nf.CanvasUtils.isPastable(); + return canvasUtils.isPastable(); }; /** * Determines whether the specified selection is empty. - * + * * @param {selection} selection The seleciton */ var emptySelection = function (selection) { @@ -142,7 +172,7 @@ nf.ContextMenu = (function () { /** * Determines whether the componets in the specified selection support being moved to the front. - * + * * @param {selection} selection The selection */ var canMoveToFront = function (selection) { @@ -150,11 +180,11 @@ nf.ContextMenu = (function () { if (selection.size() !== 1) { return false; } - if (nf.CanvasUtils.canModify(selection) === false) { + if (canvasUtils.canModify(selection) === false) { return false; } - return nf.CanvasUtils.isConnection(selection); + return canvasUtils.isConnection(selection); }; /** @@ -163,7 +193,7 @@ nf.ContextMenu = (function () { * @param {selection} selection The selection */ var canAlign = function (selection) { - return nf.CanvasUtils.canAlign(selection); + return canvasUtils.canAlign(selection); }; /** @@ -172,12 +202,12 @@ nf.ContextMenu = (function () { * @param {selection} selection The selection */ var isColorable = function (selection) { - return nf.CanvasUtils.isColorable(selection); + return canvasUtils.isColorable(selection); }; /** * Determines whether the component in the specified selection is a connection. - * + * * @param {selection} selection The selection */ var isConnection = function (selection) { @@ -186,12 +216,12 @@ nf.ContextMenu = (function () { return false; } - return nf.CanvasUtils.isConnection(selection); + return canvasUtils.isConnection(selection); }; /** * Determines whether the component in the specified selection could possibly have downstream components. - * + * * @param {selection} selection The selection */ var hasDownstream = function (selection) { @@ -200,14 +230,14 @@ nf.ContextMenu = (function () { return false; } - return nf.CanvasUtils.isFunnel(selection) || nf.CanvasUtils.isProcessor(selection) || nf.CanvasUtils.isProcessGroup(selection) || - nf.CanvasUtils.isRemoteProcessGroup(selection) || nf.CanvasUtils.isInputPort(selection) || - (nf.CanvasUtils.isOutputPort(selection) && nf.Canvas.getParentGroupId() !== null); + return canvasUtils.isFunnel(selection) || canvasUtils.isProcessor(selection) || canvasUtils.isProcessGroup(selection) || + canvasUtils.isRemoteProcessGroup(selection) || canvasUtils.isInputPort(selection) || + (canvasUtils.isOutputPort(selection) && canvasUtils.getParentGroupId() !== null); }; /** * Determines whether the component in the specified selection could possibly have upstream components. - * + * * @param {selection} selection The selection */ var hasUpstream = function (selection) { @@ -216,9 +246,9 @@ nf.ContextMenu = (function () { return false; } - return nf.CanvasUtils.isFunnel(selection) || nf.CanvasUtils.isProcessor(selection) || nf.CanvasUtils.isProcessGroup(selection) || - nf.CanvasUtils.isRemoteProcessGroup(selection) || nf.CanvasUtils.isOutputPort(selection) || - (nf.CanvasUtils.isInputPort(selection) && nf.Canvas.getParentGroupId() !== null); + return canvasUtils.isFunnel(selection) || canvasUtils.isProcessor(selection) || canvasUtils.isProcessGroup(selection) || + canvasUtils.isRemoteProcessGroup(selection) || canvasUtils.isOutputPort(selection) || + (canvasUtils.isInputPort(selection) && canvasUtils.getParentGroupId() !== null); }; /** @@ -231,11 +261,11 @@ nf.ContextMenu = (function () { if (selection.size() !== 1) { return false; } - if (nf.CanvasUtils.canRead(selection) === false || nf.CanvasUtils.canModify(selection) === false) { + if (canvasUtils.canRead(selection) === false || canvasUtils.canModify(selection) === false) { return false; } - if (nf.CanvasUtils.isProcessor(selection)) { + if (canvasUtils.isProcessor(selection)) { var processorData = selection.datum(); return processorData.component.persistsState === true; } else { @@ -245,7 +275,7 @@ nf.ContextMenu = (function () { /** * Determines whether the current selection is a process group. - * + * * @param {selection} selection */ var isProcessGroup = function (selection) { @@ -254,7 +284,7 @@ nf.ContextMenu = (function () { return false; } - return nf.CanvasUtils.isProcessGroup(selection); + return canvasUtils.isProcessGroup(selection); }; /** @@ -268,56 +298,56 @@ nf.ContextMenu = (function () { return false; } - return !nf.CanvasUtils.isLabel(selection) && !nf.CanvasUtils.isConnection(selection) && !nf.CanvasUtils.isProcessGroup(selection) - && !nf.CanvasUtils.isRemoteProcessGroup(selection) && nf.Common.canAccessProvenance(); + return !canvasUtils.isLabel(selection) && !canvasUtils.isConnection(selection) && !canvasUtils.isProcessGroup(selection) + && !canvasUtils.isRemoteProcessGroup(selection) && common.canAccessProvenance(); }; /** * Determines whether the current selection is a remote process group. - * - * @param {selection} selection + * + * @param {selection} selection */ var isRemoteProcessGroup = function (selection) { // ensure the correct number of components are selected if (selection.size() !== 1) { return false; } - if (nf.CanvasUtils.canRead(selection) === false) { + if (canvasUtils.canRead(selection) === false) { return false; } - return nf.CanvasUtils.isRemoteProcessGroup(selection); + return canvasUtils.isRemoteProcessGroup(selection); }; /** * Determines if the components in the specified selection support starting transmission. - * + * * @param {selection} selection */ var canStartTransmission = function (selection) { - if (nf.CanvasUtils.canModify(selection) === false) { + if (canvasUtils.canModify(selection) === false) { return false; } - - return nf.CanvasUtils.canAllStartTransmitting(selection); + + return canvasUtils.canAllStartTransmitting(selection); }; /** * Determines if the components in the specified selection support stopping transmission. - * + * * @param {selection} selection */ var canStopTransmission = function (selection) { - if (nf.CanvasUtils.canModify(selection) === false) { + if (canvasUtils.canModify(selection) === false) { return false; } - - return nf.CanvasUtils.canAllStopTransmitting(selection); + + return canvasUtils.canAllStopTransmitting(selection); }; - + /** * Only DFMs can empty a queue. - * + * * @param {selection} selection */ var canEmptyQueue = function (selection) { @@ -332,31 +362,31 @@ nf.ContextMenu = (function () { var canListQueue = function (selection) { return isConnection(selection); }; - + /** * Determines if the components in the specified selection can be moved into a parent group. - * + * * @param {type} selection */ var canMoveToParent = function (selection) { - if (nf.CanvasUtils.canModify(selection) === false) { + if (canvasUtils.canModify(selection) === false) { return false; } // TODO - also check can modify in parent - - return !selection.empty() && nf.CanvasUtils.isDisconnected(selection) && nf.Canvas.getParentGroupId() !== null; + + return !selection.empty() && canvasUtils.getComponentByType('Connection').isDisconnected(selection) && canvasUtils.getParentGroupId() !== null; }; /** * Adds a menu item to the context menu. - * + * * { * click: refresh (function), * text: 'Start' (string), * clazz: 'fa fa-refresh' * } - * + * * @param {jQuery} contextMenu The context menu * @param {object} item The menu item configuration */ @@ -377,10 +407,10 @@ nf.ContextMenu = (function () { // create the img and conditionally add the style var img = $('
    ').addClass(item['clazz']).appendTo(menuItem); - if (nf.Common.isDefinedAndNotNull(item['imgStyle'])) { + if (common.isDefinedAndNotNull(item['imgStyle'])) { img.addClass(item['imgStyle']); } - + $('
    ').text(item['text']).appendTo(menuItem); $('
    ').appendTo(menuItem); } @@ -388,7 +418,7 @@ nf.ContextMenu = (function () { /** * Positions and shows the context menu. - * + * * @param {jQuery} contextMenu The context menu * @param {object} options The context menu configuration */ @@ -401,17 +431,17 @@ nf.ContextMenu = (function () { /** * Executes the specified action with the optional selection. - * + * * @param {string} action * @param {selection} selection * @param {mouse event} evt */ var executeAction = function (action, selection, evt) { // execute the action - nf.Actions[action](selection, evt); + nfActions[action](selection, evt); // close the context menu - nf.ContextMenu.hide(); + nfContextMenu.hide(); }; // defines the available actions and the conditions which they apply @@ -425,7 +455,7 @@ nf.ContextMenu = (function () { {condition: isStoppable, menuItem: {clazz: 'fa fa-stop', text: 'Stop', action: 'stop'}}, {condition: isRemoteProcessGroup, menuItem: {clazz: 'fa fa-cloud', text: 'Remote ports', action: 'remotePorts'}}, {condition: canStartTransmission, menuItem: {clazz: 'fa fa-bullseye', text: 'Enable transmission', action: 'enableTransmission'}}, - {condition: canStopTransmission, menuItem: {clazz: 'icon icon-transmit-false', text: 'Disable transmission', action: 'disableTransmission'}}, + {condition: canStopTransmission, menuItem: { clazz: 'icon icon-transmit-false', text: 'Disable transmission', action: 'disableTransmission'}}, {condition: supportsStats, menuItem: {clazz: 'fa fa-area-chart', text: 'Status History', action: 'showStats'}}, {condition: canAccessProvenance, menuItem: {clazz: 'icon icon-provenance', imgStyle: 'context-menu-provenance', text: 'Data provenance', action: 'openProvenance'}}, {condition: isStatefulProcessor, menuItem: {clazz: 'fa fa-tasks', text: 'View state', action: 'viewState'}}, @@ -446,20 +476,28 @@ nf.ContextMenu = (function () { {condition: canEmptyQueue, menuItem: {clazz: 'fa fa-minus-circle', text: 'Empty queue', action: 'emptyQueue'}}, {condition: isDeletable, menuItem: {clazz: 'fa fa-trash', text: 'Delete', action: 'delete'}}, {condition: canAlign, menuItem: {clazz: 'fa fa-align-center', text: 'Align vertical', action: 'alignVertical'}}, - {condition: canAlign, menuItem: {clazz: 'fa fa-align-center fa-rotate-90', text: 'Align horizontal', action: 'alignHorizontal'}} + {condition: canAlign, menuItem: { clazz: 'fa fa-align-center fa-rotate-90', text: 'Align horizontal', action: 'alignHorizontal'}} ]; - return { - init: function () { - $('#context-menu').on('contextmenu', function(evt) { + var nfContextMenu = { + + /** + * Initialize the context menu. + * + * @param actions The reference to the actions controller. + */ + init: function (actions) { + nfActions = actions; + + $('#context-menu').on('contextmenu', function (evt) { // stop propagation and prevent default evt.preventDefault(); evt.stopPropagation(); }); }, - + /** - * Shows the context menu. + * Shows the context menu. */ show: function () { var contextMenu = $('#context-menu').empty(); @@ -468,17 +506,17 @@ nf.ContextMenu = (function () { var breadCrumb = $('#breadcrumbs').get(0); // get the current selection - var selection = nf.CanvasUtils.getSelection(); + var selection = canvasUtils.getSelection(); // consider each component action for the current selection $.each(actions, function (_, action) { // determine if this action is application for this selection - if (action.condition(selection)) { + if (action.condition(selection, canvasUtils.getComponentByType('Connection'))) { var menuItem = action.menuItem; addMenuItem(contextMenu, { clazz: menuItem.clazz, - imgStyle: menuItem.imgStyle, + imgStyle: menuItem.imgStyle, text: menuItem.text, click: function (evt) { executeAction(menuItem.action, selection, evt); @@ -505,25 +543,25 @@ nf.ContextMenu = (function () { }); // inform Angular app incase we've click on the canvas - nf.ng.Bridge.digest(); + angularBridge.digest(); }, - + /** * Hides the context menu. */ hide: function () { $('#context-menu').hide(); }, - + /** * Activates the context menu for the components in the specified selection. - * + * * @param {selection} components The components to enable the context menu for */ activate: function (components) { components.on('contextmenu.selection', function () { // get the clicked component to update selection - nf.ContextMenu.show(); + nfContextMenu.show(); // stop propagation and prevent default d3.event.preventDefault(); @@ -531,4 +569,6 @@ nf.ContextMenu = (function () { }); } }; -}()); \ No newline at end of file + + return nfContextMenu; +})); \ No newline at end of file diff --git a/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-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js index 3ab4ab9c7c..45ddec51df 100644 --- a/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-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js @@ -15,9 +15,58 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ControllerService = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'd3', + 'nf.ErrorHandler', + 'nf.Common', + 'nf.Dialog', + 'nf.Client', + 'nf.ControllerServices', + 'nf.Settings', + 'nf.UniversalCapture', + 'nf.CustomUi', + 'nf.CanvasUtils', + 'nf.ReportingTask', + 'nf.Processor'], + function ($, d3, errorHandler, common, dialog, client, controllerServices, settings, universalCapture, customUi, canvasUtils, reportingTask, processor) { + return (nf.ControllerService = factory($, d3, errorHandler, common, dialog, client, controllerServices, settings, universalCapture, customUi, canvasUtils, reportingTask, processor)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ControllerService = + factory(require('jquery'), + require('d3'), + require('nf.ErrorHandler'), + require('nf.Common'), + require('nf.Dialog'), + require('nf.Client'), + require('nf.ControllerServices'), + require('nf.Settings'), + require('nf.UniversalCapture'), + require('nf.CustomUi'), + require('nf.CanvasUtils'), + require('nf.ReportingTask'), + require('nf.Processor'))); + } else { + nf.ControllerService = factory(root.$, + root.d3, + root.nf.ErrorHandler, + root.nf.Common, + root.nf.Dialog, + root.nf.Client, + root.nf.ControllerServices, + root.nf.Settings, + root.nf.UniversalCapture, + root.nf.CustomUi, + root.nf.CanvasUtils, + root.nf.ReportingTask, + root.nf.Processor); + } +}(this, function ($, d3, errorHandler, common, dialog, client, controllerServices, settings, universalCapture, customUi, canvasUtils, reportingTask, processor) { + 'use strict'; var config = { edit: 'edit', @@ -44,15 +93,15 @@ nf.ControllerService = (function () { if (errors.length === 1) { content = $('').text(errors[0]); } else { - content = nf.Common.formatUnorderedList(errors); + content = common.formatUnorderedList(errors); } - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ dialogContent: content, headerText: 'Controller Service' }); } else { - nf.ErrorHandler.handleAjaxError(xhr, status, error); + errorHandler.handleAjaxError(xhr, status, error); } }; @@ -128,7 +177,7 @@ nf.ControllerService = (function () { // service B that has been removed. attempting to enable/disable/remove A // will attempt to reload B which is no longer a known service. also ensure // we have permissions to reload the service - if (nf.Common.isUndefined(controllerServiceEntity) || controllerServiceEntity.permissions.canRead === false) { + if (common.isUndefined(controllerServiceEntity) || controllerServiceEntity.permissions.canRead === false) { return $.Deferred(function (deferred) { deferred.reject(); }).promise(); @@ -140,7 +189,7 @@ nf.ControllerService = (function () { dataType: 'json' }).done(function (response) { renderControllerService(serviceTable, response); - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); }; /** @@ -167,7 +216,7 @@ nf.ControllerService = (function () { * @param {type} controllerService */ var reloadControllerServiceAndReferencingComponents = function (serviceTable, controllerService) { - reloadControllerService(serviceTable, controllerService.id).done(function(response) { + reloadControllerService(serviceTable, controllerService.id).done(function (response) { reloadControllerServiceReferences(serviceTable, response.component); }); }; @@ -190,8 +239,8 @@ nf.ControllerService = (function () { var reference = referencingComponentEntity.component; if (reference.referenceType === 'Processor') { // reload the processor on the canvas if appropriate - if (nf.Canvas.getGroupId() === reference.groupId) { - nf.Processor.reload(reference.id); + if (canvasUtils.getGroupId() === reference.groupId) { + processor.reload(reference.id); } // update the current active thread count @@ -204,7 +253,7 @@ nf.ControllerService = (function () { } } else if (reference.referenceType === 'ReportingTask') { // reload the referencing reporting tasks - nf.ReportingTask.reload(reference.id); + reportingTask.reload(reference.id); // update the current active thread count $('div.' + reference.id + '-active-threads').text(reference.activeThreadCount); @@ -217,7 +266,7 @@ nf.ControllerService = (function () { } else { // reload the referencing services reloadControllerService(serviceTable, reference.id); - + // update the current state of this service var referencingComponentState = $('div.' + reference.id + '-state'); if (referencingComponentState.length) { @@ -233,9 +282,9 @@ nf.ControllerService = (function () { // see if this controller service references another controller service // in order to update the referenced service referencing components - nf.ControllerService.reloadReferencedServices(serviceTable, controllerService); - }; - + nfControllerService.reloadReferencedServices(serviceTable, controllerService); + }; + /** * Adds a border to the controller service referencing components if necessary. * @@ -264,22 +313,22 @@ nf.ControllerService = (function () { var currentBulletins = bulletinIcon.data('bulletins'); // update the bulletins if necessary - if (nf.Common.doBulletinsDiffer(currentBulletins, bulletins)) { + if (common.doBulletinsDiffer(currentBulletins, bulletins)) { bulletinIcon.data('bulletins', bulletins); // format the new bulletins - var formattedBulletins = nf.Common.getFormattedBulletins(bulletins); + var formattedBulletins = common.getFormattedBulletins(bulletins); // if there are bulletins update them if (bulletins.length > 0) { - var list = nf.Common.formatUnorderedList(formattedBulletins); + var list = common.formatUnorderedList(formattedBulletins); // update existing tooltip or initialize a new one if appropriate if (bulletinIcon.data('qtip')) { bulletinIcon.qtip('option', 'content.text', list); } else { bulletinIcon.addClass('has-bulletins').show().qtip($.extend({}, - nf.CanvasUtils.config.systemTooltipConfig, + canvasUtils.config.systemTooltipConfig, { content: list })); @@ -301,16 +350,16 @@ nf.ControllerService = (function () { var icon = $(this); var state = referencingComponent.state.toLowerCase(); - if (state === 'stopped' && !nf.Common.isEmpty(referencingComponent.validationErrors)) { + if (state === 'stopped' && !common.isEmpty(referencingComponent.validationErrors)) { state = 'invalid'; // add tooltip for the warnings - var list = nf.Common.formatUnorderedList(referencingComponent.validationErrors); + var list = common.formatUnorderedList(referencingComponent.validationErrors); if (icon.data('qtip')) { icon.qtip('option', 'content.text', list); } else { icon.qtip($.extend({}, - nf.CanvasUtils.config.systemTooltipConfig, + canvasUtils.config.systemTooltipConfig, { content: list })); @@ -333,16 +382,16 @@ nf.ControllerService = (function () { var icon = $(this); var state = referencingService.state === 'ENABLED' ? 'enabled' : 'disabled'; - if (state === 'disabled' && !nf.Common.isEmpty(referencingService.validationErrors)) { + if (state === 'disabled' && !common.isEmpty(referencingService.validationErrors)) { state = 'invalid'; // add tooltip for the warnings - var list = nf.Common.formatUnorderedList(referencingService.validationErrors); + var list = common.formatUnorderedList(referencingService.validationErrors); if (icon.data('qtip')) { icon.qtip('option', 'content.text', list); } else { icon.qtip($.extend({}, - nf.CanvasUtils.config.systemTooltipConfig, + canvasUtils.config.systemTooltipConfig, { content: list })); @@ -377,11 +426,11 @@ nf.ControllerService = (function () { * Adds the specified reference for this controller service. * * @param {jQuery} serviceTable - * @param {jQuery} referenceContainer + * @param {jQuery} referenceContainer * @param {array} referencingComponents */ var createReferencingComponents = function (serviceTable, referenceContainer, referencingComponents) { - if (nf.Common.isEmpty(referencingComponents)) { + if (common.isEmpty(referencingComponents)) { referenceContainer.append('
    No referencing components.
    '); return; } @@ -414,7 +463,7 @@ nf.ControllerService = (function () { if (referencingComponent.referenceType === 'Processor') { var processorLink = $('').text(referencingComponent.name).on('click', function () { // show the component - nf.CanvasUtils.showComponent(referencingComponent.groupId, referencingComponent.id); + canvasUtils.showComponent(referencingComponent.groupId, referencingComponent.id); // close the dialog and shell referenceContainer.closest('.dialog').modal('hide'); @@ -429,11 +478,11 @@ nf.ControllerService = (function () { var processorBulletins = $('
    ').addClass(referencingComponent.id + '-bulletins'); // type - var processorType = $('').text(nf.Common.substringAfterLast(referencingComponent.type, '.')); + var processorType = $('').text(common.substringAfterLast(referencingComponent.type, '.')); // active thread count var processorActiveThreadCount = $('').addClass(referencingComponent.id + '-active-threads'); - if (nf.Common.isDefinedAndNotNull(referencingComponent.activeThreadCount) && referencingComponent.activeThreadCount > 0) { + if (common.isDefinedAndNotNull(referencingComponent.activeThreadCount) && referencingComponent.activeThreadCount > 0) { processorActiveThreadCount.text('(' + referencingComponent.activeThreadCount + ')'); } @@ -484,7 +533,7 @@ nf.ControllerService = (function () { var serviceBulletins = $('
    ').addClass(referencingComponent.id + '-bulletins'); // type - var serviceType = $('').text(nf.Common.substringAfterLast(referencingComponent.type, '.')); + var serviceType = $('').text(common.substringAfterLast(referencingComponent.type, '.')); // service var serviceItem = $('
  • ').append(serviceTwist).append(serviceState).append(serviceBulletins).append(serviceLink).append(serviceType).append(referencingServiceReferencesContainer); @@ -515,11 +564,11 @@ nf.ControllerService = (function () { var reportingTaskBulletins = $('
    ').addClass(referencingComponent.id + '-bulletins'); // type - var reportingTaskType = $('').text(nf.Common.substringAfterLast(referencingComponent.type, '.')); + var reportingTaskType = $('').text(common.substringAfterLast(referencingComponent.type, '.')); // active thread count var reportingTaskActiveThreadCount = $('').addClass(referencingComponent.id + '-active-threads'); - if (nf.Common.isDefinedAndNotNull(referencingComponent.activeThreadCount) && referencingComponent.activeThreadCount > 0) { + if (common.isDefinedAndNotNull(referencingComponent.activeThreadCount) && referencingComponent.activeThreadCount > 0) { reportingTaskActiveThreadCount.text('(' + referencingComponent.activeThreadCount + ')'); } @@ -583,7 +632,7 @@ nf.ControllerService = (function () { sourceId: ids }, dataType: 'json' - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); }; /** @@ -597,7 +646,7 @@ nf.ControllerService = (function () { var setEnabled = function (serviceTable, controllerServiceEntity, enabled, pollCondition) { // build the request entity var updateControllerServiceEntity = { - 'revision': nf.Client.getRevision(controllerServiceEntity), + 'revision': client.getRevision(controllerServiceEntity), 'component': { 'id': controllerServiceEntity.id, 'state': enabled ? 'ENABLED' : 'DISABLED' @@ -612,7 +661,7 @@ nf.ControllerService = (function () { contentType: 'application/json' }).done(function (response) { renderControllerService(serviceTable, response); - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); // wait until the polling of each service finished return $.Deferred(function (deferred) { @@ -691,11 +740,11 @@ nf.ControllerService = (function () { if (serviceOnly) { if (referencingComponent.referenceType === 'ControllerService') { - referencingComponentRevisions[referencingComponentEntity.id] = nf.Client.getRevision(referencingComponentEntity); + referencingComponentRevisions[referencingComponentEntity.id] = client.getRevision(referencingComponentEntity); } } else { if (referencingComponent.referenceType !== 'ControllerService') { - referencingComponentRevisions[referencingComponentEntity.id] = nf.Client.getRevision(referencingComponentEntity); + referencingComponentRevisions[referencingComponentEntity.id] = client.getRevision(referencingComponentEntity); } } @@ -730,7 +779,7 @@ nf.ControllerService = (function () { data: JSON.stringify(referenceEntity), dataType: 'json', contentType: 'application/json' - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); // Note: updated revisions will be retrieved after updateReferencingSchedulableComponents is invoked @@ -810,7 +859,7 @@ nf.ControllerService = (function () { conditionMet(serviceResponse.component, bulletinResponse.bulletinBoard.bulletins); }).fail(function (xhr, status, error) { deferred.reject(); - nf.ErrorHandler.handleAjaxError(xhr, status, error); + errorHandler.handleAjaxError(xhr, status, error); }); }; @@ -832,7 +881,7 @@ nf.ControllerService = (function () { conditionMet(controllerService, response.bulletinBoard.bulletins); }).fail(function (xhr, status, error) { deferred.reject(); - nf.ErrorHandler.handleAjaxError(xhr, status, error); + errorHandler.handleAjaxError(xhr, status, error); }); }).promise(); }; @@ -1002,7 +1051,7 @@ nf.ControllerService = (function () { data: JSON.stringify(referenceEntity), dataType: 'json', contentType: 'application/json' - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); // Note: updated revisions will be retrieved after updateReferencingServices is invoked @@ -1135,7 +1184,7 @@ nf.ControllerService = (function () { // show the dialog $('#enable-controller-service-dialog').modal('setButtonModel', buttons).modal('show'); - + // load the bulletins queryBulletins([controllerService.id]).done(function (response) { updateBulletins(response.bulletinBoard.bulletins, $('#enable-controller-service-bulletins')); @@ -1157,7 +1206,7 @@ nf.ControllerService = (function () { * * @param {jQuery} serviceTable */ - var disableHandler = function(serviceTable) { + var disableHandler = function (serviceTable) { var disableDialog = $('#disable-controller-service-dialog'); var canceled = false; @@ -1214,7 +1263,7 @@ nf.ControllerService = (function () { if (hasUnauthorizedReferencingComponent(controllerService.referencingComponents)) { setCloseButton(); - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Controller Service', dialogContent: 'Unable to disable due to unauthorized referencing components.' }); @@ -1263,7 +1312,7 @@ nf.ControllerService = (function () { // inform the user if the action was canceled if (canceled === true && $('#nf-ok-dialog').not(':visible')) { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Controller Service', dialogContent: 'The request to disable has been canceled. Parts of this request may have already completed. Please verify the state of this service and all referencing components.' }); @@ -1301,7 +1350,7 @@ nf.ControllerService = (function () { * * @param {jQuery} serviceTable */ - var enableHandler = function(serviceTable) { + var enableHandler = function (serviceTable) { var enableDialog = $('#enable-controller-service-dialog'); var canceled = false; @@ -1367,7 +1416,7 @@ nf.ControllerService = (function () { if (scope === config.serviceAndReferencingComponents && hasUnauthorizedReferencingComponent(controllerService.referencingComponents)) { setCloseButton(); - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Controller Service', dialogContent: 'Unable to enable due to unauthorized referencing components.' }); @@ -1396,7 +1445,7 @@ nf.ControllerService = (function () { var enableReferencingSchedulable = $('#enable-referencing-schedulable').addClass('ajax-loading'); // start all referencing schedulable components - updateReferencingSchedulableComponents(serviceTable, controllerServiceEntity, true, continuePolling).done(function() { + updateReferencingSchedulableComponents(serviceTable, controllerServiceEntity, true, continuePolling).done(function () { deferred.resolve(); enableReferencingSchedulable.removeClass('ajax-loading').addClass('ajax-complete'); }).fail(function () { @@ -1426,7 +1475,7 @@ nf.ControllerService = (function () { // inform the user if the action was canceled if (canceled === true && $('#nf-ok-dialog').not(':visible')) { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Controller Service', dialogContent: 'The request to enable has been canceled. Parts of this request may have already completed. Please verify the state of this service and all referencing components.' }); @@ -1448,7 +1497,7 @@ nf.ControllerService = (function () { propertyName: propertyName }, dataType: 'json' - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); }; /** @@ -1464,7 +1513,7 @@ nf.ControllerService = (function () { // determine if changes have been made if (isSaveRequired()) { // see if those changes should be saved - nf.Dialog.showYesNoDialog({ + dialog.showYesNoDialog({ headerText: 'Save', dialogContent: 'Save changes before going to this Controller Service?', noHandler: function () { @@ -1484,19 +1533,19 @@ nf.ControllerService = (function () { } }).promise(); }; - + var saveControllerService = function (serviceTable, controllerServiceEntity) { // marshal the settings and properties and update the controller service var updatedControllerService = marshalDetails(); // ensure details are valid as far as we can tell if (validateDetails(updatedControllerService)) { - updatedControllerService['revision'] = nf.Client.getRevision(controllerServiceEntity); + updatedControllerService['revision'] = client.getRevision(controllerServiceEntity); var previouslyReferencedServiceIds = []; $.each(identifyReferencedServiceDescriptors(controllerServiceEntity.component), function (_, descriptor) { - var modifyingService = !nf.Common.isUndefined(updatedControllerService.component.properties) && !nf.Common.isUndefined(updatedControllerService.component.properties[descriptor.name]); - var isCurrentlyConfigured = nf.Common.isDefinedAndNotNull(controllerServiceEntity.component.properties[descriptor.name]); + var modifyingService = !common.isUndefined(updatedControllerService.component.properties) && !common.isUndefined(updatedControllerService.component.properties[descriptor.name]); + var isCurrentlyConfigured = common.isDefinedAndNotNull(controllerServiceEntity.component.properties[descriptor.name]); // if we are attempting to update a controller service reference if (modifyingService && isCurrentlyConfigured) { @@ -1516,9 +1565,9 @@ nf.ControllerService = (function () { }).done(function (response) { // reload the controller service renderControllerService(serviceTable, response); - + // reload all previously referenced controller services - $.each(previouslyReferencedServiceIds, function(_, oldServiceReferenceId) { + $.each(previouslyReferencedServiceIds, function (_, oldServiceReferenceId) { reloadControllerService(serviceTable, oldServiceReferenceId); }); }).fail(handleControllerServiceConfigurationError); @@ -1538,7 +1587,7 @@ nf.ControllerService = (function () { var referencedServiceDescriptors = []; $.each(component.descriptors, function (_, descriptor) { - if (nf.Common.isDefinedAndNotNull(descriptor.identifiesControllerService)) { + if (common.isDefinedAndNotNull(descriptor.identifiesControllerService)) { referencedServiceDescriptors.push(descriptor); } }); @@ -1558,7 +1607,7 @@ nf.ControllerService = (function () { var referencedServiceId = component.properties[descriptor.name]; // ensure the property is configured - if (nf.Common.isDefinedAndNotNull(referencedServiceId) && $.trim(referencedServiceId).length > 0) { + if (common.isDefinedAndNotNull(referencedServiceId) && $.trim(referencedServiceId).length > 0) { referencedServices.push(referencedServiceId); } }); @@ -1571,7 +1620,7 @@ nf.ControllerService = (function () { */ var currentTable; - return { + var nfControllerService = { /** * Initializes the controller service configuration dialog. */ @@ -1593,7 +1642,7 @@ nf.ControllerService = (function () { }], select: function () { // remove all property detail dialogs - nf.UniversalCapture.removeAllPropertyDetailDialogs(); + universalCapture.removeAllPropertyDetailDialogs(); // update the property table size in case this is the first time its rendered if ($(this).text() === 'Properties') { @@ -1617,8 +1666,8 @@ nf.ControllerService = (function () { close: function () { // empty the referencing components list var referencingComponents = $('#controller-service-referencing-components'); - nf.Common.cleanUpTooltips(referencingComponents, 'div.referencing-component-state'); - nf.Common.cleanUpTooltips(referencingComponents, 'div.referencing-component-bulletins'); + common.cleanUpTooltips(referencingComponents, 'div.referencing-component-state'); + common.cleanUpTooltips(referencingComponents, 'div.referencing-component-bulletins'); referencingComponents.css('border-width', '0').empty(); // cancel any active edits @@ -1628,13 +1677,13 @@ nf.ControllerService = (function () { $('#controller-service-properties').propertytable('clear'); // clear the comments - nf.Common.clearField('read-only-controller-service-comments'); + common.clearField('read-only-controller-service-comments'); // removed the cached controller service details $('#controller-service-configuration').removeData('controllerServiceDetails'); }, open: function () { - nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0)); + common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0)); } } }); @@ -1657,15 +1706,15 @@ nf.ControllerService = (function () { // bulletins $('#disable-controller-service-bulletins').removeClass('has-bulletins').removeData('bulletins').hide(); - nf.Common.cleanUpTooltips($('#disable-controller-service-service-container'), '#disable-controller-service-bulletins'); + common.cleanUpTooltips($('#disable-controller-service-service-container'), '#disable-controller-service-bulletins'); // reset progress $('div.disable-referencing-components').removeClass('ajax-loading ajax-complete ajax-error'); // referencing components var referencingComponents = $('#disable-controller-service-referencing-components'); - nf.Common.cleanUpTooltips(referencingComponents, 'div.referencing-component-state'); - nf.Common.cleanUpTooltips(referencingComponents, 'div.referencing-component-bulletins'); + common.cleanUpTooltips(referencingComponents, 'div.referencing-component-state'); + common.cleanUpTooltips(referencingComponents, 'div.referencing-component-bulletins'); referencingComponents.css('border-width', '0').empty(); } } @@ -1703,15 +1752,15 @@ nf.ControllerService = (function () { // bulletins $('#enable-controller-service-bulletins').removeClass('has-bulletins').removeData('bulletins').hide(); - nf.Common.cleanUpTooltips($('#enable-controller-service-service-container'), '#enable-controller-service-bulletins'); + common.cleanUpTooltips($('#enable-controller-service-service-container'), '#enable-controller-service-bulletins'); // reset progress $('div.enable-referencing-components').removeClass('ajax-loading ajax-complete ajax-error'); // referencing components var referencingComponents = $('#enable-controller-service-referencing-components'); - nf.Common.cleanUpTooltips(referencingComponents, 'div.referencing-component-state'); - nf.Common.cleanUpTooltips(referencingComponents, 'div.referencing-component-bulletins'); + common.cleanUpTooltips(referencingComponents, 'div.referencing-component-state'); + common.cleanUpTooltips(referencingComponents, 'div.referencing-component-bulletins'); referencingComponents.css('border-width', '0').empty(); } } @@ -1725,7 +1774,7 @@ nf.ControllerService = (function () { * @argument {object} controllerServiceEntity The controller service */ showConfiguration: function (serviceTable, controllerServiceEntity) { - if (nf.Common.isUndefined(currentTable)){ + if (common.isUndefined(currentTable)) { currentTable = serviceTable; } var controllerServiceDialog = $('#controller-service-configuration'); @@ -1740,20 +1789,20 @@ nf.ControllerService = (function () { supportsGoTo: true, dialogContainer: '#new-controller-service-property-container', descriptorDeferred: getControllerServicePropertyDescriptor, - controllerServiceCreatedDeferred: function(response) { + controllerServiceCreatedDeferred: function (response) { var controllerServicesUri; var createdControllerServicesTable; // calculate the correct uri var createdControllerService = response.component; - if (nf.Common.isDefinedAndNotNull(createdControllerService.parentGroupId)) { + if (common.isDefinedAndNotNull(createdControllerService.parentGroupId)) { controllerServicesUri = config.urls.api + '/flow/process-groups/' + encodeURIComponent(createdControllerService.parentGroupId) + '/controller-services'; } else { controllerServicesUri = config.urls.api + '/flow/controller/controller-services'; } // load the controller services accordingly - return nf.ControllerServices.loadControllerServices(controllerServicesUri, serviceTable); + return controllerServices.loadControllerServices(controllerServicesUri, serviceTable); }, goToServiceDeferred: function () { return goToServiceFromProperty(serviceTable); @@ -1794,8 +1843,8 @@ nf.ControllerService = (function () { controllerServiceDialog.data('controllerServiceDetails', controllerServiceEntity); // populate the controller service settings - nf.Common.populateField('controller-service-id', controllerService['id']); - nf.Common.populateField('controller-service-type', nf.Common.substringAfterLast(controllerService['type'], '.')); + common.populateField('controller-service-id', controllerService['id']); + common.populateField('controller-service-type', common.substringAfterLast(controllerService['type'], '.')); $('#controller-service-name').val(controllerService['name']); $('#controller-service-comments').val(controllerService['comments']); @@ -1817,31 +1866,31 @@ nf.ControllerService = (function () { // close all fields currently being edited $('#controller-service-properties').propertytable('saveRow'); - // save the controller service - saveControllerService(serviceTable, controllerServiceEntity).done(function (response) { - reloadControllerServiceReferences(serviceTable, response.component); - - // close the details panel - controllerServiceDialog.modal('hide'); - }); - } - } - }, { - buttonText: 'Cancel', - color: { - base: '#E3E8EB', - hover: '#C7D2D7', - text: '#004849' - }, - handler: { - click: function () { + // save the controller service + saveControllerService(serviceTable, controllerServiceEntity).done(function (response) { + reloadControllerServiceReferences(serviceTable, response.component); + + // close the details panel controllerServiceDialog.modal('hide'); - } + }); } - }]; + } + }, { + buttonText: 'Cancel', + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, + handler: { + click: function () { + controllerServiceDialog.modal('hide'); + } + } + }]; // determine if we should show the advanced button - if (nf.Common.isDefinedAndNotNull(controllerService.customUiUrl) && controllerService.customUiUrl !== '') { + if (common.isDefinedAndNotNull(controllerService.customUiUrl) && controllerService.customUiUrl !== '') { buttons.push({ buttonText: 'Advanced', clazz: 'fa fa-cog button-icon', @@ -1860,12 +1909,12 @@ nf.ControllerService = (function () { $('#shell-close-button').click(); // show the custom ui - nf.CustomUi.showCustomUi(controllerServiceEntity, controllerService.customUiUrl, true).done(function () { + customUi.showCustomUi(controllerServiceEntity, controllerService.customUiUrl, true).done(function () { // once the custom ui is closed, reload the controller service reloadControllerServiceAndReferencingComponents(serviceTable, controllerService); - + // show the settings - nf.Settings.showSettings(); + settings.showSettings(); }); }; @@ -1875,7 +1924,7 @@ nf.ControllerService = (function () { // determine if changes have been made if (isSaveRequired()) { // see if those changes should be saved - nf.Dialog.showYesNoDialog({ + dialog.showYesNoDialog({ headerText: 'Save', dialogContent: 'Save changes before opening the advanced configuration?', noHandler: openCustomUi, @@ -1910,7 +1959,7 @@ nf.ControllerService = (function () { updateReferencingComponentsBorder(referenceContainer); $('#controller-service-properties').propertytable('resetTableSize'); - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); }, /** @@ -1919,7 +1968,7 @@ nf.ControllerService = (function () { * @param {jQuery} serviceTable * @param {object} controllerServiceEntity */ - showDetails: function(serviceTable, controllerServiceEntity) { + showDetails: function (serviceTable, controllerServiceEntity) { var controllerServiceDialog = $('#controller-service-configuration'); if (controllerServiceDialog.data('mode') !== config.readOnly) { // update the visibility @@ -1963,17 +2012,17 @@ nf.ControllerService = (function () { controllerServiceDialog.data('controllerServiceDetails', controllerServiceEntity); // populate the controller service settings - nf.Common.populateField('controller-service-id', controllerService['id']); - nf.Common.populateField('controller-service-type', nf.Common.substringAfterLast(controllerService['type'], '.')); - nf.Common.populateField('read-only-controller-service-name', controllerService['name']); - nf.Common.populateField('read-only-controller-service-comments', controllerService['comments']); + common.populateField('controller-service-id', controllerService['id']); + common.populateField('controller-service-type', common.substringAfterLast(controllerService['type'], '.')); + common.populateField('read-only-controller-service-name', controllerService['name']); + common.populateField('read-only-controller-service-comments', controllerService['comments']); // get the reference container var referenceContainer = $('#controller-service-referencing-components'); // load the controller referencing components list createReferencingComponents(serviceTable, referenceContainer, controllerService.referencingComponents); - + var buttons = [{ buttonText: 'Ok', color: { @@ -1990,7 +2039,7 @@ nf.ControllerService = (function () { }]; // determine if we should show the advanced button - if (nf.Common.isDefinedAndNotNull(nf.CustomUi) && nf.Common.isDefinedAndNotNull(controllerService.customUiUrl) && controllerService.customUiUrl !== '') { + if (common.isDefinedAndNotNull(customUi) && common.isDefinedAndNotNull(controllerService.customUiUrl) && controllerService.customUiUrl !== '') { buttons.push({ buttonText: 'Advanced', clazz: 'fa fa-cog button-icon', @@ -2008,8 +2057,8 @@ nf.ControllerService = (function () { $('#shell-close-button').click(); // show the custom ui - nf.CustomUi.showCustomUi(controllerServiceEntity, controllerService.customUiUrl, false).done(function () { - nf.Settings.showSettings(); + customUi.showCustomUi(controllerServiceEntity, controllerService.customUiUrl, false).done(function () { + settings.showSettings(); }); } } @@ -2038,7 +2087,7 @@ nf.ControllerService = (function () { * @param {jQuery} serviceTable * @param {object} controllerServiceEntity */ - enable: function(serviceTable, controllerServiceEntity) { + enable: function (serviceTable, controllerServiceEntity) { showEnableControllerServiceDialog(serviceTable, controllerServiceEntity.component); }, @@ -2048,7 +2097,7 @@ nf.ControllerService = (function () { * @param {jQuery} serviceTable * @param {object} controllerServiceEntity */ - disable: function(serviceTable, controllerServiceEntity) { + disable: function (serviceTable, controllerServiceEntity) { showDisableControllerServiceDialog(serviceTable, controllerServiceEntity.component); }, @@ -2060,12 +2109,12 @@ nf.ControllerService = (function () { * @param {jQuery} serviceTable * @param {object} component */ - reloadReferencedServices: function(serviceTable, component) { + reloadReferencedServices: function (serviceTable, component) { $.each(getReferencedServices(component), function (_, referencedServiceId) { reloadControllerService(serviceTable, referencedServiceId); }); }, - + /** * Prompts the user before attempting to delete the specified controller service. * @@ -2074,11 +2123,11 @@ nf.ControllerService = (function () { */ promptToDeleteController: function (serviceTable, controllerServiceEntity) { // prompt for deletion - nf.Dialog.showYesNoDialog({ + dialog.showYesNoDialog({ headerText: 'Delete Controller Service', - dialogContent: 'Delete controller service \'' + nf.Common.escapeHtml(controllerServiceEntity.component.name) + '\'?', + dialogContent: 'Delete controller service \'' + common.escapeHtml(controllerServiceEntity.component.name) + '\'?', yesHandler: function () { - nf.ControllerService.remove(serviceTable, controllerServiceEntity); + nfControllerService.remove(serviceTable, controllerServiceEntity); } }); }, @@ -2089,10 +2138,10 @@ nf.ControllerService = (function () { * @param {jQuery} serviceTable * @param {object} controllerServiceEntity */ - remove: function(serviceTable, controllerServiceEntity) { + remove: function (serviceTable, controllerServiceEntity) { // prompt for removal? - var revision = nf.Client.getRevision(controllerServiceEntity); + var revision = client.getRevision(controllerServiceEntity); $.ajax({ type: 'DELETE', url: controllerServiceEntity.uri + '?' + $.param({ @@ -2110,7 +2159,9 @@ nf.ControllerService = (function () { if (controllerServiceEntity.permissions.canRead) { reloadControllerServiceReferences(serviceTable, controllerServiceEntity.component); } - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); } }; -}()); + + return nfControllerService; +})); diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js index 460582c6ee..0bc5f60637 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js @@ -15,9 +15,64 @@ * limitations under the License. */ -/* global nf, Slick, d3 */ +/* global define, module, require, exports */ -nf.ControllerServices = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'd3', + 'Slick', + 'nf.Client', + 'nf.Shell', + 'nf.ProcessGroupConfiguration', + 'nf.CanvasUtils', + 'nf.ErrorHandler', + 'nf.Dialog', + 'nf.Common', + 'nf.ControllerService', + 'nf.ProcessGroup', + 'nf.PolicyManagement', + 'nf.ComponentState', + 'nf.ng.Bridge'], + function ($, d3, Slick, client, shell, processGroupConfiguration, canvasUtils, errorHandler, dialog, common, controllerService, processGroup, policyManagement, componentState, angularBridge) { + return (nf.ControllerServices = factory($, d3, Slick, client, shell, processGroupConfiguration, canvasUtils, errorHandler, dialog, common, controllerService, processGroup, policyManagement, componentState, angularBridge)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ControllerServices = + factory(require('jquery'), + require('d3'), + require('Slick'), + require('nf.Client'), + require('nf.Shell'), + require('nf.ProcessGroupConfiguration'), + require('nf.CanvasUtils'), + require('nf.ErrorHandler'), + require('nf.Dialog'), + require('nf.Common'), + require('nf.ControllerService'), + require('nf.ProcessGroup'), + require('nf.PolicyManagement'), + require('nf.ComponentState'), + require('nf.ng.Bridge'))); + } else { + nf.ControllerServices = factory(root.$, + root.d3, + root.Slick, + root.nf.Client, + root.nf.Shell, + root.nf.ProcessGroupConfiguration, + root.nf.CanvasUtils, + root.nf.ErrorHandler, + root.nf.Dialog, + root.nf.Common, + root.nf.ControllerService, + root.nf.ProcessGroup, + root.nf.PolicyManagement, + root.nf.ComponentState, + root.nf.ng.Bridge); + } +}(this, function ($, d3, Slick, client, shell, processGroupConfiguration, canvasUtils, errorHandler, dialog, common, controllerService, processGroup, policyManagement, componentState, angularBridge) { + 'use strict'; var dblClick = null; var initialized = false; @@ -45,7 +100,7 @@ nf.ControllerServices = (function () { * @param item controller service type */ var isSelectable = function (item) { - return nf.Common.isBlank(item.usageRestriction) || nf.Common.canAccessRestrictedComponents(); + return common.isBlank(item.usageRestriction) || common.canAccessRestrictedComponents(); }; /** @@ -65,7 +120,7 @@ nf.ControllerServices = (function () { var controllerServiceTypesGrid = $('#controller-service-types-table').data('gridInstance'); // ensure the grid has been initialized - if (nf.Common.isDefinedAndNotNull(controllerServiceTypesGrid)) { + if (common.isDefinedAndNotNull(controllerServiceTypesGrid)) { var controllerServiceTypesData = controllerServiceTypesGrid.getData(); // update the search criteria @@ -202,7 +257,7 @@ nf.ControllerServices = (function () { // ensure something was selected if (selectedServiceType === '') { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Controller Service', dialogContent: 'The type of controller service to create must be selected.' }); @@ -221,7 +276,7 @@ nf.ControllerServices = (function () { var addControllerService = function (controllerServicesUri, serviceTable, controllerServiceType) { // build the controller service entity var controllerServiceEntity = { - 'revision': nf.Client.getRevision({ + 'revision': client.getRevision({ 'revision': { 'version': 0 } @@ -252,7 +307,7 @@ nf.ControllerServices = (function () { var row = controllerServicesData.getRowById(controllerServiceEntity.id); controllerServicesGrid.setSelectedRows([row]); controllerServicesGrid.scrollRowIntoView(row); - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); // hide the dialog $('#new-controller-service-dialog').modal('hide'); @@ -270,7 +325,7 @@ nf.ControllerServices = (function () { id: 'type', name: 'Type', field: 'label', - formatter: nf.Common.typeFormatter, + formatter: common.typeFormatter, sortable: false, resizable: true }, @@ -304,11 +359,11 @@ nf.ControllerServices = (function () { var controllerServiceType = controllerServiceTypesGrid.getDataItem(controllerServiceTypeIndex); // set the controller service type description - if (nf.Common.isDefinedAndNotNull(controllerServiceType)) { + if (common.isDefinedAndNotNull(controllerServiceType)) { // show the selected controller service $('#controller-service-description-container').show(); - if (nf.Common.isBlank(controllerServiceType.description)) { + if (common.isBlank(controllerServiceType.description)) { $('#controller-service-type-description') .attr('title', '') .html('No description specified'); @@ -330,7 +385,7 @@ nf.ControllerServices = (function () { } }); controllerServiceTypesGrid.onViewportChanged.subscribe(function (e, args) { - nf.Common.cleanUpTooltips($('#controller-service-types-table'), 'div.view-usage-restriction'); + common.cleanUpTooltips($('#controller-service-types-table'), 'div.view-usage-restriction'); }); // wire up the dataview to the grid @@ -357,8 +412,8 @@ nf.ControllerServices = (function () { var item = controllerServiceTypesData.getItemById(rowId); // show the tooltip - if (nf.Common.isDefinedAndNotNull(item.usageRestriction)) { - usageRestriction.qtip($.extend({}, nf.Common.config.tooltipConfig, { + if (common.isDefinedAndNotNull(item.usageRestriction)) { + usageRestriction.qtip($.extend({}, common.config.tooltipConfig, { content: item.usageRestriction, position: { container: $('#summary'), @@ -391,10 +446,10 @@ nf.ControllerServices = (function () { // add the documented type controllerServiceTypesData.addItem({ id: id++, - label: nf.Common.substringAfterLast(documentedType.type, '.'), + label: common.substringAfterLast(documentedType.type, '.'), type: documentedType.type, - description: nf.Common.escapeHtml(documentedType.description), - usageRestriction: nf.Common.escapeHtml(documentedType.usageRestriction), + description: common.escapeHtml(documentedType.description), + usageRestriction: common.escapeHtml(documentedType.usageRestriction), tags: documentedType.tags.join(', ') }); @@ -416,7 +471,7 @@ nf.ControllerServices = (function () { select: applyControllerServiceTypeFilter, remove: applyControllerServiceTypeFilter }); - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); // initialize the controller service dialog $('#new-controller-service-dialog').modal({ @@ -484,7 +539,7 @@ nf.ControllerServices = (function () { return ''; } - return nf.Common.substringAfterLast(dataContext.component.type, '.'); + return common.substringAfterLast(dataContext.component.type, '.'); }; /** @@ -502,7 +557,7 @@ nf.ControllerServices = (function () { return ''; } - if (nf.Common.isDefinedAndNotNull(dataContext.component.parentGroupId)) { + if (common.isDefinedAndNotNull(dataContext.component.parentGroupId)) { return dataContext.component.parentGroupId; } else { return 'Controller'; @@ -519,7 +574,7 @@ nf.ControllerServices = (function () { // we know the process group for this controller service is part // of the current breadcrumb trail var canWriteProcessGroupParent = function (processGroupId) { - var breadcrumbs = nf.ng.Bridge.injector.get('breadcrumbsCtrl').getBreadcrumbs(); + var breadcrumbs = angularBridge.injector.get('breadcrumbsCtrl').getBreadcrumbs(); var isAuthorized = false; $.each(breadcrumbs, function (_, breadcrumbEntity) { @@ -532,10 +587,10 @@ nf.ControllerServices = (function () { return isAuthorized; }; - if (nf.Common.isDefinedAndNotNull(dataContext.component.parentGroupId)) { + if (common.isDefinedAndNotNull(dataContext.component.parentGroupId)) { return canWriteProcessGroupParent(dataContext.component.parentGroupId); } else { - return nf.Common.canModifyController(); + return common.canModifyController(); } }; @@ -551,31 +606,31 @@ nf.ControllerServices = (function () { if(a.permissions.canRead && b.permissions.canRead) { if (sortDetails.columnId === 'moreDetails') { var aBulletins = 0; - if (!nf.Common.isEmpty(a.bulletins)) { + if (!common.isEmpty(a.bulletins)) { aBulletins = a.bulletins.length; } var bBulletins = 0; - if (!nf.Common.isEmpty(b.bulletins)) { + if (!common.isEmpty(b.bulletins)) { bBulletins = b.bulletins.length; } return aBulletins - bBulletins; } else if (sortDetails.columnId === 'type') { - var aType = nf.Common.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? nf.Common.substringAfterLast(a.component[sortDetails.columnId], '.') : ''; - var bType = nf.Common.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? nf.Common.substringAfterLast(b.component[sortDetails.columnId], '.') : ''; + var aType = common.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? common.substringAfterLast(a.component[sortDetails.columnId], '.') : ''; + var bType = common.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? common.substringAfterLast(b.component[sortDetails.columnId], '.') : ''; return aType === bType ? 0 : aType > bType ? 1 : -1; } else if (sortDetails.columnId === 'state') { var aState = 'Invalid'; - if (nf.Common.isEmpty(a.component.validationErrors)) { - aState = nf.Common.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : ''; + if (common.isEmpty(a.component.validationErrors)) { + aState = common.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : ''; } var bState = 'Invalid'; - if (nf.Common.isEmpty(b.component.validationErrors)) { - bState = nf.Common.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : ''; + if (common.isEmpty(b.component.validationErrors)) { + bState = common.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : ''; } return aState === bState ? 0 : aState > bState ? 1 : -1; } else { - var aString = nf.Common.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : ''; - var bString = nf.Common.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : ''; + var aString = common.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : ''; + var bString = common.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : ''; return aString === bString ? 0 : aString > bString ? 1 : -1; } } else { @@ -598,8 +653,9 @@ nf.ControllerServices = (function () { * Initializes the controller services tab. * * @param {jQuery} serviceTable + * @param {function} showSettings */ - var initControllerServices = function (serviceTable) { + var initControllerServices = function (serviceTable, showSettings) { // more details formatter var moreControllerServiceDetails = function (row, cell, value, columnDef, dataContext) { if (!dataContext.permissions.canRead) { @@ -611,8 +667,8 @@ nf.ControllerServices = (function () { // always include a button to view the usage markup += '
    '; - var hasErrors = !nf.Common.isEmpty(dataContext.component.validationErrors); - var hasBulletins = !nf.Common.isEmpty(dataContext.bulletins); + var hasErrors = !common.isEmpty(dataContext.component.validationErrors); + var hasBulletins = !common.isEmpty(dataContext.bulletins); if (hasErrors) { markup += '
    '; @@ -623,7 +679,7 @@ nf.ControllerServices = (function () { } if (hasErrors || hasBulletins) { - markup += ''; + markup += ''; } return markup; @@ -636,7 +692,7 @@ nf.ControllerServices = (function () { // determine the appropriate label var icon = '', label = ''; - if (!nf.Common.isEmpty(dataContext.component.validationErrors)) { + if (!common.isEmpty(dataContext.component.validationErrors)) { icon = 'invalid fa fa-warning'; label = 'Invalid'; } else { @@ -670,7 +726,7 @@ nf.ControllerServices = (function () { markup += '
    '; // if there are no validation errors allow enabling - if (nf.Common.isEmpty(dataContext.component.validationErrors)) { + if (common.isEmpty(dataContext.component.validationErrors)) { markup += '
    '; } } @@ -685,7 +741,7 @@ nf.ControllerServices = (function () { } // allow policy configuration conditionally - if (nf.Canvas.isConfigurableAuthorizer() && nf.Common.canAccessTenants()) { + if (canvasUtils.isConfigurableAuthorizer() && common.canAccessTenants()) { markup += '
    '; } @@ -771,46 +827,46 @@ nf.ControllerServices = (function () { // determine the desired action if (controllerServicesGrid.getColumns()[args.cell].id === 'actions') { if (target.hasClass('edit-controller-service')) { - nf.ControllerService.showConfiguration(serviceTable, controllerServiceEntity); + controllerService.showConfiguration(serviceTable, controllerServiceEntity); } else if (target.hasClass('enable-controller-service')) { - nf.ControllerService.enable(serviceTable, controllerServiceEntity); + controllerService.enable(serviceTable, controllerServiceEntity); } else if (target.hasClass('disable-controller-service')) { - nf.ControllerService.disable(serviceTable, controllerServiceEntity); + controllerService.disable(serviceTable, controllerServiceEntity); } else if (target.hasClass('delete-controller-service')) { - nf.ControllerService.promptToDeleteController(serviceTable, controllerServiceEntity); + controllerService.promptToDeleteController(serviceTable, controllerServiceEntity); } else if (target.hasClass('view-state-controller-service')) { - nf.ComponentState.showState(controllerServiceEntity, controllerServiceEntity.state === 'DISABLED'); + componentState.showState(controllerServiceEntity, controllerServiceEntity.state === 'DISABLED'); } else if (target.hasClass('edit-access-policies')) { // show the policies for this service - nf.PolicyManagement.showControllerServicePolicy(controllerServiceEntity); + policyManagement.showControllerServicePolicy(controllerServiceEntity); // close the settings dialog $('#shell-close-button').click(); } } else if (controllerServicesGrid.getColumns()[args.cell].id === 'moreDetails') { if (target.hasClass('view-controller-service')) { - nf.ControllerService.showDetails(serviceTable, controllerServiceEntity); + controllerService.showDetails(serviceTable, controllerServiceEntity); } else if (target.hasClass('controller-service-usage')) { // close the settings dialog $('#shell-close-button').click(); // open the documentation for this controller service - nf.Shell.showPage('../nifi-docs/documentation?' + $.param({ - select: nf.Common.substringAfterLast(controllerServiceEntity.component.type, '.') + shell.showPage('../nifi-docs/documentation?' + $.param({ + select: common.substringAfterLast(controllerServiceEntity.component.type, '.') })).done(function() { - if (nf.Common.isDefinedAndNotNull(controllerServiceEntity.component.parentGroupId)) { + if (common.isDefinedAndNotNull(controllerServiceEntity.component.parentGroupId)) { var groupId; - var processGroup = nf.ProcessGroup.get(controllerServiceEntity.component.parentGroupId); - if (nf.Common.isDefinedAndNotNull(processGroup)) { + var processGroup = processGroup.get(controllerServiceEntity.component.parentGroupId); + if (common.isDefinedAndNotNull(processGroup)) { groupId = processGroup.id; } else { - groupId = nf.Canvas.getGroupId(); + groupId = canvasUtils.getGroupId(); } // reload the corresponding group - nf.ProcessGroupConfiguration.showConfiguration(groupId); + processGroupConfiguration.showConfiguration(groupId); } else { - nf.Settings.showSettings(); + showSettings(); } }); } @@ -838,12 +894,12 @@ nf.ControllerServices = (function () { var controllerServiceEntity = controllerServicesData.getItemById(serviceId); // format the errors - var tooltip = nf.Common.formatUnorderedList(controllerServiceEntity.component.validationErrors); + var tooltip = common.formatUnorderedList(controllerServiceEntity.component.validationErrors); // show the tooltip - if (nf.Common.isDefinedAndNotNull(tooltip)) { + if (common.isDefinedAndNotNull(tooltip)) { errorIcon.qtip($.extend({}, - nf.Common.config.tooltipConfig, + common.config.tooltipConfig, { content: tooltip, position: { @@ -867,13 +923,13 @@ nf.ControllerServices = (function () { var controllerServiceEntity = controllerServicesData.getItemById(taskId); // format the tooltip - var bulletins = nf.Common.getFormattedBulletins(controllerServiceEntity.bulletins); - var tooltip = nf.Common.formatUnorderedList(bulletins); + var bulletins = common.getFormattedBulletins(controllerServiceEntity.bulletins); + var tooltip = common.formatUnorderedList(bulletins); // show the tooltip - if (nf.Common.isDefinedAndNotNull(tooltip)) { + if (common.isDefinedAndNotNull(tooltip)) { bulletinIcon.qtip($.extend({}, - nf.Common.config.tooltipConfig, + common.config.tooltipConfig, { content: tooltip, position: { @@ -910,8 +966,8 @@ nf.ControllerServices = (function () { }, service)); }); - nf.Common.cleanUpTooltips(serviceTable, 'div.has-errors'); - nf.Common.cleanUpTooltips(serviceTable, 'div.has-bulletins'); + common.cleanUpTooltips(serviceTable, 'div.has-errors'); + common.cleanUpTooltips(serviceTable, 'div.has-bulletins'); var controllerServicesGrid = serviceTable.data('gridInstance'); var controllerServicesData = controllerServicesGrid.getData(); @@ -927,10 +983,11 @@ nf.ControllerServices = (function () { return { /** * Initializes the status page. - * + * * @param {jQuery} serviceTable + * @param {function} showSettings */ - init: function (serviceTable) { + init: function (serviceTable, showSettings) { if (!initialized) { // initialize the new controller service dialog initNewControllerServiceDialog(); @@ -940,7 +997,7 @@ nf.ControllerServices = (function () { } // initialize the controller service table - initControllerServices(serviceTable); + initControllerServices(serviceTable, showSettings); }, /** @@ -1027,7 +1084,7 @@ nf.ControllerServices = (function () { controllerServiceTypesGrid.onDblClick.subscribe(dblClick); // reset the canvas size after the dialog is shown - if (nf.Common.isDefinedAndNotNull(controllerServiceTypesGrid)) { + if (common.isDefinedAndNotNull(controllerServiceTypesGrid)) { controllerServiceTypesGrid.setSelectedRows([0]); controllerServiceTypesGrid.resizeCanvas(); } @@ -1043,7 +1100,7 @@ nf.ControllerServices = (function () { */ resetTableSize: function (serviceTable) { var controllerServicesGrid = serviceTable.data('gridInstance'); - if (nf.Common.isDefinedAndNotNull(controllerServicesGrid)) { + if (common.isDefinedAndNotNull(controllerServicesGrid)) { controllerServicesGrid.resizeCanvas(); } }, @@ -1071,14 +1128,14 @@ nf.ControllerServices = (function () { controllerServicesData.beginUpdate(); // if there are some bulletins process them - if (!nf.Common.isEmpty(controllerServiceBulletins)) { + if (!common.isEmpty(controllerServiceBulletins)) { var controllerServiceBulletinsBySource = d3.nest() .key(function(d) { return d.sourceId; }) .map(controllerServiceBulletins, d3.map); controllerServiceBulletinsBySource.forEach(function(sourceId, sourceBulletins) { var controllerService = controllerServicesData.getItemById(sourceId); - if (nf.Common.isDefinedAndNotNull(controllerService)) { + if (common.isDefinedAndNotNull(controllerService)) { controllerServicesData.updateItem(sourceId, $.extend(controllerService, { bulletins: sourceBulletins })); @@ -1096,4 +1153,4 @@ nf.ControllerServices = (function () { controllerServicesData.endUpdate(); } }; -}()); \ No newline at end of file +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-custom-ui.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-custom-ui.js index 4d82308b56..fc4cbba9c1 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-custom-ui.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-custom-ui.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, define, module, require, exports */ +/* global define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js index a771fc51c9..bdccfe38b4 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js @@ -15,10 +15,48 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.Draggable = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'd3', + 'nf.Connection', + 'nf.Birdseye', + 'nf.CanvasUtils', + 'nf.Common', + 'nf.Dialog', + 'nf.Client', + 'nf.ErrorHandler'], + function ($, d3, connection, birdseye, canvasUtils, common, dialog, client, errorHandler) { + return (nf.Draggable = factory($, d3, connection, birdseye, canvasUtils, common, dialog, client, errorHandler)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.Draggable = + factory(require('jquery'), + require('d3'), + require('nf.Connection'), + require('nf.Birdseye'), + require('nf.CanvasUtils'), + require('nf.Common'), + require('nf.Dialog'), + require('nf.Client'), + require('nf.ErrorHandler'))); + } else { + nf.Draggable = factory(root.$, + root.d3, + root.nf.Connection, + root.nf.Birdseye, + root.nf.CanvasUtils, + root.nf.Common, + root.nf.Dialog, + root.nf.Client, + root.nf.ErrorHandler); + } +}(this, function ($, d3, connection, birdseye, canvasUtils, common, dialog, client, errorHandler) { + 'use strict'; + var nfCanvas; var drag; /** @@ -45,8 +83,8 @@ nf.Draggable = (function () { var selectedComponents = d3.selectAll('g.component.selected'); // ensure every component is writable - if (nf.CanvasUtils.canModify(selectedConnections) === false || nf.CanvasUtils.canModify(selectedComponents) === false) { - nf.Dialog.showOkDialog({ + if (canvasUtils.canModify(selectedConnections) === false || canvasUtils.canModify(selectedComponents) === false) { + dialog.showOkDialog({ headerText: 'Component Position', dialogContent: 'Must be authorized to modify every component selected.' }); @@ -55,7 +93,7 @@ nf.Draggable = (function () { // go through each selected connection selectedConnections.each(function (d) { - var connectionUpdate = nf.Draggable.updateConnectionPosition(d, delta); + var connectionUpdate = nfDraggable.updateConnectionPosition(d, delta); if (connectionUpdate !== null) { updates.set(d.id, connectionUpdate); } @@ -64,10 +102,10 @@ nf.Draggable = (function () { // go through each selected component selectedComponents.each(function (d) { // consider any self looping connections - var connections = nf.Connection.getComponentConnections(d.id); - $.each(connections, function(_, connection) { - if (!updates.has(connection.id) && nf.CanvasUtils.getConnectionSourceComponentId(connection) === nf.CanvasUtils.getConnectionDestinationComponentId(connection)) { - var connectionUpdate = nf.Draggable.updateConnectionPosition(nf.Connection.get(connection.id), delta); + var connections = connection.getComponentConnections(d.id); + $.each(connections, function (_, connection) { + if (!updates.has(connection.id) && canvasUtils.getConnectionSourceComponentId(connection) === canvasUtils.getConnectionDestinationComponentId(connection)) { + var connectionUpdate = nfDraggable.updateConnectionPosition(connection.get(connection.id), delta); if (connectionUpdate !== null) { updates.set(connection.id, connectionUpdate); } @@ -75,10 +113,10 @@ nf.Draggable = (function () { }); // consider the component itself - updates.set(d.id, nf.Draggable.updateComponentPosition(d, delta)); + updates.set(d.id, nfDraggable.updateComponentPosition(d, delta)); }); - nf.Draggable.refreshConnections(updates); + nfDraggable.refreshConnections(updates); }; /** @@ -88,15 +126,15 @@ nf.Draggable = (function () { var selection = d3.selectAll('g.component.selected, g.connection.selected'); var group = d3.select('g.drop'); - if (nf.CanvasUtils.canModify(selection) === false) { - nf.Dialog.showOkDialog({ + if (canvasUtils.canModify(selection) === false) { + dialog.showOkDialog({ headerText: 'Component Position', dialogContent: 'Must be authorized to modify every component selected.' }); return; } - if (nf.CanvasUtils.canModify(group) === false) { - nf.Dialog.showOkDialog({ + if (canvasUtils.canModify(group) === false) { + dialog.showOkDialog({ headerText: 'Component Position', dialogContent: 'Not authorized to modify the destination group.' }); @@ -104,102 +142,104 @@ nf.Draggable = (function () { } // move the seleciton into the group - nf.CanvasUtils.moveComponents(selection, group); + canvasUtils.moveComponents(selection, group); }; - return { - init: function () { + var nfDraggable = { + init: function (canvas) { + nfCanvas = canvas; + // handle component drag events drag = d3.behavior.drag() - .on('dragstart', function () { - // stop further propagation - d3.event.sourceEvent.stopPropagation(); - }) - .on('drag', function () { - var dragSelection = d3.select('rect.drag-selection'); + .on('dragstart', function () { + // stop further propagation + d3.event.sourceEvent.stopPropagation(); + }) + .on('drag', function () { + var dragSelection = d3.select('rect.drag-selection'); - // lazily create the drag selection box - if (dragSelection.empty()) { - // get the current selection - var selection = d3.selectAll('g.component.selected'); + // lazily create the drag selection box + if (dragSelection.empty()) { + // get the current selection + var selection = d3.selectAll('g.component.selected'); - // determine the appropriate bounding box - var minX = null, maxX = null, minY = null, maxY = null; - selection.each(function (d) { - if (minX === null || d.position.x < minX) { - minX = d.position.x; - } - if (minY === null || d.position.y < minY) { - minY = d.position.y; - } - var componentMaxX = d.position.x + d.dimensions.width; - var componentMaxY = d.position.y + d.dimensions.height; - if (maxX === null || componentMaxX > maxX) { - maxX = componentMaxX; - } - if (maxY === null || componentMaxY > maxY) { - maxY = componentMaxY; - } + // determine the appropriate bounding box + var minX = null, maxX = null, minY = null, maxY = null; + selection.each(function (d) { + if (minX === null || d.position.x < minX) { + minX = d.position.x; + } + if (minY === null || d.position.y < minY) { + minY = d.position.y; + } + var componentMaxX = d.position.x + d.dimensions.width; + var componentMaxY = d.position.y + d.dimensions.height; + if (maxX === null || componentMaxX > maxX) { + maxX = componentMaxX; + } + if (maxY === null || componentMaxY > maxY) { + maxY = componentMaxY; + } + }); + + // create a selection box for the move + d3.select('#canvas').append('rect') + .attr('rx', 6) + .attr('ry', 6) + .attr('x', minX) + .attr('y', minY) + .attr('class', 'drag-selection') + .attr('pointer-events', 'none') + .attr('width', maxX - minX) + .attr('height', maxY - minY) + .attr('stroke-width', function () { + return 1 / canvasUtils.scaleCanvasView(); + }) + .attr('stroke-dasharray', function () { + return 4 / canvasUtils.scaleCanvasView(); + }) + .datum({ + original: { + x: minX, + y: minY + }, + x: minX, + y: minY }); + } else { + // update the position of the drag selection + dragSelection.attr('x', function (d) { + d.x += d3.event.dx; + return d.x; + }) + .attr('y', function (d) { + d.y += d3.event.dy; + return d.y; + }); + } + }) + .on('dragend', function () { + // stop further propagation + d3.event.sourceEvent.stopPropagation(); - // create a selection box for the move - d3.select('#canvas').append('rect') - .attr('rx', 6) - .attr('ry', 6) - .attr('x', minX) - .attr('y', minY) - .attr('class', 'drag-selection') - .attr('pointer-events', 'none') - .attr('width', maxX - minX) - .attr('height', maxY - minY) - .attr('stroke-width', function () { - return 1 / nf.Canvas.View.scale(); - }) - .attr('stroke-dasharray', function () { - return 4 / nf.Canvas.View.scale(); - }) - .datum({ - original: { - x: minX, - y: minY - }, - x: minX, - y: minY - }); - } else { - // update the position of the drag selection - dragSelection.attr('x', function (d) { - d.x += d3.event.dx; - return d.x; - }) - .attr('y', function (d) { - d.y += d3.event.dy; - return d.y; - }); - } - }) - .on('dragend', function () { - // stop further propagation - d3.event.sourceEvent.stopPropagation(); + // get the drag selection + var dragSelection = d3.select('rect.drag-selection'); - // get the drag selection - var dragSelection = d3.select('rect.drag-selection'); + // ensure we found a drag selection + if (dragSelection.empty()) { + return; + } - // ensure we found a drag selection - if (dragSelection.empty()) { - return; - } + // either move or update the selections group as appropriate + if (d3.select('g.drop').empty()) { + updateComponentsPosition(dragSelection); + } else { + updateComponentsGroup(); + } - // either move or update the selections group as appropriate - if (d3.select('g.drop').empty()) { - updateComponentsPosition(dragSelection); - } else { - updateComponentsGroup(); - } - - // remove the drag selection - dragSelection.remove(); - }); + // remove the drag selection + dragSelection.remove(); + }); }, /** @@ -209,7 +249,7 @@ nf.Draggable = (function () { * @param delta The change in position * @returns {*} */ - updateComponentPosition: function(d, delta) { + updateComponentPosition: function (d, delta) { var newPosition = { 'x': d.position.x + delta.x, 'y': d.position.y + delta.y @@ -217,7 +257,7 @@ nf.Draggable = (function () { // build the entity var entity = { - 'revision': nf.Client.getRevision(d), + 'revision': client.getRevision(d), 'component': { 'id': d.id, 'position': newPosition @@ -234,7 +274,7 @@ nf.Draggable = (function () { contentType: 'application/json' }).done(function (response) { // update the component - nf[d.type].set(response); + canvasUtils.getComponentByType(d.type).set(response); // resolve with an object so we can refresh when finished deferred.resolve({ @@ -243,12 +283,12 @@ nf.Draggable = (function () { }); }).fail(function (xhr, status, error) { if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Component Position', - dialogContent: nf.Common.escapeHtml(xhr.responseText) + dialogContent: common.escapeHtml(xhr.responseText) }); } else { - nf.ErrorHandler.handleAjaxError(xhr, status, error); + errorHandler.handleAjaxError(xhr, status, error); } deferred.reject(); @@ -263,7 +303,7 @@ nf.Draggable = (function () { * @param delta The change in position * @returns {*} */ - updateConnectionPosition: function(d, delta) { + updateConnectionPosition: function (d, delta) { // only update if necessary if (d.bends.length === 0) { return null; @@ -278,7 +318,7 @@ nf.Draggable = (function () { }); var entity = { - 'revision': nf.Client.getRevision(d), + 'revision': client.getRevision(d), 'component': { id: d.id, bends: newBends @@ -295,7 +335,7 @@ nf.Draggable = (function () { contentType: 'application/json' }).done(function (response) { // update the component - nf.Connection.set(response); + connection.set(response); // resolve with an object so we can refresh when finished deferred.resolve({ @@ -304,12 +344,12 @@ nf.Draggable = (function () { }); }).fail(function (xhr, status, error) { if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Component Position', - dialogContent: nf.Common.escapeHtml(xhr.responseText) + dialogContent: common.escapeHtml(xhr.responseText) }); } else { - nf.ErrorHandler.handleAjaxError(xhr, status, error); + errorHandler.handleAjaxError(xhr, status, error); } deferred.reject(); @@ -322,7 +362,7 @@ nf.Draggable = (function () { * * @param updates */ - refreshConnections: function(updates) { + refreshConnections: function (updates) { // wait for all updates to complete $.when.apply(window, updates.values()).done(function () { var dragged = $.makeArray(arguments); @@ -335,7 +375,7 @@ nf.Draggable = (function () { connections.add(component.id); } else { // get connections that need to be refreshed because its attached to this component - var componentConnections = nf.Connection.getComponentConnections(component.id); + var componentConnections = connection.getComponentConnections(component.id); $.each(componentConnections, function (_, connection) { connections.add(connection.id); }); @@ -344,10 +384,10 @@ nf.Draggable = (function () { // refresh the connections connections.forEach(function (connectionId) { - nf.Connection.refresh(connectionId); + connection.refresh(connectionId); }); - }).always(function(){ - nf.Birdseye.refresh(); + }).always(function () { + birdseye.refresh(); }); }, @@ -369,4 +409,6 @@ nf.Draggable = (function () { components.classed('moveable', false).on('.drag', null); } }; -}()); \ No newline at end of file + + return nfDraggable; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-funnel.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-funnel.js index 543cd6d79b..0488314acb 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-funnel.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-funnel.js @@ -15,9 +15,39 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.Funnel = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'd3', + 'nf.Common', + 'nf.Client', + 'nf.CanvasUtils'], + function ($, d3, common, client, canvasUtils) { + return (nf.Funnel = factory($, d3, common, client, canvasUtils)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.Funnel = + factory(require('jquery'), + require('d3'), + require('nf.Common'), + require('nf.Client'), + require('nf.CanvasUtils'))); + } else { + nf.Funnel = factory(root.$, + root.d3, + root.nf.Common, + root.nf.Client, + root.nf.CanvasUtils); + } +}(this, function ($, d3, common, client, canvasUtils) { + 'use strict'; + + var nfConnectable; + var nfDraggable; + var nfSelectable; + var nfContextMenu; var dimensions = { width: 48, @@ -75,7 +105,7 @@ nf.Funnel = (function () { 'class': 'funnel component' }) .classed('selected', selected) - .call(nf.CanvasUtils.position); + .call(canvasUtils.position); // funnel border funnel.append('rect') @@ -119,7 +149,7 @@ nf.Funnel = (function () { .text('\ue803'); // always support selection - funnel.call(nf.Selectable.activate).call(nf.ContextMenu.activate); + funnel.call(nfSelectable.activate).call(nfContextMenu.activate); }; /** @@ -148,7 +178,7 @@ nf.Funnel = (function () { var funnel = d3.select(this); // update the component behavior as appropriate - nf.CanvasUtils.editable(funnel); + canvasUtils.editable(funnel, nfConnectable, nfDraggable); }); }; @@ -161,11 +191,16 @@ nf.Funnel = (function () { removed.remove(); }; - return { + var nfFunnel = { /** * Initializes of the Processor handler. */ - init: function () { + init: function (connectable, draggable, selectable, contextMenu) { + nfConnectable = connectable; + nfDraggable = draggable; + nfSelectable = selectable; + nfContextMenu = contextMenu; + funnelMap = d3.map(); removedCache = d3.map(); addedCache = d3.map(); @@ -186,8 +221,8 @@ nf.Funnel = (function () { */ add: function (funnelEntities, options) { var selectAll = false; - if (nf.Common.isDefinedAndNotNull(options)) { - selectAll = nf.Common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; + if (common.isDefinedAndNotNull(options)) { + selectAll = common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; } // get the current time @@ -208,7 +243,7 @@ nf.Funnel = (function () { $.each(funnelEntities, function (_, funnelEntity) { add(funnelEntity); }); - } else if (nf.Common.isDefinedAndNotNull(funnelEntities)) { + } else if (common.isDefinedAndNotNull(funnelEntities)) { add(funnelEntities); } @@ -217,7 +252,7 @@ nf.Funnel = (function () { selection.enter().call(renderFunnels, selectAll); selection.call(updateFunnels); }, - + /** * Populates the graph with the specified funnels. * @@ -227,16 +262,16 @@ nf.Funnel = (function () { set: function (funnelEntities, options) { var selectAll = false; var transition = false; - if (nf.Common.isDefinedAndNotNull(options)) { - selectAll = nf.Common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; - transition = nf.Common.isDefinedAndNotNull(options.transition) ? options.transition : transition; + if (common.isDefinedAndNotNull(options)) { + selectAll = common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; + transition = common.isDefinedAndNotNull(options.transition) ? options.transition : transition; } var set = function (proposedFunnelEntity) { var currentFunnelEntity = funnelMap.get(proposedFunnelEntity.id); // set the funnel if appropriate due to revision and wasn't previously removed - if (nf.Client.isNewerRevision(currentFunnelEntity, proposedFunnelEntity) && !removedCache.has(proposedFunnelEntity.id)) { + if (client.isNewerRevision(currentFunnelEntity, proposedFunnelEntity) && !removedCache.has(proposedFunnelEntity.id)) { funnelMap.set(proposedFunnelEntity.id, $.extend({ type: 'Funnel', dimensions: dimensions @@ -259,14 +294,14 @@ nf.Funnel = (function () { $.each(funnelEntities, function (_, funnelEntity) { set(funnelEntity); }); - } else if (nf.Common.isDefinedAndNotNull(funnelEntities)) { + } else if (common.isDefinedAndNotNull(funnelEntities)) { set(funnelEntities); } // apply the selection and handle all new processors var selection = select(); selection.enter().call(renderFunnels, selectAll); - selection.call(updateFunnels).call(nf.CanvasUtils.position, transition); + selection.call(updateFunnels).call(canvasUtils.position, transition); selection.exit().call(removeFunnels); }, @@ -277,7 +312,7 @@ nf.Funnel = (function () { * @param {string} id */ get: function (id) { - if (nf.Common.isUndefined(id)) { + if (common.isUndefined(id)) { return funnelMap.values(); } else { return funnelMap.get(id); @@ -291,7 +326,7 @@ nf.Funnel = (function () { * @param {string} id Optional */ refresh: function (id) { - if (nf.Common.isDefinedAndNotNull(id)) { + if (common.isDefinedAndNotNull(id)) { d3.select('#id-' + id).call(updateFunnels); } else { d3.selectAll('g.funnel').call(updateFunnels); @@ -312,7 +347,7 @@ nf.Funnel = (function () { url: funnelEntity.uri, dataType: 'json' }).done(function (response) { - nf.Funnel.set(response); + nfFunnel.set(response); }); } }, @@ -323,7 +358,7 @@ nf.Funnel = (function () { * @param {string} id The id */ position: function (id) { - d3.select('#id-' + id).call(nf.CanvasUtils.position); + d3.select('#id-' + id).call(canvasUtils.position); }, /** @@ -352,7 +387,7 @@ nf.Funnel = (function () { * Removes all processors. */ removeAll: function () { - nf.Funnel.remove(funnelMap.keys()); + nfFunnel.remove(funnelMap.keys()); }, /** @@ -373,4 +408,6 @@ nf.Funnel = (function () { expire(removedCache); } }; -}()); \ No newline at end of file + + return nfFunnel; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js index 5e387efc10..b69f143f32 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js @@ -15,12 +15,31 @@ * limitations under the License. */ -/* global nf */ +/* global define, module, require, exports */ /** * Handles the upstream/downstream dialogs. */ -nf.GoTo = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'nf.ErrorHandler', + 'nf.CanvasUtils'], + function ($, errorHandler, canvasUtils) { + return (nf.GoTo = factory($, errorHandler, canvasUtils)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.GoTo = + factory(require('jquery'), + require('nf.ErrorHandler'), + require('nf.CanvasUtils'))); + } else { + nf.GoTo = factory(root.$, + root.nf.ErrorHandler, + root.nf.CanvasUtils); + } +}(this, function ($, errorHandler, canvasUtils) { + 'use strict'; var config = { urls: { @@ -57,7 +76,7 @@ nf.GoTo = (function () { var connectionStyle = 'unset'; var connectionName = 'Connection'; if (connectionEntity.permissions.canRead === true) { - var formattedConnectionName = nf.CanvasUtils.formatConnectionName(connectionEntity.component); + var formattedConnectionName = canvasUtils.formatConnectionName(connectionEntity.component); if (formattedConnectionName !== '') { connectionStyle = ''; connectionName = formattedConnectionName; @@ -68,7 +87,7 @@ nf.GoTo = (function () { $('
    ').appendTo(connectionEntry); $('
    ').attr('title', connectionName).addClass(connectionStyle).text(connectionName).on('click', function () { // go to the connection - nf.CanvasUtils.showComponent(parentProcessGroupId, connectionEntity.id); + canvasUtils.showComponent(parentProcessGroupId, connectionEntity.id); // close the dialog $('#connections-dialog').modal('hide'); @@ -117,7 +136,7 @@ nf.GoTo = (function () { $('
    ').addClass(smallIconClass).appendTo(downstreamComponent); $('
    ').attr('title', destinationName).text(destinationName).on('click', function () { // go to the component - nf.CanvasUtils.showComponent(connectionEntity.destinationGroupId, connectionEntity.destinationId); + canvasUtils.showComponent(connectionEntity.destinationGroupId, connectionEntity.destinationId); // close the dialog $('#connections-dialog').modal('hide'); @@ -152,7 +171,7 @@ nf.GoTo = (function () { $('
    ').appendTo(downstreamComponent); $('
    ').attr('title', groupLabel).text(groupLabel).on('click', function () { // go to the remote process group - nf.CanvasUtils.showComponent(parentProcessGroupId, processGroupEntity.id); + canvasUtils.showComponent(parentProcessGroupId, processGroupEntity.id); // close the dialog $('#connections-dialog').modal('hide'); @@ -174,7 +193,7 @@ nf.GoTo = (function () { $('
    ').appendTo(downstreamInputPort); $('
    ').attr('title', portLabel).text(portLabel).on('click', function () { // go to the remote process group - nf.CanvasUtils.showComponent(connectionEntity.destinationGroupId, connectionEntity.destinationId); + canvasUtils.showComponent(connectionEntity.destinationGroupId, connectionEntity.destinationId); // close the dialog $('#connections-dialog').modal('hide'); @@ -209,7 +228,7 @@ nf.GoTo = (function () { $('
    ').appendTo(downstreamComponent); $('
    ').attr('title', remoteGroupLabel).text(remoteGroupLabel).on('click', function () { // go to the remote process group - nf.CanvasUtils.showComponent(parentProcessGroupId, remoteProcessGroupEntity.id); + canvasUtils.showComponent(parentProcessGroupId, remoteProcessGroupEntity.id); // close the dialog $('#connections-dialog').modal('hide'); @@ -263,7 +282,7 @@ nf.GoTo = (function () { $('
    ').addClass(smallIconClass).appendTo(sourceComponent); $('
    ').attr('title', sourceName).text(sourceName).on('click', function () { // go to the component - nf.CanvasUtils.showComponent(connectionEntity.sourceGroupId, connectionEntity.sourceId); + canvasUtils.showComponent(connectionEntity.sourceGroupId, connectionEntity.sourceId); // close the dialog $('#connections-dialog').modal('hide'); @@ -298,7 +317,7 @@ nf.GoTo = (function () { $('
    ').appendTo(sourceComponent); $('
    ').attr('title', groupLabel).text(groupLabel).on('click', function () { // go to the process group - nf.CanvasUtils.showComponent(parentProcessGroupId, processGroupEntity.id); + canvasUtils.showComponent(parentProcessGroupId, processGroupEntity.id); // close the dialog $('#connections-dialog').modal('hide'); @@ -319,7 +338,7 @@ nf.GoTo = (function () { $('
    ').appendTo(sourceOutputPort); $('
    ').attr('title', portLabel).text(portLabel).on('click', function () { // go to the output port - nf.CanvasUtils.showComponent(connectionEntity.sourceGroupId, connectionEntity.sourceId); + canvasUtils.showComponent(connectionEntity.sourceGroupId, connectionEntity.sourceId); // close the dialog $('#connections-dialog').modal('hide'); @@ -354,7 +373,7 @@ nf.GoTo = (function () { $('
    ').appendTo(sourceComponent); $('
    ').attr('title', remoteGroupLabel).text(remoteGroupLabel).on('click', function () { // go to the remote process group - nf.CanvasUtils.showComponent(parentProcessGroupId, remoteProcessGroupEntity.id); + canvasUtils.showComponent(parentProcessGroupId, remoteProcessGroupEntity.id); // close the dialog $('#connections-dialog').modal('hide'); @@ -432,9 +451,9 @@ nf.GoTo = (function () { */ showDownstreamFromProcessor: function (selection) { var processorEntity = selection.datum(); - var connections = nf.Connection.get(); - var processGroups = nf.ProcessGroup.get(); - var remoteProcessGroups = nf.RemoteProcessGroup.get(); + var connections = canvasUtils.getComponentByType('Connection').get(); + var processGroups = canvasUtils.getComponentByType('ProcessGroup').get(); + var remoteProcessGroups = canvasUtils.getComponentByType('RemoteProcessGroup').get(); var processorLabel = getDisplayName(processorEntity); @@ -452,7 +471,7 @@ nf.GoTo = (function () { $.each(connections, function (_, connectionEntity) { // only show connections for which this selection is the source if (connectionEntity.sourceId === processorEntity.id) { - addConnection(nf.Canvas.getGroupId(), connectionEntity, processGroups, remoteProcessGroups); + addConnection(canvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups); } }); @@ -472,9 +491,9 @@ nf.GoTo = (function () { */ showUpstreamFromProcessor: function (selection) { var processorEntity = selection.datum(); - var connections = nf.Connection.get(); - var processGroups = nf.ProcessGroup.get(); - var remoteProcessGroups = nf.RemoteProcessGroup.get(); + var connections = canvasUtils.getComponentByType('Connection').get(); + var processGroups = canvasUtils.getComponentByType('ProcessGroup').get(); + var remoteProcessGroups = canvasUtils.getComponentByType('RemoteProcessGroup').get(); var processorLabel = getDisplayName(processorEntity); @@ -492,7 +511,7 @@ nf.GoTo = (function () { $.each(connections, function (_, connectionEntity) { // only show connections for which this selection is the destination if (connectionEntity.destinationId === processorEntity.id) { - addConnection(nf.Canvas.getGroupId(), connectionEntity, processGroups, remoteProcessGroups); + addConnection(canvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups); } }); @@ -512,12 +531,12 @@ nf.GoTo = (function () { */ showDownstreamFromGroup: function (selection) { var groupEntity = selection.datum(); - var connections = nf.Connection.get(); - var processGroups = nf.ProcessGroup.get(); - var remoteProcessGroups = nf.RemoteProcessGroup.get(); + var connections = canvasUtils.getComponentByType('Connection').get(); + var processGroups = canvasUtils.getComponentByType('ProcessGroup').get(); + var remoteProcessGroups = canvasUtils.getComponentByType('RemoteProcessGroup').get(); var iconStyle = 'icon-group'; - if (nf.CanvasUtils.isRemoteProcessGroup(selection)) { + if (canvasUtils.isRemoteProcessGroup(selection)) { iconStyle = 'icon-group-remote'; } @@ -537,7 +556,7 @@ nf.GoTo = (function () { $.each(connections, function (_, connectionEntity) { // only show connections for which this selection is the source if (connectionEntity.sourceGroupId === groupEntity.id) { - addConnection(nf.Canvas.getGroupId(), connectionEntity, processGroups, remoteProcessGroups); + addConnection(canvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups); } }); @@ -557,12 +576,12 @@ nf.GoTo = (function () { */ showUpstreamFromGroup: function (selection) { var groupEntity = selection.datum(); - var connections = nf.Connection.get(); - var processGroups = nf.ProcessGroup.get(); - var remoteProcessGroups = nf.RemoteProcessGroup.get(); + var connections = canvasUtils.getComponentByType('Connection').get(); + var processGroups = canvasUtils.getComponentByType('ProcessGroup').get(); + var remoteProcessGroups = canvasUtils.getComponentByType('RemoteProcessGroup').get(); var iconStyle = 'icon-group'; - if (nf.CanvasUtils.isRemoteProcessGroup(selection)) { + if (canvasUtils.isRemoteProcessGroup(selection)) { iconStyle = 'icon-group-remote'; } @@ -582,7 +601,7 @@ nf.GoTo = (function () { $.each(connections, function (_, connectionEntity) { // only show connections for which this selection is the destination if (connectionEntity.destinationGroupId === groupEntity.id) { - addConnection(nf.Canvas.getGroupId(), connectionEntity, processGroups, remoteProcessGroups); + addConnection(canvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups); } }); @@ -602,9 +621,9 @@ nf.GoTo = (function () { */ showDownstreamFromInputPort: function (selection) { var portEntity = selection.datum(); - var connections = nf.Connection.get(); - var processGroups = nf.ProcessGroup.get(); - var remoteProcessGroups = nf.RemoteProcessGroup.get(); + var connections = canvasUtils.getComponentByType('Connection').get(); + var processGroups = canvasUtils.getComponentByType('ProcessGroup').get(); + var remoteProcessGroups = canvasUtils.getComponentByType('RemoteProcessGroup').get(); var portLabel = getDisplayName(portEntity); @@ -622,7 +641,7 @@ nf.GoTo = (function () { $.each(connections, function (_, connectionEntity) { // only show connections for which this selection is the source if (connectionEntity.sourceId === portEntity.id) { - addConnection(nf.Canvas.getGroupId(), connectionEntity, processGroups, remoteProcessGroups); + addConnection(canvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups); } }); @@ -645,7 +664,7 @@ nf.GoTo = (function () { $.ajax({ type: 'GET', - url: config.urls.processGroups + encodeURIComponent(nf.Canvas.getParentGroupId()), + url: config.urls.processGroups + encodeURIComponent(canvasUtils.getParentGroupId()), dataType: 'json' }).done(function (response) { var flow = response.processGroupFlow.flow; @@ -662,7 +681,7 @@ nf.GoTo = (function () { // populate the upstream dialog $('#connections-context') .append('
    ') - .append($('
    ').text(nf.Canvas.getGroupName())) + .append($('
    ').text(canvasUtils.getGroupName())) .append('
    ') .append('
    ') .append($('
    ').text(portLabel)) @@ -672,7 +691,7 @@ nf.GoTo = (function () { $.each(connections, function (_, connectionEntity) { // only show connections for which this selection is the destination if (connectionEntity.destinationId === portEntity.id) { - addConnection(nf.Canvas.getParentGroupId(), connectionEntity, processGroups, remoteProcessGroups); + addConnection(canvasUtils.getParentGroupId(), connectionEntity, processGroups, remoteProcessGroups); } }); @@ -683,7 +702,7 @@ nf.GoTo = (function () { // show the upstream dialog $('#connections-dialog').modal('setHeaderText', 'Upstream Connections').modal('show'); - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); }, /** @@ -696,7 +715,7 @@ nf.GoTo = (function () { $.ajax({ type: 'GET', - url: config.urls.processGroups + encodeURIComponent(nf.Canvas.getParentGroupId()), + url: config.urls.processGroups + encodeURIComponent(canvasUtils.getParentGroupId()), dataType: 'json' }).done(function (response) { var flow = response.processGroupFlow.flow; @@ -713,7 +732,7 @@ nf.GoTo = (function () { // populate the downstream dialog $('#connections-context') .append('
    ') - .append($('
    ').text(nf.Canvas.getGroupName())) + .append($('
    ').text(canvasUtils.getGroupName())) .append('
    ') .append('
    ') .append($('
    ').text(portLabel)) @@ -723,7 +742,7 @@ nf.GoTo = (function () { $.each(connections, function (_, connectionEntity) { // only show connections for which this selection is the source if (connectionEntity.sourceId === portEntity.id) { - addConnection(nf.Canvas.getParentGroupId(), connectionEntity, processGroups, remoteProcessGroups); + addConnection(canvasUtils.getParentGroupId(), connectionEntity, processGroups, remoteProcessGroups); } }); @@ -734,7 +753,7 @@ nf.GoTo = (function () { // show the downstream dialog $('#connections-dialog').modal('setHeaderText', 'Downstream Connections').modal('show'); - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); }, /** @@ -744,9 +763,9 @@ nf.GoTo = (function () { */ showUpstreamFromOutputPort: function (selection) { var portEntity = selection.datum(); - var connections = nf.Connection.get(); - var processGroups = nf.ProcessGroup.get(); - var remoteProcessGroups = nf.RemoteProcessGroup.get(); + var connections = canvasUtils.getComponentByType('Connection').get(); + var processGroups = canvasUtils.getComponentByType('ProcessGroup').get(); + var remoteProcessGroups = canvasUtils.getComponentByType('RemoteProcessGroup').get(); var portLabel = getDisplayName(portEntity); @@ -764,7 +783,7 @@ nf.GoTo = (function () { $.each(connections, function (_, connectionEntity) { // only show connections for which this selection is the destination if (connectionEntity.destinationId === portEntity.id) { - addConnection(nf.Canvas.getGroupId(), connectionEntity, processGroups, remoteProcessGroups); + addConnection(canvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups); } }); @@ -784,9 +803,9 @@ nf.GoTo = (function () { */ showDownstreamFromFunnel: function (selection) { var funnelEntity = selection.datum(); - var connections = nf.Connection.get(); - var processGroups = nf.ProcessGroup.get(); - var remoteProcessGroups = nf.RemoteProcessGroup.get(); + var connections = canvasUtils.getComponentByType('Connection').get(); + var processGroups = canvasUtils.getComponentByType('ProcessGroup').get(); + var remoteProcessGroups = canvasUtils.getComponentByType('RemoteProcessGroup').get(); // record details of the current component currentComponentId = funnelEntity.id; @@ -802,7 +821,7 @@ nf.GoTo = (function () { $.each(connections, function (_, connectionEntity) { // only show connections for which this selection is the source if (connectionEntity.sourceId === funnelEntity.id) { - addConnection(nf.Canvas.getGroupId(), connectionEntity, processGroups, remoteProcessGroups); + addConnection(canvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups); } }); @@ -822,9 +841,9 @@ nf.GoTo = (function () { */ showUpstreamFromFunnel: function (selection) { var funnelEntity = selection.datum(); - var connections = nf.Connection.get(); - var processGroups = nf.ProcessGroup.get(); - var remoteProcessGroups = nf.RemoteProcessGroup.get(); + var connections = canvasUtils.getComponentByType('Connection').get(); + var processGroups = canvasUtils.getComponentByType('ProcessGroup').get(); + var remoteProcessGroups = canvasUtils.getComponentByType('RemoteProcessGroup').get(); // record details of the current component currentComponentId = funnelEntity.id; @@ -840,7 +859,7 @@ nf.GoTo = (function () { $.each(connections, function (_, connectionEntity) { // only show connections for which this selection is the destination if (connectionEntity.destinationId === funnelEntity.id) { - addConnection(nf.Canvas.getGroupId(), connectionEntity, processGroups, remoteProcessGroups); + addConnection(canvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups); } }); @@ -853,4 +872,4 @@ nf.GoTo = (function () { $('#connections-dialog').modal('setHeaderText', 'Upstream Connections').modal('show'); } }; -}()); \ No newline at end of file +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js index cf333944e1..bf21846f09 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js @@ -15,16 +15,74 @@ * limitations under the License. */ -/* global nf */ +/* global define, module, require, exports */ -nf.Graph = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'd3', + 'nf.Common', + 'nf.ng.Bridge', + 'nf.Label', + 'nf.Funnel', + 'nf.Port', + 'nf.RemoteProcessGroup', + 'nf.ProcessGroup', + 'nf.Processor', + 'nf.Connection', + 'nf.CanvasUtils', + 'nf.Connectable', + 'nf.Draggable', + 'nf.Selectable', + 'nf.ContextMenu'], + function ($, d3, common, angularBridge, nfLabel, nfFunnel, nfPort, nfRemoteProcessGroup, nfProcessGroup, nfProcessor, nfConnection, canvasUtils, connectable, draggable, selectable, contextMenu) { + return (nf.Graph = factory($, d3, common, angularBridge, nfLabel, nfFunnel, nfPort, nfRemoteProcessGroup, nfProcessGroup, nfProcessor, nfConnection, canvasUtils, connectable, draggable, selectable, contextMenu)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.Graph = + factory(require('jquery'), + require('d3'), + require('nf.Common'), + require('nf.ng.Bridge'), + require('nf.Label'), + require('nf.Funnel'), + require('nf.Port'), + require('nf.RemoteProcessGroup'), + require('nf.ProcessGroup'), + require('nf.Processor'), + require('nf.Connection'), + require('nf.CanvasUtils'), + require('nf.Connectable'), + require('nf.Draggable'), + require('nf.Selectable'), + require('nf.ContextMenu'))); + } else { + nf.Graph = factory(root.$, + root.d3, + root.nf.Common, + root.nf.ng.Bridge, + root.nf.Label, + root.nf.Funnel, + root.nf.Port, + root.nf.RemoteProcessGroup, + root.nf.ProcessGroup, + root.nf.Processor, + root.nf.Connection, + root.nf.CanvasUtils, + root.nf.Connectable, + root.nf.Draggable, + root.nf.Selectable, + root.nf.ContextMenu); + } +}(this, function ($, d3, common, angularBridge, nfLabel, nfFunnel, nfPort, nfRemoteProcessGroup, nfProcessGroup, nfProcessor, nfConnection, canvasUtils, connectable, draggable, selectable, contextMenu) { + 'use strict'; var combinePorts = function (contents) { - if (nf.Common.isDefinedAndNotNull(contents.inputPorts) && nf.Common.isDefinedAndNotNull(contents.outputPorts)) { + if (common.isDefinedAndNotNull(contents.inputPorts) && common.isDefinedAndNotNull(contents.outputPorts)) { return contents.inputPorts.concat(contents.outputPorts); - } else if (nf.Common.isDefinedAndNotNull(contents.inputPorts)) { + } else if (common.isDefinedAndNotNull(contents.inputPorts)) { return contents.inputPorts; - } else if (nf.Common.isDefinedAndNotNull(contents.outputPorts)) { + } else if (common.isDefinedAndNotNull(contents.outputPorts)) { return contents.outputPorts; } else { return []; @@ -32,31 +90,121 @@ nf.Graph = (function () { }; var combinePortStatus = function (status) { - if (nf.Common.isDefinedAndNotNull(status.inputPortStatusSnapshots) && nf.Common.isDefinedAndNotNull(status.outputPortStatusSnapshots)) { + if (common.isDefinedAndNotNull(status.inputPortStatusSnapshots) && common.isDefinedAndNotNull(status.outputPortStatusSnapshots)) { return status.inputPortStatusSnapshots.concat(status.outputPortStatusSnapshots); - } else if (nf.Common.isDefinedAndNotNull(status.inputPortStatusSnapshots)) { + } else if (common.isDefinedAndNotNull(status.inputPortStatusSnapshots)) { return status.inputPortStatusSnapshots; - } else if (nf.Common.isDefinedAndNotNull(status.outputPortStatusSnapshots)) { + } else if (common.isDefinedAndNotNull(status.outputPortStatusSnapshots)) { return status.outputPortStatusSnapshots; } else { return []; } }; - return { - init: function () { + /** + * Updates component visibility based on their proximity to the screen's viewport. + */ + var updateComponentVisibility = function () { + var canvasContainer = $('#canvas-container'); + var translate = canvasUtils.translateCanvasView(); + var scale = canvasUtils.scaleCanvasView(); + // scale the translation + translate = [translate[0] / scale, translate[1] / scale]; + + // get the normalized screen width and height + var screenWidth = canvasContainer.width() / scale; + var screenHeight = canvasContainer.height() / scale; + + // calculate the screen bounds one screens worth in each direction + var screenLeft = -translate[0] - screenWidth; + var screenTop = -translate[1] - screenHeight; + var screenRight = screenLeft + (screenWidth * 3); + var screenBottom = screenTop + (screenHeight * 3); + + // detects whether a component is visible and should be rendered + var isComponentVisible = function (d) { + if (!canvasUtils.shouldRenderPerScale()) { + return false; + } + + var left = d.position.x; + var top = d.position.y; + var right = left + d.dimensions.width; + var bottom = top + d.dimensions.height; + + // determine if the component is now visible + return screenLeft < right && screenRight > left && screenTop < bottom && screenBottom > top; + }; + + // detects whether a connection is visible and should be rendered + var isConnectionVisible = function (d) { + if (!canvasUtils.shouldRenderPerScale()) { + return false; + } + + var x, y; + if (d.bends.length > 0) { + var i = Math.min(Math.max(0, d.labelIndex), d.bends.length - 1); + x = d.bends[i].x; + y = d.bends[i].y; + } else { + x = (d.start.x + d.end.x) / 2; + y = (d.start.y + d.end.y) / 2; + } + + return screenLeft < x && screenRight > x && screenTop < y && screenBottom > y; + }; + + // marks the specific component as visible and determines if its entering or leaving visibility + var updateVisibility = function (d, isVisible) { + var selection = d3.select('#id-' + d.id); + var visible = isVisible(d); + var wasVisible = selection.classed('visible'); + + // mark the selection as appropriate + selection.classed('visible', visible) + .classed('entering', function () { + return visible && !wasVisible; + }).classed('leaving', function () { + return !visible && wasVisible; + }); + }; + + // get the all components + var graph = nfGraph.get(); + + // update the visibility for each component + $.each(graph.processors, function (_, d) { + updateVisibility(d, isComponentVisible); + }); + $.each(graph.ports, function (_, d) { + updateVisibility(d, isComponentVisible); + }); + $.each(graph.processGroups, function (_, d) { + updateVisibility(d, isComponentVisible); + }); + $.each(graph.remoteProcessGroups, function (_, d) { + updateVisibility(d, isComponentVisible); + }); + $.each(graph.connections, function (_, d) { + updateVisibility(d, isConnectionVisible); + }); + }; + + var nfGraph = { + init: function () { // initialize the object responsible for each type of component - nf.Label.init(); - nf.Funnel.init(); - nf.Port.init(); - nf.RemoteProcessGroup.init(); - nf.ProcessGroup.init(); - nf.Processor.init(); - nf.Connection.init(); + nfLabel.init(connectable, draggable, selectable, contextMenu); + nfFunnel.init(connectable, draggable, selectable, contextMenu); + nfPort.init(connectable, draggable, selectable, contextMenu); + nfRemoteProcessGroup.init(connectable, draggable, selectable, contextMenu); + nfProcessGroup.init(connectable, draggable, selectable, contextMenu); + nfProcessor.init(connectable, draggable, selectable, contextMenu); + nfConnection.init(selectable, contextMenu); // load the graph - return nf.CanvasUtils.enterGroup(nf.Canvas.getGroupId()); + return nfProcessGroup.enterGroup(canvasUtils.getGroupId()); }, /** @@ -67,65 +215,65 @@ nf.Graph = (function () { */ add: function (processGroupContents, options) { var selectAll = false; - if (nf.Common.isDefinedAndNotNull(options)) { - selectAll = nf.Common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; + if (common.isDefinedAndNotNull(options)) { + selectAll = common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; } // if we are going to select the new components, deselect the previous selection if (selectAll) { - nf.CanvasUtils.getSelection().classed('selected', false); + canvasUtils.getSelection().classed('selected', false); } // merge the ports together var ports = combinePorts(processGroupContents); // add the components to the responsible object - nf.Label.add(processGroupContents.labels, options); - nf.Funnel.add(processGroupContents.funnels, options); - nf.RemoteProcessGroup.add(processGroupContents.remoteProcessGroups, options); - nf.Port.add(ports, options); - nf.ProcessGroup.add(processGroupContents.processGroups, options); - nf.Processor.add(processGroupContents.processors, options); - nf.Connection.add(processGroupContents.connections, options); + nfLabel.add(processGroupContents.labels, options); + nfFunnel.add(processGroupContents.funnels, options); + nfRemoteProcessGroup.add(processGroupContents.remoteProcessGroups, options); + nfPort.add(ports, options); + nfProcessGroup.add(processGroupContents.processGroups, options); + nfProcessor.add(processGroupContents.processors, options); + nfConnection.add(processGroupContents.connections, options); // inform Angular app if the selection is changing if (selectAll) { - nf.ng.Bridge.digest(); + angularBridge.digest(); } }, - + /** * Populates the graph with the resources defined in the response. - * + * * @argument {object} processGroupContents The contents of the process group * @argument {object} options Configuration options */ set: function (processGroupContents, options) { var selectAll = false; - if (nf.Common.isDefinedAndNotNull(options)) { - selectAll = nf.Common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; + if (common.isDefinedAndNotNull(options)) { + selectAll = common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; } // if we are going to select the new components, deselect the previous selection if (selectAll) { - nf.CanvasUtils.getSelection().classed('selected', false); + canvasUtils.getSelection().classed('selected', false); } // merge the ports together var ports = combinePorts(processGroupContents); // add the components to the responsible object - nf.Label.set(processGroupContents.labels, options); - nf.Funnel.set(processGroupContents.funnels, options); - nf.RemoteProcessGroup.set(processGroupContents.remoteProcessGroups, options); - nf.Port.set(ports, options); - nf.ProcessGroup.set(processGroupContents.processGroups, options); - nf.Processor.set(processGroupContents.processors, options); - nf.Connection.set(processGroupContents.connections, options); + nfLabel.set(processGroupContents.labels, options); + nfFunnel.set(processGroupContents.funnels, options); + nfRemoteProcessGroup.set(processGroupContents.remoteProcessGroups, options); + nfPort.set(ports, options); + nfProcessGroup.set(processGroupContents.processGroups, options); + nfProcessor.set(processGroupContents.processors, options); + nfConnection.set(processGroupContents.connections, options); // inform Angular app if the selection is changing if (selectAll) { - nf.ng.Bridge.digest(); + angularBridge.digest(); } }, @@ -140,54 +288,133 @@ nf.Graph = (function () { * @param timestamp expire caches before */ expireCaches: function (timestamp) { - nf.Label.expireCaches(timestamp); - nf.Funnel.expireCaches(timestamp); - nf.RemoteProcessGroup.expireCaches(timestamp); - nf.Port.expireCaches(timestamp); - nf.ProcessGroup.expireCaches(timestamp); - nf.Processor.expireCaches(timestamp); - nf.Connection.expireCaches(timestamp); + nfLabel.expireCaches(timestamp); + nfFunnel.expireCaches(timestamp); + nfRemoteProcessGroup.expireCaches(timestamp); + nfPort.expireCaches(timestamp); + nfProcessGroup.expireCaches(timestamp); + nfProcessor.expireCaches(timestamp); + nfConnection.expireCaches(timestamp); }, - + /** * Gets the components currently on the canvas. */ get: function () { return { - labels: nf.Label.get(), - funnels: nf.Funnel.get(), - ports: nf.Port.get(), - remoteProcessGroups: nf.RemoteProcessGroup.get(), - processGroups: nf.ProcessGroup.get(), - processors: nf.Processor.get(), - connections: nf.Connection.get() + labels: nfLabel.get(), + funnels: nfFunnel.get(), + ports: nfPort.get(), + remoteProcessGroups: nfRemoteProcessGroup.get(), + processGroups: nfProcessGroup.get(), + processors: nfProcessor.get(), + connections: nfConnection.get() }; }, - + + /** + * Gets a graph component `type`. + * + * @param type The type of component. + */ + getComponentByType: function (type) { + switch (type) + { + case "Label": + return nfLabel; + break; + + case "Funnel": + return nfFunnel; + break; + + case "Port": + return nfPort; + break; + + case "RemoteProcessGroup": + return nfRemoteProcessGroup; + break; + + case "ProcessGroup": + return nfProcessGroup; + break; + + case "Processor": + return nfProcessor; + break; + + case "Connection": + return nfConnection; + break; + + default: + throw new Error('Unknown component type.'); + break; + } + }, + /** * Clears all the components currently on the canvas. This function does not automatically refresh. */ removeAll: function () { // remove all the components - nf.Label.removeAll(); - nf.Funnel.removeAll(); - nf.Port.removeAll(); - nf.RemoteProcessGroup.removeAll(); - nf.ProcessGroup.removeAll(); - nf.Processor.removeAll(); - nf.Connection.removeAll(); + nfLabel.removeAll(); + nfFunnel.removeAll(); + nfPort.removeAll(); + nfRemoteProcessGroup.removeAll(); + nfProcessGroup.removeAll(); + nfProcessor.removeAll(); + nfConnection.removeAll(); }, - + /** * Refreshes all components currently on the canvas. */ pan: function () { // refresh the components - nf.Port.pan(); - nf.RemoteProcessGroup.pan(); - nf.ProcessGroup.pan(); - nf.Processor.pan(); - nf.Connection.pan(); + nfPort.pan(); + nfRemoteProcessGroup.pan(); + nfProcessGroup.pan(); + nfProcessor.pan(); + nfConnection.pan(); + }, + + /** + * Updates component visibility based on the current translation/scale. + */ + updateVisibility: function () { + updateComponentVisibility(); + nfGraph.pan(); + }, + + /** + * Gets the currently selected components and connections. + * + * @returns {selection} The currently selected components and connections + */ + getSelection: function () { + return d3.selectAll('g.component.selected, g.connection.selected'); + }, + + /** + * Reload the component on the canvas. + * + * @param component The component. + */ + reload: function (component) { + var componentData = component.datum(); + if (componentData.permissions.canRead) { + if (canvasUtils.isProcessor(component)) { + nfProcessor.reload(componentData.id); + } else if (canvasUtils.isInputPort(component)) { + nfPort.reload(componentData.id); + } else if (canvasUtils.isRemoteProcessGroup(component)) { + nfRemoteProcessGroup.reload(componentData.id); + } + } } }; -}()); \ No newline at end of file + + return nfGraph; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-configuration.js index 0eba38e650..4c22c56cc7 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-configuration.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-configuration.js @@ -15,9 +15,43 @@ * limitations under the License. */ -/* global nf */ +/* global define, module, require, exports */ -nf.LabelConfiguration = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'd3', + 'nf.ErrorHandler', + 'nf.Common', + 'nf.Client', + 'nf.CanvasUtils', + 'nf.ng.Bridge', + 'nf.Label'], + function ($, d3, errorHandler, common, client, canvasUtils, angularBridge, label) { + return (nf.LabelConfiguration = factory($, d3, errorHandler, common, client, canvasUtils, angularBridge, label)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.LabelConfiguration = + factory(require('jquery'), + require('d3'), + require('nf.ErrorHandler'), + require('nf.Common'), + require('nf.Client'), + require('nf.CanvasUtils'), + require('nf.ng.Bridge'), + require('nf.Label'))); + } else { + nf.LabelConfiguration = factory(root.$, + root.d3, + root.nf.ErrorHandler, + root.nf.Common, + root.nf.Client, + root.nf.CanvasUtils, + root.nf.ng.Bridge, + root.nf.Label); + } +}(this, function ($, d3, errorHandler, common, client, canvasUtils, angularBridge, label) { + 'use strict'; var labelId = ''; @@ -48,7 +82,7 @@ nf.LabelConfiguration = (function () { // build the label entity var labelEntity = { - 'revision': nf.Client.getRevision(labelData), + 'revision': client.getRevision(labelData), 'component': { 'id': labelId, 'label': labelValue, @@ -67,11 +101,11 @@ nf.LabelConfiguration = (function () { contentType: 'application/json' }).done(function (response) { // get the label out of the response - nf.Label.set(response); + label.set(response); // inform Angular app values have changed - nf.ng.Bridge.digest(); - }).fail(nf.ErrorHandler.handleAjaxError); + angularBridge.digest(); + }).fail(errorHandler.handleAjaxError); // reset and hide the dialog this.modal('hide'); @@ -132,18 +166,18 @@ nf.LabelConfiguration = (function () { * @argument {selection} selection The selection */ showConfiguration: function (selection) { - if (nf.CanvasUtils.isLabel(selection)) { + if (canvasUtils.isLabel(selection)) { var selectionData = selection.datum(); // get the label value var labelValue = ''; - if (nf.Common.isDefinedAndNotNull(selectionData.component.label)) { + if (common.isDefinedAndNotNull(selectionData.component.label)) { labelValue = selectionData.component.label; } // get the font size var fontSize = '12px'; - if (nf.Common.isDefinedAndNotNull(selectionData.component.style['font-size'])) { + if (common.isDefinedAndNotNull(selectionData.component.style['font-size'])) { fontSize = selectionData.component.style['font-size']; } @@ -161,4 +195,4 @@ nf.LabelConfiguration = (function () { } } }; -}()); \ No newline at end of file +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js index 503c855ffa..fcec19deb8 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js @@ -15,9 +15,39 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.Label = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'd3', + 'nf.Common', + 'nf.Client', + 'nf.CanvasUtils'], + function ($, d3, common, client, canvasUtils) { + return (nf.Label = factory($, d3, common, client, canvasUtils)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.Label = + factory(require('jquery'), + require('d3'), + require('nf.Common'), + require('nf.Client'), + require('nf.CanvasUtils'))); + } else { + nf.Label = factory(root.$, + root.d3, + root.nf.Common, + root.nf.Client, + root.nf.CanvasUtils); + } +}(this, function ($, d3, common, client, canvasUtils) { + 'use strict'; + + var nfConnectable; + var nfDraggable; + var nfSelectable; + var nfContextMenu; var dimensions = { width: 150, @@ -84,7 +114,7 @@ nf.Label = (function () { 'class': 'label component' }) .classed('selected', selected) - .call(nf.CanvasUtils.position); + .call(canvasUtils.position); // label border label.append('rect') @@ -112,7 +142,7 @@ nf.Label = (function () { }); // always support selecting - label.call(nf.Selectable.activate).call(nf.ContextMenu.activate); + label.call(nfSelectable.activate).call(nfContextMenu.activate); }; /** @@ -154,10 +184,10 @@ nf.Label = (function () { return null; } - var color = nf.Label.defaultColor(); + var color = nfLabel.defaultColor(); // use the specified color if appropriate - if (nf.Common.isDefinedAndNotNull(d.component.style['background-color'])) { + if (common.isDefinedAndNotNull(d.component.style['background-color'])) { color = d.component.style['background-color']; } @@ -172,7 +202,7 @@ nf.Label = (function () { var label = d3.select(this); // update the component behavior as appropriate - nf.CanvasUtils.editable(label); + canvasUtils.editable(label, nfConnectable, nfDraggable); // update the label var labelText = label.select('text.label-value'); @@ -183,7 +213,7 @@ nf.Label = (function () { var fontSize = '12px'; // use the specified color if appropriate - if (nf.Common.isDefinedAndNotNull(d.component.style['font-size'])) { + if (common.isDefinedAndNotNull(d.component.style['font-size'])) { fontSize = d.component.style['font-size']; } @@ -195,16 +225,16 @@ nf.Label = (function () { // parse the lines in this label var lines = []; - if (nf.Common.isDefinedAndNotNull(d.component.label)) { + if (common.isDefinedAndNotNull(d.component.label)) { lines = d.component.label.split('\n'); } else { lines.push(''); } - var color = nf.Label.defaultColor(); + var color = nfLabel.defaultColor(); // use the specified color if appropriate - if (nf.Common.isDefinedAndNotNull(d.component.style['background-color'])) { + if (common.isDefinedAndNotNull(d.component.style['background-color'])) { color = d.component.style['background-color']; } @@ -217,8 +247,8 @@ nf.Label = (function () { return line; }) .style('fill', function (d) { - return nf.Common.determineContrastColor( - nf.Common.substringAfterLast( + return common.determineContrastColor( + common.substringAfterLast( color, '#')); }); }); @@ -254,7 +284,7 @@ nf.Label = (function () { } else { // remove the previous label value labelText.selectAll('tspan').remove(); - + // remove the label points labelPoint.remove() } @@ -270,7 +300,7 @@ nf.Label = (function () { removed.remove(); }; - return { + var nfLabel = { config: { width: dimensions.width, height: dimensions.height @@ -279,7 +309,12 @@ nf.Label = (function () { /** * Initializes of the Processor handler. */ - init: function () { + init: function (connectable, draggable, selectable, contextMenu) { + nfConnectable = connectable; + nfDraggable = draggable; + nfSelectable = selectable; + nfContextMenu = contextMenu; + labelMap = d3.map(); removedCache = d3.map(); addedCache = d3.map(); @@ -314,19 +349,19 @@ nf.Label = (function () { // determine if the width has changed var different = false; - if (nf.Common.isDefinedAndNotNull(labelData.component.width) || labelData.dimensions.width !== labelData.component.width) { + if (common.isDefinedAndNotNull(labelData.component.width) || labelData.dimensions.width !== labelData.component.width) { different = true; } // determine if the height has changed - if (!different && nf.Common.isDefinedAndNotNull(labelData.component.height) || labelData.dimensions.height !== labelData.component.height) { + if (!different && common.isDefinedAndNotNull(labelData.component.height) || labelData.dimensions.height !== labelData.component.height) { different = true; } // only save the updated bends if necessary if (different) { var labelEntity = { - 'revision': nf.Client.getRevision(labelData), + 'revision': client.getRevision(labelData), 'component': { 'id': labelData.id, 'width': labelData.dimensions.width, @@ -342,17 +377,17 @@ nf.Label = (function () { contentType: 'application/json' }).done(function (response) { // request was successful, update the entry - nf.Label.set(response); + nfLabel.set(response); }).fail(function () { // determine the previous width var width = dimensions.width; - if (nf.Common.isDefinedAndNotNull(labelData.component.width)) { + if (common.isDefinedAndNotNull(labelData.component.width)) { width = labelData.component.width; } // determine the previous height var height = dimensions.height; - if (nf.Common.isDefinedAndNotNull(labelData.component.height)) { + if (common.isDefinedAndNotNull(labelData.component.height)) { height = labelData.component.height; } @@ -380,8 +415,8 @@ nf.Label = (function () { */ add: function (labelEntities, options) { var selectAll = false; - if (nf.Common.isDefinedAndNotNull(options)) { - selectAll = nf.Common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; + if (common.isDefinedAndNotNull(options)) { + selectAll = common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; } // get the current time @@ -401,7 +436,7 @@ nf.Label = (function () { $.each(labelEntities, function (_, labelEntity) { add(labelEntity); }); - } else if (nf.Common.isDefinedAndNotNull(labelEntities)) { + } else if (common.isDefinedAndNotNull(labelEntities)) { add(labelEntities); } @@ -420,16 +455,16 @@ nf.Label = (function () { set: function (labelEntities, options) { var selectAll = false; var transition = false; - if (nf.Common.isDefinedAndNotNull(options)) { - selectAll = nf.Common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; - transition = nf.Common.isDefinedAndNotNull(options.transition) ? options.transition : transition; + if (common.isDefinedAndNotNull(options)) { + selectAll = common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; + transition = common.isDefinedAndNotNull(options.transition) ? options.transition : transition; } var set = function (proposedLabelEntity) { var currentLabelEntity = labelMap.get(proposedLabelEntity.id); // set the processor if appropriate due to revision and wasn't previously removed - if (nf.Client.isNewerRevision(currentLabelEntity, proposedLabelEntity) && !removedCache.has(proposedLabelEntity.id)) { + if (client.isNewerRevision(currentLabelEntity, proposedLabelEntity) && !removedCache.has(proposedLabelEntity.id)) { labelMap.set(proposedLabelEntity.id, $.extend({ type: 'Label' }, proposedLabelEntity)); @@ -451,14 +486,14 @@ nf.Label = (function () { $.each(labelEntities, function (_, labelEntity) { set(labelEntity); }); - } else if (nf.Common.isDefinedAndNotNull(labelEntities)) { + } else if (common.isDefinedAndNotNull(labelEntities)) { set(labelEntities); } // apply the selection and handle all new labels var selection = select(); selection.enter().call(renderLabels, selectAll); - selection.call(updateLabels).call(nf.CanvasUtils.position, transition); + selection.call(updateLabels).call(canvasUtils.position, transition); selection.exit().call(removeLabels); }, @@ -469,7 +504,7 @@ nf.Label = (function () { * @param {string} id */ get: function (id) { - if (nf.Common.isUndefined(id)) { + if (common.isUndefined(id)) { return labelMap.values(); } else { return labelMap.get(id); @@ -483,7 +518,7 @@ nf.Label = (function () { * @param {string} id Optional */ refresh: function (id) { - if (nf.Common.isDefinedAndNotNull(id)) { + if (common.isDefinedAndNotNull(id)) { d3.select('#id-' + id).call(updateLabels); } else { d3.selectAll('g.label').call(updateLabels); @@ -504,7 +539,7 @@ nf.Label = (function () { url: labelEntity.uri, dataType: 'json' }).done(function (response) { - nf.Label.set(response); + nfLabel.set(response); }); } }, @@ -515,7 +550,7 @@ nf.Label = (function () { * @param {string} id The id */ position: function (id) { - d3.select('#id-' + id).call(nf.CanvasUtils.position); + d3.select('#id-' + id).call(canvasUtils.position); }, /** @@ -544,7 +579,7 @@ nf.Label = (function () { * Removes all label. */ removeAll: function () { - nf.Label.remove(labelMap.keys()); + nfLabel.remove(labelMap.keys()); }, /** @@ -572,4 +607,6 @@ nf.Label = (function () { return '#fff7d7'; } }; -}()); \ No newline at end of file + + return nfLabel; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-policy-management.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-policy-management.js index b19d033b91..acc499ac2f 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-policy-management.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-policy-management.js @@ -15,9 +15,46 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.PolicyManagement = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'Slick', + 'nf.ErrorHandler', + 'nf.Common', + 'nf.Client', + 'nf.CanvasUtils', + 'nf.ng.Bridge', + 'nf.Dialog', + 'nf.Shell'], + function ($, Slick, errorHandler, common, client, canvasUtils, angularBridge, dialog, shell) { + return (nf.PolicyManagement = factory($, Slick, errorHandler, common, client, canvasUtils, angularBridge, dialog, shell)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.PolicyManagement = + factory(require('jquery'), + require('Slick'), + require('nf.ErrorHandler'), + require('nf.Common'), + require('nf.Client'), + require('nf.CanvasUtils'), + require('nf.ng.Bridge'), + require('nf.Dialog'), + require('nf.Shell'))); + } else { + nf.PolicyManagement = factory(root.$, + root.Slick, + root.nf.ErrorHandler, + root.nf.Common, + root.nf.Client, + root.nf.CanvasUtils, + root.nf.ng.Bridge, + root.nf.Dialog, + root.nf.Shell); + } +}(this, function ($, Slick, errorHandler, common, client, canvasUtils, angularBridge, dialog, shell) { + 'use strict'; var config = { urls: { @@ -240,7 +277,7 @@ nf.PolicyManagement = (function () { // also consider groups already selected in the search users dialog container.children('li').each(function (_, allowedTenant) { var tenant = $(allowedTenant).data('tenant'); - if (nf.Common.isDefinedAndNotNull(tenant)) { + if (common.isDefinedAndNotNull(tenant)) { tenants.push(tenant); } }); @@ -344,16 +381,16 @@ nf.PolicyManagement = (function () { // policy type listing $('#policy-type-list').combo({ options: [ - nf.Common.getPolicyTypeListing('flow'), - nf.Common.getPolicyTypeListing('controller'), - nf.Common.getPolicyTypeListing('provenance'), - nf.Common.getPolicyTypeListing('restricted-components'), - nf.Common.getPolicyTypeListing('policies'), - nf.Common.getPolicyTypeListing('tenants'), - nf.Common.getPolicyTypeListing('site-to-site'), - nf.Common.getPolicyTypeListing('system'), - nf.Common.getPolicyTypeListing('proxy'), - nf.Common.getPolicyTypeListing('counters')], + common.getPolicyTypeListing('flow'), + common.getPolicyTypeListing('controller'), + common.getPolicyTypeListing('provenance'), + common.getPolicyTypeListing('restricted-components'), + common.getPolicyTypeListing('policies'), + common.getPolicyTypeListing('tenants'), + common.getPolicyTypeListing('site-to-site'), + common.getPolicyTypeListing('system'), + common.getPolicyTypeListing('proxy'), + common.getPolicyTypeListing('counters')], select: function (option) { if (initialized) { // record the policy type @@ -599,8 +636,8 @@ nf.PolicyManagement = (function () { // defines a function for sorting var comparer = function (a, b) { if(a.permissions.canRead && b.permissions.canRead) { - var aString = nf.Common.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : ''; - var bString = nf.Common.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : ''; + var aString = common.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : ''; + var bString = common.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : ''; return aString === bString ? 0 : aString > bString ? 1 : -1; } else { if (!a.permissions.canRead && !b.permissions.canRead){ @@ -624,9 +661,9 @@ nf.PolicyManagement = (function () { * @param item */ var promptToRemoveUserFromPolicy = function (item) { - nf.Dialog.showYesNoDialog({ + dialog.showYesNoDialog({ headerText: 'Update Policy', - dialogContent: 'Remove \'' + nf.Common.escapeHtml(item.component.identity) + '\' from this policy?', + dialogContent: 'Remove \'' + common.escapeHtml(item.component.identity) + '\' from this policy?', yesHandler: function () { removeUserFromPolicy(item); } @@ -659,7 +696,7 @@ nf.PolicyManagement = (function () { * Prompts for the deletion of the selected policy. */ var promptToDeletePolicy = function () { - nf.Dialog.showYesNoDialog({ + dialog.showYesNoDialog({ headerText: 'Delete Policy', dialogContent: 'By deleting this policy, the permissions for this component will revert to the inherited policy if applicable.', yesText: 'Delete', @@ -676,20 +713,20 @@ nf.PolicyManagement = (function () { var deletePolicy = function () { var currentEntity = $('#policy-table').data('policy'); - if (nf.Common.isDefinedAndNotNull(currentEntity)) { + if (common.isDefinedAndNotNull(currentEntity)) { $.ajax({ type: 'DELETE', - url: currentEntity.uri + '?' + $.param(nf.Client.getRevision(currentEntity)), + url: currentEntity.uri + '?' + $.param(client.getRevision(currentEntity)), dataType: 'json' }).done(function () { loadPolicy(); }).fail(function (xhr, status, error) { - nf.ErrorHandler.handleAjaxError(xhr, status, error); + errorHandler.handleAjaxError(xhr, status, error); resetPolicy(); loadPolicy(); }); } else { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Delete Policy', dialogContent: 'No policy selected' }); @@ -765,11 +802,11 @@ nf.PolicyManagement = (function () { return $('Showing effective policy inherited from the controller.'); } else { // extract the group id - var processGroupId = nf.Common.substringAfterLast(resource, '/'); + var processGroupId = common.substringAfterLast(resource, '/'); var processGroupName = processGroupId; // attempt to resolve the group name - var breadcrumbs = nf.ng.Bridge.injector.get('breadcrumbsCtrl').getBreadcrumbs(); + var breadcrumbs = angularBridge.injector.get('breadcrumbsCtrl').getBreadcrumbs(); $.each(breadcrumbs, function (_, breadcrumbEntity) { if (breadcrumbEntity.id === processGroupId) { processGroupName = breadcrumbEntity.label; @@ -787,11 +824,11 @@ nf.PolicyManagement = (function () { $('#shell-close-button').click(); // load the correct group and unselect everything if necessary - nf.CanvasUtils.enterGroup(processGroupId).done(function () { - nf.CanvasUtils.getSelection().classed('selected', false); + canvasUtils.getComponentByType('ProcessGroup').enterGroup(processGroupId).done(function () { + canvasUtils.getSelection().classed('selected', false); // inform Angular app that values have changed - nf.ng.Bridge.digest(); + angularBridge.digest(); }); }) ).append('.'); @@ -911,7 +948,7 @@ nf.PolicyManagement = (function () { resetPolicy(); deferred.reject(); - nf.ErrorHandler.handleAjaxError(xhr, status, error); + errorHandler.handleAjaxError(xhr, status, error); } }); }).promise(); @@ -969,7 +1006,7 @@ nf.PolicyManagement = (function () { resetPolicy(); deferred.reject(); - nf.ErrorHandler.handleAjaxError(xhr, status, error); + errorHandler.handleAjaxError(xhr, status, error); } }); }).promise(); @@ -1008,7 +1045,7 @@ nf.PolicyManagement = (function () { } var entity = { - 'revision': nf.Client.getRevision({ + 'revision': client.getRevision({ 'revision': { 'version': 0 } @@ -1037,7 +1074,7 @@ nf.PolicyManagement = (function () { resetPolicy(); loadPolicy(); } - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); }; /** @@ -1065,9 +1102,9 @@ nf.PolicyManagement = (function () { }); var currentEntity = $('#policy-table').data('policy'); - if (nf.Common.isDefinedAndNotNull(currentEntity)) { + if (common.isDefinedAndNotNull(currentEntity)) { var entity = { - 'revision': nf.Client.getRevision(currentEntity), + 'revision': client.getRevision(currentEntity), 'component': { 'id': currentEntity.id, 'users': users, @@ -1092,16 +1129,16 @@ nf.PolicyManagement = (function () { loadPolicy(); } }).fail(function (xhr, status, error) { - nf.ErrorHandler.handleAjaxError(xhr, status, error); + errorHandler.handleAjaxError(xhr, status, error); resetPolicy(); loadPolicy(); }).always(function () { - nf.Canvas.reload({ + canvasUtils.reload({ 'transition': true }); }); } else { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Update Policy', dialogContent: 'No policy selected' }); @@ -1113,12 +1150,12 @@ nf.PolicyManagement = (function () { */ var showPolicy = function () { // show the configuration dialog - nf.Shell.showContent('#policy-management').always(function () { + shell.showContent('#policy-management').always(function () { reset(); }); // adjust the table size - nf.PolicyManagement.resetTableSize(); + nfPolicyManagement.resetTableSize(); }; /** @@ -1164,7 +1201,7 @@ nf.PolicyManagement = (function () { $('div.policy-selected-component-container').hide(); }; - return { + var nfPolicyManagement = { /** * Initializes the settings page. */ @@ -1190,7 +1227,7 @@ nf.PolicyManagement = (function () { var policyTable = $('#policy-table'); if (policyTable.is(':visible')) { var policyGrid = policyTable.data('gridInstance'); - if (nf.Common.isDefinedAndNotNull(policyGrid)) { + if (common.isDefinedAndNotNull(policyGrid)) { policyGrid.resizeCanvas(); } } @@ -1344,7 +1381,7 @@ nf.PolicyManagement = (function () { var resource; if (selection.empty()) { - $('#selected-policy-component-id').text(nf.Canvas.getGroupId()); + $('#selected-policy-component-id').text(canvasUtils.getGroupId()); resource = 'process-groups'; // disable site to site option @@ -1365,19 +1402,19 @@ nf.PolicyManagement = (function () { var d = selection.datum(); $('#selected-policy-component-id').text(d.id); - if (nf.CanvasUtils.isProcessor(selection)) { + if (canvasUtils.isProcessor(selection)) { resource = 'processors'; - } else if (nf.CanvasUtils.isProcessGroup(selection)) { + } else if (canvasUtils.isProcessGroup(selection)) { resource = 'process-groups'; - } else if (nf.CanvasUtils.isInputPort(selection)) { + } else if (canvasUtils.isInputPort(selection)) { resource = 'input-ports'; - } else if (nf.CanvasUtils.isOutputPort(selection)) { + } else if (canvasUtils.isOutputPort(selection)) { resource = 'output-ports'; - } else if (nf.CanvasUtils.isRemoteProcessGroup(selection)) { + } else if (canvasUtils.isRemoteProcessGroup(selection)) { resource = 'remote-process-groups'; - } else if (nf.CanvasUtils.isLabel(selection)) { + } else if (canvasUtils.isLabel(selection)) { resource = 'labels'; - } else if (nf.CanvasUtils.isFunnel(selection)) { + } else if (canvasUtils.isFunnel(selection)) { resource = 'funnels'; } @@ -1385,16 +1422,16 @@ nf.PolicyManagement = (function () { $('#component-policy-target') .combo('setOptionEnabled', { value: 'write-receive-data' - }, nf.CanvasUtils.isInputPort(selection) && nf.Canvas.getParentGroupId() === null) + }, canvasUtils.isInputPort(selection) && canvasUtils.getParentGroupId() === null) .combo('setOptionEnabled', { value: 'write-send-data' - }, nf.CanvasUtils.isOutputPort(selection) && nf.Canvas.getParentGroupId() === null) + }, canvasUtils.isOutputPort(selection) && canvasUtils.getParentGroupId() === null) .combo('setOptionEnabled', { value: 'read-data' - }, !nf.CanvasUtils.isLabel(selection)) + }, !canvasUtils.isLabel(selection)) .combo('setOptionEnabled', { value: 'write-data' - }, !nf.CanvasUtils.isLabel(selection)); + }, !canvasUtils.isLabel(selection)); } // populate the initial resource @@ -1432,4 +1469,6 @@ nf.PolicyManagement = (function () { return loadPolicy().always(showPolicy); } }; -}()); \ No newline at end of file + + return nfPolicyManagement; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-configuration.js index a49290a5ca..25d99beeb9 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-configuration.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-configuration.js @@ -15,9 +15,46 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.PortConfiguration = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'd3', + 'nf.ErrorHandler', + 'nf.Common', + 'nf.Dialog', + 'nf.Client', + 'nf.CanvasUtils', + 'nf.ng.Bridge', + 'nf.Port'], + function ($, d3, errorHandler, common, dialog, client, canvasUtils, angularBridge, port) { + return (nf.PortConfiguration = factory($, d3, errorHandler, common, dialog, client, canvasUtils, angularBridge, port)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.PortConfiguration = + factory(require('jquery'), + require('d3'), + require('nf.ErrorHandler'), + require('nf.Common'), + require('nf.Dialog'), + require('nf.Client'), + require('nf.CanvasUtils'), + require('nf.ng.Bridge'), + require('nf.Port'))); + } else { + nf.PortConfiguration = factory(root.$, + root.d3, + root.nf.ErrorHandler, + root.nf.Common, + root.nf.Dialog, + root.nf.Client, + root.nf.CanvasUtils, + root.nf.ng.Bridge, + root.nf.Port); + } +}(this, function ($, d3, errorHandler, common, dialog, client, canvasUtils, angularBridge, port) { + 'use strict'; /** * Initializes the port dialog. @@ -60,7 +97,7 @@ nf.PortConfiguration = (function () { // build the port entity var portEntity = { - 'revision': nf.Client.getRevision(portData), + 'revision': client.getRevision(portData), 'component': port }; @@ -73,11 +110,11 @@ nf.PortConfiguration = (function () { contentType: 'application/json' }).done(function (response) { // refresh the port component - nf.Port.set(response); + port.set(response); // inform Angular app values have changed - nf.ng.Bridge.digest(); - + angularBridge.digest(); + // close the details panel $('#port-configuration').modal('hide'); }).fail(function (xhr, status, error) { @@ -91,10 +128,10 @@ nf.PortConfiguration = (function () { if (errors.length === 1) { content = $('').text(errors[0]); } else { - content = nf.Common.formatUnorderedList(errors); + content = common.formatUnorderedList(errors); } - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ dialogContent: content, headerText: 'Port Configuration' }); @@ -103,7 +140,7 @@ nf.PortConfiguration = (function () { $('#port-configuration').modal('hide'); // handle the error - nf.ErrorHandler.handleAjaxError(xhr, status, error); + errorHandler.handleAjaxError(xhr, status, error); } }); } @@ -147,7 +184,7 @@ nf.PortConfiguration = (function () { */ showConfiguration: function (selection) { // if the specified component is a port, load its properties - if (nf.CanvasUtils.isInputPort(selection) || nf.CanvasUtils.isOutputPort(selection)) { + if (canvasUtils.isInputPort(selection) || canvasUtils.isOutputPort(selection)) { var selectionData = selection.datum(); // determine if the enabled checkbox is checked or not @@ -157,7 +194,7 @@ nf.PortConfiguration = (function () { } // show concurrent tasks for root groups only - if (nf.Canvas.getParentGroupId() === null) { + if (canvasUtils.getParentGroupId() === null) { $('#port-concurrent-task-container').show(); } else { $('#port-concurrent-task-container').hide(); @@ -175,4 +212,4 @@ nf.PortConfiguration = (function () { } } }; -}()); \ No newline at end of file +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-details.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-details.js index 0f8496d9d7..ac60e7edaa 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-details.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-details.js @@ -15,9 +15,28 @@ * limitations under the License. */ -/* global nf */ +/* global define, module, require, exports */ -nf.PortDetails = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'nf.Common', + 'nf.CanvasUtils'], + function ($, common, canvasUtils) { + return (nf.PortDetails = factory($, common, canvasUtils)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.PortDetails = + factory(require('jquery'), + require('nf.Common'), + require('nf.CanvasUtils'))); + } else { + nf.PortDetails = factory(root.$, + root.nf.Common, + root.nf.CanvasUtils); + } +}(this, function ($, common, canvasUtils) { + 'use strict'; return { init: function () { @@ -42,9 +61,9 @@ nf.PortDetails = (function () { handler: { close: function () { // clear the processor details - nf.Common.clearField('read-only-port-name'); - nf.Common.clearField('read-only-port-id'); - nf.Common.clearField('read-only-port-comments'); + common.clearField('read-only-port-name'); + common.clearField('read-only-port-id'); + common.clearField('read-only-port-comments'); } } }); @@ -52,17 +71,17 @@ nf.PortDetails = (function () { showDetails: function (selection) { // if the specified component is a processor, load its properties - if (nf.CanvasUtils.isInputPort(selection) || nf.CanvasUtils.isOutputPort(selection)) { + if (canvasUtils.isInputPort(selection) || canvasUtils.isOutputPort(selection)) { var selectionData = selection.datum(); // populate the port settings - nf.Common.populateField('read-only-port-name', selectionData.component.name); - nf.Common.populateField('read-only-port-id', selectionData.id); - nf.Common.populateField('read-only-port-comments', selectionData.component.comments); + common.populateField('read-only-port-name', selectionData.component.name); + common.populateField('read-only-port-id', selectionData.id); + common.populateField('read-only-port-comments', selectionData.component.comments); // show the details $('#port-details').modal('show'); } } }; -}()); \ No newline at end of file +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js index 0523fc581d..129033b670 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js @@ -15,9 +15,39 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.Port = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'd3', + 'nf.Common', + 'nf.Client', + 'nf.CanvasUtils'], + function ($, d3, common, client, canvasUtils) { + return (nf.Port = factory($, d3, common, client, canvasUtils)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.Port = + factory(require('jquery'), + require('d3'), + require('nf.Common'), + require('nf.Client'), + require('nf.CanvasUtils'))); + } else { + nf.Port = factory(root.$, + root.d3, + root.nf.Common, + root.nf.Client, + root.nf.CanvasUtils); + } +}(this, function ($, d3, common, client, canvasUtils) { + 'use strict'; + + var nfConnectable; + var nfDraggable; + var nfSelectable; + var nfContextMenu; var PREVIEW_NAME_LENGTH = 15; var OFFSET_VALUE = 25; @@ -88,7 +118,7 @@ nf.Port = (function () { } }) .classed('selected', selected) - .call(nf.CanvasUtils.position); + .call(canvasUtils.position); // port border port.append('rect') @@ -121,7 +151,7 @@ nf.Port = (function () { var offset = 0; // conditionally render the remote banner - if (nf.Canvas.getParentGroupId() === null) { + if (canvasUtils.getParentGroupId() === null) { offset = OFFSET_VALUE; // port remote banner @@ -162,12 +192,12 @@ nf.Port = (function () { }); // make ports selectable - port.call(nf.Selectable.activate).call(nf.ContextMenu.activate); + port.call(nfSelectable.activate).call(nfContextMenu.activate); // only activate dragging and connecting if appropriate port.filter(function (d) { return d.permissions.canWrite && d.permissions.canRead; - }).call(nf.Draggable.activate).call(nf.Connectable.activate); + }).call(nfDraggable.activate).call(nfConnectable.activate); }; /** @@ -197,7 +227,7 @@ nf.Port = (function () { var details = port.select('g.port-details'); // update the component behavior as appropriate - nf.CanvasUtils.editable(port); + canvasUtils.editable(port, nfConnectable, nfDraggable); // if this process group is visible, render everything if (port.classed('visible')) { @@ -205,7 +235,7 @@ nf.Port = (function () { details = port.append('g').attr('class', 'port-details'); var offset = 0; - if (nf.Canvas.getParentGroupId() === null) { + if (canvasUtils.getParentGroupId() === null) { offset = OFFSET_VALUE; // port transmitting icon @@ -252,7 +282,7 @@ nf.Port = (function () { // ------------------- // active thread count // ------------------- - + // active thread count details.append('text') .attr({ @@ -283,9 +313,9 @@ nf.Port = (function () { // handle based on the number of tokens in the port name if (words.length === 1) { // apply ellipsis to the port name as necessary - nf.CanvasUtils.ellipsis(portName, name); + canvasUtils.ellipsis(portName, name); } else { - nf.CanvasUtils.multilineEllipsis(portName, 2, name); + canvasUtils.multilineEllipsis(portName, 2, name); } }).append('title').text(function (d) { return d.component.name; @@ -341,7 +371,7 @@ nf.Port = (function () { 'fill': function (d) { var fill = '#728e9b'; - if (d.status.aggregateSnapshot.runStatus === 'Invalid') { + if (d.status.aggregateSnapshot.runStatus === 'Invalid') { fill = '#cf9f5d'; } else if (d.status.aggregateSnapshot.runStatus === 'Running') { fill = '#7dc7a0'; @@ -377,7 +407,7 @@ nf.Port = (function () { var tip = d3.select('#run-status-tip-' + d.id); // if there are validation errors generate a tooltip - if (d.permissions.canRead && !nf.Common.isEmpty(d.component.validationErrors)) { + if (d.permissions.canRead && !common.isEmpty(d.component.validationErrors)) { // create the tip if necessary if (tip.empty()) { tip = d3.select('#port-tooltips').append('div') @@ -389,16 +419,16 @@ nf.Port = (function () { // update the tip tip.html(function () { - var list = nf.Common.formatUnorderedList(d.component.validationErrors); - if (list === null || list.length === 0) { - return ''; - } else { - return $('
    ').append(list).html(); - } - }); + var list = common.formatUnorderedList(d.component.validationErrors); + if (list === null || list.length === 0) { + return ''; + } else { + return $('
    ').append(list).html(); + } + }); // add the tooltip - nf.CanvasUtils.canvasTooltip(tip, d3.select(this)); + canvasUtils.canvasTooltip(tip, d3.select(this)); } else { // remove if necessary if (!tip.empty()) { @@ -447,7 +477,7 @@ nf.Port = (function () { // active thread count // ------------------- - nf.CanvasUtils.activeThreadCount(port, d, function (off) { + canvasUtils.activeThreadCount(port, d, function (off) { offset = off; }); @@ -456,10 +486,10 @@ nf.Port = (function () { // --------- port.select('rect.bulletin-background').classed('has-bulletins', function () { - return !nf.Common.isEmpty(d.status.aggregateSnapshot.bulletins); + return !common.isEmpty(d.status.aggregateSnapshot.bulletins); }); - - nf.CanvasUtils.bulletins(port, d, function () { + + canvasUtils.bulletins(port, d, function () { return d3.select('#port-tooltips'); }, offset); }); @@ -491,11 +521,16 @@ nf.Port = (function () { }); }; - return { + var nfPort = { /** * Initializes of the Port handler. */ - init: function () { + init: function (connectable, draggable, selectable, contextMenu) { + nfConnectable = connectable; + nfDraggable = draggable; + nfSelectable = selectable; + nfContextMenu = contextMenu; + portMap = d3.map(); removedCache = d3.map(); addedCache = d3.map(); @@ -516,13 +551,13 @@ nf.Port = (function () { */ add: function (portEntities, options) { var selectAll = false; - if (nf.Common.isDefinedAndNotNull(options)) { - selectAll = nf.Common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; + if (common.isDefinedAndNotNull(options)) { + selectAll = common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; } // determine the appropriate dimensions for this port var dimensions = portDimensions; - if (nf.Canvas.getParentGroupId() === null) { + if (canvasUtils.getParentGroupId() === null) { dimensions = remotePortDimensions; } @@ -547,7 +582,7 @@ nf.Port = (function () { $.each(portEntities, function (_, portNode) { add(portNode); }); - } else if (nf.Common.isDefinedAndNotNull(portEntities)) { + } else if (common.isDefinedAndNotNull(portEntities)) { add(portEntities); } @@ -556,7 +591,7 @@ nf.Port = (function () { selection.enter().call(renderPorts, selectAll); selection.call(updatePorts); }, - + /** * Populates the graph with the specified ports. * @@ -566,14 +601,14 @@ nf.Port = (function () { set: function (portEntities, options) { var selectAll = false; var transition = false; - if (nf.Common.isDefinedAndNotNull(options)) { - selectAll = nf.Common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; - transition = nf.Common.isDefinedAndNotNull(options.transition) ? options.transition : transition; + if (common.isDefinedAndNotNull(options)) { + selectAll = common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; + transition = common.isDefinedAndNotNull(options.transition) ? options.transition : transition; } // determine the appropriate dimensions for this port var dimensions = portDimensions; - if (nf.Canvas.getParentGroupId() === null) { + if (canvasUtils.getParentGroupId() === null) { dimensions = remotePortDimensions; } @@ -581,7 +616,7 @@ nf.Port = (function () { var currentPortEntity = portMap.get(proposedPortEntity.id); // set the port if appropriate due to revision and wasn't previously removed - if (nf.Client.isNewerRevision(currentPortEntity, proposedPortEntity) && !removedCache.has(proposedPortEntity.id)) { + if (client.isNewerRevision(currentPortEntity, proposedPortEntity) && !removedCache.has(proposedPortEntity.id)) { // add the port portMap.set(proposedPortEntity.id, $.extend({ type: 'Port', @@ -609,14 +644,14 @@ nf.Port = (function () { $.each(portEntities, function (_, portNode) { set(portNode); }); - } else if (nf.Common.isDefinedAndNotNull(portEntities)) { + } else if (common.isDefinedAndNotNull(portEntities)) { set(portEntities); } // apply the selection and handle all new ports var selection = select(); selection.enter().call(renderPorts, selectAll); - selection.call(updatePorts).call(nf.CanvasUtils.position, transition); + selection.call(updatePorts).call(canvasUtils.position, transition); selection.exit().call(removePorts); }, @@ -627,7 +662,7 @@ nf.Port = (function () { * @param {string} id */ get: function (id) { - if (nf.Common.isUndefined(id)) { + if (common.isUndefined(id)) { return portMap.values(); } else { return portMap.get(id); @@ -641,7 +676,7 @@ nf.Port = (function () { * @param {string} id Optional */ refresh: function (id) { - if (nf.Common.isDefinedAndNotNull(id)) { + if (common.isDefinedAndNotNull(id)) { d3.select('#id-' + id).call(updatePorts); } else { d3.selectAll('g.input-port, g.output-port').call(updatePorts); @@ -669,7 +704,7 @@ nf.Port = (function () { url: portEntity.uri, dataType: 'json' }).done(function (response) { - nf.Port.set(response); + nfPort.set(response); }); } }, @@ -680,7 +715,7 @@ nf.Port = (function () { * @param {string} id The id */ position: function (id) { - d3.select('#id-' + id).call(nf.CanvasUtils.position); + d3.select('#id-' + id).call(canvasUtils.position); }, /** @@ -709,7 +744,7 @@ nf.Port = (function () { * Removes all ports.. */ removeAll: function () { - nf.Port.remove(portMap.keys()); + nfPort.remove(portMap.keys()); }, /** @@ -730,4 +765,6 @@ nf.Port = (function () { expire(removedCache); } }; -}()); \ No newline at end of file + + return nfPort; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-configuration.js index 7311f074ae..8658a0275e 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-configuration.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-configuration.js @@ -15,9 +15,48 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ProcessGroupConfiguration = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'd3', + 'nf.ErrorHandler', + 'nf.Common', + 'nf.Dialog', + 'nf.Client', + 'nf.ProcessGroup', + 'nf.Shell', + 'nf.CanvasUtils'], + function ($, d3, errorHandler, common, dialog, client, processGroup, shell, canvasUtils) { + return (nf.ProcessGroupConfiguration = factory($, d3, errorHandler, common, dialog, client, processGroup, shell, canvasUtils)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ProcessGroupConfiguration = + factory(require('jquery'), + require('d3'), + require('nf.ErrorHandler'), + require('nf.Common'), + require('nf.Dialog'), + require('nf.Client'), + require('nf.ProcessGroup'), + require('nf.Shell'), + require('nf.CanvasUtils'))); + } else { + nf.ProcessGroupConfiguration = factory(root.$, + root.d3, + root.nf.ErrorHandler, + root.nf.Common, + root.nf.Dialog, + root.nf.Client, + root.nf.ProcessGroup, + root.nf.Shell, + root.nf.CanvasUtils); + } +}(this, function ($, d3, errorHandler, common, dialog, client, processGroup, shell, canvasUtils) { + 'use strict'; + + var nfControllerServices; var config = { urls: { @@ -49,7 +88,7 @@ nf.ProcessGroupConfiguration = (function () { var saveConfiguration = function (version, groupId) { // build the entity var entity = { - 'revision': nf.Client.getRevision({ + 'revision': client.getRevision({ 'revision': { 'version': version } @@ -70,12 +109,12 @@ nf.ProcessGroupConfiguration = (function () { contentType: 'application/json' }).done(function (response) { // refresh the process group if necessary - if (response.permissions.canRead && response.component.parentGroupId === nf.Canvas.getGroupId()) { - nf.ProcessGroup.set(response); + if (response.permissions.canRead && response.component.parentGroupId === canvasUtils.getGroupId()) { + processGroup.set(response); } // show the result dialog - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Process Group Configuration', dialogContent: 'Process group configuration successfully saved.' }); @@ -85,13 +124,13 @@ nf.ProcessGroupConfiguration = (function () { saveConfiguration(response.revision.version, groupId); }); - nf.Canvas.reload(); - }).fail(nf.ErrorHandler.handleAjaxError); + canvasUtils.reload(); + }).fail(errorHandler.handleAjaxError); }; /** * Loads the configuration for the specified process group. - * + * * @param {string} groupId */ var loadConfiguration = function (groupId) { @@ -149,15 +188,15 @@ nf.ProcessGroupConfiguration = (function () { deferred.resolve(); }).fail(function (xhr, status, error) { if (xhr.status === 403) { - if (groupId === nf.Canvas.getGroupId()) { + if (groupId === canvasUtils.getGroupId()) { $('#process-group-configuration').data('process-group', { 'permissions': { canRead: false, - canWrite: nf.Canvas.canWrite() + canWrite: canvasUtils.canWrite() } }); } else { - $('#process-group-configuration').data('process-group', nf.ProcessGroup.get(groupId)); + $('#process-group-configuration').data('process-group', processGroup.get(groupId)); } setUnauthorizedText(); @@ -171,15 +210,15 @@ nf.ProcessGroupConfiguration = (function () { // load the controller services var controllerServicesUri = config.urls.api + '/flow/process-groups/' + encodeURIComponent(groupId) + '/controller-services'; - var controllerServices = nf.ControllerServices.loadControllerServices(controllerServicesUri, getControllerServicesTable()); - + var controllerServices = nfControllerServices.loadControllerServices(controllerServicesUri, getControllerServicesTable()); + // wait for everything to complete return $.when(processGroup, controllerServices).done(function (processGroupResult, controllerServicesResult) { var controllerServicesResponse = controllerServicesResult[0]; // update the current time $('#process-group-configuration-last-refreshed').text(controllerServicesResponse.currentTime); - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); }; /** @@ -187,7 +226,7 @@ nf.ProcessGroupConfiguration = (function () { */ var showConfiguration = function () { // show the configuration dialog - nf.Shell.showContent('#process-group-configuration').done(function () { + shell.showContent('#process-group-configuration').done(function () { reset(); }); @@ -195,7 +234,7 @@ nf.ProcessGroupConfiguration = (function () { $('#process-group-configuration-tabs').find('.selected-tab').click(); // adjust the table size - nf.ProcessGroupConfiguration.resetTableSize(); + nfProcessGroupConfiguration.resetTableSize(); }; /** @@ -211,12 +250,17 @@ nf.ProcessGroupConfiguration = (function () { $('#process-group-name').val(''); $('#process-group-comments').val(''); }; - - return { + + var nfProcessGroupConfiguration = { + /** - * Initializes the settings page. + * Initialize the process group configuration. + * + * @param controllerServices The reference to the controllerServices controller. */ - init: function () { + init: function (controllerServices) { + nfControllerServices = controllerServices; + // initialize the process group configuration tabs $('#process-group-configuration-tabs').tabbs({ tabStyle: 'tab', @@ -231,7 +275,7 @@ nf.ProcessGroupConfiguration = (function () { }], select: function () { var processGroup = $('#process-group-configuration').data('process-group'); - var canWrite = nf.Common.isDefinedAndNotNull(processGroup) ? processGroup.permissions.canWrite : false; + var canWrite = common.isDefinedAndNotNull(processGroup) ? processGroup.permissions.canWrite : false; var tab = $(this).text(); if (tab === 'General') { @@ -254,21 +298,21 @@ nf.ProcessGroupConfiguration = (function () { } // resize the table - nf.ProcessGroupConfiguration.resetTableSize(); + nfProcessGroupConfiguration.resetTableSize(); } } }); // initialize each tab initGeneral(); - nf.ControllerServices.init(getControllerServicesTable()); + nfControllerServices.init(getControllerServicesTable()); }, /** * Update the size of the grid based on its container's current size. */ resetTableSize: function () { - nf.ControllerServices.resetTableSize(getControllerServicesTable()); + nfControllerServices.resetTableSize(getControllerServicesTable()); }, /** @@ -285,7 +329,7 @@ nf.ProcessGroupConfiguration = (function () { var selectedTab = $('#process-group-configuration-tabs li.selected-tab').text(); if (selectedTab === 'Controller Services') { var controllerServicesUri = config.urls.api + '/process-groups/' + encodeURIComponent(groupId) + '/controller-services'; - nf.ControllerServices.promptNewControllerService(controllerServicesUri, getControllerServicesTable()); + nfControllerServices.promptNewControllerService(controllerServicesUri, getControllerServicesTable()); } }); @@ -320,4 +364,6 @@ nf.ProcessGroupConfiguration = (function () { $('#process-group-configuration-tabs').find('li:eq(1)').click(); } }; -}()); \ No newline at end of file + + return nfProcessGroupConfiguration; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js index 9618c339ad..38175d55c7 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js @@ -15,9 +15,45 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global d3, define, module, require, exports */ -nf.ProcessGroup = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'd3', + 'nf.Connection', + 'nf.Common', + 'nf.Client', + 'nf.CanvasUtils', + 'nf.Dialog'], + function ($, d3, connection, common, client, canvasUtils, dialog) { + return (nf.ProcessGroup = factory($, d3, connection, common, client, canvasUtils, dialog)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ProcessGroup = + factory(require('jquery'), + require('d3'), + require('nf.Connection'), + require('nf.Common'), + require('nf.Client'), + require('nf.CanvasUtils'), + require('nf.Dialog'))); + } else { + nf.ProcessGroup = factory(root.$, + root.d3, + root.nf.Connection, + root.nf.Common, + root.nf.Client, + root.nf.CanvasUtils, + root.nf.Dialog); + } +}(this, function ($, d3, connection, common, client, canvasUtils, dialog) { + 'use strict'; + + var nfConnectable; + var nfDraggable; + var nfSelectable; + var nfContextMenu; var PREVIEW_NAME_LENGTH = 30; @@ -55,7 +91,7 @@ nf.ProcessGroup = (function () { * @param {object} d */ var getProcessGroupComments = function (d) { - if (nf.Common.isBlank(d.component.comments)) { + if (common.isBlank(d.component.comments)) { return 'No comments specified'; } else { return d.component.comments; @@ -90,7 +126,7 @@ nf.ProcessGroup = (function () { 'class': 'process-group component' }) .classed('selected', selected) - .call(nf.CanvasUtils.position); + .call(canvasUtils.position); // ---- // body @@ -146,15 +182,15 @@ nf.ProcessGroup = (function () { // always support selecting and navigation processGroup.on('dblclick', function (d) { - // enter this group on double click - nf.CanvasUtils.enterGroup(d.id); - }) - .call(nf.Selectable.activate).call(nf.ContextMenu.activate); + // enter this group on double click + nfProcessGroup.enterGroup(d.id); + }) + .call(nfSelectable.activate).call(nfContextMenu.activate); // only support dragging, connection, and drag and drop if appropriate processGroup.filter(function (d) { - return d.permissions.canWrite && d.permissions.canRead; - }) + return d.permissions.canWrite && d.permissions.canRead; + }) .on('mouseover.drop', function (d) { // Using mouseover/out to workaround chrome issue #122746 @@ -167,7 +203,7 @@ nf.ProcessGroup = (function () { var drag = d3.select('rect.drag-selection'); if (!drag.empty()) { // filter the current selection by this group - var selection = nf.CanvasUtils.getSelection().filter(function (d) { + var selection = canvasUtils.getSelection().filter(function (d) { return targetData.id === d.id; }); @@ -176,7 +212,7 @@ nf.ProcessGroup = (function () { // mark that we are hovering over a drop area if appropriate target.classed('drop', function () { // get the current selection and ensure its disconnected - return nf.CanvasUtils.isDisconnected(nf.CanvasUtils.getSelection()); + return connection.isDisconnected(canvasUtils.getSelection()); }); } } @@ -186,8 +222,8 @@ nf.ProcessGroup = (function () { // mark that we are no longer hovering over a drop area unconditionally d3.select(this).classed('drop', false); }) - .call(nf.Draggable.activate) - .call(nf.Connectable.activate); + .call(nfDraggable.activate) + .call(nfConnectable.activate); }; // attempt of space between component count and icon for process group contents @@ -221,7 +257,7 @@ nf.ProcessGroup = (function () { var details = processGroup.select('g.process-group-details'); // update the component behavior as appropriate - nf.CanvasUtils.editable(processGroup); + canvasUtils.editable(processGroup, nfConnectable, nfDraggable); // if this processor is visible, render everything if (processGroup.classed('visible')) { @@ -812,9 +848,9 @@ nf.ProcessGroup = (function () { processGroupComments.text(null).selectAll('tspan, title').remove(); // apply ellipsis to the port name as necessary - nf.CanvasUtils.ellipsis(processGroupComments, getProcessGroupComments(d)); + canvasUtils.ellipsis(processGroupComments, getProcessGroupComments(d)); }).classed('unset', function (d) { - return nf.Common.isBlank(d.component.comments); + return common.isBlank(d.component.comments); }).append('title').text(function (d) { return getProcessGroupComments(d); }); @@ -828,7 +864,7 @@ nf.ProcessGroup = (function () { processGroupName.text(null).selectAll('title').remove(); // apply ellipsis to the process group name as necessary - nf.CanvasUtils.ellipsis(processGroupName, d.component.name); + canvasUtils.ellipsis(processGroupName, d.component.name); }).append('title').text(function (d) { return d.component.name; }); @@ -883,25 +919,25 @@ nf.ProcessGroup = (function () { // queued count value updated.select('text.process-group-queued tspan.count') .text(function (d) { - return nf.Common.substringBeforeFirst(d.status.aggregateSnapshot.queued, ' '); + return common.substringBeforeFirst(d.status.aggregateSnapshot.queued, ' '); }); // queued size value updated.select('text.process-group-queued tspan.size') .text(function (d) { - return ' ' + nf.Common.substringAfterFirst(d.status.aggregateSnapshot.queued, ' '); + return ' ' + common.substringAfterFirst(d.status.aggregateSnapshot.queued, ' '); }); // in count value updated.select('text.process-group-in tspan.count') .text(function (d) { - return nf.Common.substringBeforeFirst(d.status.aggregateSnapshot.input, ' '); + return common.substringBeforeFirst(d.status.aggregateSnapshot.input, ' '); }); // in size value updated.select('text.process-group-in tspan.size') .text(function (d) { - return ' ' + nf.Common.substringAfterFirst(d.status.aggregateSnapshot.input, ' '); + return ' ' + common.substringAfterFirst(d.status.aggregateSnapshot.input, ' '); }); // in ports value @@ -925,13 +961,13 @@ nf.ProcessGroup = (function () { // out count value updated.select('text.process-group-out tspan.count') .text(function (d) { - return nf.Common.substringBeforeFirst(d.status.aggregateSnapshot.output, ' '); + return common.substringBeforeFirst(d.status.aggregateSnapshot.output, ' '); }); // out size value updated.select('text.process-group-out tspan.size') .text(function (d) { - return ' ' + nf.Common.substringAfterFirst(d.status.aggregateSnapshot.output, ' '); + return ' ' + common.substringAfterFirst(d.status.aggregateSnapshot.output, ' '); }); updated.each(function (d) { @@ -942,7 +978,7 @@ nf.ProcessGroup = (function () { // active thread count // ------------------- - nf.CanvasUtils.activeThreadCount(processGroup, d, function (off) { + canvasUtils.activeThreadCount(processGroup, d, function (off) { offset = off; }); @@ -951,10 +987,10 @@ nf.ProcessGroup = (function () { // --------- processGroup.select('rect.bulletin-background').classed('has-bulletins', function () { - return !nf.Common.isEmpty(d.status.aggregateSnapshot.bulletins); + return !common.isEmpty(d.status.aggregateSnapshot.bulletins); }); - nf.CanvasUtils.bulletins(processGroup, d, function () { + canvasUtils.bulletins(processGroup, d, function () { return d3.select('#process-group-tooltips'); }, offset); }); @@ -985,11 +1021,16 @@ nf.ProcessGroup = (function () { }); }; - return { + var nfProcessGroup = { /** * Initializes of the Process Group handler. */ - init: function () { + init: function (connectable, draggable, selectable, contextMenu) { + nfConnectable = connectable; + nfDraggable = draggable; + nfSelectable = selectable; + nfContextMenu = contextMenu; + processGroupMap = d3.map(); removedCache = d3.map(); addedCache = d3.map(); @@ -1010,8 +1051,8 @@ nf.ProcessGroup = (function () { */ add: function (processGroupEntities, options) { var selectAll = false; - if (nf.Common.isDefinedAndNotNull(options)) { - selectAll = nf.Common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; + if (common.isDefinedAndNotNull(options)) { + selectAll = common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; } // get the current time @@ -1032,7 +1073,7 @@ nf.ProcessGroup = (function () { $.each(processGroupEntities, function (_, processGroupEntity) { add(processGroupEntity); }); - } else if (nf.Common.isDefinedAndNotNull(processGroupEntities)) { + } else if (common.isDefinedAndNotNull(processGroupEntities)) { add(processGroupEntities); } @@ -1051,16 +1092,16 @@ nf.ProcessGroup = (function () { set: function (processGroupEntities, options) { var selectAll = false; var transition = false; - if (nf.Common.isDefinedAndNotNull(options)) { - selectAll = nf.Common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; - transition = nf.Common.isDefinedAndNotNull(options.transition) ? options.transition : transition; + if (common.isDefinedAndNotNull(options)) { + selectAll = common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; + transition = common.isDefinedAndNotNull(options.transition) ? options.transition : transition; } var set = function (proposedProcessGroupEntity) { var currentProcessGroupEntity = processGroupMap.get(proposedProcessGroupEntity.id); // set the process group if appropriate due to revision and wasn't previously removed - if (nf.Client.isNewerRevision(currentProcessGroupEntity, proposedProcessGroupEntity) && !removedCache.has(proposedProcessGroupEntity.id)) { + if (client.isNewerRevision(currentProcessGroupEntity, proposedProcessGroupEntity) && !removedCache.has(proposedProcessGroupEntity.id)) { processGroupMap.set(proposedProcessGroupEntity.id, $.extend({ type: 'ProcessGroup', dimensions: dimensions @@ -1084,14 +1125,14 @@ nf.ProcessGroup = (function () { $.each(processGroupEntities, function (_, processGroupEntity) { set(processGroupEntity); }); - } else if (nf.Common.isDefinedAndNotNull(processGroupEntities)) { + } else if (common.isDefinedAndNotNull(processGroupEntities)) { set(processGroupEntities); } // apply the selection and handle all new process group var selection = select(); selection.enter().call(renderProcessGroups, selectAll); - selection.call(updateProcessGroups).call(nf.CanvasUtils.position, transition); + selection.call(updateProcessGroups).call(canvasUtils.position, transition); selection.exit().call(removeProcessGroups); }, @@ -1102,7 +1143,7 @@ nf.ProcessGroup = (function () { * @param {string} id */ get: function (id) { - if (nf.Common.isUndefined(id)) { + if (common.isUndefined(id)) { return processGroupMap.values(); } else { return processGroupMap.get(id); @@ -1116,7 +1157,7 @@ nf.ProcessGroup = (function () { * @param {string} id Optional */ refresh: function (id) { - if (nf.Common.isDefinedAndNotNull(id)) { + if (common.isDefinedAndNotNull(id)) { d3.select('#id-' + id).call(updateProcessGroups); } else { d3.selectAll('g.process-group').call(updateProcessGroups); @@ -1144,7 +1185,7 @@ nf.ProcessGroup = (function () { url: processGroupEntity.uri, dataType: 'json' }).done(function (response) { - nf.ProcessGroup.set(response); + nfProcessGroup.set(response); }); } }, @@ -1155,7 +1196,7 @@ nf.ProcessGroup = (function () { * @param {string} id The id */ position: function (id) { - d3.select('#id-' + id).call(nf.CanvasUtils.position); + d3.select('#id-' + id).call(canvasUtils.position); }, /** @@ -1184,7 +1225,7 @@ nf.ProcessGroup = (function () { * Removes all process groups. */ removeAll: function () { - nf.ProcessGroup.remove(processGroupMap.keys()); + nfProcessGroup.remove(processGroupMap.keys()); }, /** @@ -1203,6 +1244,44 @@ nf.ProcessGroup = (function () { expire(addedCache); expire(removedCache); + }, + + /** + * Enters the specified group. + * + * @param {string} groupId + */ + enterGroup: function (groupId) {
 + + // hide the context menu + nfContextMenu.hide();

 + + // set the new group id + canvasUtils.setGroupId(groupId);

 + + // reload the graph + return canvasUtils.reload().done(function () {
 + + // attempt to restore the view + var viewRestored = canvasUtils.restoreUserView();

 + + // if the view was not restore attempt to fit + if (viewRestored === false) { + canvasUtils.fitCanvasView();

 + + // refresh the canvas + canvasUtils.refreshCanvasView({ + transition: true + }); + } + }).fail(function () { + dialog.showOkDialog({ + headerText: 'Process Group', + dialogContent: 'Unable to enter the selected group.' + }); + }); } }; -}()); \ No newline at end of file + + return nfProcessGroup; +})); \ No newline at end of file diff --git a/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-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor-configuration.js index aae4bc5eeb..157f803776 100644 --- a/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-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor-configuration.js @@ -15,9 +15,55 @@ * limitations under the License. */ -/* global nf */ +/* global define, module, require, exports */ -nf.ProcessorConfiguration = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'nf.ErrorHandler', + 'nf.Common', + 'nf.Dialog', + 'nf.Client', + 'nf.CanvasUtils', + 'nf.ng.Bridge', + 'nf.Processor', + 'nf.ClusterSummary', + 'nf.CustomUi', + 'nf.UniversalCapture', + 'nf.Connection'], + function ($, errorHandler, common, dialog, client, canvasUtils, angularBridge, nfProcessor, clusterSummary, customUi, universalCapture, nfConnection) { + return (nf.ProcessorConfiguration = factory($, errorHandler, common, dialog, client, canvasUtils, angularBridge, nfProcessor, clusterSummary, customUi, universalCapture, nfConnection)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ProcessorConfiguration = + factory(require('jquery'), + require('nf.ErrorHandler'), + require('nf.Common'), + require('nf.Dialog'), + require('nf.Client'), + require('nf.CanvasUtils'), + require('nf.ng.Bridge'), + require('nf.Processor'), + require('nf.ClusterSummary'), + require('nf.CustomUi'), + require('nf.UniversalCapture'), + require('nf.Connection'))); + } else { + nf.ProcessorConfiguration = factory(root.$, + root.nf.ErrorHandler, + root.nf.Common, + root.nf.Dialog, + root.nf.Client, + root.nf.CanvasUtils, + root.nf.ng.Bridge, + root.nf.Processor, + root.nf.ClusterSummary, + root.nf.CustomUi, + root.nf.UniversalCapture, + root.nf.Connection); + } +}(this, function ($, errorHandler, common, dialog, client, canvasUtils, angularBridge, nfProcessor, clusterSummary, customUi, universalCapture, nfConnection) { + 'use strict'; // possible values for a processor's run duration (in millis) var RUN_DURATION_VALUES = [0, 25, 50, 100, 250, 500, 1000, 2000]; @@ -87,7 +133,7 @@ nf.ProcessorConfiguration = (function () { text: 'Primary node', value: 'PRIMARY', description: 'Processor will be scheduled to run only on the primary node', - disabled: !nf.ClusterSummary.isClustered() && processor.config['executionNode'] === 'PRIMARY' + disabled: !clusterSummary.isClustered() && processor.config['executionNode'] === 'PRIMARY' }]; }; @@ -106,15 +152,15 @@ nf.ProcessorConfiguration = (function () { if (errors.length === 1) { content = $('').text(errors[0]); } else { - content = nf.Common.formatUnorderedList(errors); + content = common.formatUnorderedList(errors); } - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ dialogContent: content, headerText: 'Processor Configuration' }); } else { - nf.ErrorHandler.handleAjaxError(xhr, status, error); + errorHandler.handleAjaxError(xhr, status, error); } }; @@ -137,7 +183,7 @@ nf.ProcessorConfiguration = (function () { // build the relationship container element var relationshipContainerElement = $('
    ').append(relationshipCheckbox).append(relationshipLabel).append(relationshipValue).appendTo('#auto-terminate-relationship-names'); - if (!nf.Common.isBlank(relationship.description)) { + if (!common.isBlank(relationship.description)) { var relationshipDescription = $('
    ').text(relationship.description); relationshipContainerElement.append(relationshipDescription); } @@ -209,7 +255,7 @@ nf.ProcessorConfiguration = (function () { } // check the scheduling period - if (nf.Common.isDefinedAndNotNull(schedulingPeriod) && schedulingPeriod.val() !== (details.config['schedulingPeriod'] + '')) { + if (common.isDefinedAndNotNull(schedulingPeriod) && schedulingPeriod.val() !== (details.config['schedulingPeriod'] + '')) { return true; } @@ -275,7 +321,7 @@ nf.ProcessorConfiguration = (function () { } // get the scheduling period if appropriate - if (nf.Common.isDefinedAndNotNull(schedulingPeriod)) { + if (common.isDefinedAndNotNull(schedulingPeriod)) { processorConfigDto['schedulingPeriod'] = schedulingPeriod.val(); } @@ -359,22 +405,22 @@ nf.ProcessorConfiguration = (function () { var config = processor['config']; // ensure numeric fields are specified correctly - if (nf.Common.isDefinedAndNotNull(config['concurrentlySchedulableTaskCount']) && !$.isNumeric(config['concurrentlySchedulableTaskCount'])) { + if (common.isDefinedAndNotNull(config['concurrentlySchedulableTaskCount']) && !$.isNumeric(config['concurrentlySchedulableTaskCount'])) { errors.push('Concurrent tasks must be an integer value'); } - if (nf.Common.isDefinedAndNotNull(config['schedulingPeriod']) && nf.Common.isBlank(config['schedulingPeriod'])) { + if (common.isDefinedAndNotNull(config['schedulingPeriod']) && common.isBlank(config['schedulingPeriod'])) { errors.push('Run schedule must be specified'); } - if (nf.Common.isBlank(config['penaltyDuration'])) { + if (common.isBlank(config['penaltyDuration'])) { errors.push('Penalty duration must be specified'); } - if (nf.Common.isBlank(config['yieldDuration'])) { + if (common.isBlank(config['yieldDuration'])) { errors.push('Yield duration must be specified'); } if (errors.length > 0) { - nf.Dialog.showOkDialog({ - dialogContent: nf.Common.formatUnorderedList(errors), + dialog.showOkDialog({ + dialogContent: common.formatUnorderedList(errors), headerText: 'Processor Configuration' }); return false; @@ -389,11 +435,11 @@ nf.ProcessorConfiguration = (function () { * @param {object} processor */ var reloadProcessorConnections = function (processor) { - var connections = nf.Connection.getComponentConnections(processor.id); + var connections = nfConnection.getComponentConnections(processor.id); $.each(connections, function (_, connection) { if (connection.permissions.canRead) { if (connection.sourceId === processor.id) { - nf.Connection.reload(connection.id); + nfConnection.reload(connection.id); } } }); @@ -410,7 +456,7 @@ nf.ProcessorConfiguration = (function () { // determine if changes have been made if (isSaveRequired()) { // see if those changes should be saved - nf.Dialog.showYesNoDialog({ + dialog.showYesNoDialog({ headerText: 'Processor Configuration', dialogContent: 'Save changes before going to this Controller Service?', noHandler: function () { @@ -443,8 +489,8 @@ nf.ProcessorConfiguration = (function () { // ensure details are valid as far as we can tell if (validateDetails(updatedProcessor)) { // set the revision - var d = nf.Processor.get(processor.id); - updatedProcessor['revision'] = nf.Client.getRevision(d); + var d = nfProcessor.get(processor.id); + updatedProcessor['revision'] = client.getRevision(d); // update the selected component return $.ajax({ @@ -455,7 +501,7 @@ nf.ProcessorConfiguration = (function () { contentType: 'application/json' }).done(function (response) { // set the new processor state based on the response - nf.Processor.set(response); + nfProcessor.set(response); }).fail(handleProcessorConfigurationError); } else { return $.Deferred(function (deferred) { @@ -489,7 +535,7 @@ nf.ProcessorConfiguration = (function () { }], select: function () { // remove all property detail dialogs - nf.UniversalCapture.removeAllPropertyDetailDialogs(); + universalCapture.removeAllPropertyDetailDialogs(); // update the processor property table size in case this is the first time its rendered if ($(this).text() === 'Properties') { @@ -523,7 +569,7 @@ nf.ProcessorConfiguration = (function () { $('#processor-configuration').removeData('processorDetails'); }, open: function () { - nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0)); + common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0)); } } }); @@ -566,7 +612,7 @@ nf.ProcessorConfiguration = (function () { dialogContainer: '#new-processor-property-container', descriptorDeferred: function (propertyName) { var processor = $('#processor-configuration').data('processorDetails'); - var d = nf.Processor.get(processor.id); + var d = nfProcessor.get(processor.id); return $.ajax({ type: 'GET', url: d.uri + '/descriptors', @@ -574,7 +620,7 @@ nf.ProcessorConfiguration = (function () { propertyName: propertyName }, dataType: 'json' - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); }, goToServiceDeferred: goToServiceFromProperty }); @@ -586,7 +632,7 @@ nf.ProcessorConfiguration = (function () { * @argument {selection} selection The selection */ showConfiguration: function (selection) { - if (nf.CanvasUtils.isProcessor(selection)) { + if (canvasUtils.isProcessor(selection)) { var selectionData = selection.datum(); // get the processor details @@ -595,7 +641,7 @@ nf.ProcessorConfiguration = (function () { var requests = []; // reload the processor in case an property descriptors have updated - requests.push(nf.Processor.reload(processor.id)); + requests.push(nfProcessor.reload(processor.id)); // get the processor history requests.push($.ajax({ @@ -609,7 +655,7 @@ nf.ProcessorConfiguration = (function () { // get the updated processor' var processorResponse = processorResult[0]; processor = processorResponse.component; - + // get the processor history var processorHistory = historyResult[0].componentHistory; @@ -624,7 +670,7 @@ nf.ProcessorConfiguration = (function () { // populate the processor settings $('#processor-id').text(processor['id']); - $('#processor-type').text(nf.Common.substringAfterLast(processor['type'], '.')); + $('#processor-type').text(common.substringAfterLast(processor['type'], '.')); $('#processor-name').val(processor['name']); $('#processor-enabled').removeClass('checkbox-unchecked checkbox-checked').addClass(processorEnableStyle); $('#penalty-duration').val(processor.config['penaltyDuration']); @@ -690,7 +736,7 @@ nf.ProcessorConfiguration = (function () { }); // show the execution node option if we're cluster or we're currently configured to run on the primary node only - if (nf.ClusterSummary.isClustered() || executionNode === 'PRIMARY') { + if (clusterSummary.isClustered() || executionNode === 'PRIMARY') { $('#execution-node-options').show(); } else { $('#execution-node-options').hide(); @@ -713,7 +759,7 @@ nf.ProcessorConfiguration = (function () { } // conditionally allow the user to specify the concurrent tasks - if (nf.Common.isDefinedAndNotNull(concurrentTasks)) { + if (common.isDefinedAndNotNull(concurrentTasks)) { if (processor.supportsParallelProcessing === true) { concurrentTasks.prop('disabled', false); } else { @@ -734,7 +780,7 @@ nf.ProcessorConfiguration = (function () { } // load the relationship list - if (!nf.Common.isEmpty(processor.relationships)) { + if (!common.isEmpty(processor.relationships)) { $.each(processor.relationships, function (i, relationship) { createRelationshipOption(relationship); }); @@ -763,7 +809,7 @@ nf.ProcessorConfiguration = (function () { $('#processor-configuration').modal('hide'); // inform Angular app values have changed - nf.ng.Bridge.digest(); + angularBridge.digest(); }); } } @@ -783,7 +829,7 @@ nf.ProcessorConfiguration = (function () { }]; // determine if we should show the advanced button - if (nf.Common.isDefinedAndNotNull(processor.config.customUiUrl) && processor.config.customUiUrl !== '') { + if (common.isDefinedAndNotNull(processor.config.customUiUrl) && processor.config.customUiUrl !== '') { buttons.push({ buttonText: 'Advanced', clazz: 'fa fa-cog button-icon', @@ -799,9 +845,9 @@ nf.ProcessorConfiguration = (function () { $('#processor-configuration').modal('hide'); // show the custom ui - nf.CustomUi.showCustomUi(processorResponse, processor.config.customUiUrl, true).done(function () { + customUi.showCustomUi(processorResponse, processor.config.customUiUrl, true).done(function () { // once the custom ui is closed, reload the processor - nf.Processor.reload(processor.id); + nfProcessor.reload(processor.id); // and reload the processor's outgoing connections reloadProcessorConnections(processor); @@ -814,7 +860,7 @@ nf.ProcessorConfiguration = (function () { // determine if changes have been made if (isSaveRequired()) { // see if those changes should be saved - nf.Dialog.showYesNoDialog({ + dialog.showYesNoDialog({ headerText: 'Save', dialogContent: 'Save changes before opening the advanced configuration?', noHandler: openCustomUi, @@ -853,8 +899,8 @@ nf.ProcessorConfiguration = (function () { if (processorRelationships.is(':visible') && processorRelationships.get(0).scrollHeight > Math.round(processorRelationships.innerHeight())) { processorRelationships.css('border-width', '1px'); } - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); } } }; -}()); +})); diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js index 1a02dae84f..63fb2aff53 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js @@ -15,9 +15,39 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.Processor = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'd3', + 'nf.Common', + 'nf.Client', + 'nf.CanvasUtils'], + function ($, d3, common, client, canvasUtils) { + return (nf.Processor = factory($, d3, common, client, canvasUtils)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.Processor = + factory(require('jquery'), + require('d3'), + require('nf.Common'), + require('nf.Client'), + require('nf.CanvasUtils'))); + } else { + nf.Processor = factory(root.$, + root.d3, + root.nf.Common, + root.nf.Client, + root.nf.CanvasUtils); + } +}(this, function ($, d3, common, client, canvasUtils) { + 'use strict'; + + var nfConnectable; + var nfDraggable; + var nfSelectable; + var nfContextMenu; var PREVIEW_NAME_LENGTH = 25; @@ -73,7 +103,7 @@ nf.Processor = (function () { 'class': 'processor component' }) .classed('selected', selected) - .call(nf.CanvasUtils.position); + .call(canvasUtils.position); // processor border processor.append('rect') @@ -151,7 +181,7 @@ nf.Processor = (function () { .text('\uf132'); // make processors selectable - processor.call(nf.Selectable.activate).call(nf.ContextMenu.activate); + processor.call(nfSelectable.activate).call(nfContextMenu.activate); }; /** @@ -181,7 +211,7 @@ nf.Processor = (function () { var details = processor.select('g.processor-canvas-details'); // update the component behavior as appropriate - nf.CanvasUtils.editable(processor); + canvasUtils.editable(processor, nfConnectable, nfDraggable); // if this processor is visible, render everything if (processor.classed('visible')) { @@ -508,7 +538,7 @@ nf.Processor = (function () { processorName.text(null).selectAll('title').remove(); // apply ellipsis to the processor name as necessary - nf.CanvasUtils.ellipsis(processorName, d.component.name); + canvasUtils.ellipsis(processorName, d.component.name); }).append('title').text(function (d) { return d.component.name; }); @@ -522,9 +552,9 @@ nf.Processor = (function () { processorType.text(null).selectAll('title').remove(); // apply ellipsis to the processor type as necessary - nf.CanvasUtils.ellipsis(processorType, nf.Common.substringAfterLast(d.component.type, '.')); + canvasUtils.ellipsis(processorType, common.substringAfterLast(d.component.type, '.')); }).append('title').text(function (d) { - return nf.Common.substringAfterLast(d.component.type, '.'); + return common.substringAfterLast(d.component.type, '.'); }); } else { // clear the processor name @@ -576,8 +606,8 @@ nf.Processor = (function () { processor.select('rect.border').classed('unauthorized', !processorData.permissions.canRead); // use the specified color if appropriate - if (processorData.permissions.canRead){ - if (nf.Common.isDefinedAndNotNull(processorData.component.style['background-color'])) { + if (processorData.permissions.canRead) { + if (common.isDefinedAndNotNull(processorData.component.style['background-color'])) { var color = processorData.component.style['background-color']; //update the processor icon container @@ -599,22 +629,22 @@ nf.Processor = (function () { .style('fill', function (d) { // get the default color - var color = nf.Processor.defaultIconColor(); + var color = nfProcessor.defaultIconColor(); if (!d.permissions.canRead) { return color; } // use the specified color if appropriate - if (nf.Common.isDefinedAndNotNull(d.component.style['background-color'])) { + if (common.isDefinedAndNotNull(d.component.style['background-color'])) { color = d.component.style['background-color']; //special case #ffffff implies default fill if (color.toLowerCase() === '#ffffff') { - color = nf.Processor.defaultIconColor(); + color = nfProcessor.defaultIconColor(); } else { - color = nf.Common.determineContrastColor( - nf.Common.substringAfterLast( + color = common.determineContrastColor( + common.substringAfterLast( color, '#')); } } @@ -657,7 +687,7 @@ nf.Processor = (function () { 'fill': function (d) { var fill = '#728e9b'; - if (d.status.aggregateSnapshot.runStatus === 'Invalid') { + if (d.status.aggregateSnapshot.runStatus === 'Invalid') { fill = '#cf9f5d'; } else if (d.status.aggregateSnapshot.runStatus === 'Running') { fill = '#7dc7a0'; @@ -693,7 +723,7 @@ nf.Processor = (function () { var tip = d3.select('#run-status-tip-' + d.id); // if there are validation errors generate a tooltip - if (d.permissions.canRead && !nf.Common.isEmpty(d.component.validationErrors)) { + if (d.permissions.canRead && !common.isEmpty(d.component.validationErrors)) { // create the tip if necessary if (tip.empty()) { tip = d3.select('#processor-tooltips').append('div') @@ -705,16 +735,16 @@ nf.Processor = (function () { // update the tip tip.html(function () { - var list = nf.Common.formatUnorderedList(d.component.validationErrors); - if (list === null || list.length === 0) { - return ''; - } else { - return $('
    ').append(list).html(); - } - }); + var list = common.formatUnorderedList(d.component.validationErrors); + if (list === null || list.length === 0) { + return ''; + } else { + return $('
    ').append(list).html(); + } + }); // add the tooltip - nf.CanvasUtils.canvasTooltip(tip, d3.select(this)); + canvasUtils.canvasTooltip(tip, d3.select(this)); } else { // remove the tip if necessary if (!tip.empty()) { @@ -726,13 +756,13 @@ nf.Processor = (function () { // in count value updated.select('text.processor-in tspan.count') .text(function (d) { - return nf.Common.substringBeforeFirst(d.status.aggregateSnapshot.input, ' '); + return common.substringBeforeFirst(d.status.aggregateSnapshot.input, ' '); }); // in size value updated.select('text.processor-in tspan.size') .text(function (d) { - return ' ' + nf.Common.substringAfterFirst(d.status.aggregateSnapshot.input, ' '); + return ' ' + common.substringAfterFirst(d.status.aggregateSnapshot.input, ' '); }); // read/write value @@ -744,13 +774,13 @@ nf.Processor = (function () { // out count value updated.select('text.processor-out tspan.count') .text(function (d) { - return nf.Common.substringBeforeFirst(d.status.aggregateSnapshot.output, ' '); + return common.substringBeforeFirst(d.status.aggregateSnapshot.output, ' '); }); // out size value updated.select('text.processor-out tspan.size') .text(function (d) { - return ' ' + nf.Common.substringAfterFirst(d.status.aggregateSnapshot.output, ' '); + return ' ' + common.substringAfterFirst(d.status.aggregateSnapshot.output, ' '); }); // tasks/time value @@ -766,17 +796,17 @@ nf.Processor = (function () { // active thread count // ------------------- - nf.CanvasUtils.activeThreadCount(processor, d); + canvasUtils.activeThreadCount(processor, d); // --------- // bulletins // --------- processor.select('rect.bulletin-background').classed('has-bulletins', function () { - return !nf.Common.isEmpty(d.status.aggregateSnapshot.bulletins); + return !common.isEmpty(d.status.aggregateSnapshot.bulletins); }); - nf.CanvasUtils.bulletins(processor, d, function () { + canvasUtils.bulletins(processor, d, function () { return d3.select('#processor-tooltips'); }, 286); }); @@ -808,11 +838,16 @@ nf.Processor = (function () { }); }; - return { + var nfProcessor = { /** * Initializes of the Processor handler. */ - init: function () { + init: function (connectable, draggable, selectable, contextMenu) { + nfConnectable = connectable; + nfDraggable = draggable; + nfSelectable = selectable; + nfContextMenu = contextMenu; + processorMap = d3.map(); removedCache = d3.map(); addedCache = d3.map(); @@ -833,8 +868,8 @@ nf.Processor = (function () { */ add: function (processorEntities, options) { var selectAll = false; - if (nf.Common.isDefinedAndNotNull(options)) { - selectAll = nf.Common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; + if (common.isDefinedAndNotNull(options)) { + selectAll = common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; } // get the current time @@ -855,7 +890,7 @@ nf.Processor = (function () { $.each(processorEntities, function (_, processorEntity) { add(processorEntity); }); - } else if (nf.Common.isDefinedAndNotNull(processorEntities)) { + } else if (common.isDefinedAndNotNull(processorEntities)) { add(processorEntities); } @@ -874,16 +909,16 @@ nf.Processor = (function () { set: function (processorEntities, options) { var selectAll = false; var transition = false; - if (nf.Common.isDefinedAndNotNull(options)) { - selectAll = nf.Common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; - transition = nf.Common.isDefinedAndNotNull(options.transition) ? options.transition : transition; + if (common.isDefinedAndNotNull(options)) { + selectAll = common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; + transition = common.isDefinedAndNotNull(options.transition) ? options.transition : transition; } var set = function (proposedProcessorEntity) { var currentProcessorEntity = processorMap.get(proposedProcessorEntity.id); // set the processor if appropriate due to revision and wasn't previously removed - if (nf.Client.isNewerRevision(currentProcessorEntity, proposedProcessorEntity) && !removedCache.has(proposedProcessorEntity.id)) { + if (client.isNewerRevision(currentProcessorEntity, proposedProcessorEntity) && !removedCache.has(proposedProcessorEntity.id)) { processorMap.set(proposedProcessorEntity.id, $.extend({ type: 'Processor', dimensions: dimensions @@ -907,14 +942,14 @@ nf.Processor = (function () { $.each(processorEntities, function (_, processorEntity) { set(processorEntity); }); - } else if (nf.Common.isDefinedAndNotNull(processorEntities)) { + } else if (common.isDefinedAndNotNull(processorEntities)) { set(processorEntities); } // apply the selection and handle all new processors var selection = select(); selection.enter().call(renderProcessors, selectAll); - selection.call(updateProcessors).call(nf.CanvasUtils.position, transition); + selection.call(updateProcessors).call(canvasUtils.position, transition); selection.exit().call(removeProcessors); }, @@ -925,7 +960,7 @@ nf.Processor = (function () { * @param {string} id */ get: function (id) { - if (nf.Common.isUndefined(id)) { + if (common.isUndefined(id)) { return processorMap.values(); } else { return processorMap.get(id); @@ -939,7 +974,7 @@ nf.Processor = (function () { * @param {string} id Optional */ refresh: function (id) { - if (nf.Common.isDefinedAndNotNull(id)) { + if (common.isDefinedAndNotNull(id)) { d3.select('#id-' + id).call(updateProcessors); } else { d3.selectAll('g.processor').call(updateProcessors); @@ -952,7 +987,7 @@ nf.Processor = (function () { * @param {string} id The id */ position: function (id) { - d3.select('#id-' + id).call(nf.CanvasUtils.position); + d3.select('#id-' + id).call(canvasUtils.position); }, /** @@ -976,7 +1011,7 @@ nf.Processor = (function () { url: processorEntity.uri, dataType: 'json' }).done(function (response) { - nf.Processor.set(response); + nfProcessor.set(response); }); } }, @@ -1007,7 +1042,7 @@ nf.Processor = (function () { * Removes all processors. */ removeAll: function () { - nf.Processor.remove(processorMap.keys()); + nfProcessor.remove(processorMap.keys()); }, /** @@ -1042,4 +1077,6 @@ nf.Processor = (function () { return '#ad9897'; } }; -}()); \ No newline at end of file + + return nfProcessor; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-queue-listing.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-queue-listing.js index 0dac31ae86..acf2ca50e1 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-queue-listing.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-queue-listing.js @@ -15,12 +15,52 @@ * limitations under the License. */ -/* global nf */ +/* global define, module, require, exports */ /** * Lists FlowFiles from a given connection. */ -nf.QueueListing = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'Slick', + 'nf.Common', + 'nf.Dialog', + 'nf.Shell', + 'nf.ng.Bridge', + 'nf.ClusterSummary', + 'nf.ErrorHandler', + 'nf.Storage', + 'nf.CanvasUtils'], + function ($, Slick, common, dialog, shell, angularBridge, clusterSummary, errorHandler, storage, canvasUtils) { + return (nf.QueueListing = factory($, Slick, common, dialog, shell, angularBridge, clusterSummary, errorHandler, storage, canvasUtils)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.QueueListing = + factory(require('jquery'), + require('Slick'), + require('nf.Common'), + require('nf.Dialog'), + require('nf.Shell'), + require('nf.ng.Bridge'), + require('nf.ClusterSummary'), + require('nf.ErrorHandler'), + require('nf.Storage'), + require('nf.CanvasUtils'))); + } else { + nf.QueueListing = factory(root.$, + root.Slick, + root.nf.Common, + root.nf.Dialog, + root.nf.Shell, + root.nf.ng.Bridge, + root.nf.ClusterSummary, + root.nf.ErrorHandler, + root.nf.Storage, + root.nf.CanvasUtils); + } +}(this, function ($, Slick, common, dialog, shell, angularBridge, clusterSummary, errorHandler, storage, canvasUtils) { + 'use strict'; /** * Configuration object used to hold a number of configuration items. @@ -56,17 +96,17 @@ nf.QueueListing = (function () { var dataUri = $('#flowfile-uri').text() + '/content'; // perform the request once we've received a token - nf.Common.getAccessToken(config.urls.downloadToken).done(function (downloadToken) { + common.getAccessToken(config.urls.downloadToken).done(function (downloadToken) { var parameters = {}; // conditionally include the ui extension token - if (!nf.Common.isBlank(downloadToken)) { + if (!common.isBlank(downloadToken)) { parameters['access_token'] = downloadToken; } // conditionally include the cluster node id var clusterNodeId = $('#flowfile-cluster-node-id').text(); - if (!nf.Common.isBlank(clusterNodeId)) { + if (!common.isBlank(clusterNodeId)) { parameters['clusterNodeId'] = clusterNodeId; } @@ -77,7 +117,7 @@ nf.QueueListing = (function () { window.open(dataUri + '?' + $.param(parameters)); } }).fail(function () { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Queue Listing', dialogContent: 'Unable to generate access token for downloading content.' }); @@ -92,7 +132,7 @@ nf.QueueListing = (function () { // generate tokens as necessary var getAccessTokens = $.Deferred(function (deferred) { - if (nf.Storage.hasItem('jwt')) { + if (storage.hasItem('jwt')) { // generate a token for the ui extension and another for the callback var uiExtensionToken = $.ajax({ type: 'POST', @@ -109,7 +149,7 @@ nf.QueueListing = (function () { var downloadToken = downloadTokenResult[0]; deferred.resolve(uiExtensionToken, downloadToken); }).fail(function () { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Queue Listing', dialogContent: 'Unable to generate access token for viewing content.' }); @@ -126,12 +166,12 @@ nf.QueueListing = (function () { // conditionally include the cluster node id var clusterNodeId = $('#flowfile-cluster-node-id').text(); - if (!nf.Common.isBlank(clusterNodeId)) { + if (!common.isBlank(clusterNodeId)) { dataUriParameters['clusterNodeId'] = clusterNodeId; } // include the download token if applicable - if (!nf.Common.isBlank(downloadToken)) { + if (!common.isBlank(downloadToken)) { dataUriParameters['access_token'] = downloadToken; } @@ -157,7 +197,7 @@ nf.QueueListing = (function () { }; // include the download token if applicable - if (!nf.Common.isBlank(uiExtensionToken)) { + if (!common.isBlank(uiExtensionToken)) { contentViewerParameters['access_token'] = uiExtensionToken; } @@ -187,7 +227,7 @@ nf.QueueListing = (function () { // update the progress var label = $('
    ').text(percentComplete + '%'); - (nf.ng.Bridge.injector.get('$compile')($(''))(nf.ng.Bridge.rootScope)).appendTo(progressBar); + (angularBridge.injector.get('$compile')($(''))(angularBridge.rootScope)).appendTo(progressBar); progressBar.append(label); }; @@ -223,7 +263,7 @@ nf.QueueListing = (function () { var reject = cancelled; // ensure the listing requests are present - if (nf.Common.isDefinedAndNotNull(listingRequest)) { + if (common.isDefinedAndNotNull(listingRequest)) { $.ajax({ type: 'DELETE', url: listingRequest.uri, @@ -231,20 +271,20 @@ nf.QueueListing = (function () { }); // use the listing request from when the listing completed - if (nf.Common.isEmpty(listingRequest.flowFileSummaries)) { + if (common.isEmpty(listingRequest.flowFileSummaries)) { if (cancelled === false) { reject = true; // show the dialog - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Queue Listing', dialogContent: 'The queue has no FlowFiles.' }); } } else { // update the queue size - $('#total-flowfiles-count').text(nf.Common.formatInteger(listingRequest.queueSize.objectCount)); - $('#total-flowfiles-size').text(nf.Common.formatDataSize(listingRequest.queueSize.byteCount)); + $('#total-flowfiles-count').text(common.formatInteger(listingRequest.queueSize.objectCount)); + $('#total-flowfiles-size').text(common.formatDataSize(listingRequest.queueSize.byteCount)); // update the last updated time $('#queue-listing-last-refreshed').text(listingRequest.lastUpdated); @@ -316,7 +356,7 @@ nf.QueueListing = (function () { }).done(function (response) { listingRequest = response.listingRequest; processListingRequest(nextDelay); - }).fail(completeListingRequest).fail(nf.ErrorHandler.handleAjaxError); + }).fail(completeListingRequest).fail(errorHandler.handleAjaxError); }; // issue the request to list the flow files @@ -335,7 +375,7 @@ nf.QueueListing = (function () { // process the drop request listingRequest = response.listingRequest; processListingRequest(1); - }).fail(completeListingRequest).fail(nf.ErrorHandler.handleAjaxError); + }).fail(completeListingRequest).fail(errorHandler.handleAjaxError); }).promise(); }; @@ -349,13 +389,13 @@ nf.QueueListing = (function () { var formatFlowFileDetail = function (label, value) { $('
    ').append( $('
    ').text(label)).append( - $('
    ' + nf.Common.formatValue(value) + '
    ').ellipsis()).append( + $('
    ' + common.formatValue(value) + '
    ').ellipsis()).append( $('
    ')).appendTo('#additional-flowfile-details'); }; // formats the content value var formatContentValue = function (element, value) { - if (nf.Common.isDefinedAndNotNull(value)) { + if (common.isDefinedAndNotNull(value)) { element.removeClass('unset').text(value); } else { element.addClass('unset').text('No value set'); @@ -363,7 +403,7 @@ nf.QueueListing = (function () { }; var params = {}; - if (nf.Common.isDefinedAndNotNull(flowFileSummary.clusterNodeId)) { + if (common.isDefinedAndNotNull(flowFileSummary.clusterNodeId)) { params['clusterNodeId'] = flowFileSummary.clusterNodeId; } @@ -379,16 +419,16 @@ nf.QueueListing = (function () { $('#flowfile-uri').text(flowFile.uri); // show the flowfile details dialog - $('#flowfile-uuid').html(nf.Common.formatValue(flowFile.uuid)); - $('#flowfile-filename').html(nf.Common.formatValue(flowFile.filename)); - $('#flowfile-queue-position').html(nf.Common.formatValue(flowFile.position)); - $('#flowfile-file-size').html(nf.Common.formatValue(flowFile.contentClaimFileSize)); - $('#flowfile-queued-duration').text(nf.Common.formatDuration(flowFile.queuedDuration)); - $('#flowfile-lineage-duration').text(nf.Common.formatDuration(flowFile.lineageDuration)); + $('#flowfile-uuid').html(common.formatValue(flowFile.uuid)); + $('#flowfile-filename').html(common.formatValue(flowFile.filename)); + $('#flowfile-queue-position').html(common.formatValue(flowFile.position)); + $('#flowfile-file-size').html(common.formatValue(flowFile.contentClaimFileSize)); + $('#flowfile-queued-duration').text(common.formatDuration(flowFile.queuedDuration)); + $('#flowfile-lineage-duration').text(common.formatDuration(flowFile.lineageDuration)); $('#flowfile-penalized').text(flowFile.penalized === true ? 'Yes' : 'No'); // conditionally show the cluster node identifier - if (nf.Common.isDefinedAndNotNull(flowFileSummary.clusterNodeId)) { + if (common.isDefinedAndNotNull(flowFileSummary.clusterNodeId)) { // save the cluster node id $('#flowfile-cluster-node-id').text(flowFileSummary.clusterNodeId); @@ -396,7 +436,7 @@ nf.QueueListing = (function () { formatFlowFileDetail('Node Address', flowFileSummary.clusterNodeAddress); } - if (nf.Common.isDefinedAndNotNull(flowFile.contentClaimContainer)) { + if (common.isDefinedAndNotNull(flowFile.contentClaimContainer)) { // content claim formatContentValue($('#content-container'), flowFile.contentClaimContainer); formatContentValue($('#content-section'), flowFile.contentClaimSection); @@ -407,9 +447,9 @@ nf.QueueListing = (function () { // input content file size var contentSize = $('#content-size'); formatContentValue(contentSize, flowFile.contentClaimFileSize); - if (nf.Common.isDefinedAndNotNull(flowFile.contentClaimFileSize)) { + if (common.isDefinedAndNotNull(flowFile.contentClaimFileSize)) { // over the default tooltip with the actual byte count - contentSize.attr('title', nf.Common.formatInteger(flowFile.contentClaimFileSizeBytes) + ' bytes'); + contentSize.attr('title', common.formatInteger(flowFile.contentClaimFileSizeBytes) + ' bytes'); } // show the content details @@ -425,21 +465,21 @@ nf.QueueListing = (function () { $.each(flowFile.attributes, function (attributeName, attributeValue) { // create the attribute record var attributeRecord = $('
    ') - .append($('
    ' + nf.Common.formatValue(attributeName) + '
    ').ellipsis()) + .append($('
    ' + common.formatValue(attributeName) + '
    ').ellipsis()) .appendTo(attributesContainer); // add the current value attributeRecord - .append($('
    ' + nf.Common.formatValue(attributeValue) + '
    ').ellipsis()) + .append($('
    ' + common.formatValue(attributeValue) + '
    ').ellipsis()) .append('
    '); }); // show the dialog $('#flowfile-details-dialog').modal('show'); - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); }; - return { + var nfQueueListing = { init: function () { initializeListingRequestStatusDialog(); @@ -456,12 +496,12 @@ nf.QueueListing = (function () { // function for formatting data sizes var dataSizeFormatter = function (row, cell, value, columnDef, dataContext) { - return nf.Common.formatDataSize(value); + return common.formatDataSize(value); }; // function for formatting durations var durationFormatter = function (row, cell, value, columnDef, dataContext) { - return nf.Common.formatDuration(value); + return common.formatDuration(value); }; // function for formatting penalization @@ -548,7 +588,7 @@ nf.QueueListing = (function () { ]; // conditionally show the cluster node identifier - if (nf.ClusterSummary.isClustered()) { + if (clusterSummary.isClustered()) { queueListingColumns.push({ id: 'clusterNodeAddress', name: 'Node', @@ -559,7 +599,7 @@ nf.QueueListing = (function () { } // add an actions column when the user can access provenance - if (nf.Common.canAccessProvenance()) { + if (common.canAccessProvenance()) { // function for formatting actions var actionsFormatter = function () { return '
    '; @@ -614,7 +654,7 @@ nf.QueueListing = (function () { $('#shell-close-button').click(); // open the provenance page with the specified component - nf.Shell.showPage('provenance?' + $.param({ + shell.showPage('provenance?' + $.param({ flowFileUuid: item.uuid })); } @@ -648,7 +688,7 @@ nf.QueueListing = (function () { $('#content-download').on('click', downloadContent); // only show if content viewer is configured - if (nf.Common.isContentViewConfigured()) { + if (common.isContentViewConfigured()) { $('#content-view').show(); $('#content-view').on('click', viewContent); } @@ -690,7 +730,7 @@ nf.QueueListing = (function () { $('#additional-flowfile-details').empty(); }, open: function () { - nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0)); + common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0)); } } }); @@ -701,7 +741,7 @@ nf.QueueListing = (function () { */ resetTableSize: function () { var queueListingGrid = $('#queue-listing-table').data('gridInstance'); - if (nf.Common.isDefinedAndNotNull(queueListingGrid)) { + if (common.isDefinedAndNotNull(queueListingGrid)) { queueListingGrid.resizeCanvas(); } }, @@ -717,7 +757,7 @@ nf.QueueListing = (function () { // update the connection name var connectionName = ''; if (connection.permissions.canRead) { - connectionName = nf.CanvasUtils.formatConnectionName(connection.component); + connectionName = canvasUtils.formatConnectionName(connection.component); } if (connectionName === '') { connectionName = 'Connection'; @@ -725,7 +765,7 @@ nf.QueueListing = (function () { $('#queue-listing-header-text').text(connectionName); // show the listing container - nf.Shell.showContent('#queue-listing-container').done(function () { + shell.showContent('#queue-listing-container').done(function () { $('#queue-listing-table').removeData('connection'); // clear the table @@ -739,15 +779,17 @@ nf.QueueListing = (function () { // reset stats $('#displayed-flowfiles, #total-flowfiles-count').text('0'); - $('#total-flowfiles-size').text(nf.Common.formatDataSize(0)); + $('#total-flowfiles-size').text(common.formatDataSize(0)); }); // adjust the table size - nf.QueueListing.resetTableSize(); + nfQueueListing.resetTableSize(); // store the connection for access later $('#queue-listing-table').data('connection', connection); }); } }; -}()); \ No newline at end of file + + return nfQueueListing; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-configuration.js index d012be4660..a8d52369fa 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-configuration.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-configuration.js @@ -15,9 +15,47 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ + +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'd3', + 'nf.ErrorHandler', + 'nf.Common', + 'nf.Dialog', + 'nf.Client', + 'nf.CanvasUtils', + 'nf.ng.Bridge', + 'nf.RemoteProcessGroup'], + function ($, d3, errorHandler, common, dialog, client, canvasUtils, angularBridge, nfRemoteProcessGroup) { + return (nf.RemoteProcessGroupConfiguration = factory($, d3, errorHandler, common, dialog, client, canvasUtils, angularBridge, nfRemoteProcessGroup)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.RemoteProcessGroupConfiguration = + factory(require('jquery'), + require('d3'), + require('nf.ErrorHandler'), + require('nf.Common'), + require('nf.Dialog'), + require('nf.Client'), + require('nf.CanvasUtils'), + require('nf.ng.Bridge'), + require('nf.RemoteProcessGroup'))); + } else { + nf.RemoteProcessGroupConfiguration = factory(root.$, + root.d3, + root.nf.ErrorHandler, + root.nf.Common, + root.nf.Dialog, + root.nf.Client, + root.nf.CanvasUtils, + root.nf.ng.Bridge, + root.nf.RemoteProcessGroup); + } +}(this, function ($, d3, errorHandler, common, dialog, client, canvasUtils, angularBridge, nfRemoteProcessGroup) { + 'use strict'; -nf.RemoteProcessGroupConfiguration = (function () { return { init: function () { $('#remote-process-group-configuration').modal({ @@ -35,20 +73,20 @@ nf.RemoteProcessGroupConfiguration = (function () { var remoteProcessGroupId = $('#remote-process-group-id').text(); var remoteProcessGroupData = d3.select('#id-' + remoteProcessGroupId).datum(); - // create the remote process group details - var remoteProcessGroupEntity = { - 'revision': nf.Client.getRevision(remoteProcessGroupData), - 'component': { - id: remoteProcessGroupId, - communicationsTimeout: $('#remote-process-group-timeout').val(), - yieldDuration: $('#remote-process-group-yield-duration').val(), - transportProtocol: $('#remote-process-group-transport-protocol-combo').combo('getSelectedOption').value, - proxyHost: $('#remote-process-group-proxy-host').val(), - proxyPort: $('#remote-process-group-proxy-port').val(), - proxyUser: $('#remote-process-group-proxy-user').val(), - proxyPassword: $('#remote-process-group-proxy-password').val() - } - }; + // create the remote process group details + var remoteProcessGroupEntity = { + 'revision': client.getRevision(remoteProcessGroupData), + 'component': { + id: remoteProcessGroupId, + communicationsTimeout: $('#remote-process-group-timeout').val(), + yieldDuration: $('#remote-process-group-yield-duration').val(), + transportProtocol: $('#remote-process-group-transport-protocol-combo').combo('getSelectedOption').value, + proxyHost: $('#remote-process-group-proxy-host').val(), + proxyPort: $('#remote-process-group-proxy-port').val(), + proxyUser: $('#remote-process-group-proxy-user').val(), + proxyPassword: $('#remote-process-group-proxy-password').val() + } + }; // update the selected component $.ajax({ @@ -59,11 +97,11 @@ nf.RemoteProcessGroupConfiguration = (function () { contentType: 'application/json' }).done(function (response) { // refresh the remote process group component - nf.RemoteProcessGroup.set(response); + nfRemoteProcessGroup.set(response); // inform Angular app values have changed - nf.ng.Bridge.digest(); - + angularBridge.digest(); + // close the details panel $('#remote-process-group-configuration').modal('hide'); }).fail(function (xhr, status, error) { @@ -74,15 +112,15 @@ nf.RemoteProcessGroupConfiguration = (function () { if (errors.length === 1) { content = $('').text(errors[0]); } else { - content = nf.Common.formatUnorderedList(errors); + content = common.formatUnorderedList(errors); } - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ dialogContent: content, headerText: 'Remote Process Group Configuration' }); } else { - nf.ErrorHandler.handleAjaxError(xhr, status, error); + errorHandler.handleAjaxError(xhr, status, error); } }); } @@ -122,12 +160,12 @@ nf.RemoteProcessGroupConfiguration = (function () { // initialize the transport protocol combo $('#remote-process-group-transport-protocol-combo').combo({ options: [{ - text: 'RAW', - value: 'RAW' - }, { - text: 'HTTP', - value: 'HTTP' - }] + text: 'RAW', + value: 'RAW' + }, { + text: 'HTTP', + value: 'HTTP' + }] }); }, @@ -138,7 +176,7 @@ nf.RemoteProcessGroupConfiguration = (function () { */ showConfiguration: function (selection) { // if the specified component is a remote process group, load its properties - if (nf.CanvasUtils.isRemoteProcessGroup(selection)) { + if (canvasUtils.isRemoteProcessGroup(selection)) { var selectionData = selection.datum(); // populate the port settings @@ -164,4 +202,4 @@ nf.RemoteProcessGroupConfiguration = (function () { } } }; -}()); \ No newline at end of file +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-details.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-details.js index ebe116c8aa..73c44b552b 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-details.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-details.js @@ -15,9 +15,29 @@ * limitations under the License. */ -/* global nf */ +/* global define, module, require, exports */ + +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'nf.Common', + 'nf.CanvasUtils'], + function ($, common, canvasUtils) { + return (nf.RemoteProcessGroupDetails = factory($, common, canvasUtils)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.RemoteProcessGroupDetails = + factory(require('jquery'), + require('nf.Common'), + require('nf.CanvasUtils'))); + } else { + nf.RemoteProcessGroupDetails = factory(root.$, + root.nf.Common, + root.nf.CanvasUtils); + } +}(this, function ($, common, canvasUtils) { + 'use strict'; -nf.RemoteProcessGroupDetails = (function () { return { init: function () { $('#remote-process-group-details').modal({ @@ -39,16 +59,16 @@ nf.RemoteProcessGroupDetails = (function () { handler: { close: function () { // clear the remote process group details - nf.Common.clearField('read-only-remote-process-group-id'); - nf.Common.clearField('read-only-remote-process-group-name'); - nf.Common.clearField('read-only-remote-process-group-urls'); - nf.Common.clearField('read-only-remote-process-group-timeout'); - nf.Common.clearField('read-only-remote-process-group-yield-duration'); - nf.Common.clearField('read-only-remote-process-group-transport-protocol'); - nf.Common.clearField('read-only-remote-process-group-proxy-host'); - nf.Common.clearField('read-only-remote-process-group-proxy-port'); - nf.Common.clearField('read-only-remote-process-group-proxy-user'); - nf.Common.clearField('read-only-remote-process-group-proxy-password'); + common.clearField('read-only-remote-process-group-id'); + common.clearField('read-only-remote-process-group-name'); + common.clearField('read-only-remote-process-group-urls'); + common.clearField('read-only-remote-process-group-timeout'); + common.clearField('read-only-remote-process-group-yield-duration'); + common.clearField('read-only-remote-process-group-transport-protocol'); + common.clearField('read-only-remote-process-group-proxy-host'); + common.clearField('read-only-remote-process-group-proxy-port'); + common.clearField('read-only-remote-process-group-proxy-user'); + common.clearField('read-only-remote-process-group-proxy-password'); } } }); @@ -61,24 +81,24 @@ nf.RemoteProcessGroupDetails = (function () { */ showDetails: function (selection) { // if the specified component is a remote process group, load its properties - if (nf.CanvasUtils.isRemoteProcessGroup(selection)) { + if (canvasUtils.isRemoteProcessGroup(selection)) { var selectionData = selection.datum(); // populate the port settings - nf.Common.populateField('read-only-remote-process-group-id', selectionData.id); - nf.Common.populateField('read-only-remote-process-group-name', selectionData.component.name); - nf.Common.populateField('read-only-remote-process-group-urls', selectionData.component.targetUris); - nf.Common.populateField('read-only-remote-process-group-timeout', selectionData.component.communicationsTimeout); - nf.Common.populateField('read-only-remote-process-group-yield-duration', selectionData.component.yieldDuration); - nf.Common.populateField('read-only-remote-process-group-transport-protocol', selectionData.component.transportProtocol); - nf.Common.populateField('read-only-remote-process-group-proxy-host', selectionData.component.proxyHost); - nf.Common.populateField('read-only-remote-process-group-proxy-port', selectionData.component.proxyPort); - nf.Common.populateField('read-only-remote-process-group-proxy-user', selectionData.component.proxyUser); - nf.Common.populateField('read-only-remote-process-group-proxy-password', selectionData.component.proxyPassword); + common.populateField('read-only-remote-process-group-id', selectionData.id); + common.populateField('read-only-remote-process-group-name', selectionData.component.name); + common.populateField('read-only-remote-process-group-urls', selectionData.component.targetUris); + common.populateField('read-only-remote-process-group-timeout', selectionData.component.communicationsTimeout); + common.populateField('read-only-remote-process-group-yield-duration', selectionData.component.yieldDuration); + common.populateField('read-only-remote-process-group-transport-protocol', selectionData.component.transportProtocol); + common.populateField('read-only-remote-process-group-proxy-host', selectionData.component.proxyHost); + common.populateField('read-only-remote-process-group-proxy-port', selectionData.component.proxyPort); + common.populateField('read-only-remote-process-group-proxy-user', selectionData.component.proxyUser); + common.populateField('read-only-remote-process-group-proxy-password', selectionData.component.proxyPassword); // show the details $('#remote-process-group-details').modal('show'); } } }; -}()); \ No newline at end of file +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-ports.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-ports.js index 7c75aa2481..f5f44ddb27 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-ports.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-ports.js @@ -15,9 +15,46 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.RemoteProcessGroupPorts = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'd3', + 'nf.ErrorHandler', + 'nf.Common', + 'nf.Dialog', + 'nf.Client', + 'nf.CanvasUtils', + 'nf.ng.Bridge', + 'nf.RemoteProcessGroup'], + function ($, d3, errorHandler, common, dialog, client, canvasUtils, angularBridge, nfRemoteProcessGroup) { + return (nf.RemoteProcessGroupPorts = factory($, d3, errorHandler, common, dialog, client, canvasUtils, angularBridge, nfRemoteProcessGroup)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.RemoteProcessGroupPorts = + factory(require('jquery'), + require('d3'), + require('nf.ErrorHandler'), + require('nf.Common'), + require('nf.Dialog'), + require('nf.Client'), + require('nf.CanvasUtils'), + require('nf.ng.Bridge'), + require('nf.RemoteProcessGroup'))); + } else { + nf.RemoteProcessGroupPorts = factory(root.$, + root.d3, + root.nf.ErrorHandler, + root.nf.Common, + root.nf.Dialog, + root.nf.Client, + root.nf.CanvasUtils, + root.nf.ng.Bridge, + root.nf.RemoteProcessGroup); + } +}(this, function ($, d3, errorHandler, common, dialog, client, canvasUtils, angularBridge, nfRemoteProcessGroup) { + 'use strict'; /** * Initializes the remote port configuration dialog. @@ -45,7 +82,7 @@ nf.RemoteProcessGroupPorts = (function () { // create the remote process group details var remoteProcessGroupPortEntity = { - 'revision': nf.Client.getRevision(remoteProcessGroupData), + 'revision': client.getRevision(remoteProcessGroupData), 'remoteProcessGroupPort': { id: remotePortId, groupId: remoteProcessGroupId, @@ -92,22 +129,22 @@ nf.RemoteProcessGroupPorts = (function () { if (errors.length === 1) { content = $('').text(errors[0]); } else { - content = nf.Common.formatUnorderedList(errors); + content = common.formatUnorderedList(errors); } - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ dialogContent: content, headerText: 'Remote Process Group Ports' }); } else { - nf.ErrorHandler.handleAjaxError(xhr, status, error); + errorHandler.handleAjaxError(xhr, status, error); } }).always(function () { // close the dialog $('#remote-port-configuration').modal('hide'); }); } else { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Remote Process Group Ports', dialogContent: 'Concurrent tasks must be an integer value.' }); @@ -165,9 +202,9 @@ nf.RemoteProcessGroupPorts = (function () { var remoteProcessGroupData = remoteProcessGroup.datum(); // if can modify, the over status of this node may have changed - if (nf.CanvasUtils.canModify(remoteProcessGroup)) { + if (canvasUtils.canModify(remoteProcessGroup)) { // reload the remote process group - nf.RemoteProcessGroup.reload(remoteProcessGroupData.id); + nfRemoteProcessGroup.reload(remoteProcessGroupData.id); } // hide the dialog @@ -184,8 +221,8 @@ nf.RemoteProcessGroupPorts = (function () { // clear any tooltips var dialog = $('#remote-process-group-ports'); - nf.Common.cleanUpTooltips(dialog, 'div.remote-port-removed'); - nf.Common.cleanUpTooltips(dialog, 'div.concurrent-tasks-info'); + common.cleanUpTooltips(dialog, 'div.remote-port-removed'); + common.cleanUpTooltips(dialog, 'div.concurrent-tasks-info'); // clear the input and output ports $('#remote-process-group-input-ports-container').empty(); @@ -203,7 +240,7 @@ nf.RemoteProcessGroupPorts = (function () { * @argument {string} portType The type of port */ var createPortOption = function (container, port, portType) { - var portId = nf.Common.escapeHtml(port.id); + var portId = common.escapeHtml(port.id); var portContainer = $('
    ').appendTo(container); var portContainerEditContainer = $('
    ').appendTo(portContainer); var portContainerDetailsContainer = $('
    ').appendTo(portContainer); @@ -213,25 +250,25 @@ nf.RemoteProcessGroupPorts = (function () { var remoteProcessGroup = d3.select('#id-' + remoteProcessGroupId); // if can modify, support updating the remote group port - if (nf.CanvasUtils.canModify(remoteProcessGroup)) { + if (canvasUtils.canModify(remoteProcessGroup)) { // show the enabled transmission switch var transmissionSwitch; if (port.connected === true) { if (port.transmitting === true) { - transmissionSwitch = (nf.ng.Bridge.injector.get('$compile')($(''))(nf.ng.Bridge.rootScope)).appendTo(portContainerEditContainer); + transmissionSwitch = (angularBridge.injector.get('$compile')($(''))(angularBridge.rootScope)).appendTo(portContainerEditContainer); transmissionSwitch.click(); } else { if (port.exists === true) { - transmissionSwitch = (nf.ng.Bridge.injector.get('$compile')($(''))(nf.ng.Bridge.rootScope)).appendTo(portContainerEditContainer); + transmissionSwitch = (angularBridge.injector.get('$compile')($(''))(angularBridge.rootScope)).appendTo(portContainerEditContainer); } else { - (nf.ng.Bridge.injector.get('$compile')($(''))(nf.ng.Bridge.rootScope)).appendTo(portContainerEditContainer); + (angularBridge.injector.get('$compile')($(''))(angularBridge.rootScope)).appendTo(portContainerEditContainer); } } } else { if (port.transmitting === true) { - (nf.ng.Bridge.injector.get('$compile')($(''))(nf.ng.Bridge.rootScope)).appendTo(portContainerEditContainer); + (angularBridge.injector.get('$compile')($(''))(angularBridge.rootScope)).appendTo(portContainerEditContainer); } else { - (nf.ng.Bridge.injector.get('$compile')($(''))(nf.ng.Bridge.rootScope)).appendTo(portContainerEditContainer); + (angularBridge.injector.get('$compile')($(''))(angularBridge.rootScope)).appendTo(portContainerEditContainer); } } @@ -255,14 +292,14 @@ nf.RemoteProcessGroupPorts = (function () { } } else if (port.exists === false) { $('
    ').appendTo(portContainerEditContainer).qtip($.extend({}, - nf.Common.config.tooltipConfig, + common.config.tooltipConfig, { content: 'This port has been removed.' })); } // only allow modifications to transmission when the swtich is defined - if (nf.Common.isDefinedAndNotNull(transmissionSwitch)) { + if (common.isDefinedAndNotNull(transmissionSwitch)) { // create toggle for changing transmission state transmissionSwitch.click(function () { // get the component being edited @@ -277,7 +314,7 @@ nf.RemoteProcessGroupPorts = (function () { // create the remote process group details var remoteProcessGroupPortEntity = { - 'revision': nf.Client.getRevision(remoteProcessGroupData), + 'revision': client.getRevision(remoteProcessGroupData), 'remoteProcessGroupPort': { id: port.id, groupId: remoteProcessGroupId, @@ -312,7 +349,7 @@ nf.RemoteProcessGroupPorts = (function () { transmissionSwitch.removeClass('enabled-active-transmission enabled-inactive-transmission').addClass('disabled-inactive-transmission').off('click'); // hide the edit button - if (nf.Common.isDefinedAndNotNull(editRemotePort)) { + if (common.isDefinedAndNotNull(editRemotePort)) { editRemotePort.hide(); } } else { @@ -322,7 +359,7 @@ nf.RemoteProcessGroupPorts = (function () { transmissionSwitch.removeClass('enabled-active-transmission enabled-inactive-transmission').addClass('enabled-active-transmission'); // hide the edit button - if (nf.Common.isDefinedAndNotNull(editRemotePort)) { + if (common.isDefinedAndNotNull(editRemotePort)) { editRemotePort.hide(); } } else { @@ -330,7 +367,7 @@ nf.RemoteProcessGroupPorts = (function () { transmissionSwitch.removeClass('enabled-active-transmission enabled-inactive-transmission').addClass('enabled-inactive-transmission'); // show the edit button - if (nf.Common.isDefinedAndNotNull(editRemotePort)) { + if (common.isDefinedAndNotNull(editRemotePort)) { editRemotePort.show(); } } @@ -343,15 +380,15 @@ nf.RemoteProcessGroupPorts = (function () { if (errors.length === 1) { content = $('').text(errors[0]); } else { - content = nf.Common.formatUnorderedList(errors); + content = common.formatUnorderedList(errors); } - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Remote Process Group Ports', dialogContent: content }); } else { - nf.ErrorHandler.handleAjaxError(xhr, status, error); + errorHandler.handleAjaxError(xhr, status, error); } }); }); @@ -359,9 +396,9 @@ nf.RemoteProcessGroupPorts = (function () { } else { // show the disabled transmission switch if (port.transmitting === true) { - (nf.ng.Bridge.injector.get('$compile')($(''))(nf.ng.Bridge.rootScope)).appendTo(portContainerEditContainer); + (angularBridge.injector.get('$compile')($(''))(angularBridge.rootScope)).appendTo(portContainerEditContainer); } else { - (nf.ng.Bridge.injector.get('$compile')($(''))(nf.ng.Bridge.rootScope)).appendTo(portContainerEditContainer); + (angularBridge.injector.get('$compile')($(''))(angularBridge.rootScope)).appendTo(portContainerEditContainer); } } @@ -373,7 +410,7 @@ nf.RemoteProcessGroupPorts = (function () { $('
    ').appendTo(portContainerDetailsContainer); // add the comments for this port - if (nf.Common.isBlank(port.comments)) { + if (common.isBlank(port.comments)) { $('
    No description specified.
    ').appendTo(portContainerDetailsContainer); } else { $('
    ').text(port.comments).appendTo(portContainerDetailsContainer); @@ -394,7 +431,7 @@ nf.RemoteProcessGroupPorts = (function () { '
    ' + '
    ' + '
    ').append(concurrentTasks).appendTo(concurrentTasksContainer).find('div.concurrent-tasks-info').qtip($.extend({}, - nf.Common.config.tooltipConfig, + common.config.tooltipConfig, { content: 'The number of tasks that should be concurrently scheduled for this port.' })); @@ -424,7 +461,7 @@ nf.RemoteProcessGroupPorts = (function () { portContainer.find('.ellipsis').ellipsis(); // inform Angular app values have changed - nf.ng.Bridge.digest(); + angularBridge.digest(); }; /** @@ -469,7 +506,7 @@ nf.RemoteProcessGroupPorts = (function () { */ showPorts: function (selection) { // if the specified component is a remote process group, load its properties - if (nf.CanvasUtils.isRemoteProcessGroup(selection)) { + if (canvasUtils.isRemoteProcessGroup(selection)) { var selectionData = selection.datum(); // load the properties for the specified component @@ -481,7 +518,7 @@ nf.RemoteProcessGroupPorts = (function () { var remoteProcessGroup = response.component; // set the model locally - nf.RemoteProcessGroup.set(response); + nfRemoteProcessGroup.set(response); // populate the port settings $('#remote-process-group-ports-id').text(remoteProcessGroup.id); @@ -490,7 +527,7 @@ nf.RemoteProcessGroupPorts = (function () { // get the contents var remoteProcessGroupContents = remoteProcessGroup.contents; - if (nf.Common.isDefinedAndNotNull(remoteProcessGroupContents)) { + if (common.isDefinedAndNotNull(remoteProcessGroupContents)) { var connectedInputPorts = []; var disconnectedInputPorts = []; @@ -514,7 +551,7 @@ nf.RemoteProcessGroupPorts = (function () { createPortOption(inputPortContainer, inputPort, 'input'); }); - if (nf.Common.isEmpty(connectedInputPorts) && nf.Common.isEmpty(disconnectedInputPorts)) { + if (common.isEmpty(connectedInputPorts) && common.isEmpty(disconnectedInputPorts)) { $('
    ').text("No ports to display").appendTo(inputPortContainer); } @@ -541,15 +578,15 @@ nf.RemoteProcessGroupPorts = (function () { createPortOption(outputPortContainer, outputPort, 'output'); }); - if (nf.Common.isEmpty(connectedOutputPorts) && nf.Common.isEmpty(disconnectedOutputPorts)) { + if (common.isEmpty(connectedOutputPorts) && common.isEmpty(disconnectedOutputPorts)) { $('
    ').text("No ports to display").appendTo(outputPortContainer); } } // show the details $('#remote-process-group-ports').modal('show'); - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); } } }; -}()); \ No newline at end of file +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js index 1903e44a18..f487ca422a 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js @@ -15,9 +15,42 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.RemoteProcessGroup = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'd3', + 'nf.Connection', + 'nf.Common', + 'nf.Client', + 'nf.CanvasUtils'], + function ($, d3, connection, common, client, canvasUtils) { + return (nf.RemoteProcessGroup = factory($, d3, connection, common, client, canvasUtils)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.RemoteProcessGroup = + factory(require('jquery'), + require('d3'), + require('nf.Connection'), + require('nf.Common'), + require('nf.Client'), + require('nf.CanvasUtils'))); + } else { + nf.RemoteProcessGroup = factory(root.$, + root.d3, + root.nf.Connection, + root.nf.Common, + root.nf.Client, + root.nf.CanvasUtils); + } +}(this, function ($, d3, connection, common, client, canvasUtils) { + 'use strict'; + + var nfConnectable; + var nfDraggable; + var nfSelectable; + var nfContextMenu; var PREVIEW_NAME_LENGTH = 30; @@ -55,7 +88,7 @@ nf.RemoteProcessGroup = (function () { * @param {object} d */ var getProcessGroupComments = function (d) { - if (nf.Common.isBlank(d.component.comments)) { + if (common.isBlank(d.component.comments)) { return 'No comments specified'; } else { return d.component.comments; @@ -90,7 +123,7 @@ nf.RemoteProcessGroup = (function () { 'class': 'remote-process-group component' }) .classed('selected', selected) - .call(nf.CanvasUtils.position); + .call(canvasUtils.position); // ---- // body @@ -145,7 +178,7 @@ nf.RemoteProcessGroup = (function () { }); // always support selection - remoteProcessGroup.call(nf.Selectable.activate).call(nf.ContextMenu.activate); + remoteProcessGroup.call(nfSelectable.activate).call(nfContextMenu.activate); }; // attempt of space between component count and icon for process group contents @@ -178,7 +211,7 @@ nf.RemoteProcessGroup = (function () { var details = remoteProcessGroup.select('g.remote-process-group-details'); // update the component behavior as appropriate - nf.CanvasUtils.editable(remoteProcessGroup); + canvasUtils.editable(remoteProcessGroup, nfConnectable, nfDraggable); // if this processor is visible, render everything if (remoteProcessGroup.classed('visible')) { @@ -499,7 +532,7 @@ nf.RemoteProcessGroup = (function () { remoteProcessGroupUri.text(null).selectAll('title').remove(); // apply ellipsis to the remote process group name as necessary - nf.CanvasUtils.ellipsis(remoteProcessGroupUri, d.component.targetUris); + canvasUtils.ellipsis(remoteProcessGroupUri, d.component.targetUris); }).append('title').text(function (d) { return d.component.name; }); @@ -530,15 +563,15 @@ nf.RemoteProcessGroup = (function () { // update the tip tip.text(function () { - if (d.component.targetSecure === true) { - return 'Site-to-Site is secure.'; - } else { - return 'Site-to-Site is NOT secure.'; - } - }); + if (d.component.targetSecure === true) { + return 'Site-to-Site is secure.'; + } else { + return 'Site-to-Site is NOT secure.'; + } + }); // add the tooltip - nf.CanvasUtils.canvasTooltip(tip, d3.select(this)); + canvasUtils.canvasTooltip(tip, d3.select(this)); }); // --------------- @@ -554,9 +587,9 @@ nf.RemoteProcessGroup = (function () { remoteProcessGroupComments.text(null).selectAll('tspan, title').remove(); // apply ellipsis to the port name as necessary - nf.CanvasUtils.ellipsis(remoteProcessGroupComments, getProcessGroupComments(d)); + canvasUtils.ellipsis(remoteProcessGroupComments, getProcessGroupComments(d)); }).classed('unset', function (d) { - return nf.Common.isBlank(d.component.comments); + return common.isBlank(d.component.comments); }).append('title').text(function (d) { return getProcessGroupComments(d); }); @@ -567,7 +600,7 @@ nf.RemoteProcessGroup = (function () { details.select('text.remote-process-group-last-refresh') .text(function (d) { - if (nf.Common.isDefinedAndNotNull(d.component.flowRefreshed)) { + if (common.isDefinedAndNotNull(d.component.flowRefreshed)) { return d.component.flowRefreshed; } else { return 'Remote flow not current'; @@ -583,7 +616,7 @@ nf.RemoteProcessGroup = (function () { remoteProcessGroupName.text(null).selectAll('title').remove(); // apply ellipsis to the remote process group name as necessary - nf.CanvasUtils.ellipsis(remoteProcessGroupName, d.component.name); + canvasUtils.ellipsis(remoteProcessGroupName, d.component.name); }).append('title').text(function (d) { return d.component.name; }); @@ -647,13 +680,13 @@ nf.RemoteProcessGroup = (function () { // sent count value updated.select('text.remote-process-group-sent tspan.count') .text(function (d) { - return nf.Common.substringBeforeFirst(d.status.aggregateSnapshot.sent, ' '); + return common.substringBeforeFirst(d.status.aggregateSnapshot.sent, ' '); }); // sent size value updated.select('text.remote-process-group-sent tspan.size') .text(function (d) { - return ' ' + nf.Common.substringAfterFirst(d.status.aggregateSnapshot.sent, ' '); + return ' ' + common.substringAfterFirst(d.status.aggregateSnapshot.sent, ' '); }); // sent ports value @@ -671,13 +704,13 @@ nf.RemoteProcessGroup = (function () { // received count value updated.select('text.remote-process-group-received tspan.count') .text(function (d) { - return nf.Common.substringBeforeFirst(d.status.aggregateSnapshot.received, ' '); + return common.substringBeforeFirst(d.status.aggregateSnapshot.received, ' '); }); // received size value updated.select('text.remote-process-group-received tspan.size') .text(function (d) { - return ' ' + nf.Common.substringAfterFirst(d.status.aggregateSnapshot.received, ' '); + return ' ' + common.substringAfterFirst(d.status.aggregateSnapshot.received, ' '); }); // -------------------- @@ -690,7 +723,7 @@ nf.RemoteProcessGroup = (function () { .text(function (d) { var icon = ''; if (d.permissions.canRead) { - if (!nf.Common.isEmpty(d.component.authorizationIssues)) { + if (!common.isEmpty(d.component.authorizationIssues)) { icon = '\uf071'; } else if (d.component.transmitting === true) { icon = '\uf140'; @@ -703,7 +736,7 @@ nf.RemoteProcessGroup = (function () { .attr('font-family', function (d) { var family = ''; if (d.permissions.canRead) { - if (!nf.Common.isEmpty(d.component.authorizationIssues) || d.component.transmitting) { + if (!common.isEmpty(d.component.authorizationIssues) || d.component.transmitting) { family = 'FontAwesome'; } else { family = 'flowfont'; @@ -712,20 +745,20 @@ nf.RemoteProcessGroup = (function () { return family; }) .classed('invalid', function (d) { - return d.permissions.canRead && !nf.Common.isEmpty(d.component.authorizationIssues); + return d.permissions.canRead && !common.isEmpty(d.component.authorizationIssues); }) .classed('transmitting', function (d) { - return d.permissions.canRead && nf.Common.isEmpty(d.component.authorizationIssues) && d.component.transmitting === true; + return d.permissions.canRead && common.isEmpty(d.component.authorizationIssues) && d.component.transmitting === true; }) .classed('not-transmitting', function (d) { - return d.permissions.canRead && nf.Common.isEmpty(d.component.authorizationIssues) && d.component.transmitting === false; + return d.permissions.canRead && common.isEmpty(d.component.authorizationIssues) && d.component.transmitting === false; }) .each(function (d) { // get the tip var tip = d3.select('#authorization-issues-' + d.id); // if there are validation errors generate a tooltip - if (d.permissions.canRead && !nf.Common.isEmpty(d.component.authorizationIssues)) { + if (d.permissions.canRead && !common.isEmpty(d.component.authorizationIssues)) { // create the tip if necessary if (tip.empty()) { tip = d3.select('#remote-process-group-tooltips').append('div') @@ -737,16 +770,16 @@ nf.RemoteProcessGroup = (function () { // update the tip tip.html(function () { - var list = nf.Common.formatUnorderedList(d.component.authorizationIssues); - if (list === null || list.length === 0) { - return ''; - } else { - return $('
    ').append(list).html(); - } - }); + var list = common.formatUnorderedList(d.component.authorizationIssues); + if (list === null || list.length === 0) { + return ''; + } else { + return $('
    ').append(list).html(); + } + }); // add the tooltip - nf.CanvasUtils.canvasTooltip(tip, d3.select(this)); + canvasUtils.canvasTooltip(tip, d3.select(this)); } else { if (!tip.empty()) { tip.remove(); @@ -762,7 +795,7 @@ nf.RemoteProcessGroup = (function () { // active thread count // ------------------- - nf.CanvasUtils.activeThreadCount(remoteProcessGroup, d, function (off) { + canvasUtils.activeThreadCount(remoteProcessGroup, d, function (off) { offset = off; }); @@ -771,10 +804,10 @@ nf.RemoteProcessGroup = (function () { // --------- remoteProcessGroup.select('rect.bulletin-background').classed('has-bulletins', function () { - return !nf.Common.isEmpty(d.status.aggregateSnapshot.bulletins); + return !common.isEmpty(d.status.aggregateSnapshot.bulletins); }); - nf.CanvasUtils.bulletins(remoteProcessGroup, d, function () { + canvasUtils.bulletins(remoteProcessGroup, d, function () { return d3.select('#remote-process-group-tooltips'); }, offset); }); @@ -807,11 +840,16 @@ nf.RemoteProcessGroup = (function () { }); }; - return { + var nfRemoteProcessGroup = { /** * Initializes of the Process Group handler. */ - init: function () { + init: function (connectable, draggable, selectable, contextMenu) { + nfConnectable = connectable; + nfDraggable = draggable; + nfSelectable = selectable; + nfContextMenu = contextMenu; + remoteProcessGroupMap = d3.map(); removedCache = d3.map(); addedCache = d3.map(); @@ -832,8 +870,8 @@ nf.RemoteProcessGroup = (function () { */ add: function (remoteProcessGroupEntities, options) { var selectAll = false; - if (nf.Common.isDefinedAndNotNull(options)) { - selectAll = nf.Common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; + if (common.isDefinedAndNotNull(options)) { + selectAll = common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; } // get the current time @@ -854,7 +892,7 @@ nf.RemoteProcessGroup = (function () { $.each(remoteProcessGroupEntities, function (_, remoteProcessGroupEntity) { add(remoteProcessGroupEntity); }); - } else if (nf.Common.isDefinedAndNotNull(remoteProcessGroupEntities)) { + } else if (common.isDefinedAndNotNull(remoteProcessGroupEntities)) { add(remoteProcessGroupEntities); } @@ -863,7 +901,7 @@ nf.RemoteProcessGroup = (function () { selection.enter().call(renderRemoteProcessGroups, selectAll); selection.call(updateRemoteProcessGroups); }, - + /** * Populates the graph with the specified remote process groups. * @@ -873,16 +911,16 @@ nf.RemoteProcessGroup = (function () { set: function (remoteProcessGroupEntities, options) { var selectAll = false; var transition = false; - if (nf.Common.isDefinedAndNotNull(options)) { - selectAll = nf.Common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; - transition = nf.Common.isDefinedAndNotNull(options.transition) ? options.transition : transition; + if (common.isDefinedAndNotNull(options)) { + selectAll = common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll; + transition = common.isDefinedAndNotNull(options.transition) ? options.transition : transition; } var set = function (proposedRemoteProcessGroupEntity) { var currentRemoteProcessGroupEntity = remoteProcessGroupMap.get(proposedRemoteProcessGroupEntity.id); // set the remote process group if appropriate due to revision and wasn't previously removed - if (nf.Client.isNewerRevision(currentRemoteProcessGroupEntity, proposedRemoteProcessGroupEntity) && !removedCache.has(proposedRemoteProcessGroupEntity.id)) { + if (client.isNewerRevision(currentRemoteProcessGroupEntity, proposedRemoteProcessGroupEntity) && !removedCache.has(proposedRemoteProcessGroupEntity.id)) { remoteProcessGroupMap.set(proposedRemoteProcessGroupEntity.id, $.extend({ type: 'RemoteProcessGroup', dimensions: dimensions @@ -906,14 +944,14 @@ nf.RemoteProcessGroup = (function () { $.each(remoteProcessGroupEntities, function (_, remoteProcessGroupEntity) { set(remoteProcessGroupEntity); }); - } else if (nf.Common.isDefinedAndNotNull(remoteProcessGroupEntities)) { + } else if (common.isDefinedAndNotNull(remoteProcessGroupEntities)) { set(remoteProcessGroupEntities); } // apply the selection and handle all new remote process groups var selection = select(); selection.enter().call(renderRemoteProcessGroups, selectAll); - selection.call(updateRemoteProcessGroups).call(nf.CanvasUtils.position, transition); + selection.call(updateRemoteProcessGroups).call(canvasUtils.position, transition); selection.exit().call(removeRemoteProcessGroups); }, @@ -924,7 +962,7 @@ nf.RemoteProcessGroup = (function () { * @param {string} id */ get: function (id) { - if (nf.Common.isUndefined(id)) { + if (common.isUndefined(id)) { return remoteProcessGroupMap.values(); } else { return remoteProcessGroupMap.get(id); @@ -938,7 +976,7 @@ nf.RemoteProcessGroup = (function () { * @param {string} id Optional */ refresh: function (id) { - if (nf.Common.isDefinedAndNotNull(id)) { + if (common.isDefinedAndNotNull(id)) { d3.select('#id-' + id).call(updateRemoteProcessGroups); } else { d3.selectAll('g.remote-process-group').call(updateRemoteProcessGroups); @@ -966,13 +1004,13 @@ nf.RemoteProcessGroup = (function () { url: remoteProcessGroupEntity.uri, dataType: 'json' }).done(function (response) { - nf.RemoteProcessGroup.set(response); + nfRemoteProcessGroup.set(response); // reload the group's connections - var connections = nf.Connection.getComponentConnections(id); + var connections = connection.getComponentConnections(id); $.each(connections, function (_, connection) { if (connection.permissions.canRead) { - nf.Connection.reload(connection.id); + connection.reload(connection.id); } }); }); @@ -985,7 +1023,7 @@ nf.RemoteProcessGroup = (function () { * @param {string} id The id */ position: function (id) { - d3.select('#id-' + id).call(nf.CanvasUtils.position); + d3.select('#id-' + id).call(canvasUtils.position); }, /** @@ -1014,7 +1052,7 @@ nf.RemoteProcessGroup = (function () { * Removes all remote process groups. */ removeAll: function () { - nf.RemoteProcessGroup.remove(remoteProcessGroupMap.keys()); + nfRemoteProcessGroup.remove(remoteProcessGroupMap.keys()); }, /** @@ -1035,4 +1073,6 @@ nf.RemoteProcessGroup = (function () { expire(removedCache); } }; -}()); \ No newline at end of file + + return nfRemoteProcessGroup; +})); \ No newline at end of file diff --git a/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-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-reporting-task.js index cf94ba293d..88f6fb4c9a 100644 --- a/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-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-reporting-task.js @@ -15,9 +15,48 @@ * limitations under the License. */ -/* global nf */ +/* global define, module, require, exports */ -nf.ReportingTask = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'nf.ErrorHandler', + 'nf.Common', + 'nf.Dialog', + 'nf.Client', + 'nf.ControllerService', + 'nf.ControllerServices', + 'nf.UniversalCapture', + 'nf.CustomUi'], + function ($, errorHandler, common, dialog, client, controllerService, controllerServices, universalCapture, customUi) { + return (nf.ReportingTask = factory($, errorHandler, common, dialog, client, controllerService, controllerServices, universalCapture, customUi)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ReportingTask = + factory(require('jquery'), + require('nf.ErrorHandler'), + require('nf.Common'), + require('nf.Dialog'), + require('nf.Client'), + require('nf.ControllerService'), + require('nf.ControllerServices'), + require('nf.UniversalCapture'), + require('nf.CustomUi'))); + } else { + nf.ReportingTask = factory(root.$, + root.nf.ErrorHandler, + root.nf.Common, + root.nf.Dialog, + root.nf.Client, + root.nf.ControllerService, + root.nf.ControllerServices, + root.nf.UniversalCapture, + root.nf.CustomUi); + } +}(this, function ($, errorHandler, common, dialog, client, controllerService, controllerServices, universalCapture, customUi) { + 'use strict'; + + var nfSettings; var config = { edit: 'edit', @@ -38,7 +77,7 @@ nf.ReportingTask = (function () { var getControllerServicesTable = function () { return $('#controller-services-table'); }; - + /** * Handle any expected reporting task configuration errors. * @@ -54,15 +93,15 @@ nf.ReportingTask = (function () { if (errors.length === 1) { content = $('').text(errors[0]); } else { - content = nf.Common.formatUnorderedList(errors); + content = common.formatUnorderedList(errors); } - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ dialogContent: content, headerText: 'Reporting Task' }); } else { - nf.ErrorHandler.handleAjaxError(xhr, status, error); + errorHandler.handleAjaxError(xhr, status, error); } }; @@ -102,7 +141,7 @@ nf.ReportingTask = (function () { } // check the scheduling period - if (nf.Common.isDefinedAndNotNull(schedulingPeriod) && schedulingPeriod.val() !== (entity.component['schedulingPeriod'] + '')) { + if (common.isDefinedAndNotNull(schedulingPeriod) && schedulingPeriod.val() !== (entity.component['schedulingPeriod'] + '')) { return true; } @@ -165,13 +204,13 @@ nf.ReportingTask = (function () { var errors = []; var reportingTask = details['component']; - if (nf.Common.isBlank(reportingTask['schedulingPeriod'])) { + if (common.isBlank(reportingTask['schedulingPeriod'])) { errors.push('Run schedule must be specified'); } if (errors.length > 0) { - nf.Dialog.showOkDialog({ - dialogContent: nf.Common.formatUnorderedList(errors), + dialog.showOkDialog({ + dialogContent: common.formatUnorderedList(errors), headerText: 'Reporting Task' }); return false; @@ -202,7 +241,7 @@ nf.ReportingTask = (function () { */ var setRunning = function (reportingTaskEntity, running) { var entity = { - 'revision': nf.Client.getRevision(reportingTaskEntity), + 'revision': client.getRevision(reportingTaskEntity), 'component': { 'id': reportingTaskEntity.id, 'state': running === true ? 'RUNNING' : 'STOPPED' @@ -218,8 +257,8 @@ nf.ReportingTask = (function () { }).done(function (response) { // update the task renderReportingTask(response); - nf.ControllerService.reloadReferencedServices(getControllerServicesTable(), response.component); - }).fail(nf.ErrorHandler.handleAjaxError); + controllerService.reloadReferencedServices(getControllerServicesTable(), response.component); + }).fail(errorHandler.handleAjaxError); }; /** @@ -233,7 +272,7 @@ nf.ReportingTask = (function () { // determine if changes have been made if (isSaveRequired()) { // see if those changes should be saved - nf.Dialog.showYesNoDialog({ + dialog.showYesNoDialog({ headerText: 'Save', dialogContent: 'Save changes before going to this Controller Service?', noHandler: function () { @@ -265,7 +304,7 @@ nf.ReportingTask = (function () { // ensure details are valid as far as we can tell if (validateDetails(updatedReportingTask)) { - updatedReportingTask['revision'] = nf.Client.getRevision(reportingTaskEntity); + updatedReportingTask['revision'] = client.getRevision(reportingTaskEntity); // update the selected component return $.ajax({ @@ -299,14 +338,16 @@ nf.ReportingTask = (function () { propertyName: propertyName }, dataType: 'json' - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); }; - return { + var nfReportingTask = { /** * Initializes the reporting task configuration dialog. */ - init: function () { + init: function (settings) { + nfSettings = settings; + // initialize the configuration dialog tabs $('#reporting-task-configuration-tabs').tabbs({ tabStyle: 'tab', @@ -324,7 +365,7 @@ nf.ReportingTask = (function () { }], select: function () { // remove all property detail dialogs - nf.UniversalCapture.removeAllPropertyDetailDialogs(); + universalCapture.removeAllPropertyDetailDialogs(); // update the property table size in case this is the first time its rendered if ($(this).text() === 'Properties') { @@ -349,13 +390,13 @@ nf.ReportingTask = (function () { $('#reporting-task-properties').propertytable('clear'); // clear the comments - nf.Common.clearField('read-only-reporting-task-comments'); + common.clearField('read-only-reporting-task-comments'); // removed the cached reporting task details $('#reporting-task-configuration').removeData('reportingTaskDetails'); }, open: function () { - nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0)); + common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0)); } } }); @@ -366,8 +407,8 @@ nf.ReportingTask = (function () { supportsGoTo: true, dialogContainer: '#new-reporting-task-property-container', descriptorDeferred: getReportingTaskPropertyDescriptor, - controllerServiceCreatedDeferred: function(response){ - return nf.ControllerServices.loadControllerServices(controllerServicesUri, $('#controller-services-table')); + controllerServiceCreatedDeferred: function (response) { + return controllerServices.loadControllerServices(controllerServicesUri, $('#controller-services-table')); }, goToServiceDeferred: goToServiceFromProperty }); @@ -391,8 +432,8 @@ nf.ReportingTask = (function () { supportsGoTo: true, dialogContainer: '#new-reporting-task-property-container', descriptorDeferred: getReportingTaskPropertyDescriptor, - controllerServiceCreatedDeferred: function(response){ - return nf.ControllerServices.loadControllerServices(controllerServicesUri, $('#controller-services-table')); + controllerServiceCreatedDeferred: function (response) { + return controllerServices.loadControllerServices(controllerServicesUri, $('#controller-services-table')); }, goToServiceDeferred: goToServiceFromProperty }); @@ -434,8 +475,8 @@ nf.ReportingTask = (function () { } // populate the reporting task settings - nf.Common.populateField('reporting-task-id', reportingTask['id']); - nf.Common.populateField('reporting-task-type', nf.Common.substringAfterLast(reportingTask['type'], '.')); + common.populateField('reporting-task-id', reportingTask['id']); + common.populateField('reporting-task-type', common.substringAfterLast(reportingTask['type'], '.')); $('#reporting-task-name').val(reportingTask['name']); $('#reporting-task-enabled').removeClass('checkbox-unchecked checkbox-checked').addClass(reportingTaskEnableStyle); $('#reporting-task-comments').val(reportingTask['comments']); @@ -489,10 +530,10 @@ nf.ReportingTask = (function () { // close all fields currently being edited $('#reporting-task-properties').propertytable('saveRow'); - // save the reporting task - saveReportingTask(reportingTaskEntity).done(function (response) { - // reload the reporting task - nf.ControllerService.reloadReferencedServices(getControllerServicesTable(), response.component); + // save the reporting task + saveReportingTask(reportingTaskEntity).done(function (response) { + // reload the reporting task + controllerService.reloadReferencedServices(getControllerServicesTable(), response.component); // close the details panel $('#reporting-task-configuration').modal('hide'); @@ -515,7 +556,7 @@ nf.ReportingTask = (function () { }]; // determine if we should show the advanced button - if (nf.Common.isDefinedAndNotNull(reportingTask.customUiUrl) && reportingTask.customUiUrl !== '') { + if (common.isDefinedAndNotNull(reportingTask.customUiUrl) && reportingTask.customUiUrl !== '') { buttons.push({ buttonText: 'Advanced', clazz: 'fa fa-cog button-icon', @@ -534,14 +575,14 @@ nf.ReportingTask = (function () { $('#shell-close-button').click(); // show the custom ui - nf.CustomUi.showCustomUi(reportingTaskEntity, reportingTask.customUiUrl, true).done(function () { + customUi.showCustomUi(reportingTaskEntity, reportingTask.customUiUrl, true).done(function () { // once the custom ui is closed, reload the reporting task - nf.ReportingTask.reload(reportingTaskEntity.id).done(function (response) { - nf.ControllerService.reloadReferencedServices(getControllerServicesTable(), response.reportingTask); + nfReportingTask.reload(reportingTaskEntity.id).done(function (response) { + controllerService.reloadReferencedServices(getControllerServicesTable(), response.reportingTask); }); // show the settings - nf.Settings.showSettings(); + nfSettings.showSettings(); }); }; @@ -551,7 +592,7 @@ nf.ReportingTask = (function () { // determine if changes have been made if (isSaveRequired()) { // see if those changes should be saved - nf.Dialog.showYesNoDialog({ + dialog.showYesNoDialog({ headerText: 'Save', dialogContent: 'Save changes before opening the advanced configuration?', noHandler: openCustomUi, @@ -583,7 +624,7 @@ nf.ReportingTask = (function () { $('#reporting-task-configuration').modal('show'); $('#reporting-task-properties').propertytable('resetTableSize'); - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); }, /** @@ -632,10 +673,10 @@ nf.ReportingTask = (function () { var reportingTaskHistory = historyResponse[0].componentHistory; // populate the reporting task settings - nf.Common.populateField('reporting-task-id', reportingTask['id']); - nf.Common.populateField('reporting-task-type', nf.Common.substringAfterLast(reportingTask['type'], '.')); - nf.Common.populateField('read-only-reporting-task-name', reportingTask['name']); - nf.Common.populateField('read-only-reporting-task-comments', reportingTask['comments']); + common.populateField('reporting-task-id', reportingTask['id']); + common.populateField('reporting-task-type', common.substringAfterLast(reportingTask['type'], '.')); + common.populateField('read-only-reporting-task-name', reportingTask['name']); + common.populateField('read-only-reporting-task-comments', reportingTask['comments']); // make the scheduling strategy human readable var schedulingStrategy = reportingTask['schedulingStrategy']; @@ -644,8 +685,8 @@ nf.ReportingTask = (function () { } else { schedulingStrategy = "Timer driven"; } - nf.Common.populateField('read-only-reporting-task-scheduling-strategy', schedulingStrategy); - nf.Common.populateField('read-only-reporting-task-scheduling-period', reportingTask['schedulingPeriod']); + common.populateField('read-only-reporting-task-scheduling-strategy', schedulingStrategy); + common.populateField('read-only-reporting-task-scheduling-period', reportingTask['schedulingPeriod']); var buttons = [{ buttonText: 'Ok', @@ -663,7 +704,7 @@ nf.ReportingTask = (function () { }]; // determine if we should show the advanced button - if (nf.Common.isDefinedAndNotNull(nf.CustomUi) && nf.Common.isDefinedAndNotNull(reportingTask.customUiUrl) && reportingTask.customUiUrl !== '') { + if (common.isDefinedAndNotNull(customUi) && common.isDefinedAndNotNull(reportingTask.customUiUrl) && reportingTask.customUiUrl !== '') { buttons.push({ buttonText: 'Advanced', clazz: 'fa fa-cog button-icon', @@ -681,8 +722,8 @@ nf.ReportingTask = (function () { $('#shell-close-button').click(); // show the custom ui - nf.CustomUi.showCustomUi(reportingTaskEntity, reportingTask.customUiUrl, false).done(function() { - nf.Settings.showSettings(); + customUi.showCustomUi(reportingTaskEntity, reportingTask.customUiUrl, false).done(function () { + nfSettings.showSettings(); }); } } @@ -736,9 +777,9 @@ nf.ReportingTask = (function () { dataType: 'json' }).done(function (response) { renderReportingTask(response); - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); }, - + /** * Prompts the user before attempting to delete the specified reporting task. * @@ -746,11 +787,11 @@ nf.ReportingTask = (function () { */ promptToDeleteReportingTask: function (reportingTaskEntity) { // prompt for deletion - nf.Dialog.showYesNoDialog({ + dialog.showYesNoDialog({ headerText: 'Delete Reporting Task', - dialogContent: 'Delete reporting task \'' + nf.Common.escapeHtml(reportingTaskEntity.component.name) + '\'?', + dialogContent: 'Delete reporting task \'' + common.escapeHtml(reportingTaskEntity.component.name) + '\'?', yesHandler: function () { - nf.ReportingTask.remove(reportingTaskEntity); + nfReportingTask.remove(reportingTaskEntity); } }); }, @@ -763,7 +804,7 @@ nf.ReportingTask = (function () { remove: function (reportingTaskEntity) { // prompt for removal? - var revision = nf.Client.getRevision(reportingTaskEntity); + var revision = client.getRevision(reportingTaskEntity); $.ajax({ type: 'DELETE', url: reportingTaskEntity.uri + '?' + $.param({ @@ -776,7 +817,9 @@ nf.ReportingTask = (function () { var reportingTaskGrid = $('#reporting-tasks-table').data('gridInstance'); var reportingTaskData = reportingTaskGrid.getData(); reportingTaskData.deleteItem(reportingTaskEntity.id); - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); } }; -}()); + + return nfReportingTask; +})); diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-selectable.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-selectable.js index 13cf3f54f8..d418b01f14 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-selectable.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-selectable.js @@ -15,18 +15,34 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.Selectable = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['d3', + 'nf.ng.Bridge', + 'nf.ContextMenu'], + function (d3, angularBridge, contextMenu) { + return (nf.Selectable = factory(d3, angularBridge, contextMenu)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.Selectable = + factory(require('d3'), + require('nf.ng.Bridge'), + require('nf.ContextMenu'))); + } else { + nf.Selectable = factory(root.d3, + root.nf.ng.Bridge, + root.nf.ContextMenu); + } +}(this, function (d3, angularBridge, contextMenu) { + 'use strict'; - return { - init: function () { + var nfSelectable = { - }, - select: function (g) { // hide any context menus as necessary - nf.ContextMenu.hide(); + contextMenu.hide(); // only need to update selection if necessary if (!g.classed('selected')) { @@ -44,18 +60,26 @@ nf.Selectable = (function () { } } - // inform Angular app that values have changed - nf.ng.Bridge.digest(); + // inform Angular app that values have changed since the + // enabled operate palette buttons are based off of the selection + angularBridge.digest(); // stop propagation d3.event.stopPropagation(); }, - + + /** + * Activates the select behavior for the components in the specified selection. + * + * @param {selection} components + */ activate: function (components) { components.on('mousedown.selection', function () { // get the clicked component to update selection - nf.Selectable.select(d3.select(this)); + nfSelectable.select(d3.select(this)); }); } }; -}()); \ No newline at end of file + + return nfSelectable; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js index 0a19a7ebb6..d2566e1b0f 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js @@ -15,9 +15,59 @@ * limitations under the License. */ -/* global nf, Slick, d3 */ +/* global define, module, require, exports */ + +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'Slick', + 'd3', + 'nf.Client', + 'nf.Dialog', + 'nf.Common', + 'nf.CanvasUtils', + 'nf.ControllerServices', + 'nf.ErrorHandler', + 'nf.ReportingTask', + 'nf.Shell', + 'nf.ComponentState', + 'nf.PolicyManagement'], + function ($, Slick, d3, client, dialog, common, canvasUtils, controllerServices, errorHandler, reportingTask, shell, componentState, policyManagement) { + return (nf.Settings = factory($, Slick, d3, client, dialog, common, canvasUtils, controllerServices, errorHandler, reportingTask, shell, componentState, policyManagement)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.Settings = + factory(require('jquery'), + require('Slick'), + require('d3'), + require('nf.Client'), + require('nf.Dialog'), + require('nf.Common'), + require('nf.CanvasUtils'), + require('nf.ControllerServices'), + require('nf.ErrorHandler'), + require('nf.ReportingTask'), + require('nf.Shell'), + require('nf.ComponentState'), + require('nf.PolicyManagement'))); + } else { + nf.Settings = factory(root.$, + root.Slick, + root.d3, + root.nf.Client, + root.nf.Dialog, + root.nf.Common, + root.nf.CanvasUtils, + root.nf.ControllerServices, + root.nf.ErrorHandler, + root.nf.ReportingTask, + root.nf.Shell, + root.nf.ComponentState, + root.nf.PolicyManagement); + } +}(this, function ($, Slick, d3, client, dialog, common, canvasUtils, controllerServices, errorHandler, reportingTask, shell, componentState, policyManagement) { + 'use strict'; -nf.Settings = (function () { var config = { urls: { @@ -57,7 +107,7 @@ nf.Settings = (function () { // marshal the configuration details var configuration = marshalConfiguration(); var entity = { - 'revision': nf.Client.getRevision({ + 'revision': client.getRevision({ 'revision': { 'version': version } @@ -74,7 +124,7 @@ nf.Settings = (function () { contentType: 'application/json' }).done(function (response) { // close the settings dialog - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Settings', dialogContent: 'Settings successfully applied.' }); @@ -83,7 +133,7 @@ nf.Settings = (function () { $('#settings-save').off('click').on('click', function () { saveSettings(response.revision.version); }); - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); } /** @@ -161,7 +211,7 @@ nf.Settings = (function () { * @param item reporting task type */ var isSelectable = function (item) { - return nf.Common.isBlank(item.usageRestriction) || nf.Common.canAccessRestrictedComponents(); + return common.isBlank(item.usageRestriction) || common.canAccessRestrictedComponents(); }; /** @@ -197,7 +247,7 @@ nf.Settings = (function () { return ''; } - return nf.Common.substringAfterLast(dataContext.component.type, '.'); + return common.substringAfterLast(dataContext.component.type, '.'); }; /** @@ -209,41 +259,41 @@ nf.Settings = (function () { var sort = function (sortDetails, data) { // defines a function for sorting var comparer = function (a, b) { - if(a.permissions.canRead && b.permissions.canRead) { + if (a.permissions.canRead && b.permissions.canRead) { if (sortDetails.columnId === 'moreDetails') { var aBulletins = 0; - if (!nf.Common.isEmpty(a.bulletins)) { + if (!common.isEmpty(a.bulletins)) { aBulletins = a.bulletins.length; } var bBulletins = 0; - if (!nf.Common.isEmpty(b.bulletins)) { + if (!common.isEmpty(b.bulletins)) { bBulletins = b.bulletins.length; } return aBulletins - bBulletins; } else if (sortDetails.columnId === 'type') { - var aType = nf.Common.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? nf.Common.substringAfterLast(a.component[sortDetails.columnId], '.') : ''; - var bType = nf.Common.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? nf.Common.substringAfterLast(b.component[sortDetails.columnId], '.') : ''; + var aType = common.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? common.substringAfterLast(a.component[sortDetails.columnId], '.') : ''; + var bType = common.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? common.substringAfterLast(b.component[sortDetails.columnId], '.') : ''; return aType === bType ? 0 : aType > bType ? 1 : -1; } else if (sortDetails.columnId === 'state') { var aState = 'Invalid'; - if (nf.Common.isEmpty(a.component.validationErrors)) { - aState = nf.Common.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : ''; + if (common.isEmpty(a.component.validationErrors)) { + aState = common.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : ''; } var bState = 'Invalid'; - if (nf.Common.isEmpty(b.component.validationErrors)) { - bState = nf.Common.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : ''; + if (common.isEmpty(b.component.validationErrors)) { + bState = common.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : ''; } return aState === bState ? 0 : aState > bState ? 1 : -1; } else { - var aString = nf.Common.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : ''; - var bString = nf.Common.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : ''; + var aString = common.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : ''; + var bString = common.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : ''; return aString === bString ? 0 : aString > bString ? 1 : -1; } } else { - if (!a.permissions.canRead && !b.permissions.canRead){ + if (!a.permissions.canRead && !b.permissions.canRead) { return 0; } - if(a.permissions.canRead){ + if (a.permissions.canRead) { return 1; } else { return -1; @@ -272,7 +322,7 @@ nf.Settings = (function () { var reportingTaskTypesGrid = $('#reporting-task-types-table').data('gridInstance'); // ensure the grid has been initialized - if (nf.Common.isDefinedAndNotNull(reportingTaskTypesGrid)) { + if (common.isDefinedAndNotNull(reportingTaskTypesGrid)) { var reportingTaskTypesData = reportingTaskTypesGrid.getData(); // update the search criteria @@ -354,7 +404,7 @@ nf.Settings = (function () { // ensure something was selected if (selectedTaskType === '') { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Settings', dialogContent: 'The type of reporting task to create must be selected.' }); @@ -371,7 +421,7 @@ nf.Settings = (function () { var addReportingTask = function (reportingTaskType) { // build the reporting task entity var reportingTaskEntity = { - 'revision': nf.Client.getRevision({ + 'revision': client.getRevision({ 'revision': { 'version': 0 } @@ -402,7 +452,7 @@ nf.Settings = (function () { var row = reportingTaskData.getRowById(reportingTaskEntity.id); reportingTaskGrid.setSelectedRows([row]); reportingTaskGrid.scrollRowIntoView(row); - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); // hide the dialog $('#new-reporting-task-dialog').modal('hide'); @@ -440,7 +490,7 @@ nf.Settings = (function () { id: 'type', name: 'Type', field: 'label', - formatter: nf.Common.typeFormatter, + formatter: common.typeFormatter, sortable: false, resizable: true }, @@ -474,11 +524,11 @@ nf.Settings = (function () { var reportingTaskType = reportingTaskTypesGrid.getDataItem(reportingTaskTypeIndex); // set the reporting task type description - if (nf.Common.isDefinedAndNotNull(reportingTaskType)) { + if (common.isDefinedAndNotNull(reportingTaskType)) { // show the selected reporting task $('#reporting-task-description-container').show(); - if (nf.Common.isBlank(reportingTaskType.description)) { + if (common.isBlank(reportingTaskType.description)) { $('#reporting-task-type-description') .attr('title', '') .html('No description specified'); @@ -507,7 +557,7 @@ nf.Settings = (function () { } }); reportingTaskTypesGrid.onViewportChanged.subscribe(function (e, args) { - nf.Common.cleanUpTooltips($('#reporting-task-types-table'), 'div.view-usage-restriction'); + common.cleanUpTooltips($('#reporting-task-types-table'), 'div.view-usage-restriction'); }); // wire up the dataview to the grid @@ -534,8 +584,8 @@ nf.Settings = (function () { var item = reportingTaskTypesData.getItemById(rowId); // show the tooltip - if (nf.Common.isDefinedAndNotNull(item.usageRestriction)) { - usageRestriction.qtip($.extend({}, nf.Common.config.tooltipConfig, { + if (common.isDefinedAndNotNull(item.usageRestriction)) { + usageRestriction.qtip($.extend({}, common.config.tooltipConfig, { content: item.usageRestriction, position: { container: $('#summary'), @@ -568,10 +618,10 @@ nf.Settings = (function () { // add the documented type reportingTaskTypesData.addItem({ id: id++, - label: nf.Common.substringAfterLast(documentedType.type, '.'), + label: common.substringAfterLast(documentedType.type, '.'), type: documentedType.type, - description: nf.Common.escapeHtml(documentedType.description), - usageRestriction: nf.Common.escapeHtml(documentedType.usageRestriction), + description: common.escapeHtml(documentedType.description), + usageRestriction: common.escapeHtml(documentedType.usageRestriction), tags: documentedType.tags.join(', ') }); @@ -593,36 +643,36 @@ nf.Settings = (function () { select: applyReportingTaskTypeFilter, remove: applyReportingTaskTypeFilter }); - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); // initialize the reporting task dialog $('#new-reporting-task-dialog').modal({ scrollableContentStyle: 'scrollable', headerText: 'Add Reporting Task', buttons: [{ - buttonText: 'Add', - color: { - base: '#728E9B', - hover: '#004849', - text: '#ffffff' - }, - disabled: function () { - var selected = reportingTaskTypesGrid.getSelectedRows(); + buttonText: 'Add', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, + disabled: function () { + var selected = reportingTaskTypesGrid.getSelectedRows(); - if (selected.length > 0) { - // grid configured with multi-select = false - var item = reportingTaskTypesGrid.getDataItem(selected[0]); - return isSelectable(item) === false; - } else { - return reportingTaskTypesGrid.getData().getLength() === 0; - } - }, - handler: { - click: function () { - addSelectedReportingTask(); - } + if (selected.length > 0) { + // grid configured with multi-select = false + var item = reportingTaskTypesGrid.getDataItem(selected[0]); + return isSelectable(item) === false; + } else { + return reportingTaskTypesGrid.getData().getLength() === 0; } }, + handler: { + click: function () { + addSelectedReportingTask(); + } + } + }, { buttonText: 'Cancel', color: { @@ -682,8 +732,8 @@ nf.Settings = (function () { // always include a button to view the usage markup += '
    '; - var hasErrors = !nf.Common.isEmpty(dataContext.component.validationErrors); - var hasBulletins = !nf.Common.isEmpty(dataContext.bulletins); + var hasErrors = !common.isEmpty(dataContext.component.validationErrors); + var hasBulletins = !common.isEmpty(dataContext.bulletins); if (hasErrors) { markup += '
    '; @@ -694,7 +744,7 @@ nf.Settings = (function () { } if (hasErrors || hasBulletins) { - markup += ''; + markup += ''; } return markup; @@ -707,7 +757,7 @@ nf.Settings = (function () { // determine the appropriate label var icon = '', label = ''; - if (!nf.Common.isEmpty(dataContext.component.validationErrors)) { + if (!common.isEmpty(dataContext.component.validationErrors)) { label = 'Invalid'; icon = 'invalid fa fa-warning'; } else { @@ -725,13 +775,13 @@ nf.Settings = (function () { // include the active thread count if appropriate var activeThreadCount = ''; - if (nf.Common.isDefinedAndNotNull(dataContext.component.activeThreadCount) && dataContext.component.activeThreadCount > 0) { + if (common.isDefinedAndNotNull(dataContext.component.activeThreadCount) && dataContext.component.activeThreadCount > 0) { activeThreadCount = '(' + dataContext.component.activeThreadCount + ')'; } // format the markup var formattedValue = '
    '; - return formattedValue + '
    ' + nf.Common.escapeHtml(label) + '
    ' + nf.Common.escapeHtml(activeThreadCount) + '
    '; + return formattedValue + '
    ' + common.escapeHtml(label) + '
    ' + common.escapeHtml(activeThreadCount) + '
    '; }; var reportingTaskActionFormatter = function (row, cell, value, columnDef, dataContext) { @@ -744,7 +794,7 @@ nf.Settings = (function () { markup += '
    '; // support starting when stopped and no validation errors - if (dataContext.component.state === 'STOPPED' && nf.Common.isEmpty(dataContext.component.validationErrors)) { + if (dataContext.component.state === 'STOPPED' && common.isEmpty(dataContext.component.validationErrors)) { markup += '
    '; } } @@ -754,12 +804,12 @@ nf.Settings = (function () { } } - if (dataContext.permissions.canWrite && nf.Common.canModifyController()) { + if (dataContext.permissions.canWrite && common.canModifyController()) { markup += '
    '; } // allow policy configuration conditionally - if (nf.Canvas.isConfigurableAuthorizer() && nf.Common.canAccessTenants()) { + if (canvasUtils.isConfigurableAuthorizer() && common.canAccessTenants()) { markup += '
    '; } @@ -768,14 +818,37 @@ nf.Settings = (function () { // define the column model for the reporting tasks table var reportingTasksColumnModel = [ - {id: 'moreDetails', name: ' ', resizable: false, formatter: moreReportingTaskDetails, sortable: true, width: 90, maxWidth: 90, toolTip: 'Sorts based on presence of bulletins'}, + { + id: 'moreDetails', + name: ' ', + resizable: false, + formatter: moreReportingTaskDetails, + sortable: true, + width: 90, + maxWidth: 90, + toolTip: 'Sorts based on presence of bulletins' + }, {id: 'name', name: 'Name', sortable: true, resizable: true, formatter: nameFormatter}, {id: 'type', name: 'Type', sortable: true, resizable: true, formatter: typeFormatter}, - {id: 'state', name: 'Run Status', sortable: true, resizeable: true, formatter: reportingTaskRunStatusFormatter} + { + id: 'state', + name: 'Run Status', + sortable: true, + resizeable: true, + formatter: reportingTaskRunStatusFormatter + } ]; // action column should always be last - reportingTasksColumnModel.push({id: 'actions', name: ' ', resizable: false, formatter: reportingTaskActionFormatter, sortable: false, width: 90, maxWidth: 90}); + reportingTasksColumnModel.push({ + id: 'actions', + name: ' ', + resizable: false, + formatter: reportingTaskActionFormatter, + sortable: false, + width: 90, + maxWidth: 90 + }); // initialize the dataview var reportingTasksData = new Slick.Data.DataView({ @@ -811,35 +884,35 @@ nf.Settings = (function () { // determine the desired action if (reportingTasksGrid.getColumns()[args.cell].id === 'actions') { if (target.hasClass('edit-reporting-task')) { - nf.ReportingTask.showConfiguration(reportingTaskEntity); + reportingTask.showConfiguration(reportingTaskEntity); } else if (target.hasClass('start-reporting-task')) { - nf.ReportingTask.start(reportingTaskEntity); + reportingTask.start(reportingTaskEntity); } else if (target.hasClass('stop-reporting-task')) { - nf.ReportingTask.stop(reportingTaskEntity); + reportingTask.stop(reportingTaskEntity); } else if (target.hasClass('delete-reporting-task')) { - nf.ReportingTask.promptToDeleteReportingTask(reportingTaskEntity); + reportingTask.promptToDeleteReportingTask(reportingTaskEntity); } else if (target.hasClass('view-state-reporting-task')) { var canClear = reportingTaskEntity.component.state === 'STOPPED' && reportingTaskEntity.component.activeThreadCount === 0; - nf.ComponentState.showState(reportingTaskEntity, canClear); + componentState.showState(reportingTaskEntity, canClear); } else if (target.hasClass('edit-access-policies')) { // show the policies for this service - nf.PolicyManagement.showReportingTaskPolicy(reportingTaskEntity); + policyManagement.showReportingTaskPolicy(reportingTaskEntity); // close the settings dialog $('#shell-close-button').click(); } } else if (reportingTasksGrid.getColumns()[args.cell].id === 'moreDetails') { if (target.hasClass('view-reporting-task')) { - nf.ReportingTask.showDetails(reportingTaskEntity); + reportingTask.showDetails(reportingTaskEntity); } else if (target.hasClass('reporting-task-usage')) { // close the settings dialog $('#shell-close-button').click(); // open the documentation for this reporting task - nf.Shell.showPage('../nifi-docs/documentation?' + $.param({ - select: nf.Common.substringAfterLast(reportingTaskEntity.component.type, '.') + shell.showPage('../nifi-docs/documentation?' + $.param({ + select: common.substringAfterLast(reportingTaskEntity.component.type, '.') })).done(function () { - nf.Settings.showSettings(); + nfSettings.showSettings(); }); } } @@ -866,12 +939,12 @@ nf.Settings = (function () { var reportingTaskEntity = reportingTasksData.getItemById(taskId); // format the errors - var tooltip = nf.Common.formatUnorderedList(reportingTaskEntity.component.validationErrors); + var tooltip = common.formatUnorderedList(reportingTaskEntity.component.validationErrors); // show the tooltip - if (nf.Common.isDefinedAndNotNull(tooltip)) { + if (common.isDefinedAndNotNull(tooltip)) { errorIcon.qtip($.extend({}, - nf.Common.config.tooltipConfig, + common.config.tooltipConfig, { content: tooltip, position: { @@ -895,13 +968,13 @@ nf.Settings = (function () { var reportingTaskEntity = reportingTasksData.getItemById(taskId); // format the tooltip - var bulletins = nf.Common.getFormattedBulletins(reportingTaskEntity.bulletins); - var tooltip = nf.Common.formatUnorderedList(bulletins); + var bulletins = common.getFormattedBulletins(reportingTaskEntity.bulletins); + var tooltip = common.formatUnorderedList(bulletins); // show the tooltip - if (nf.Common.isDefinedAndNotNull(tooltip)) { + if (common.isDefinedAndNotNull(tooltip)) { bulletinIcon.qtip($.extend({}, - nf.Common.config.tooltipConfig, + common.config.tooltipConfig, { content: tooltip, position: { @@ -927,7 +1000,7 @@ nf.Settings = (function () { $('#read-only-maximum-timer-driven-thread-count-field').addClass('unset').text('Unauthorized'); $('#read-only-maximum-event-driven-thread-count-field').addClass('unset').text('Unauthorized'); }; - + var setEditable = function (editable) { if (editable) { $('#general-settings div.editable').show(); @@ -939,7 +1012,7 @@ nf.Settings = (function () { $('#settings-save').hide(); } }; - + var settings = $.Deferred(function (deferred) { $.ajax({ type: 'GET', @@ -979,21 +1052,21 @@ nf.Settings = (function () { } }); }).promise(); - + // load the controller services var controllerServicesUri = config.urls.api + '/flow/controller/controller-services'; - var controllerServices = nf.ControllerServices.loadControllerServices(controllerServicesUri, getControllerServicesTable()); + var controllerServicesXhr = controllerServices.loadControllerServices(controllerServicesUri, getControllerServicesTable()); // load the reporting tasks var reportingTasks = loadReportingTasks(); // return a deferred for all parts of the settings - return $.when(settings, controllerServices, reportingTasks).done(function (settingsResult, controllerServicesResult) { + return $.when(settings, controllerServicesXhr, reportingTasks).done(function (settingsResult, controllerServicesResult) { var controllerServicesResponse = controllerServicesResult[0]; // update the current time $('#settings-last-refreshed').text(controllerServicesResponse.currentTime); - }).fail(nf.ErrorHandler.handleAjaxError); + }).fail(errorHandler.handleAjaxError); }; /** @@ -1013,8 +1086,8 @@ nf.Settings = (function () { }); var reportingTasksElement = $('#reporting-tasks-table'); - nf.Common.cleanUpTooltips(reportingTasksElement, 'div.has-errors'); - nf.Common.cleanUpTooltips(reportingTasksElement, 'div.has-bulletins'); + common.cleanUpTooltips(reportingTasksElement, 'div.has-errors'); + common.cleanUpTooltips(reportingTasksElement, 'div.has-bulletins'); var reportingTasksGrid = reportingTasksElement.data('gridInstance'); var reportingTasksData = reportingTasksGrid.getData(); @@ -1031,7 +1104,7 @@ nf.Settings = (function () { */ var showSettings = function () { // show the settings dialog - nf.Shell.showContent('#settings').done(function () { + shell.showContent('#settings').done(function () { reset(); }); @@ -1039,7 +1112,7 @@ nf.Settings = (function () { $('#settings-tabs').find('.selected-tab').click(); // adjust the table size - nf.Settings.resetTableSize(); + nfSettings.resetTableSize(); }; /** @@ -1050,7 +1123,7 @@ nf.Settings = (function () { $('#settings-save').mouseout(); }; - return { + var nfSettings = { /** * Initializes the settings page. */ @@ -1077,9 +1150,9 @@ nf.Settings = (function () { $('#settings-save').show(); } else { var canModifyController = false; - if (nf.Common.isDefinedAndNotNull(nf.Common.currentUser)) { + if (common.isDefinedAndNotNull(common.currentUser)) { // only consider write permissions for creating new controller services/reporting tasks - canModifyController = nf.Common.currentUser.controllerPermissions.canWrite === true; + canModifyController = common.currentUser.controllerPermissions.canWrite === true; } if (canModifyController) { @@ -1102,7 +1175,7 @@ nf.Settings = (function () { } // resize the table - nf.Settings.resetTableSize(); + nfSettings.resetTableSize(); } } }); @@ -1117,13 +1190,13 @@ nf.Settings = (function () { var selectedTab = $('#settings-tabs li.selected-tab').text(); if (selectedTab === 'Controller Services') { var controllerServicesUri = config.urls.api + '/controller/controller-services'; - nf.ControllerServices.promptNewControllerService(controllerServicesUri, getControllerServicesTable()); + controllerServices.promptNewControllerService(controllerServicesUri, getControllerServicesTable()); } else if (selectedTab === 'Reporting Tasks') { $('#new-reporting-task-dialog').modal('show'); // reset the canvas size after the dialog is shown var reportingTaskTypesGrid = $('#reporting-task-types-table').data('gridInstance'); - if (nf.Common.isDefinedAndNotNull(reportingTaskTypesGrid)) { + if (common.isDefinedAndNotNull(reportingTaskTypesGrid)) { reportingTaskTypesGrid.setSelectedRows([0]); reportingTaskTypesGrid.resizeCanvas(); } @@ -1132,10 +1205,10 @@ nf.Settings = (function () { $('#reporting-task-type-filter').focus(); } }); - + // initialize each tab initGeneral(); - nf.ControllerServices.init(getControllerServicesTable()); + controllerServices.init(getControllerServicesTable(), nfSettings.showSettings); initReportingTasks(); }, @@ -1143,10 +1216,10 @@ nf.Settings = (function () { * Update the size of the grid based on its container's current size. */ resetTableSize: function () { - nf.ControllerServices.resetTableSize(getControllerServicesTable()); + controllerServices.resetTableSize(getControllerServicesTable()); var reportingTasksGrid = $('#reporting-tasks-table').data('gridInstance'); - if (nf.Common.isDefinedAndNotNull(reportingTasksGrid)) { + if (common.isDefinedAndNotNull(reportingTasksGrid)) { reportingTasksGrid.resizeCanvas(); } }, @@ -1167,7 +1240,7 @@ nf.Settings = (function () { /** * Selects the specified controller service. - * + * * @param {string} controllerServiceId */ selectControllerService: function (controllerServiceId) { @@ -1180,7 +1253,7 @@ nf.Settings = (function () { controllerServiceGrid.scrollRowIntoView(row); // select the controller services tab - $('#settings-tabs').find('li:eq(1)').click(); + $('#settings-tabs').find('li:eq(1)').click(); }, /** @@ -1189,9 +1262,9 @@ nf.Settings = (function () { * @param {object} controllerServiceBulletins * @param {object} reportingTaskBulletins */ - setBulletins: function(controllerServiceBulletins, reportingTaskBulletins) { + setBulletins: function (controllerServiceBulletins, reportingTaskBulletins) { if ($('#controller-services-table').data('gridInstance')) { - nf.ControllerServices.setBulletins(getControllerServicesTable(), controllerServiceBulletins); + controllerServices.setBulletins(getControllerServicesTable(), controllerServiceBulletins); } // reporting tasks @@ -1200,7 +1273,7 @@ nf.Settings = (function () { reportingTasksData.beginUpdate(); // if there are some bulletins process them - if (!nf.Common.isEmpty(reportingTaskBulletins)) { + if (!common.isEmpty(reportingTaskBulletins)) { var reportingTaskBulletinsBySource = d3.nest() .key(function (d) { return d.sourceId; @@ -1209,7 +1282,7 @@ nf.Settings = (function () { reportingTaskBulletinsBySource.forEach(function (sourceId, sourceBulletins) { var reportingTask = reportingTasksData.getItemById(sourceId); - if (nf.Common.isDefinedAndNotNull(reportingTask)) { + if (common.isDefinedAndNotNull(reportingTask)) { reportingTasksData.updateItem(sourceId, $.extend(reportingTask, { bulletins: sourceBulletins })); @@ -1227,4 +1300,6 @@ nf.Settings = (function () { reportingTasksData.endUpdate(); } }; -}()); \ No newline at end of file + + return nfSettings; +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-snippet.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-snippet.js index 4275b36787..f8c6f83e6d 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-snippet.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-snippet.js @@ -15,9 +15,31 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.Snippet = (function () { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'd3', + 'nf.CanvasUtils', + 'nf.Client'], + function ($, d3, canvasUtils, client) { + return (nf.Snippet = factory($, d3, canvasUtils, client)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.Snippet = + factory(require('jquery'), + require('d3'), + require('nf.CanvasUtils'), + require('nf.Client'))); + } else { + nf.Snippet = factory(root.$, + root.d3, + root.nf.CanvasUtils, + root.nf.Client); + } +}(this, function ($, d3, canvasUtils, client) { + 'use strict'; var config = { urls: { @@ -27,14 +49,15 @@ nf.Snippet = (function () { }; return { + /** * Marshals snippet from the specified selection. - * + * * @argument {selection} selection The selection to marshal */ marshal: function (selection) { var snippet = { - parentGroupId: nf.Canvas.getGroupId(), + parentGroupId: canvasUtils.getGroupId(), processors: {}, funnels: {}, inputPorts: {}, @@ -49,31 +72,31 @@ nf.Snippet = (function () { selection.each(function (d) { var selected = d3.select(this); - if (nf.CanvasUtils.isProcessor(selected)) { - snippet.processors[d.id] = nf.Client.getRevision(selected.datum()); - } else if (nf.CanvasUtils.isFunnel(selected)) { - snippet.funnels[d.id] = nf.Client.getRevision(selected.datum()); - } else if (nf.CanvasUtils.isLabel(selected)) { - snippet.labels[d.id] = nf.Client.getRevision(selected.datum()); - } else if (nf.CanvasUtils.isInputPort(selected)) { - snippet.inputPorts[d.id] = nf.Client.getRevision(selected.datum()); - } else if (nf.CanvasUtils.isOutputPort(selected)) { - snippet.outputPorts[d.id] = nf.Client.getRevision(selected.datum()); - } else if (nf.CanvasUtils.isProcessGroup(selected)) { - snippet.processGroups[d.id] = nf.Client.getRevision(selected.datum()); - } else if (nf.CanvasUtils.isRemoteProcessGroup(selected)) { - snippet.remoteProcessGroups[d.id] = nf.Client.getRevision(selected.datum()); - } else if (nf.CanvasUtils.isConnection(selected)) { - snippet.connections[d.id] = nf.Client.getRevision(selected.datum()); + if (canvasUtils.isProcessor(selected)) { + snippet.processors[d.id] = client.getRevision(selected.datum()); + } else if (canvasUtils.isFunnel(selected)) { + snippet.funnels[d.id] = client.getRevision(selected.datum()); + } else if (canvasUtils.isLabel(selected)) { + snippet.labels[d.id] = client.getRevision(selected.datum()); + } else if (canvasUtils.isInputPort(selected)) { + snippet.inputPorts[d.id] = client.getRevision(selected.datum()); + } else if (canvasUtils.isOutputPort(selected)) { + snippet.outputPorts[d.id] = client.getRevision(selected.datum()); + } else if (canvasUtils.isProcessGroup(selected)) { + snippet.processGroups[d.id] = client.getRevision(selected.datum()); + } else if (canvasUtils.isRemoteProcessGroup(selected)) { + snippet.remoteProcessGroups[d.id] = client.getRevision(selected.datum()); + } else if (canvasUtils.isConnection(selected)) { + snippet.connections[d.id] = client.getRevision(selected.datum()); } }); return snippet; }, - + /** * Creates a snippet. - * + * * @argument {object} snippet The snippet */ create: function (snippet) { @@ -89,10 +112,10 @@ nf.Snippet = (function () { contentType: 'application/json' }); }, - + /** * Copies the snippet to the specified group and origin. - * + * * @argument {string} snippetId The snippet id * @argument {object} origin The origin */ @@ -105,16 +128,16 @@ nf.Snippet = (function () { return $.ajax({ type: 'POST', - url: config.urls.processGroups + '/' + encodeURIComponent(nf.Canvas.getGroupId()) + '/snippet-instance', + url: config.urls.processGroups + '/' + encodeURIComponent(canvasUtils.getGroupId()) + '/snippet-instance', data: JSON.stringify(copySnippetRequestEntity), dataType: 'json', contentType: 'application/json' }); }, - + /** * Removes the specified snippet. - * + * * @argument {string} snippetId The snippet id */ remove: function (snippetId) { @@ -123,10 +146,10 @@ nf.Snippet = (function () { url: config.urls.snippets + '/' + encodeURIComponent(snippetId) }); }, - + /** * Moves the snippet into the specified group. - * + * * @argument {string} snippetId The snippet id * @argument {string} newGroupId The new group id */ @@ -147,4 +170,4 @@ nf.Snippet = (function () { }); } }; -}()); \ No newline at end of file +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster-table.js index 93fff60866..b9b24db53a 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster-table.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster-table.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, define, module, require, exports */ +/* global define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster.js index 32e7bb0e11..543c8dc4c6 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, top, define, module, require, exports */ +/* global top, define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters-table.js index ade82363ea..95942479d0 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters-table.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters-table.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, define, module, require, exports */ +/* global define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters.js index be321e6306..0a16013925 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, top, define, module, require, exports */ +/* global top, define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-model.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-model.js index a2132ec2c4..bf1e34a591 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-model.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-model.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, define, module, require, exports */ +/* global define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-table.js index 38f21e8e26..16b0007bb4 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-table.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-table.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, top, define, module, require, exports */ +/* global top, define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history.js index 7f737244a7..9370c7aae9 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, top, define, module, require, exports */ +/* global top, define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/login/nf-login.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/login/nf-login.js index a18d5d7aa6..1cdab114e3 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/login/nf-login.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/login/nf-login.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, top, define, module, require, exports */ +/* global top, define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { @@ -33,7 +33,10 @@ require('nf.Dialog'), require('nf.Storage'))); } else { - nf.Login = factory(root.$, root.nf.Common, root.nf.Dialog, root.nf.Storage); + nf.Login = factory(root.$, + root.nf.Common, + root.nf.Dialog, + root.nf.Storage); } }(this, function ($, common, dialog, storage) { 'use strict'; diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ajax-setup.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ajax-setup.js index eaf61cf223..16c20e3587 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ajax-setup.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ajax-setup.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, define, module, require, exports */ +/* global define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-client.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-client.js index aedd555465..812f20a527 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-client.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-client.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, define, module, require, exports */ +/* global define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-cluster-summary.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-cluster-summary.js index 1352843676..a06b7711f2 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-cluster-summary.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-cluster-summary.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, define, module, require, exports */ +/* global define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js index 395b5c886f..58e5b639d0 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js @@ -15,24 +15,27 @@ * limitations under the License. */ -/* global nf, define, module, require, exports, parseFloat */ +/* global define, module, require, exports, parseFloat */ // Define a common utility class used across the entire application. (function (root, factory) { if (typeof define === 'function' && define.amd) { define(['jquery', + 'd3', 'nf.Storage'], - function ($, storage) { - return (nf.Common = factory($, storage)); + function ($, d3, storage) { + return (nf.Common = factory($, d3, storage)); }); } else if (typeof exports === 'object' && typeof module === 'object') { module.exports = (nf.Common = factory(require('jquery'), + require('d3'), require('nf.Storage'))); } else { nf.Common = factory(root.$, + root.d3, root.nf.Storage); } -}(this, function ($, storage) { +}(this, function ($, d3, storage) { 'use strict'; $(document).ready(function () { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js index c1f42b7721..d06d8a321a 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, define, module, require, exports */ +/* global define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-dialog.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-dialog.js index ed6667ce48..fff81b4c77 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-dialog.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-dialog.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, define, module, require, exports */ +/* global define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-error-handler.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-error-handler.js index f604fecec5..0929b76128 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-error-handler.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-error-handler.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, define, module, require, exports */ +/* global define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-config.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-config.js index b0406aac20..7ffc56021c 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-config.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-config.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, define, module, require, exports */ +/* global define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-controller.js index ae93c95125..fb89f09e27 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-controller.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-controller.js @@ -15,28 +15,47 @@ * limitations under the License. */ -/* global nf, define, module, require, exports */ +/* global define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { - define(['nf.ng.Bridge'], - function (angularBridge) { - return (nf.ng.AppCtrl = factory(angularBridge)); + define(['nf.ng.Bridge', + 'nf.Common', + 'nf.CanvasUtils', + 'nf.ClusterSummary', + 'nf.Actions'], + function (angularBridge, canvasUtils, common, clusterSummary, actions) { + return (nf.ng.AppCtrl = factory(angularBridge, canvasUtils, common, clusterSummary, actions)); }); } else if (typeof exports === 'object' && typeof module === 'object') { - module.exports = (nf.ng.AppCtrl = factory(require('nf.ng.Bridge'))); + module.exports = (nf.ng.AppCtrl = + factory(require('nf.ng.Bridge'), + require('nf.CanvasUtils'), + require('nf.Common'), + require('nf.ClusterSummary'), + require('nf.Actions'))); } else { - nf.ng.AppCtrl = factory(root.nf.ng.Bridge); + nf.ng.AppCtrl = factory(root.nf.ng.Bridge, + root.nf.CanvasUtils, + root.nf.Common, + root.nf.ClusterSummary, + root.nf.Actions); } -}(this, function (angularBridge) { +}(this, function (angularBridge, canvasUtils, common, clusterSummary, actions) { 'use strict'; return function ($scope, serviceProvider) { 'use strict'; function AppCtrl(serviceProvider) { - //global nf namespace for reference throughout angular app - this.nf = nf; + //add essential modules to the scope for availability throughout the angular container + this.nf = { + "Common": common, + "ClusterSummary": clusterSummary, + "Actions": actions, + "CanvasUtils": canvasUtils, + }; + //any registered angular service is available through the serviceProvider this.serviceProvider = serviceProvider; } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-bridge.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-bridge.js index 92de4ec0a6..8d50f64435 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-bridge.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-bridge.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, define, module, require, exports */ +/* global define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-service-provider.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-service-provider.js index acdaba5729..958360267e 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-service-provider.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-service-provider.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, define, module, require, exports */ +/* global define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-processor-details.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-processor-details.js index 87b1e6052a..3130c8618e 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-processor-details.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-processor-details.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, define, module, require, exports */ +/* global define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js index d3644addd8..98605725c3 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js @@ -15,26 +15,23 @@ * limitations under the License. */ -/* global nf, define, module, require, exports */ +/* global define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { define(['jquery', - 'nf.Common', - 'nf.ContextMenu'], - function ($, common, contextMenu) { - return (nf.Shell = factory($, common, contextMenu)); + 'nf.Common'], + function ($, common) { + return (nf.Shell = factory($, common)); }); } else if (typeof exports === 'object' && typeof module === 'object') { module.exports = (nf.Shell = factory(require('jquery'), - require('nf.Common'), - require('nf.ContextMenu'))); + require('nf.Common'))); } else { nf.Shell = factory(root.$, - root.nf.Common, - root.nf.ContextMenu); + root.nf.Common); } -}(this, function ($, common, contextMenu) { +}(this, function ($, common) { 'use strict'; $(document).ready(function () { @@ -70,9 +67,19 @@ var showPageResize = null; var showContentResize = null; + var nfContextMenu = null; return { + /** + * Initialize the shell. + * + * @param contextMenu The reference to the contextMenu controller. + */ + init: function (contextMenu) { + nfContextMenu = contextMenu; + }, + resizeContent: function (shell) { var contentContainer = shell.find('.shell-content-container'); contentContainer.css({ @@ -100,8 +107,8 @@ */ showPage: function (uri, canUndock) { // if the context menu is on this page, attempt to close - if (common.isDefinedAndNotNull(contextMenu)) { - contextMenu.hide(); + if (common.isDefinedAndNotNull(nfContextMenu)) { + nfContextMenu.hide(); } return $.Deferred(function (deferred) { @@ -154,8 +161,8 @@ */ showContent: function (domId) { // if the context menu is on this page, attempt to close - if (common.isDefinedAndNotNull(contextMenu)) { - contextMenu.hide(); + if (common.isDefinedAndNotNull(nfContextMenu)) { + nfContextMenu.hide(); } return $.Deferred(function (deferred) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js index 04fbf00472..26243197dc 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, define, module, require, exports */ +/* global define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-storage.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-storage.js index b96d61efaf..56785f30d7 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-storage.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-storage.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, define, module, require, exports */ +/* global define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-universal-capture.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-universal-capture.js index ffadf646cf..4406918712 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-universal-capture.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-universal-capture.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, define, module, require, exports */ +/* global define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js index 62e36c6a8e..f46d287a60 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, top, define, module, require, exports */ +/* global top, define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-table.js index 3d0141b2bc..5bbaa09888 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-table.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-table.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, top, define, module, require, exports */ +/* global top, define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { @@ -1270,7 +1270,7 @@ */ getEventDetails: function (eventId, clusterNodeId) { var url; - if (nf.Common.isDefinedAndNotNull(clusterNodeId)) { + if (common.isDefinedAndNotNull(clusterNodeId)) { url = config.urls.provenanceEvents + encodeURIComponent(eventId) + '?' + $.param({ clusterNodeId: clusterNodeId }); @@ -1282,7 +1282,7 @@ type: 'GET', url: url, dataType: 'json' - }).fail(nf.Common.handleAjaxError); + }).fail(errorHandler.handleAjaxError); }, /** diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance.js index 9dd99831dd..fd8f7dbf05 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, top, define, module, require, exports */ +/* global top, define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-cluster-search.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-cluster-search.js index b4fa88b036..b9eeb70139 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-cluster-search.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-cluster-search.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, define, module, require, exports */ +/* global define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js index c61dee53ab..4a5ae2205c 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js @@ -14,7 +14,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -/* global nf, top, define, module, require, exports */ +/* global top, define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { @@ -1065,8 +1065,8 @@ // determine the desired action if (processGroupsGrid.getColumns()[args.cell].id === 'actions') { if (target.hasClass('go-to')) { - if (common.isDefinedAndNotNull(parent.nf) && common.isDefinedAndNotNull(parent.nf.CanvasUtils) && common.isDefinedAndNotNull(parent.nf.Shell)) { - parent.nf.CanvasUtils.enterGroup(item.id); + if (common.isDefinedAndNotNull(parent.nf) && common.isDefinedAndNotNull(parent.nf.ProcessGroup) && common.isDefinedAndNotNull(parent.nf.Shell)) { + parent.nf.ProcessGroup.enterGroup(item.id); parent.$('#shell-close-button').click(); } } else if (target.hasClass('show-process-group-status-history')) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary.js index 826c4a9f6c..f8686634dc 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, define, module, require, exports */ +/* global define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates-table.js index 33722b56f6..65d9ada2d7 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates-table.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates-table.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, define, module, require, exports */ +/* global define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { @@ -293,7 +293,7 @@ // allow policy configuration conditionally if embedded in if (top !== window && common.canAccessTenants()) { - if (common.isDefinedAndNotNull(parent.nf) && common.isDefinedAndNotNull(parent.nf.Canvas) && parent.nf.Canvas.isConfigurableAuthorizer()) { + if (common.isDefinedAndNotNull(parent.nf) && common.isDefinedAndNotNull(parent.nf.CanvasUtils) && parent.nf.CanvasUtils.isConfigurableAuthorizer()) { markup += '
    '; } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates.js index 15af39c53e..a54e3c2b0f 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, top, define, module, require, exports */ +/* global top, define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users-table.js index 13cff49517..e2d00b013a 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users-table.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users-table.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, define, module, require, exports */ +/* global define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) { @@ -79,7 +79,7 @@ url: user.uri + '?' + $.param(client.getRevision(user)), dataType: 'json' }).done(function () { - self.loadUsersTable(); + nfUsersTable.loadUsersTable(); }).fail(errorHandler.handleAjaxError); // hide the dialog @@ -252,7 +252,7 @@ }); $.when.apply(window, xhrs).always(function () { - self.loadUsersTable().done(function () { + nfUsersTable.loadUsersTable().done(function () { // select the new user var row = usersData.getRowById(userEntity.id); usersGrid.setSelectedRows([row]); @@ -330,7 +330,7 @@ }); $.when.apply(window, xhrs).always(function () { - self.loadUsersTable(); + nfUsersTable.loadUsersTable(); }).fail(errorHandler.handleAjaxError); }).fail(errorHandler.handleAjaxError); }; @@ -349,7 +349,7 @@ dataType: 'json', contentType: 'application/json' }).done(function (groupEntity) { - self.loadUsersTable().done(function () { + nfUsersTable.loadUsersTable().done(function () { // add the user var usersGrid = $('#users-table').data('gridInstance'); var usersData = usersGrid.getData(); @@ -385,7 +385,7 @@ dataType: 'json', contentType: 'application/json' }).done(function (groupEntity) { - self.loadUsersTable(); + nfUsersTable.loadUsersTable(); }).fail(errorHandler.handleAjaxError); }; diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users.js index 8cad6cf160..bdab85ba27 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users.js @@ -15,7 +15,7 @@ * limitations under the License. */ -/* global nf, top, define, module, require, exports */ +/* global top, define, module, require, exports */ (function (root, factory) { if (typeof define === 'function' && define.amd) {