[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


Project: http://git-wip-us.apache.org/repos/asf/nifi/repo
Commit: http://git-wip-us.apache.org/repos/asf/nifi/commit/bf3b1640
Tree: http://git-wip-us.apache.org/repos/asf/nifi/tree/bf3b1640
Diff: http://git-wip-us.apache.org/repos/asf/nifi/diff/bf3b1640

Branch: refs/heads/master
Commit: bf3b1640fce1cded2197b8a898e0f58081a89df4
Parents: 2e1b87f
Author: Scott Aslan <[email protected]>
Authored: Fri Feb 3 18:09:16 2017 -0500
Committer: Matt Gilman <[email protected]>
Committed: Fri Feb 10 16:03:23 2017 -0500

----------------------------------------------------------------------
 .../nifi-framework/nifi-web/nifi-web-ui/pom.xml |   69 +-
 .../main/resources/filters/canvas.properties    |   69 +-
 .../WEB-INF/partials/canvas/canvas-header.jsp   |   22 +-
 .../WEB-INF/partials/canvas/navigation.jsp      |   14 +-
 .../webapp/js/jquery/nfeditor/languages/nfel.js |    2 +-
 .../js/nf/bulletin-board/nf-bulletin-board.js   |    2 +-
 .../controllers/nf-ng-breadcrumbs-controller.js |  278 ++--
 .../nf-ng-canvas-flow-status-controller.js      |  845 ++++++-----
 .../nf-ng-canvas-global-menu-controller.js      |  592 ++++----
 .../nf-ng-canvas-graph-controls-controller.js   |  590 ++++----
 .../nf-ng-canvas-header-controller.js           |  204 +--
 .../nf-ng-canvas-navigate-controller.js         |  162 +-
 .../nf-ng-canvas-operate-controller.js          |  783 +++++-----
 .../nf-ng-canvas-toolbox-controller.js          |  254 ++--
 .../directives/nf-ng-breadcrumbs-directive.js   |   46 +-
 .../directives/nf-ng-draggable-directive.js     |   32 +-
 .../header/components/nf-ng-funnel-component.js |  200 +--
 .../header/components/nf-ng-group-component.js  |  389 ++---
 .../components/nf-ng-input-port-component.js    |  375 ++---
 .../header/components/nf-ng-label-component.js  |  207 +--
 .../components/nf-ng-output-port-component.js   |  357 +++--
 .../components/nf-ng-processor-component.js     | 1142 +++++++-------
 .../nf-ng-remote-process-group-component.js     |  461 +++---
 .../components/nf-ng-template-component.js      |  407 ++---
 .../src/main/webapp/js/nf/canvas/nf-actions.js  |  584 +++++---
 .../src/main/webapp/js/nf/canvas/nf-birdseye.js |   82 +-
 .../webapp/js/nf/canvas/nf-canvas-bootstrap.js  |  400 +++++
 .../js/nf/canvas/nf-canvas-error-handler.js     |   24 +-
 .../main/webapp/js/nf/canvas/nf-canvas-utils.js |  820 +++++-----
 .../src/main/webapp/js/nf/canvas/nf-canvas.js   | 1401 ++++++++----------
 .../main/webapp/js/nf/canvas/nf-clipboard.js    |   42 +-
 .../webapp/js/nf/canvas/nf-component-state.js   |   60 +-
 .../main/webapp/js/nf/canvas/nf-connectable.js  |   52 +-
 .../js/nf/canvas/nf-connection-configuration.js |  263 ++--
 .../main/webapp/js/nf/canvas/nf-connection.js   |  334 +++--
 .../main/webapp/js/nf/canvas/nf-context-menu.js |  226 +--
 .../js/nf/canvas/nf-controller-service.js       |  301 ++--
 .../js/nf/canvas/nf-controller-services.js      |  201 ++-
 .../main/webapp/js/nf/canvas/nf-custom-ui.js    |    2 +-
 .../main/webapp/js/nf/canvas/nf-draggable.js    |  292 ++--
 .../src/main/webapp/js/nf/canvas/nf-funnel.js   |   85 +-
 .../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      |   56 +-
 .../src/main/webapp/js/nf/canvas/nf-label.js    |  113 +-
 .../webapp/js/nf/canvas/nf-policy-management.js |  147 +-
 .../js/nf/canvas/nf-port-configuration.js       |   63 +-
 .../main/webapp/js/nf/canvas/nf-port-details.js |   39 +-
 .../src/main/webapp/js/nf/canvas/nf-port.js     |  129 +-
 .../nf/canvas/nf-process-group-configuration.js |  102 +-
 .../webapp/js/nf/canvas/nf-process-group.js     |  169 ++-
 .../js/nf/canvas/nf-processor-configuration.js  |  126 +-
 .../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 +-
 .../nf/canvas/nf-remote-process-group-ports.js  |  117 +-
 .../js/nf/canvas/nf-remote-process-group.js     |  160 +-
 .../webapp/js/nf/canvas/nf-reporting-task.js    |  155 +-
 .../main/webapp/js/nf/canvas/nf-selectable.js   |   48 +-
 .../src/main/webapp/js/nf/canvas/nf-settings.js |  295 ++--
 .../src/main/webapp/js/nf/canvas/nf-snippet.js  |   83 +-
 .../webapp/js/nf/cluster/nf-cluster-table.js    |    2 +-
 .../src/main/webapp/js/nf/cluster/nf-cluster.js |    2 +-
 .../webapp/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 +-
 .../src/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 +-
 .../src/main/webapp/js/nf/nf-cluster-summary.js |    2 +-
 .../src/main/webapp/js/nf/nf-common.js          |   11 +-
 .../main/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 +-
 .../main/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 +-
 .../src/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 +-
 .../src/main/webapp/js/nf/summary/nf-summary.js |    2 +-
 .../js/nf/templates/nf-templates-table.js       |    4 +-
 .../main/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, 9072 insertions(+), 6512 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/nifi/blob/bf3b1640/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/pom.xml
----------------------------------------------------------------------
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 d04f207..d0c70f0 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 @@
                                             <insertNewLine>true</insertNewLine>
                                             
<output>${project.build.directory}/${project.build.finalName}/js/nf/canvas/nf-canvas-all.js</output>
                                             <includes>
-                                                
<include>${staging.dir}/js/nf/nf-dialog.js</include>
+                                                
<include>${staging.dir}/js/nf/nf-ng-bridge.js</include>
+                                                
<include>${staging.dir}/js/nf/nf-ng-service-provider.js</include>
+                                                
<include>${staging.dir}/js/nf/nf-cluster-summary.js</include>
                                                 
<include>${staging.dir}/js/nf/nf-storage.js</include>
                                                 
<include>${staging.dir}/js/nf/nf-ajax-setup.js</include>
+                                                
<include>${staging.dir}/js/nf/nf-universal-capture.js</include>
+                                                
<include>${staging.dir}/js/nf/nf-dialog.js</include>
                                                 
<include>${staging.dir}/js/nf/nf-common.js</include>
-                                                
<include>${staging.dir}/js/nf/nf-client.js</include>
                                                 
<include>${staging.dir}/js/nf/nf-error-handler.js</include>
-                                                
<include>${staging.dir}/js/nf/canvas/nf-context-menu.js</include>
-                                                
<include>${staging.dir}/js/nf/nf-ng-bridge.js</include>
-                                                
<include>${staging.dir}/js/nf/nf-cluster-summary.js</include>
-                                                
<include>${staging.dir}/js/nf/canvas/nf-canvas.js</include>
-                                                
<include>${staging.dir}/js/nf/canvas/nf-canvas-error-handler.js</include>
-                                                
<include>${staging.dir}/js/nf/nf-universal-capture.js</include>
-                                                
<include>${staging.dir}/js/nf/nf-shell.js</include>
-                                                
<include>${staging.dir}/js/nf/canvas/nf-snippet.js</include>
-                                                
<include>${staging.dir}/js/nf/canvas/nf-queue-listing.js</include>
                                                 
<include>${staging.dir}/js/nf/canvas/nf-component-state.js</include>
+                                                
<include>${staging.dir}/js/nf/nf-shell.js</include>
+                                                
<include>${staging.dir}/js/nf/nf-client.js</include>
+                                                
<include>${staging.dir}/js/nf/canvas/nf-clipboard.js</include>
                                                 
<include>${staging.dir}/js/nf/canvas/nf-custom-ui.js</include>
-                                                
<include>${staging.dir}/js/nf/canvas/nf-controller-service.js</include>
-                                                
<include>${staging.dir}/js/nf/canvas/nf-controller-services.js</include>
-                                                
<include>${staging.dir}/js/nf/canvas/nf-reporting-task.js</include>
+                                                
<include>${staging.dir}/js/nf/canvas/nf-canvas-utils.js</include>
+                                                
<include>${staging.dir}/js/nf/canvas/nf-go-to.js</include>
+                                                
<include>${staging.dir}/js/nf/canvas/nf-snippet.js</include>
+                                                
<include>${staging.dir}/js/nf/canvas/nf-connection.js</include>
+                                                
<include>${staging.dir}/js/nf/canvas/nf-funnel.js</include>
+                                                
<include>${staging.dir}/js/nf/canvas/nf-label.js</include>
+                                                
<include>${staging.dir}/js/nf/canvas/nf-port.js</include>
+                                                
<include>${staging.dir}/js/nf/canvas/nf-process-group.js</include>
+                                                
<include>${staging.dir}/js/nf/canvas/nf-remote-process-group.js</include>
+                                                
<include>${staging.dir}/js/nf/canvas/nf-processor.js</include>
                                                 
<include>${staging.dir}/js/nf/canvas/nf-processor-configuration.js</include>
                                                 
<include>${staging.dir}/js/nf/nf-processor-details.js</include>
+                                                
<include>${staging.dir}/js/nf/canvas/nf-label-configuration.js</include>
+                                                
<include>${staging.dir}/js/nf/canvas/nf-port-configuration.js</include>
+                                                
<include>${staging.dir}/js/nf/canvas/nf-port-details.js</include>
                                                 
<include>${staging.dir}/js/nf/canvas/nf-process-group-configuration.js</include>
-                                                
<include>${staging.dir}/js/nf/canvas/nf-policy-management.js</include>
                                                 
<include>${staging.dir}/js/nf/canvas/nf-remote-process-group-configuration.js</include>
                                                 
<include>${staging.dir}/js/nf/canvas/nf-remote-process-group-details.js</include>
                                                 
<include>${staging.dir}/js/nf/canvas/nf-remote-process-group-ports.js</include>
-                                                
<include>${staging.dir}/js/nf/canvas/nf-port-configuration.js</include>
-                                                
<include>${staging.dir}/js/nf/canvas/nf-port-details.js</include>
-                                                
<include>${staging.dir}/js/nf/canvas/nf-label-configuration.js</include>
                                                 
<include>${staging.dir}/js/nf/canvas/nf-connection-configuration.js</include>
                                                 
<include>${staging.dir}/js/nf/nf-connection-details.js</include>
-                                                
<include>${staging.dir}/js/nf/nf-status-history.js</include>
-                                                
<include>${staging.dir}/js/nf/canvas/nf-graph.js</include>
-                                                
<include>${staging.dir}/js/nf/canvas/nf-processor.js</include>
-                                                
<include>${staging.dir}/js/nf/canvas/nf-label.js</include>
-                                                
<include>${staging.dir}/js/nf/canvas/nf-port.js</include>
-                                                
<include>${staging.dir}/js/nf/canvas/nf-process-group.js</include>
-                                                
<include>${staging.dir}/js/nf/canvas/nf-remote-process-group.js</include>
-                                                
<include>${staging.dir}/js/nf/canvas/nf-funnel.js</include>
-                                                
<include>${staging.dir}/js/nf/canvas/nf-connection.js</include>
-                                                
<include>${staging.dir}/js/nf/canvas/nf-draggable.js</include>
-                                                
<include>${staging.dir}/js/nf/canvas/nf-connectable.js</include>
+                                                
<include>${staging.dir}/js/nf/canvas/nf-context-menu.js</include>
                                                 
<include>${staging.dir}/js/nf/canvas/nf-selectable.js</include>
                                                 
<include>${staging.dir}/js/nf/canvas/nf-birdseye.js</include>
-                                                
<include>${staging.dir}/js/nf/canvas/nf-settings.js</include>
-                                                
<include>${staging.dir}/js/nf/canvas/nf-go-to.js</include>
+                                                
<include>${staging.dir}/js/nf/canvas/nf-draggable.js</include>
+                                                
<include>${staging.dir}/js/nf/canvas/nf-connectable.js</include>
+                                                
<include>${staging.dir}/js/nf/canvas/nf-graph.js</include>
+                                                
<include>${staging.dir}/js/nf/nf-status-history.js</include>
+                                                
<include>${staging.dir}/js/nf/canvas/nf-queue-listing.js</include>
+                                                
<include>${staging.dir}/js/nf/canvas/nf-policy-management.js</include>
                                                 
<include>${staging.dir}/js/nf/canvas/nf-actions.js</include>
-                                                
<include>${staging.dir}/js/nf/canvas/nf-clipboard.js</include>
-                                                
<include>${staging.dir}/js/nf/nf-ng-service-provider.js</include>
+                                                
<include>${staging.dir}/js/nf/canvas/nf-canvas.js</include>
+                                                
<include>${staging.dir}/js/nf/canvas/nf-canvas-error-handler.js</include>
+                                                
<include>${staging.dir}/js/nf/canvas/nf-controller-service.js</include>
+                                                
<include>${staging.dir}/js/nf/canvas/nf-controller-services.js</include>
+                                                
<include>${staging.dir}/js/nf/canvas/nf-reporting-task.js</include>
+                                                
<include>${staging.dir}/js/nf/canvas/nf-settings.js</include>
                                                 
<include>${staging.dir}/js/nf/canvas/controllers/nf-ng-breadcrumbs-controller.js</include>
                                                 
<include>${staging.dir}/js/nf/canvas/controllers/nf-ng-canvas-header-controller.js</include>
                                                 
<include>${staging.dir}/js/nf/canvas/controllers/nf-ng-canvas-toolbox-controller.js</include>
@@ -492,7 +493,7 @@
                                                 
<include>${staging.dir}/js/nf/canvas/directives/nf-ng-draggable-directive.js</include>
                                                 
<include>${staging.dir}/js/nf/nf-ng-app-controller.js</include>
                                                 
<include>${staging.dir}/js/nf/nf-ng-app-config.js</include>
-                                                
<include>${staging.dir}/js/nf/canvas/nf-canvas-utils.js</include>
+                                                
<include>${staging.dir}/js/nf/canvas/nf-canvas-bootstrap.js</include>
                                             </includes>
                                         </aggregation>
                                         <aggregation>

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/resources/filters/canvas.properties
----------------------------------------------------------------------
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 dbc2ac2..b5b9e33 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=<script type="text/javascript" 
src="js/nf/nf-dialog.js?${project.version}"></script>\n\
+nf.canvas.script.tags=<script type="text/javascript" 
src="js/nf/nf-ng-bridge.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/nf-ng-service-provider.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/nf-cluster-summary.js?${project.version}"></script>\n\
 <script type="text/javascript" 
src="js/nf/nf-storage.js?${project.version}"></script>\n\
 <script type="text/javascript" 
src="js/nf/nf-ajax-setup.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/nf-universal-capture.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/nf-dialog.js?${project.version}"></script>\n\
 <script type="text/javascript" 
src="js/nf/nf-common.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/nf-client.js?${project.version}"></script>\n\
 <script type="text/javascript" 
src="js/nf/nf-error-handler.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/canvas/nf-context-menu.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/nf-ng-bridge.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/nf-cluster-summary.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/canvas/nf-canvas.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/canvas/nf-canvas-error-handler.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/nf-universal-capture.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/nf-shell.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/canvas/nf-snippet.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/canvas/nf-queue-listing.js?${project.version}"></script>\n\
 <script type="text/javascript" 
src="js/nf/canvas/nf-component-state.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/nf-shell.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/nf-client.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/canvas/nf-clipboard.js?${project.version}"></script>\n\
 <script type="text/javascript" 
src="js/nf/canvas/nf-custom-ui.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/canvas/nf-controller-service.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/canvas/nf-controller-services.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/canvas/nf-reporting-task.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/canvas/nf-canvas-utils.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/canvas/nf-go-to.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/canvas/nf-snippet.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/canvas/nf-connection.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/canvas/nf-funnel.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/canvas/nf-label.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/canvas/nf-port.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/canvas/nf-process-group.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/canvas/nf-remote-process-group.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/canvas/nf-processor.js?${project.version}"></script>\n\
 <script type="text/javascript" 
src="js/nf/canvas/nf-processor-configuration.js?${project.version}"></script>\n\
 <script type="text/javascript" 
src="js/nf/nf-processor-details.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/canvas/nf-label-configuration.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/canvas/nf-port-configuration.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/canvas/nf-port-details.js?${project.version}"></script>\n\
 <script type="text/javascript" 
src="js/nf/canvas/nf-process-group-configuration.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/canvas/nf-policy-management.js?${project.version}"></script>\n\
 <script type="text/javascript" 
src="js/nf/canvas/nf-remote-process-group-configuration.js?${project.version}"></script>\n\
 <script type="text/javascript" 
src="js/nf/canvas/nf-remote-process-group-details.js?${project.version}"></script>\n\
 <script type="text/javascript" 
src="js/nf/canvas/nf-remote-process-group-ports.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/canvas/nf-port-configuration.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/canvas/nf-port-details.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/canvas/nf-label-configuration.js?${project.version}"></script>\n\
 <script type="text/javascript" 
src="js/nf/canvas/nf-connection-configuration.js?${project.version}"></script>\n\
 <script type="text/javascript" 
src="js/nf/nf-connection-details.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/nf-status-history.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/canvas/nf-graph.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/canvas/nf-processor.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/canvas/nf-label.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/canvas/nf-port.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/canvas/nf-process-group.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/canvas/nf-remote-process-group.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/canvas/nf-funnel.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/canvas/nf-connection.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/canvas/nf-draggable.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/canvas/nf-connectable.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/canvas/nf-context-menu.js?${project.version}"></script>\n\
 <script type="text/javascript" 
src="js/nf/canvas/nf-selectable.js?${project.version}"></script>\n\
 <script type="text/javascript" 
src="js/nf/canvas/nf-birdseye.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/canvas/nf-settings.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/canvas/nf-go-to.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/canvas/nf-draggable.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/canvas/nf-connectable.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/canvas/nf-graph.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/nf-status-history.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/canvas/nf-queue-listing.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/canvas/nf-policy-management.js?${project.version}"></script>\n\
 <script type="text/javascript" 
src="js/nf/canvas/nf-actions.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/canvas/nf-clipboard.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/nf-ng-service-provider.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/canvas/nf-canvas.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/canvas/nf-canvas-error-handler.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/canvas/nf-controller-service.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/canvas/nf-controller-services.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/canvas/nf-reporting-task.js?${project.version}"></script>\n\
+<script type="text/javascript" 
src="js/nf/canvas/nf-settings.js?${project.version}"></script>\n\
 <script type="text/javascript" 
src="js/nf/canvas/controllers/nf-ng-breadcrumbs-controller.js?${project.version}"></script>\n\
 <script type="text/javascript" 
src="js/nf/canvas/controllers/nf-ng-canvas-header-controller.js?${project.version}"></script>\n\
 <script type="text/javascript" 
src="js/nf/canvas/controllers/nf-ng-canvas-toolbox-controller.js?${project.version}"></script>\n\
@@ -83,6 +84,6 @@ nf.canvas.script.tags=<script type="text/javascript" 
src="js/nf/nf-dialog.js?${p
 <script type="text/javascript" 
src="js/nf/canvas/directives/nf-ng-draggable-directive.js?${project.version}"></script>\n\
 <script type="text/javascript" 
src="js/nf/nf-ng-app-controller.js?${project.version}"></script>\n\
 <script type="text/javascript" 
src="js/nf/nf-ng-app-config.js?${project.version}"></script>\n\
-<script type="text/javascript" 
src="js/nf/canvas/nf-canvas-utils.js?${project.version}"></script>
+<script type="text/javascript" 
src="js/nf/canvas/nf-canvas-bootstrap.js?${project.version}"></script>
 nf.canvas.style.tags=<link rel="stylesheet" 
href="css/canvas.css?${project.version}" type="text/css" />\n\
 <link rel="stylesheet" href="css/common-ui.css?${project.version}" 
type="text/css" />
\ 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/WEB-INF/partials/canvas/canvas-header.jsp
----------------------------------------------------------------------
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 15c60ad..c7064f8 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 @@
             <button 
title="{{appCtrl.serviceProvider.headerCtrl.toolboxCtrl.config.type.processor}}"
                     id="processor-component"
                     class="component-button icon icon-processor"
-                    ng-disabled="!appCtrl.nf.Canvas.canWrite();"
+                    ng-disabled="!appCtrl.nf.CanvasUtils.canWrite();"
                     
nf-draggable="appCtrl.serviceProvider.headerCtrl.toolboxCtrl.draggableComponentConfig(appCtrl.serviceProvider.headerCtrl.toolboxCtrl.processorComponent);">
                 <span class="component-button-grip"></span>
             </button>
             <button 
title="{{appCtrl.serviceProvider.headerCtrl.toolboxCtrl.config.type.inputPort}}"
                     id="port-in-component"
                     class="component-button icon icon-port-in"
-                    ng-disabled="!appCtrl.nf.Canvas.canWrite();"
+                    ng-disabled="!appCtrl.nf.CanvasUtils.canWrite();"
                     
nf-draggable="appCtrl.serviceProvider.headerCtrl.toolboxCtrl.draggableComponentConfig(appCtrl.serviceProvider.headerCtrl.toolboxCtrl.inputPortComponent);">
                 <span class="component-button-grip"></span>
             </button>
             <button 
title="{{appCtrl.serviceProvider.headerCtrl.toolboxCtrl.config.type.outputPort}}"
                     id="port-out-component"
                     class="component-button icon icon-port-out"
-                    ng-disabled="!appCtrl.nf.Canvas.canWrite();"
+                    ng-disabled="!appCtrl.nf.CanvasUtils.canWrite();"
                     
nf-draggable="appCtrl.serviceProvider.headerCtrl.toolboxCtrl.draggableComponentConfig(appCtrl.serviceProvider.headerCtrl.toolboxCtrl.outputPortComponent);">
                 <span class="component-button-grip"></span>
             </button>
             <button 
title="{{appCtrl.serviceProvider.headerCtrl.toolboxCtrl.config.type.processGroup}}"
                     id="group-component"
                     class="component-button icon icon-group"
-                    ng-disabled="!appCtrl.nf.Canvas.canWrite();"
+                    ng-disabled="!appCtrl.nf.CanvasUtils.canWrite();"
                     
nf-draggable="appCtrl.serviceProvider.headerCtrl.toolboxCtrl.draggableComponentConfig(appCtrl.serviceProvider.headerCtrl.toolboxCtrl.groupComponent);">
                 <span class="component-button-grip"></span>
             </button>
             <button 
title="{{appCtrl.serviceProvider.headerCtrl.toolboxCtrl.config.type.remoteProcessGroup}}"
                     id="group-remote-component"
                     class="component-button icon icon-group-remote"
-                    ng-disabled="!appCtrl.nf.Canvas.canWrite();"
+                    ng-disabled="!appCtrl.nf.CanvasUtils.canWrite();"
                     
nf-draggable="appCtrl.serviceProvider.headerCtrl.toolboxCtrl.draggableComponentConfig(appCtrl.serviceProvider.headerCtrl.toolboxCtrl.remoteGroupComponent);">
                 <span class="component-button-grip"></span>
             </button>
             <button 
title="{{appCtrl.serviceProvider.headerCtrl.toolboxCtrl.config.type.funnel}}"
                     id="funnel-component"
                     class="component-button icon icon-funnel"
-                    ng-disabled="!appCtrl.nf.Canvas.canWrite();"
+                    ng-disabled="!appCtrl.nf.CanvasUtils.canWrite();"
                     
nf-draggable="appCtrl.serviceProvider.headerCtrl.toolboxCtrl.draggableComponentConfig(appCtrl.serviceProvider.headerCtrl.toolboxCtrl.funnelComponent);">
                 <span class="component-button-grip"></span>
             </button>
             <button 
title="{{appCtrl.serviceProvider.headerCtrl.toolboxCtrl.config.type.template}}"
                     id="template-component"
                     class="component-button icon icon-template"
-                    ng-disabled="!appCtrl.nf.Canvas.canWrite();"
+                    ng-disabled="!appCtrl.nf.CanvasUtils.canWrite();"
                     
nf-draggable="appCtrl.serviceProvider.headerCtrl.toolboxCtrl.draggableComponentConfig(appCtrl.serviceProvider.headerCtrl.toolboxCtrl.templateComponent);">
                 <span class="component-button-grip"></span>
             </button>
             <button 
title="{{appCtrl.serviceProvider.headerCtrl.toolboxCtrl.config.type.label}}"
                     id="label-component"
                     class="component-button icon icon-label"
-                    ng-disabled="!appCtrl.nf.Canvas.canWrite();"
+                    ng-disabled="!appCtrl.nf.CanvasUtils.canWrite();"
                     
nf-draggable="appCtrl.serviceProvider.headerCtrl.toolboxCtrl.draggableComponentConfig(appCtrl.serviceProvider.headerCtrl.toolboxCtrl.labelComponent);">
                 <span class="component-button-grip"></span>
             </button>
@@ -146,15 +146,15 @@
                             <i class="fa fa-history"></i>Flow Configuration 
History
                         </a>
                     </md-menu-item>
-                    <md-menu-divider 
ng-if="appCtrl.nf.Canvas.isConfigurableAuthorizer()"></md-menu-divider>
-                    <md-menu-item layout-align="space-around center" 
ng-if="appCtrl.nf.Canvas.isConfigurableAuthorizer()">
+                    <md-menu-divider 
ng-if="appCtrl.nf.CanvasUtils.isConfigurableAuthorizer()"></md-menu-divider>
+                    <md-menu-item layout-align="space-around center" 
ng-if="appCtrl.nf.CanvasUtils.isConfigurableAuthorizer()">
                         <a id="users-link" layout="row"
                            
ng-click="appCtrl.serviceProvider.headerCtrl.globalMenuCtrl.users.shell.launch();"
                            ng-class="{disabled: 
!(appCtrl.nf.Common.canAccessTenants())}">
                             <i class="fa fa-users"></i>Users
                         </a>
                     </md-menu-item>
