http://git-wip-us.apache.org/repos/asf/nifi/blob/bf3b1640/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js
----------------------------------------------------------------------
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 503c855..fcec19d 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 */
-
-nf.Label = (function () {
+/* global define, module, require, exports */
+
+(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

http://git-wip-us.apache.org/repos/asf/nifi/blob/bf3b1640/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-policy-management.js
----------------------------------------------------------------------
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 b19d033..acc499a 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 */
-
-nf.PolicyManagement = (function () {
+/* global define, module, require, exports */
+
+(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 $('<span>Showing effective policy inherited from the 
controller.</span>');
         } 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('<span>.</span>');
@@ -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

http://git-wip-us.apache.org/repos/asf/nifi/blob/bf3b1640/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-configuration.js
----------------------------------------------------------------------
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 a49290a..25d99be 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 */
-
-nf.PortConfiguration = (function () {
+/* 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.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 = 
$('<span></span>').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

http://git-wip-us.apache.org/repos/asf/nifi/blob/bf3b1640/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-details.js
----------------------------------------------------------------------
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 0f8496d..ac60e7e 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

http://git-wip-us.apache.org/repos/asf/nifi/blob/bf3b1640/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js
----------------------------------------------------------------------
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 0523fc5..129033b 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 */
-
-nf.Port = (function () {
+/* global define, module, require, exports */
+
+(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 $('<div></div>').append(list).html();
-                            }
-                        });
+                        var list = 
common.formatUnorderedList(d.component.validationErrors);
+                        if (list === null || list.length === 0) {
+                            return '';
+                        } else {
+                            return $('<div></div>').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

http://git-wip-us.apache.org/repos/asf/nifi/blob/bf3b1640/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-configuration.js
----------------------------------------------------------------------
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 7311f07..8658a02 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 */
-
-nf.ProcessGroupConfiguration = (function () {
+/* 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.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

http://git-wip-us.apache.org/repos/asf/nifi/blob/bf3b1640/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js
----------------------------------------------------------------------
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 9618c33..38175d5 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 */
-
-nf.ProcessGroup = (function () {
+/* global d3, define, module, require, exports */
+
+(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

Reply via email to