-                    <md-menu-item layout-align="space-around center" 
ng-if="appCtrl.nf.Canvas.isConfigurableAuthorizer()">
+                    <md-menu-item layout-align="space-around center" 
ng-if="appCtrl.nf.CanvasUtils.isConfigurableAuthorizer()">
                         <a id="policies-link" layout="row"
                            
ng-click="appCtrl.serviceProvider.headerCtrl.globalMenuCtrl.policies.shell.launch();"
                            ng-class="{disabled: 
!(appCtrl.nf.Common.canAccessTenants() && 
appCtrl.nf.Common.canModifyPolicies())}">

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/WEB-INF/partials/canvas/navigation.jsp
----------------------------------------------------------------------
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 ed67aaa..e42e60d 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" %>
 <nf-breadcrumbs
         breadcrumbs="appCtrl.serviceProvider.breadcrumbsCtrl.getBreadcrumbs();"
-        click-func="appCtrl.nf.CanvasUtils.enterGroup"
-        highlight-crumb-id="appCtrl.nf.Canvas.getGroupId();"
+        
click-func="appCtrl.nf.CanvasUtils.getComponentByType('ProcessGroup').enterGroup"
+        highlight-crumb-id="appCtrl.nf.CanvasUtils.getGroupId();"
         separator-func="appCtrl.nf.Common.isDefinedAndNotNull">
 </nf-breadcrumbs>
 <div id="graph-controls">
@@ -95,8 +95,8 @@
                                 
ng-disabled="!(appCtrl.serviceProvider.graphControlsCtrl.canConfigureOrOpenDetails())">
                             <div class="graph-control-action-icon fa 
fa-gear"></div></button>
                     </div>
-                    <div class="button-spacer-small" 
ng-if="appCtrl.nf.Canvas.isConfigurableAuthorizer()">&nbsp;</div>
-                    <div id="operate-policy" class="action-button" 
title="Access Policies" ng-if="appCtrl.nf.Canvas.isConfigurableAuthorizer()">
+                    <div class="button-spacer-small" 
ng-if="appCtrl.nf.CanvasUtils.isConfigurableAuthorizer()">&nbsp;</div>
+                    <div id="operate-policy" class="action-button" 
title="Access Policies" 
ng-if="appCtrl.nf.CanvasUtils.isConfigurableAuthorizer()">
                         <button 
ng-click="appCtrl.nf.Actions['managePolicies'](appCtrl.nf.CanvasUtils.getSelection());"
                                 
ng-disabled="!(appCtrl.serviceProvider.graphControlsCtrl.canManagePolicies())">
                             <div class="graph-control-action-icon fa 
fa-key"></div></button>
@@ -128,13 +128,13 @@
                     <div class="button-spacer-large">&nbsp;</div>
                     <div id="operate-template" class="action-button" 
title="Create Template">
                         <button 
ng-click="appCtrl.nf.Actions['template'](appCtrl.nf.CanvasUtils.getSelection());"
-                                ng-disabled="!(appCtrl.nf.Canvas.canWrite() && 
(appCtrl.nf.CanvasUtils.getSelection().empty() || 
appCtrl.nf.CanvasUtils.canRead(appCtrl.nf.CanvasUtils.getSelection())));">
+                                
ng-disabled="!(appCtrl.nf.CanvasUtils.canWrite() && 
(appCtrl.nf.CanvasUtils.getSelection().empty() || 
appCtrl.nf.CanvasUtils.canRead(appCtrl.nf.CanvasUtils.getSelection())));">
                             <div class="graph-control-action-icon icon 
icon-template-save"></div></button>
                     </div>
                     <div class="button-spacer-small">&nbsp;</div>
                     <div id="operate-template-upload" class="action-button" 
title="Upload Template">
                         <button 
ng-click="appCtrl.nf.Actions['uploadTemplate']();"
-                                ng-disabled="!(appCtrl.nf.Canvas.canWrite() && 
appCtrl.nf.CanvasUtils.getSelection().empty());">
+                                
ng-disabled="!(appCtrl.nf.CanvasUtils.canWrite() && 
appCtrl.nf.CanvasUtils.getSelection().empty());">
                             <div class="graph-control-action-icon icon 
icon-template-import"></div></button>
                     </div>
                     <div class="clear"></div>
@@ -154,7 +154,7 @@
                     <div class="button-spacer-large">&nbsp;</div>
                     <div id="operate-group" class="action-button" 
title="Group">
                         <button 
ng-click="appCtrl.nf.Actions['group'](appCtrl.nf.CanvasUtils.getSelection());"
-                                
ng-disabled="!appCtrl.nf.CanvasUtils.isDisconnected(appCtrl.nf.CanvasUtils.getSelection())
 || !appCtrl.nf.CanvasUtils.canModify(appCtrl.nf.CanvasUtils.getSelection());">
+                                
ng-disabled="!appCtrl.nf.Connection.isDisconnected(appCtrl.nf.CanvasUtils.getSelection())
 || !appCtrl.nf.CanvasUtils.canModify(appCtrl.nf.CanvasUtils.getSelection());">
                             <div class="graph-control-action-icon icon 
icon-group"></div></button>
                     </div>
                     <div class="button-spacer-large">&nbsp;</div>

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/jquery/nfeditor/languages/nfel.js
----------------------------------------------------------------------
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 807cf11..44f4b03 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*/
 

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/bulletin-board/nf-bulletin-board.js
----------------------------------------------------------------------
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 c36296b..b563a51 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) {

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/controllers/nf-ng-breadcrumbs-controller.js
----------------------------------------------------------------------
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 16a9059..c177175 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 */
-
-nf.ng.BreadcrumbsCtrl = function (serviceProvider) {
+/* global define, module, require, exports */
+
+(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,
-
-        /**
-         *  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;
-            }
+    return function (serviceProvider) {
+        'use strict';
 
-            this.breadcrumbs.unshift($.extend({
-                'label': label
-            }, breadcrumbEntity));
+        function BreadcrumbsCtrl() {
+            this.breadcrumbs = [];
+        }
 
-            if 
(nf.Common.isDefinedAndNotNull(breadcrumbEntity.parentBreadcrumb)) {
-                this.generateBreadcrumbs(breadcrumbEntity.parentBreadcrumb);
-            }
-        },
+        BreadcrumbsCtrl.prototype = {
+            constructor: BreadcrumbsCtrl,
 
-        /**
-         * 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();
-            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;
+            /**
+             *  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 
(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');
+                }
+            },
+
+            /**
+             * 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 (common.isUndefinedOrNull(evt.originalEvent)) {
+                        return;
+                    }
 
-                    var delta = 0;
+                    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 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;
+                        }
 
-                    //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;
-                    }
+                        // determine the increment
+                        if (delta > 0 && titleRight > viewportRight) {
+                            var increment = -25;
+                            adjust = true;
+                        } else if (delta < 0 && (titlePosition.left - padding) 
< 0) {
+                            increment = 25;
 
-                    // determine the increment
-                    if (delta > 0 && titleRight > viewportRight) {
-                        var increment = -25;
-                        adjust = true;
-                    } else if (delta < 0 && (titlePosition.left - padding) < 
0) {
-                        increment = 25;
+                            // don't shift too far
+                            if (titlePosition.left + increment > padding) {
+                                increment = padding - titlePosition.left;
+                            }
 
-                        // don't shift too far
-                        if (titlePosition.left + increment > padding) {
-                            increment = padding - titlePosition.left;
+                            adjust = true;
                         }
 
-                        adjust = true;
-                    }
-
-                    if (adjust) {
-                        // adjust the position
-                        title.css('left', (titlePosition.left + increment) + 
'px');
+                        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

Reply via email to