From dc934cbb8e4ad7078de555a112d92f05fd1e879f Mon Sep 17 00:00:00 2001 From: Scott Aslan Date: Fri, 20 Jan 2017 15:55:31 -0500 Subject: [PATCH] [NIFI-3359] Modularize all of nifi-web-ui except canvas directory - Removing shell.jsp from summary.jsp. - This closes #1428 --- .../nifi-web/nifi-web-ui/pom.xml | 117 +- .../filters/bulletin-board.properties | 7 +- .../main/resources/filters/canvas.properties | 23 +- .../main/resources/filters/cluster.properties | 11 +- .../resources/filters/counters.properties | 11 +- .../main/resources/filters/history.properties | 12 +- .../main/resources/filters/login.properties | 7 +- .../resources/filters/provenance.properties | 16 +- .../main/resources/filters/summary.properties | 18 +- .../resources/filters/templates.properties | 11 +- .../main/resources/filters/users.properties | 9 +- .../src/main/webapp/WEB-INF/pages/canvas.jsp | 4 +- .../src/main/webapp/WEB-INF/pages/summary.jsp | 2 +- .../src/main/webapp/WEB-INF/pages/users.jsp | 2 +- .../WEB-INF/partials/canvas/about-dialog.jsp | 2 +- .../WEB-INF/partials/canvas/flow-status.jsp | 2 +- .../webapp/js/jquery/combo/jquery.combo.js | 3 + .../js/jquery/nfeditor/jquery.nfeditor.js | 82 +- .../js/jquery/nfeditor/languages/nfel.js | 24 +- .../propertytable/jquery.propertytable.js | 316 +- .../js/jquery/tagcloud/jquery.tagcloud.js | 2 +- .../js/nf/bulletin-board/nf-bulletin-board.js | 815 ++--- .../nf-ng-canvas-flow-status-controller.js | 52 +- .../nf-ng-canvas-global-menu-controller.js | 8 +- .../nf-ng-canvas-header-controller.js | 6 +- .../components/nf-ng-funnel-component.js | 2 +- .../components/nf-ng-group-component.js | 12 +- .../components/nf-ng-input-port-component.js | 8 +- .../components/nf-ng-label-component.js | 2 +- .../components/nf-ng-output-port-component.js | 8 +- .../components/nf-ng-processor-component.js | 28 +- .../nf-ng-remote-process-group-component.js | 6 +- .../components/nf-ng-template-component.js | 14 +- .../main/webapp/js/nf/canvas/nf-actions.js | 14 +- .../js/nf/canvas/nf-canvas-error-handler.js | 60 + .../src/main/webapp/js/nf/canvas/nf-canvas.js | 93 +- .../webapp/js/nf/canvas/nf-component-state.js | 22 +- .../nf/canvas/nf-connection-configuration.js | 14 +- .../main/webapp/js/nf/canvas/nf-connection.js | 4 +- .../js/nf/canvas/nf-controller-service.js | 24 +- .../js/nf/canvas/nf-controller-services.js | 64 +- .../main/webapp/js/nf/canvas/nf-custom-ui.js | 100 +- .../main/webapp/js/nf/canvas/nf-draggable.js | 4 +- .../src/main/webapp/js/nf/canvas/nf-go-to.js | 4 +- .../js/nf/canvas/nf-label-configuration.js | 2 +- .../js/nf/canvas/nf-policy-management.js | 35 +- .../js/nf/canvas/nf-port-configuration.js | 2 +- .../canvas/nf-process-group-configuration.js | 4 +- .../nf/canvas/nf-processor-configuration.js | 11 +- .../webapp/js/nf/canvas/nf-queue-listing.js | 24 +- .../nf-remote-process-group-configuration.js | 2 +- .../canvas/nf-remote-process-group-ports.js | 6 +- .../webapp/js/nf/canvas/nf-reporting-task.js | 15 +- .../main/webapp/js/nf/canvas/nf-settings.js | 25 +- .../webapp/js/nf/cluster/nf-cluster-table.js | 458 ++- .../main/webapp/js/nf/cluster/nf-cluster.js | 81 +- .../js/nf/counters/nf-counters-table.js | 109 +- .../main/webapp/js/nf/counters/nf-counters.js | 83 +- .../webapp/js/nf/history/nf-history-model.js | 368 +-- .../webapp/js/nf/history/nf-history-table.js | 150 +- .../main/webapp/js/nf/history/nf-history.js | 119 +- .../src/main/webapp/js/nf/login/nf-login.js | 71 +- .../src/main/webapp/js/nf/nf-ajax-setup.js | 54 +- .../src/main/webapp/js/nf/nf-client.js | 30 +- .../main/webapp/js/nf/nf-cluster-summary.js | 81 + .../src/main/webapp/js/nf/nf-common.js | 590 ++-- .../webapp/js/nf/nf-connection-details.js | 54 +- .../src/main/webapp/js/nf/nf-dialog.js | 87 +- .../src/main/webapp/js/nf/nf-error-handler.js | 147 + .../src/main/webapp/js/nf/nf-ng-app-config.js | 168 +- .../main/webapp/js/nf/nf-ng-app-controller.js | 50 +- .../src/main/webapp/js/nf/nf-ng-bridge.js | 20 +- .../webapp/js/nf/nf-ng-service-provider.js | 69 +- .../main/webapp/js/nf/nf-processor-details.js | 111 +- .../src/main/webapp/js/nf/nf-shell.js | 106 +- .../main/webapp/js/nf/nf-status-history.js | 83 +- .../src/main/webapp/js/nf/nf-storage.js | 50 +- .../main/webapp/js/nf/nf-universal-capture.js | 188 +- .../js/nf/provenance/nf-provenance-lineage.js | 2629 ++++++++-------- .../js/nf/provenance/nf-provenance-table.js | 2710 +++++++++-------- .../webapp/js/nf/provenance/nf-provenance.js | 555 ++-- .../webapp/js/nf/summary/nf-cluster-search.js | 50 +- .../webapp/js/nf/summary/nf-summary-table.js | 351 ++- .../main/webapp/js/nf/summary/nf-summary.js | 162 +- .../js/nf/templates/nf-templates-table.js | 149 +- .../webapp/js/nf/templates/nf-templates.js | 79 +- .../main/webapp/js/nf/users/nf-users-table.js | 202 +- .../src/main/webapp/js/nf/users/nf-users.js | 96 +- 88 files changed, 7042 insertions(+), 5439 deletions(-) create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-error-handler.js create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-cluster-summary.js create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-error-handler.js diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/pom.xml b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/pom.xml index b38a2f09c0..d04f2075f5 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,18 +422,23 @@ true ${project.build.directory}/${project.build.finalName}/js/nf/canvas/nf-canvas-all.js - ${staging.dir}/js/nf/nf-client.js - ${staging.dir}/js/nf/nf-common.js - ${staging.dir}/js/nf/nf-universal-capture.js - ${staging.dir}/js/nf/canvas/nf-canvas-utils.js ${staging.dir}/js/nf/nf-dialog.js - ${staging.dir}/js/nf/nf-shell.js ${staging.dir}/js/nf/nf-storage.js ${staging.dir}/js/nf/nf-ajax-setup.js + ${staging.dir}/js/nf/nf-common.js + ${staging.dir}/js/nf/nf-client.js + ${staging.dir}/js/nf/nf-error-handler.js + ${staging.dir}/js/nf/canvas/nf-context-menu.js + ${staging.dir}/js/nf/nf-ng-bridge.js + ${staging.dir}/js/nf/nf-cluster-summary.js + ${staging.dir}/js/nf/canvas/nf-canvas.js + ${staging.dir}/js/nf/canvas/nf-canvas-error-handler.js + ${staging.dir}/js/nf/nf-universal-capture.js + ${staging.dir}/js/nf/nf-shell.js ${staging.dir}/js/nf/canvas/nf-snippet.js - ${staging.dir}/js/nf/canvas/nf-custom-ui.js ${staging.dir}/js/nf/canvas/nf-queue-listing.js ${staging.dir}/js/nf/canvas/nf-component-state.js + ${staging.dir}/js/nf/canvas/nf-custom-ui.js ${staging.dir}/js/nf/canvas/nf-controller-service.js ${staging.dir}/js/nf/canvas/nf-controller-services.js ${staging.dir}/js/nf/canvas/nf-reporting-task.js @@ -449,6 +454,7 @@ ${staging.dir}/js/nf/canvas/nf-label-configuration.js ${staging.dir}/js/nf/canvas/nf-connection-configuration.js ${staging.dir}/js/nf/nf-connection-details.js + ${staging.dir}/js/nf/nf-status-history.js ${staging.dir}/js/nf/canvas/nf-graph.js ${staging.dir}/js/nf/canvas/nf-processor.js ${staging.dir}/js/nf/canvas/nf-label.js @@ -458,18 +464,14 @@ ${staging.dir}/js/nf/canvas/nf-funnel.js ${staging.dir}/js/nf/canvas/nf-connection.js ${staging.dir}/js/nf/canvas/nf-draggable.js - ${staging.dir}/js/nf/canvas/nf-selectable.js ${staging.dir}/js/nf/canvas/nf-connectable.js + ${staging.dir}/js/nf/canvas/nf-selectable.js ${staging.dir}/js/nf/canvas/nf-birdseye.js ${staging.dir}/js/nf/canvas/nf-settings.js ${staging.dir}/js/nf/canvas/nf-go-to.js ${staging.dir}/js/nf/canvas/nf-actions.js - ${staging.dir}/js/nf/canvas/nf-context-menu.js - ${staging.dir}/js/nf/nf-status-history.js - ${staging.dir}/js/nf/canvas/nf-canvas.js ${staging.dir}/js/nf/canvas/nf-clipboard.js - ${staging.dir}/js/nf/nf-ng-app-config.js - ${staging.dir}/js/nf/nf-ng-app-controller.js + ${staging.dir}/js/nf/nf-ng-service-provider.js ${staging.dir}/js/nf/canvas/controllers/nf-ng-breadcrumbs-controller.js ${staging.dir}/js/nf/canvas/controllers/nf-ng-canvas-header-controller.js ${staging.dir}/js/nf/canvas/controllers/nf-ng-canvas-toolbox-controller.js @@ -488,78 +490,84 @@ ${staging.dir}/js/nf/canvas/header/components/nf-ng-label-component.js ${staging.dir}/js/nf/canvas/directives/nf-ng-breadcrumbs-directive.js ${staging.dir}/js/nf/canvas/directives/nf-ng-draggable-directive.js - ${staging.dir}/js/nf/nf-ng-bridge.js - ${staging.dir}/js/nf/nf-ng-service-provider.js + ${staging.dir}/js/nf/nf-ng-app-controller.js + ${staging.dir}/js/nf/nf-ng-app-config.js + ${staging.dir}/js/nf/canvas/nf-canvas-utils.js true ${project.build.directory}/${project.build.finalName}/js/nf/history/nf-history-all.js - ${staging.dir}/js/nf/nf-client.js - ${staging.dir}/js/nf/nf-common.js - ${staging.dir}/js/nf/nf-universal-capture.js ${staging.dir}/js/nf/nf-dialog.js ${staging.dir}/js/nf/nf-storage.js + ${staging.dir}/js/nf/nf-common.js + ${staging.dir}/js/nf/nf-error-handler.js + ${staging.dir}/js/nf/nf-universal-capture.js ${staging.dir}/js/nf/nf-ajax-setup.js - ${staging.dir}/js/nf/history/nf-history.js - ${staging.dir}/js/nf/history/nf-history-table.js + ${staging.dir}/js/nf/nf-cluster-summary.js ${staging.dir}/js/nf/history/nf-history-model.js + ${staging.dir}/js/nf/history/nf-history-table.js + ${staging.dir}/js/nf/history/nf-history.js true ${project.build.directory}/${project.build.finalName}/js/nf/provenance/nf-provenance-all.js - ${staging.dir}/js/nf/nf-client.js - ${staging.dir}/js/nf/nf-common.js - ${staging.dir}/js/nf/nf-universal-capture.js ${staging.dir}/js/nf/nf-dialog.js ${staging.dir}/js/nf/nf-storage.js + ${staging.dir}/js/nf/nf-common.js + ${staging.dir}/js/nf/nf-error-handler.js + ${staging.dir}/js/nf/nf-universal-capture.js ${staging.dir}/js/nf/nf-ajax-setup.js ${staging.dir}/js/nf/nf-ng-bridge.js - ${staging.dir}/js/nf/nf-ng-service-provider.js - ${staging.dir}/js/nf/nf-ng-app-config.js ${staging.dir}/js/nf/nf-ng-app-controller.js - ${staging.dir}/js/nf/provenance/nf-provenance.js + ${staging.dir}/js/nf/nf-ng-app-config.js ${staging.dir}/js/nf/provenance/nf-provenance-table.js ${staging.dir}/js/nf/provenance/nf-provenance-lineage.js + ${staging.dir}/js/nf/provenance/nf-provenance.js true ${project.build.directory}/${project.build.finalName}/js/nf/summary/nf-summary-all.js - ${staging.dir}/js/nf/nf-client.js - ${staging.dir}/js/nf/nf-common.js - ${staging.dir}/js/nf/nf-universal-capture.js ${staging.dir}/js/nf/nf-dialog.js ${staging.dir}/js/nf/nf-storage.js + ${staging.dir}/js/nf/nf-common.js + ${staging.dir}/js/nf/nf-error-handler.js + ${staging.dir}/js/nf/nf-universal-capture.js ${staging.dir}/js/nf/nf-ajax-setup.js + ${staging.dir}/js/nf/nf-client.js + ${staging.dir}/js/nf/canvas/nf-custom-ui.js + ${staging.dir}/js/nf/nf-cluster-summary.js ${staging.dir}/js/nf/nf-processor-details.js + ${staging.dir}/js/nf/canvas/nf-settings.js + ${staging.dir}/js/nf/canvas/nf-process-group-configuration.js ${staging.dir}/js/nf/nf-connection-details.js ${staging.dir}/js/nf/nf-status-history.js ${staging.dir}/js/nf/nf-ng-bridge.js - ${staging.dir}/js/nf/nf-ng-service-provider.js - ${staging.dir}/js/nf/nf-ng-app-config.js - ${staging.dir}/js/nf/nf-ng-app-controller.js - ${staging.dir}/js/nf/summary/nf-summary.js ${staging.dir}/js/nf/summary/nf-summary-table.js ${staging.dir}/js/nf/summary/nf-cluster-search.js + ${staging.dir}/js/nf/nf-ng-service-provider.js + ${staging.dir}/js/nf/nf-ng-app-controller.js + ${staging.dir}/js/nf/nf-ng-app-config.js + ${staging.dir}/js/nf/summary/nf-summary.js true ${project.build.directory}/${project.build.finalName}/js/nf/counters/nf-counters-all.js - ${staging.dir}/js/nf/nf-client.js - ${staging.dir}/js/nf/nf-common.js - ${staging.dir}/js/nf/nf-universal-capture.js ${staging.dir}/js/nf/nf-dialog.js ${staging.dir}/js/nf/nf-storage.js + ${staging.dir}/js/nf/nf-common.js + ${staging.dir}/js/nf/nf-error-handler.js + ${staging.dir}/js/nf/nf-universal-capture.js ${staging.dir}/js/nf/nf-ajax-setup.js - ${staging.dir}/js/nf/counters/nf-counters.js ${staging.dir}/js/nf/counters/nf-counters-table.js + ${staging.dir}/js/nf/counters/nf-counters.js @@ -567,57 +575,58 @@ ${project.build.directory}/${project.build.finalName}/js/nf/users/nf-users-all.js ${staging.dir}/js/nf/nf-client.js - ${staging.dir}/js/nf/nf-common.js - ${staging.dir}/js/nf/nf-universal-capture.js ${staging.dir}/js/nf/nf-dialog.js ${staging.dir}/js/nf/nf-storage.js + ${staging.dir}/js/nf/nf-common.js + ${staging.dir}/js/nf/nf-error-handler.js + ${staging.dir}/js/nf/nf-universal-capture.js ${staging.dir}/js/nf/nf-ajax-setup.js - ${staging.dir}/js/nf/users/nf-users.js ${staging.dir}/js/nf/users/nf-users-table.js + ${staging.dir}/js/nf/users/nf-users.js true ${project.build.directory}/${project.build.finalName}/js/nf/templates/nf-templates-all.js - ${staging.dir}/js/nf/nf-client.js - ${staging.dir}/js/nf/nf-common.js - ${staging.dir}/js/nf/nf-universal-capture.js ${staging.dir}/js/nf/nf-dialog.js ${staging.dir}/js/nf/nf-storage.js + ${staging.dir}/js/nf/nf-common.js + ${staging.dir}/js/nf/nf-error-handler.js + ${staging.dir}/js/nf/nf-universal-capture.js ${staging.dir}/js/nf/nf-ajax-setup.js - ${staging.dir}/js/nf/templates/nf-templates.js ${staging.dir}/js/nf/templates/nf-templates-table.js + ${staging.dir}/js/nf/templates/nf-templates.js true ${project.build.directory}/${project.build.finalName}/js/nf/cluster/nf-cluster-all.js - ${staging.dir}/js/nf/nf-client.js - ${staging.dir}/js/nf/nf-common.js - ${staging.dir}/js/nf/nf-universal-capture.js ${staging.dir}/js/nf/nf-dialog.js ${staging.dir}/js/nf/nf-storage.js + ${staging.dir}/js/nf/nf-common.js + ${staging.dir}/js/nf/nf-error-handler.js + ${staging.dir}/js/nf/nf-universal-capture.js ${staging.dir}/js/nf/nf-ajax-setup.js - ${staging.dir}/js/nf/cluster/nf-cluster.js ${staging.dir}/js/nf/cluster/nf-cluster-table.js + ${staging.dir}/js/nf/cluster/nf-cluster.js true ${project.build.directory}/${project.build.finalName}/js/nf/bulletin-board/nf-bulletin-board-all.js - ${staging.dir}/js/nf/nf-client.js - ${staging.dir}/js/nf/nf-common.js - ${staging.dir}/js/nf/nf-universal-capture.js ${staging.dir}/js/nf/nf-dialog.js ${staging.dir}/js/nf/nf-storage.js + ${staging.dir}/js/nf/nf-common.js + ${staging.dir}/js/nf/nf-error-handler.js + ${staging.dir}/js/nf/nf-universal-capture.js ${staging.dir}/js/nf/nf-ajax-setup.js ${staging.dir}/js/nf/nf-ng-bridge.js ${staging.dir}/js/nf/nf-ng-service-provider.js - ${staging.dir}/js/nf/nf-ng-app-config.js ${staging.dir}/js/nf/nf-ng-app-controller.js + ${staging.dir}/js/nf/nf-ng-app-config.js ${staging.dir}/js/nf/bulletin-board/nf-bulletin-board.js @@ -625,11 +634,11 @@ true ${project.build.directory}/${project.build.finalName}/js/nf/login/nf-login-all.js - ${staging.dir}/js/nf/nf-client.js - ${staging.dir}/js/nf/nf-common.js - ${staging.dir}/js/nf/nf-universal-capture.js ${staging.dir}/js/nf/nf-dialog.js ${staging.dir}/js/nf/nf-storage.js + ${staging.dir}/js/nf/nf-common.js + ${staging.dir}/js/nf/nf-error-handler.js + ${staging.dir}/js/nf/nf-universal-capture.js ${staging.dir}/js/nf/nf-ajax-setup.js ${staging.dir}/js/nf/login/nf-login.js diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/bulletin-board.properties b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/bulletin-board.properties index a24e743665..328622fd01 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/bulletin-board.properties +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/bulletin-board.properties @@ -13,10 +13,11 @@ # See the License for the specific language governing permissions and # limitations under the License. -nf.bulletin.board.script.tags=\n\ -\n\ -\n\ +nf.bulletin.board.script.tags=\n\ \n\ +\n\ +\n\ +\n\ \n\ \n\ \n\ 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 738abc10a5..dbc2ac25f5 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,14 +13,19 @@ # See the License for the specific language governing permissions and # limitations under the License. -nf.canvas.script.tags=\n\ -\n\ -\n\ -\n\ -\n\ -\n\ +nf.canvas.script.tags=\n\ \n\ \n\ +\n\ +\n\ +\n\ +\n\ +\n\ +\n\ +\n\ +\n\ +\n\ +\n\ \n\ \n\ \n\ @@ -56,10 +61,7 @@ nf.canvas.script.tags=\n\ \n\ \n\ -\n\ -\n\ \n\ -\n\ \n\ \n\ \n\ @@ -80,6 +82,7 @@ nf.canvas.script.tags=\n\ \n\ \n\ - +\n\ + nf.canvas.style.tags=\n\ \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/cluster.properties b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/cluster.properties index 4c57327f33..b909227944 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/cluster.properties +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/cluster.properties @@ -13,13 +13,14 @@ # See the License for the specific language governing permissions and # limitations under the License. -nf.cluster.script.tags=\n\ -\n\ -\n\ +nf.cluster.script.tags=\n\ \n\ +\n\ +\n\ +\n\ \n\ -\n\ - +\n\ + nf.cluster.style.tags=\n\ \n\ \n\ diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/counters.properties b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/counters.properties index dd4b89d8ca..60f923ba60 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/counters.properties +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/counters.properties @@ -13,13 +13,14 @@ # See the License for the specific language governing permissions and # limitations under the License. -nf.counters.script.tags=\n\ -\n\ -\n\ +nf.counters.script.tags=\n\ \n\ +\n\ +\n\ +\n\ \n\ -\n\ - +\n\ + nf.counters.style.tags=\n\ \n\ \n\ diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/history.properties b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/history.properties index 63da6bf4d3..092c1b7005 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/history.properties +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/history.properties @@ -13,14 +13,16 @@ # See the License for the specific language governing permissions and # limitations under the License. -nf.history.script.tags=\n\ -\n\ -\n\ +nf.history.script.tags=\n\ \n\ +\n\ +\n\ +\n\ \n\ -\n\ +\n\ +\n\ \n\ - + nf.history.style.tags=\n\ \n\ \n\ diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/login.properties b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/login.properties index c3754b3e6b..333bd37f91 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/login.properties +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/login.properties @@ -13,10 +13,11 @@ # See the License for the specific language governing permissions and # limitations under the License. -nf.login.script.tags=\n\ -\n\ -\n\ +nf.login.script.tags=\n\ \n\ +\n\ +\n\ +\n\ \n\ nf.login.style.tags=\n\ diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/provenance.properties b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/provenance.properties index a8c5815ba1..909e9014c2 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/provenance.properties +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/provenance.properties @@ -13,18 +13,18 @@ # See the License for the specific language governing permissions and # limitations under the License. -nf.provenance.script.tags=\n\ -\n\ -\n\ +nf.provenance.script.tags=\n\ \n\ +\n\ +\n\ +\n\ \n\ -\n\ +\n\ +\n\ +\n\ \n\ \n\ -\n\ -\n\ -\n\ - + nf.provenance.style.tags=\n\ \n\ \n\ diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/summary.properties b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/summary.properties index 1786454551..40d180adcf 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/summary.properties +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/summary.properties @@ -13,21 +13,27 @@ # See the License for the specific language governing permissions and # limitations under the License. -nf.summary.script.tags=\n\ -\n\ -\n\ +nf.summary.script.tags=\n\ \n\ +\n\ +\n\ +\n\ \n\ +\n\ +\n\ +\n\ \n\ +\n\ +\n\ \n\ \n\ -\n\ +\n\ \n\ \n\ -\n\ \n\ \n\ - +\n\ + nf.summary.style.tags=\n\ \n\ \n\ diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/templates.properties b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/templates.properties index 5528874ee0..cb036e038c 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/templates.properties +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/templates.properties @@ -13,13 +13,14 @@ # See the License for the specific language governing permissions and # limitations under the License. -nf.templates.script.tags=\n\ -\n\ -\n\ +nf.templates.script.tags=\n\ \n\ +\n\ +\n\ +\n\ \n\ -\n\ - +\n\ + nf.templates.style.tags=\n\ \n\ \n\ diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/users.properties b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/users.properties index 256cb724c0..ed8ff5dc46 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/users.properties +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/users.properties @@ -14,13 +14,14 @@ # limitations under the License. nf.users.script.tags=\n\ -\n\ -\n\ \n\ \n\ +\n\ +\n\ +\n\ \n\ -\n\ - +\n\ + nf.users.style.tags=\n\ \n\ \n\ diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/canvas.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/canvas.jsp index 3626ba499f..3ecead74b3 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/canvas.jsp +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/canvas.jsp @@ -52,8 +52,6 @@ - - @@ -81,6 +79,8 @@ ${nf.canvas.script.tags} + +
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/summary.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/summary.jsp index 490e42b236..81394d0a63 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/summary.jsp +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/summary.jsp @@ -46,7 +46,6 @@ - @@ -73,6 +72,7 @@ ${nf.summary.script.tags} + diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/users.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/users.jsp index 6bd353bd50..19a61461c3 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/users.jsp +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/users.jsp @@ -39,7 +39,6 @@ - @@ -57,6 +56,7 @@ ${nf.users.script.tags} + diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/about-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/about-dialog.jsp index 0d99aaaf3a..6453da6deb 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/about-dialog.jsp +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/about-dialog.jsp @@ -35,7 +35,7 @@

Apache NiFi is a framework to support highly scalable and flexible dataflows. - It can be run on on laptops up through clusters of enterprise class servers. + It can be run on laptops up through clusters of enterprise class servers. Instead of dictating a particular dataflow or behavior it empowers you to design your own optimal dataflow tailored to your specific environment.

diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/flow-status.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/flow-status.jsp index 63ecd3a4b5..81e9ef0194 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/flow-status.jsp +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/flow-status.jsp @@ -17,7 +17,7 @@ <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
-
{{appCtrl.serviceProvider.headerCtrl.flowStatusCtrl.connectedNodesCount}}
+
{{appCtrl.serviceProvider.headerCtrl.flowStatusCtrl.connectedNodesCount}}
{{appCtrl.serviceProvider.headerCtrl.flowStatusCtrl.activeThreadCount}}
{{appCtrl.serviceProvider.headerCtrl.flowStatusCtrl.totalQueued}}
{{appCtrl.serviceProvider.headerCtrl.flowStatusCtrl.controllerTransmittingCount}}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/jquery.combo.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/jquery.combo.js index c025dddfac..b6d324b400 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/jquery.combo.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/jquery.combo.js @@ -14,6 +14,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + +/* requires qtip plugin to be loaded first*/ + /** * Create a new combo box. The options are specified in the following * format: diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/jquery.nfeditor.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/jquery.nfeditor.js index 41353d7c48..ba673a4751 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/jquery.nfeditor.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/jquery.nfeditor.js @@ -15,27 +15,26 @@ * limitations under the License. */ -/* global CodeMirror, nf */ +/* global define, module, require, exports */ -/** - * Create a new nf editor. The options are specified in the following - * format: - * - * { - * languageId: 'nfel', - * resizable: true, - * sensitive: false, - * readOnly: false, - * content: '${attribute}', - * width: 200, - * height: 200, - * minWidth: 150, - * minHeight: 150 - * } - * - * @param {type} $ - */ -(function ($) { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'CodeMirror', + 'nf'], + function ($, common) { + factory($, common); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + factory(require('jquery'), + require('CodeMirror'), + require('nf')); + } else { + factory(root.$, + root.CodeMirror, + root.nf); + } +}(this, function ($, CodeMirror, nf) { var isUndefined = function (obj) { return typeof obj === 'undefined'; @@ -58,10 +57,23 @@ }; var methods = { - + /** - * Initializes the nf editor. - * + * Create a new nf editor. The options are specified in the following + * format: + * + * { + * languageId: 'nfel', + * resizable: true, + * sensitive: false, + * readOnly: false, + * content: '${attribute}', + * width: 200, + * height: 200, + * minWidth: 150, + * minHeight: 150 + * } + * * @param {object} options The options for this editor. */ init: function (options) { @@ -118,7 +130,7 @@ } } }); - + // set the size var width = null; if (isDefinedAndNotNull(options.width)) { @@ -192,7 +204,7 @@ } }); }, - + /** * Refreshes the editor. */ @@ -206,10 +218,10 @@ } }); }, - + /** * Sets the size of the editor. - * + * * @param {integer} width * @param {integer} height */ @@ -223,7 +235,7 @@ } }); }, - + /** * Gets the value of the editor in the first matching selector. */ @@ -243,10 +255,10 @@ return value; }, - + /** * Sets the value of the editor. - * + * * @param {string} value */ setValue: function (value) { @@ -262,7 +274,7 @@ } }); }, - + /** * Sets the focus. */ @@ -276,7 +288,7 @@ } }); }, - + /** * Sets the focus. */ @@ -290,7 +302,7 @@ } }); }, - + /** * Gets whether the value of the editor in the first matching selector has been modified. */ @@ -304,7 +316,7 @@ return modified; }, - + /** * Destroys the editor. */ @@ -320,4 +332,4 @@ return methods.init.apply(this, arguments); } }; -})(jQuery); \ No newline at end of file +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/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 9635337dce..807cf11212 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,9 +15,27 @@ * limitations under the License. */ -/* global nf, CodeMirror */ +/* global nf, define, module, require, exports */ -nf.nfel = (function() { +/* requires qtip plugin to be loaded first*/ + +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'CodeMirror'], + function ($, CodeMirror) { + return (nf.nfel = factory($, CodeMirror)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.nfel = + factory(require('jquery'), + require('CodeMirror'))); + } else { + nf.nfel = factory(root.$, + root.CodeMirror); + } +}(this, function ($, CodeMirror) { + 'use strict'; /** * Formats the specified arguments for the EL function tooltip. @@ -853,4 +871,4 @@ nf.nfel = (function() { return completions; } }; -}()); \ No newline at end of file +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js index 006a41bd7b..dacd8a0b62 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js @@ -15,34 +15,71 @@ * limitations under the License. */ -/* global nf, Slick */ +/* global define, module, require, exports */ -/** - * Create a property table. The options are specified in the following - * format: - * - * { - * readOnly: true, - * dialogContainer: 'body', - * descriptorDeferred: function () { - * return $.Deferred(function (deferred) { - * deferred.resolve(); - * }).promise; - * }, - * goToServiceDeferred: function () { - * return $.Deferred(function (deferred) { - * deferred.resolve(); - * }).promise; - * } - * } - */ +/* requires modal, combo, qtip, and nfeditor plugins to be loaded first*/ + +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'Slick', + 'nf.Common', + 'nf.UniversalCapture', + 'nf.Dialog', + 'nf.Client', + 'nf.ErrorHandler', + 'nf.ProcessGroupConfiguration', + 'nf.Settings'], + function ($, + Slick, + common, + universalCapture, + dialog, + client, + errorHandler, + processGroupConfiguration, + settings) { + factory($, + Slick, + common, + universalCapture, + dialog, + client, + errorHandler, + processGroupConfiguration, + settings); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + factory(require('jquery'), + require('Slick'), + require('nf.Common'), + require('nf.UniversalCapture'), + require('nf.Dialog'), + require('nf.Client'), + require('nf.ErrorHandler'), + require('nf.ProcessGroupConfiguration'), + require('nf.Settings')); + } else { + factory(root.$, + root.Slick, + root.nf.Common, + root.nf.UniversalCapture, + root.nf.Dialog, + root.nf.Client, + root.nf.ErrorHandler, + root.nf.ProcessGroupConfiguration, + root.nf.Settings); + } +}(this, function ($, + Slick, + common, + universalCapture, + dialog, + client, + errorHandler, + processGroupConfiguration, + settings) { -/** - * jQuery plugin for a property table. - * - * @param {type} $ - */ -(function ($) { var languageId = 'nfel'; var editorClass = languageId + '-editor'; var groupId = null; @@ -182,12 +219,12 @@ this.loadValue = function (item) { // determine if this is a sensitive property var isEmptyChecked = false; - var sensitive = nf.Common.isSensitiveProperty(propertyDescriptor); + var sensitive = common.isSensitiveProperty(propertyDescriptor); // determine the value to use when populating the text field - if (nf.Common.isDefinedAndNotNull(item[args.column.field])) { + if (common.isDefinedAndNotNull(item[args.column.field])) { if (sensitive) { - initialValue = nf.Common.config.sensitiveText; + initialValue = common.config.sensitiveText; } else { initialValue = item[args.column.field]; isEmptyChecked = initialValue === ''; @@ -204,7 +241,7 @@ var sensitiveInput = $(this); if (sensitiveInput.hasClass('sensitive')) { sensitiveInput.removeClass('sensitive'); - if (sensitiveInput.val() === nf.Common.config.sensitiveText) { + if (sensitiveInput.val() === common.config.sensitiveText) { sensitiveInput.val(''); } } @@ -223,8 +260,8 @@ return ''; } else { // otherwise if the property is required - if (nf.Common.isRequiredProperty(propertyDescriptor)) { - if (nf.Common.isBlank(propertyDescriptor.defaultValue)) { + if (common.isRequiredProperty(propertyDescriptor)) { + if (common.isBlank(propertyDescriptor.defaultValue)) { return previousValue; } else { return propertyDescriptor.defaultValue; @@ -285,7 +322,7 @@ propertyDescriptor = descriptors[args.item.property]; // determine if this is a sensitive property - var sensitive = nf.Common.isSensitiveProperty(propertyDescriptor); + var sensitive = common.isSensitiveProperty(propertyDescriptor); // record the previous value previousValue = args.item[args.column.field]; @@ -402,12 +439,12 @@ this.loadValue = function (item) { // determine if this is a sensitive property var isEmptyChecked = false; - var sensitive = nf.Common.isSensitiveProperty(propertyDescriptor); + var sensitive = common.isSensitiveProperty(propertyDescriptor); // determine the value to use when populating the text field - if (nf.Common.isDefinedAndNotNull(item[args.column.field])) { + if (common.isDefinedAndNotNull(item[args.column.field])) { if (sensitive) { - initialValue = nf.Common.config.sensitiveText; + initialValue = common.config.sensitiveText; } else { initialValue = item[args.column.field]; isEmptyChecked = initialValue === ''; @@ -431,8 +468,8 @@ return ''; } else { // otherwise if the property is required - if (nf.Common.isRequiredProperty(propertyDescriptor)) { - if (nf.Common.isBlank(propertyDescriptor.defaultValue)) { + if (common.isRequiredProperty(propertyDescriptor)) { + if (common.isBlank(propertyDescriptor.defaultValue)) { return previousValue; } else { return propertyDescriptor.defaultValue; @@ -516,7 +553,7 @@ }).appendTo(container); // check for allowable values which will drive which editor to use - var allowableValues = nf.Common.getAllowableValues(propertyDescriptor); + var allowableValues = common.getAllowableValues(propertyDescriptor); // show the output port options var options = []; @@ -534,7 +571,7 @@ text: allowableValue.displayName, value: allowableValue.value, disabled: allowableValueEntity.canRead === false && allowableValue.value !== args.item['previousValue'], - description: nf.Common.escapeHtml(allowableValue.description) + description: common.escapeHtml(allowableValue.description) }); }); } @@ -550,7 +587,7 @@ } // if this descriptor identifies a controller service, provide a way to create one - if (nf.Common.isDefinedAndNotNull(propertyDescriptor.identifiesControllerService)) { + if (common.isDefinedAndNotNull(propertyDescriptor.identifiesControllerService)) { options.push({ text: 'Create new service...', value: undefined, @@ -579,7 +616,8 @@ }).css({ 'margin-top': '10px', 'margin-bottom': '10px', - 'width': ((position.width - 16) < 212) ? 212 : (position.width - 16) + 'px'}).appendTo(wrapper); + 'width': ((position.width - 16) < 212) ? 212 : (position.width - 16) + 'px' + }).appendTo(wrapper); // add buttons for handling user input var cancel = $('
Cancel
').css({ @@ -647,13 +685,13 @@ this.loadValue = function (item) { // select as appropriate - if (!nf.Common.isUndefined(item.value)) { + if (!common.isUndefined(item.value)) { initialValue = item.value; combo.combo('setSelectedOption', { value: item.value }); - } else if (nf.Common.isDefinedAndNotNull(propertyDescriptor.defaultValue)) { + } else if (common.isDefinedAndNotNull(propertyDescriptor.defaultValue)) { initialValue = propertyDescriptor.defaultValue; combo.combo('setSelectedOption', { @@ -697,20 +735,20 @@ */ var showPropertyValue = function (propertyGrid, descriptors, row, cell) { // remove any currently open detail dialogs - nf.UniversalCapture.removeAllPropertyDetailDialogs(); + universalCapture.removeAllPropertyDetailDialogs(); // get the property in question var propertyData = propertyGrid.getData(); var property = propertyData.getItem(row); // ensure there is a value - if (nf.Common.isDefinedAndNotNull(property.value)) { + if (common.isDefinedAndNotNull(property.value)) { // get the descriptor to insert the description tooltip var propertyDescriptor = descriptors[property.property]; // ensure we're not dealing with a sensitive property - if (!nf.Common.isSensitiveProperty(propertyDescriptor)) { + if (!common.isSensitiveProperty(propertyDescriptor)) { // get details about the location of the cell var cellNode = $(propertyGrid.getCellNode(row, cell)); @@ -731,7 +769,7 @@ 'left': offset.left - 20 }).appendTo('body'); - var allowableValues = nf.Common.getAllowableValues(propertyDescriptor); + var allowableValues = common.getAllowableValues(propertyDescriptor); if ($.isArray(allowableValues)) { // prevent dragging over the combo wrapper.draggable({ @@ -746,7 +784,7 @@ options.push({ text: allowableValue.displayName, value: allowableValue.value, - description: nf.Common.escapeHtml(allowableValue.description), + description: common.escapeHtml(allowableValue.description), disabled: true }); }); @@ -795,7 +833,7 @@ var editor = null; // so the nfel editor is appropriate - if (nf.Common.supportsEl(propertyDescriptor)) { + if (common.supportsEl(propertyDescriptor)) { var languageId = 'nfel'; var editorClass = languageId + '-editor'; @@ -919,41 +957,41 @@ var options = []; $.each(response.controllerServiceTypes, function (i, controllerServiceType) { options.push({ - text: nf.Common.substringAfterLast(controllerServiceType.type, '.'), + text: common.substringAfterLast(controllerServiceType.type, '.'), value: controllerServiceType.type, - description: nf.Common.escapeHtml(controllerServiceType.description) + description: common.escapeHtml(controllerServiceType.description) }); }); // ensure there are some applicable controller services if (options.length === 0) { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Controller Service', dialogContent: 'No controller service types found that are applicable for this property.' }); } else { var newControllerServiceDialogMarkup = ''; var newControllerServiceDialog = $(newControllerServiceDialogMarkup).appendTo(configurationOptions.dialogContainer); @@ -1015,7 +1053,7 @@ // build the controller service entity var controllerServiceEntity = { - 'revision': nf.Client.getRevision({ + 'revision': client.getRevision({ 'revision': { 'version': 0, } @@ -1027,7 +1065,7 @@ // determine the appropriate uri for creating the controller service var uri = '../nifi-api/controller/controller-services'; - if (nf.Common.isDefinedAndNotNull(groupId)) { + if (common.isDefinedAndNotNull(groupId)) { uri = '../nifi-api/process-groups/' + encodeURIComponent(groupId) + '/controller-services'; } @@ -1045,7 +1083,7 @@ // store the descriptor for use later var descriptors = gridContainer.data('descriptors'); - if (!nf.Common.isUndefined(descriptors)) { + if (!common.isUndefined(descriptors)) { descriptors[descriptor.name] = descriptor; } @@ -1054,7 +1092,7 @@ data.updateItem(item.id, $.extend(item, { value: response.component.id })); - + // close the dialog newControllerServiceDialog.modal('hide'); }); @@ -1063,7 +1101,7 @@ if (typeof configurationOptions.controllerServiceCreatedDeferred === 'function') { configurationOptions.controllerServiceCreatedDeferred(response); } - }).fail(nf.Common.handleAjaxError); + }).fail(errorHandler.handleAjaxError); }; var cancel = function () { @@ -1072,7 +1110,7 @@ newControllerServiceDialog.modal('show'); } - }).fail(nf.Common.handleAjaxError); + }).fail(errorHandler.handleAjaxError); }; var initPropertiesTable = function (table, options) { @@ -1092,8 +1130,8 @@ var propertyDescriptor = descriptors[dataContext.property]; // show the property description if applicable - if (nf.Common.isDefinedAndNotNull(propertyDescriptor)) { - if (!nf.Common.isBlank(propertyDescriptor.description) || !nf.Common.isBlank(propertyDescriptor.defaultValue) || !nf.Common.isBlank(propertyDescriptor.supportsEl)) { + if (common.isDefinedAndNotNull(propertyDescriptor)) { + if (!common.isBlank(propertyDescriptor.description) || !common.isBlank(propertyDescriptor.defaultValue) || !common.isBlank(propertyDescriptor.supportsEl)) { $('
').appendTo(cellContent); $('').text(dataContext.property).appendTo(cellContent); nameWidthOffset = 46; // 10 + icon width (10) + icon margin (6) + padding (20) @@ -1110,17 +1148,17 @@ // function for formatting the property value var valueFormatter = function (row, cell, value, columnDef, dataContext) { var valueMarkup; - if (nf.Common.isDefinedAndNotNull(value)) { + if (common.isDefinedAndNotNull(value)) { // get the property descriptor var descriptors = table.data('descriptors'); var propertyDescriptor = descriptors[dataContext.property]; // determine if the property is sensitive - if (nf.Common.isSensitiveProperty(propertyDescriptor)) { + if (common.isSensitiveProperty(propertyDescriptor)) { valueMarkup = 'Sensitive value set'; } else { // if there are allowable values, attempt to swap out for the display name - var allowableValues = nf.Common.getAllowableValues(propertyDescriptor); + var allowableValues = common.getAllowableValues(propertyDescriptor); if ($.isArray(allowableValues)) { $.each(allowableValues, function (_, allowableValueEntity) { var allowableValue = allowableValueEntity.allowableValue; @@ -1134,7 +1172,7 @@ if (value === '') { valueMarkup = 'Empty string set'; } else { - valueMarkup = '
' + nf.Common.escapeHtml(value) + '
'; + valueMarkup = '
' + common.escapeHtml(value) + '
'; } } } else { @@ -1182,12 +1220,11 @@ var descriptors = table.data('descriptors'); var propertyDescriptor = descriptors[dataContext.property]; - var identifiesControllerService = nf.Common.isDefinedAndNotNull(propertyDescriptor.identifiesControllerService); - var isConfigured = nf.Common.isDefinedAndNotNull(dataContext.value); - var isOnCanvas = nf.Common.isDefinedAndNotNull(nf.Canvas); + var identifiesControllerService = common.isDefinedAndNotNull(propertyDescriptor.identifiesControllerService); + var isConfigured = common.isDefinedAndNotNull(dataContext.value); // check to see if we should provide a button for going to a controller service - if (identifiesControllerService && isConfigured && isOnCanvas) { + if (identifiesControllerService && isConfigured && (options.supportsGoTo === true)) { // ensure the configured value is referencing a valid service $.each(propertyDescriptor.allowableValues, function (_, allowableValueEntity) { var allowableValue = allowableValueEntity.allowableValue; @@ -1236,7 +1273,7 @@ var propertyDescriptor = descriptors[item.property]; // support el if specified or unsure yet (likely a dynamic property) - if (nf.Common.isUndefinedOrNull(propertyDescriptor) || nf.Common.supportsEl(propertyDescriptor)) { + if (common.isUndefinedOrNull(propertyDescriptor) || common.supportsEl(propertyDescriptor)) { return { columns: { value: { @@ -1246,7 +1283,7 @@ }; } else { // check for allowable values which will drive which editor to use - var allowableValues = nf.Common.getAllowableValues(propertyDescriptor); + var allowableValues = common.getAllowableValues(propertyDescriptor); if ($.isArray(allowableValues)) { return { columns: { @@ -1283,37 +1320,37 @@ var controllerService = controllerServiceEntity.component; $.Deferred(function (deferred) { - if (nf.Common.isDefinedAndNotNull(controllerService.parentGroupId)) { + if (common.isDefinedAndNotNull(controllerService.parentGroupId)) { if ($('#process-group-configuration').is(':visible')) { - nf.ProcessGroupConfiguration.loadConfiguration(controllerService.parentGroupId).done(function () { + processGroupConfiguration.loadConfiguration(controllerService.parentGroupId).done(function () { deferred.resolve(); }); } else { - nf.ProcessGroupConfiguration.showConfiguration(controllerService.parentGroupId).done(function () { + processGroupConfiguration.showConfiguration(controllerService.parentGroupId).done(function () { deferred.resolve(); }); } } else { if ($('#settings').is(':visible')) { // reload the settings - nf.Settings.loadSettings().done(function () { + settings.loadSettings().done(function () { deferred.resolve(); }); } else { // reload the settings and show - nf.Settings.showSettings().done(function () { + settings.showSettings().done(function () { deferred.resolve(); }); } } }).done(function () { - if (nf.Common.isDefinedAndNotNull(controllerService.parentGroupId)) { - nf.ProcessGroupConfiguration.selectControllerService(property.value); + if (common.isDefinedAndNotNull(controllerService.parentGroupId)) { + processGroupConfiguration.selectControllerService(property.value); } else { - nf.Settings.selectControllerService(property.value); + settings.selectControllerService(property.value); } }); - }).fail(nf.Common.handleAjaxError); + }).fail(errorHandler.handleAjaxError); }; // initialize the grid @@ -1396,11 +1433,11 @@ var propertyHistory = history[property]; // format the tooltip - var tooltip = nf.Common.formatPropertyTooltip(propertyDescriptor, propertyHistory); + var tooltip = common.formatPropertyTooltip(propertyDescriptor, propertyHistory); - if (nf.Common.isDefinedAndNotNull(tooltip)) { + if (common.isDefinedAndNotNull(tooltip)) { infoIcon.qtip($.extend({}, - nf.Common.config.tooltipConfig, + common.config.tooltipConfig, { content: tooltip })); @@ -1412,7 +1449,7 @@ var saveRow = function (table) { // get the property grid to commit the current edit var propertyGrid = table.data('gridInstance'); - if (nf.Common.isDefinedAndNotNull(propertyGrid)) { + if (common.isDefinedAndNotNull(propertyGrid)) { var editController = propertyGrid.getEditController(); editController.commitCurrentEdit(); } @@ -1449,7 +1486,7 @@ var propertyData = propertyGrid.getData(); // generate the properties - if (nf.Common.isDefinedAndNotNull(properties)) { + if (common.isDefinedAndNotNull(properties)) { propertyData.beginUpdate(); var i = 0; @@ -1460,10 +1497,10 @@ // determine the property type var type = 'userDefined'; var displayName = name; - if (nf.Common.isDefinedAndNotNull(descriptor)) { - if (nf.Common.isRequiredProperty(descriptor)) { + if (common.isDefinedAndNotNull(descriptor)) { + if (common.isRequiredProperty(descriptor)) { type = 'required'; - } else if (nf.Common.isDynamicProperty(descriptor)) { + } else if (common.isDynamicProperty(descriptor)) { type = 'userDefined'; } else { type = 'optional'; @@ -1473,7 +1510,7 @@ displayName = descriptor.displayName; // determine the value - if (nf.Common.isNull(value) && nf.Common.isDefinedAndNotNull(descriptor.defaultValue)) { + if (common.isNull(value) && common.isDefinedAndNotNull(descriptor.defaultValue)) { value = descriptor.defaultValue; } } @@ -1502,10 +1539,10 @@ var clear = function (propertyTableContainer) { var options = propertyTableContainer.data('options'); if (options.readOnly === true) { - nf.UniversalCapture.removeAllPropertyDetailDialogs(); + universalCapture.removeAllPropertyDetailDialogs(); } else { // clear any existing new property dialogs - if (nf.Common.isDefinedAndNotNull(options.dialogContainer)) { + if (common.isDefinedAndNotNull(options.dialogContainer)) { $('#new-property-dialog').modal("hide"); } } @@ -1515,7 +1552,7 @@ table.removeData('descriptors history'); // clean up any tooltips that may have been generated - nf.Common.cleanUpTooltips(table, 'div.fa-question-circle'); + common.cleanUpTooltips(table, 'div.fa-question-circle'); // clear the data in the grid var propertyGrid = table.data('gridInstance'); @@ -1525,14 +1562,31 @@ var methods = { /** - * Initializes the tag cloud. + * Create a property table. The options are specified in the following + * format: + * + * { + * readOnly: true, + * dialogContainer: 'body', + * descriptorDeferred: function () { + * return $.Deferred(function (deferred) { + * deferred.resolve(); + * }).promise; + * }, + * supportsGoTo: true, + * goToServiceDeferred: function () { + * return $.Deferred(function (deferred) { + * deferred.resolve(); + * }).promise; + * } + * } * * @argument {object} options The options for the tag cloud */ init: function (options) { return this.each(function () { // ensure the options have been properly specified - if (nf.Common.isDefinedAndNotNull(options)) { + if (common.isDefinedAndNotNull(options)) { // get the tag cloud var propertyTableContainer = $(this); @@ -1547,18 +1601,18 @@ var table = $('
').appendTo(propertyTableContainer); // optionally add a add new property button - if (options.readOnly !== true && nf.Common.isDefinedAndNotNull(options.dialogContainer)) { + if (options.readOnly !== true && common.isDefinedAndNotNull(options.dialogContainer)) { // build the new property dialog var newPropertyDialogMarkup = ''; var newPropertyDialog = $(newPropertyDialogMarkup).appendTo(options.dialogContainer); @@ -1619,7 +1673,7 @@ // store the descriptor for use later var descriptors = table.data('descriptors'); - if (!nf.Common.isUndefined(descriptors)) { + if (!common.isUndefined(descriptors)) { descriptors[descriptor.name] = descriptor; } @@ -1654,7 +1708,7 @@ propertyGrid.setActiveCell(row, propertyGrid.getColumnIndex('value')); propertyGrid.editActiveCell(); } else { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Property Exists', dialogContent: 'A property with this name already exists.' }); @@ -1666,7 +1720,7 @@ } } } else { - nf.Dialog.showOkDialog({ + dialog.showOkDialog({ headerText: 'Property Name', dialogContent: 'Property name must be specified.' }); @@ -1749,7 +1803,7 @@ return this.each(function () { var table = $(this).find('div.property-table'); var propertyGrid = table.data('gridInstance'); - if (nf.Common.isDefinedAndNotNull(propertyGrid)) { + if (common.isDefinedAndNotNull(propertyGrid)) { propertyGrid.resizeCanvas(); } }); @@ -1762,7 +1816,7 @@ return this.each(function () { var table = $(this).find('div.property-table'); var propertyGrid = table.data('gridInstance'); - if (nf.Common.isDefinedAndNotNull(propertyGrid)) { + if (common.isDefinedAndNotNull(propertyGrid)) { var editController = propertyGrid.getEditController(); editController.cancelCurrentEdit(); } @@ -1777,12 +1831,12 @@ var propertyTableContainer = $(this); var options = propertyTableContainer.data('options'); - if (nf.Common.isDefinedAndNotNull(options)) { + if (common.isDefinedAndNotNull(options)) { // clear the property table container clear(propertyTableContainer); // clear any existing new property dialogs - if (nf.Common.isDefinedAndNotNull(options.dialogContainer)) { + if (common.isDefinedAndNotNull(options.dialogContainer)) { $('#new-property-dialog').modal("hide"); $(options.dialogContainer).children('div.new-inline-controller-service-dialog').remove(); } @@ -1870,4 +1924,4 @@ return methods.init.apply(this, arguments); } }; -})(jQuery); +})); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tagcloud/jquery.tagcloud.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tagcloud/jquery.tagcloud.js index 2eb551ce8d..526a64c0a0 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tagcloud/jquery.tagcloud.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tagcloud/jquery.tagcloud.js @@ -127,7 +127,7 @@ $.each(options.tags, function (i, tag) { var normalizedTagName = tag.toLowerCase(); - if (nf.Common.isDefinedAndNotNull(tagCloud[normalizedTagName])) { + if (isDefinedAndNotNull(tagCloud[normalizedTagName])) { tagCloud[normalizedTagName].count = tagCloud[normalizedTagName].count + 1; } else { var tagCloudEntry = { 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 58d8f7933a..c36296bac2 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,421 +15,480 @@ * limitations under the License. */ -/* global nf, top */ +/* global nf, define, module, require, exports */ -$(document).ready(function () { - - //Create Angular App - var app = angular.module('ngBulletinBoardApp', ['ngResource', 'ngRoute', 'ngMaterial', 'ngMessages']); - - //Define Dependency Injection Annotations - nf.ng.AppConfig.$inject = ['$mdThemingProvider', '$compileProvider']; - nf.ng.AppCtrl.$inject = ['$scope', 'serviceProvider', 'bulletinBoardCtrl']; - nf.ng.BulletinBoardCtrl.$inject = ['serviceProvider']; - nf.ng.ServiceProvider.$inject = []; - - //Configure Angular App - app.config(nf.ng.AppConfig); - - //Define Angular App Controllers - app.controller('ngBulletinBoardAppCtrl', nf.ng.AppCtrl); - - //Define Angular App Services - app.service('serviceProvider', nf.ng.ServiceProvider); - app.service('bulletinBoardCtrl', nf.ng.BulletinBoardCtrl); - - //Manually Boostrap Angular App - nf.ng.Bridge.injector = angular.bootstrap($('body'), ['ngBulletinBoardApp'], { strictDi: true }); - - // initialize the bulletin board - nf.ng.Bridge.injector.get('bulletinBoardCtrl').init(); -}); - -nf.ng.BulletinBoardCtrl = function (serviceProvider) { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'angular', + 'nf.Common', + 'nf.ng.AppConfig', + 'nf.ng.AppCtrl', + 'nf.ng.ServiceProvider', + 'nf.ng.Bridge', + 'nf.ErrorHandler', + 'nf.Storage'], + function ($, + angular, + common, + appConfig, + appCtrl, + serviceProvider, + angularBridge, + errorHandler, + storage) { + return (nf.ng.BulletinBoardCtrl = + factory($, + angular, + common, + appConfig, + appCtrl, + serviceProvider, + angularBridge, + errorHandler, + storage)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.BulletinBoardCtrl = + factory(require('jquery'), + require('angular'), + require('nf.Common'), + require('nf.ng.AppConfig'), + require('nf.ng.AppCtrl'), + require('nf.ng.ServiceProvider'), + require('nf.ng.Bridge'), + require('nf.ErrorHandler'), + require('nf.Storage'))); + } else { + nf.ng.BulletinBoardCtrl = factory(root.$, + root.angular, + root.nf.Common, + root.nf.ng.AppConfig, + root.nf.ng.AppCtrl, + root.nf.ng.ServiceProvider, + root.nf.ng.Bridge, + root.nf.ErrorHandler, + root.nf.Storage); + } +}(this, function ($, angular, common, appConfig, appCtrl, serviceProvider, angularBridge, errorHandler, storage) { 'use strict'; - /** - * Configuration object used to hold a number of configuration items. - */ - var config = { - pollInterval: 3, - maxBulletins: 1000, - urls: { - banners: '../nifi-api/flow/banners', - about: '../nifi-api/flow/about', - bulletinBoard: '../nifi-api/flow/bulletin-board' - } - }; + $(document).ready(function () { - var lastBulletin = null; - var filterText = null; - var filterType = null; + //Create Angular App + var app = angular.module('ngBulletinBoardApp', ['ngResource', 'ngRoute', 'ngMaterial', 'ngMessages']); - /** - * Initializes the bulletin board. - */ - var initializePage = function () { - // add hover effect and click handler for clearing the bulletins - $('#clear-bulletins-button').click(function () { - $('#bulletin-board-container').empty(); - }); + //Define Dependency Injection Annotations + appConfig.$inject = ['$mdThemingProvider', '$compileProvider']; + appCtrl.$inject = ['$scope', 'serviceProvider', 'bulletinBoardCtrl']; + nfBulletinBoard.$inject = ['serviceProvider']; + serviceProvider.$inject = []; - // filter type - $('#bulletin-board-filter-type').combo({ - options: [{ - text: 'by message', - value: 'message' - }, { - text: 'by name', - value: 'sourceName' - }, { - text: 'by id', - value: 'sourceId' - }, { - text: 'by group id', - value: 'groupId' - }] - }); + //Configure Angular App + app.config(appConfig); - // get the about details - var getTitle = $.ajax({ - type: 'GET', - url: config.urls.about, - dataType: 'json' - }).done(function (response) { - var aboutDetails = response.about; - var bulletinBoardTitle = aboutDetails.title + ' Bulletin Board'; + //Define Angular App Controllers + app.controller('ngBulletinBoardAppCtrl', appCtrl); - // set the document title and the about title - document.title = bulletinBoardTitle; - $('#bulletin-board-header-text').text(bulletinBoardTitle); - }).fail(nf.Common.handleAjaxError); + //Define Angular App Services + app.service('serviceProvider', serviceProvider); + app.service('bulletinBoardCtrl', nfBulletinBoard); - // get the banners if we're not in the shell - var loadBanners = $.Deferred(function (deferred) { - if (top === window) { - $.ajax({ - type: 'GET', - url: config.urls.banners, - dataType: 'json' - }).done(function (response) { - // ensure the banners response is specified - if (nf.Common.isDefinedAndNotNull(response.banners)) { - if (nf.Common.isDefinedAndNotNull(response.banners.headerText) && response.banners.headerText !== '') { - // update the header text - var bannerHeader = $('#banner-header').text(response.banners.headerText).show(); + //Manually Boostrap Angular App + angularBridge.injector = angular.bootstrap($('body'), ['ngBulletinBoardApp'], {strictDi: true}); - // show the banner - var updateTop = function (elementId) { - var element = $('#' + elementId); - element.css('top', (parseInt(bannerHeader.css('height'), 10) + parseInt(element.css('top'), 10)) + 'px'); - }; + // initialize the bulletin board + angularBridge.injector.get('bulletinBoardCtrl').init(); + }); - // update the position of elements affected by top banners - updateTop('bulletin-board'); - } + var nfBulletinBoard = function (serviceProvider) { - if (nf.Common.isDefinedAndNotNull(response.banners.footerText) && response.banners.footerText !== '') { - // update the footer text and show it - var bannerFooter = $('#banner-footer').text(response.banners.footerText).show(); - - var updateBottom = function (elementId) { - var element = $('#' + elementId); - element.css('bottom', parseInt(bannerFooter.css('height'), 10) + 'px'); - }; - - // update the position of elements affected by bottom banners - updateBottom('bulletin-board'); - } - } - - deferred.resolve(); - }).fail(function (xhr, status, error) { - nf.Common.handleAjaxError(xhr, status, error); - deferred.reject(); - }); - } else { - deferred.resolve(); + /** + * Configuration object used to hold a number of configuration items. + */ + var config = { + pollInterval: 3, + maxBulletins: 1000, + urls: { + banners: '../nifi-api/flow/banners', + about: '../nifi-api/flow/about', + bulletinBoard: '../nifi-api/flow/bulletin-board' } - }); + }; - return $.Deferred(function (deferred) { - $.when(getTitle, loadBanners).done(function () { - deferred.resolve(); - }).fail(function () { - deferred.reject(); + var lastBulletin = null; + var filterText = null; + var filterType = null; + + /** + * Initializes the bulletin board. + */ + var initializePage = function () { + // add hover effect and click handler for clearing the bulletins + $('#clear-bulletins-button').click(function () { + $('#bulletin-board-container').empty(); }); - }).promise(); - }; - /** - * Starts polling for new bulletins. - */ - var start = function () { - var refreshButton = $('#refresh-button'); - var bulletinContainer = $('#bulletin-board-container'); - - appendAndScroll(bulletinContainer, '
Auto refresh started
'); - - // clear any error messages - $('#bulletin-error-message').text('').hide(); - poll(); - }; - - /** - * Stops polling for new bulletins. - */ - var stop = function () { - var refreshButton = $('#refresh-button'); - var bulletinContainer = $('#bulletin-board-container'); - - appendAndScroll(bulletinContainer, '
Auto refresh stopped
'); - - // reset state - lastBulletin = null; - filterText = null; - filterType = null; - }; - - /** - * Polls for new bulletins - */ - var poll = function () { - // if the page is no longer open, stop polling - var isOpen = $('#bulletin-board').is(':visible'); - if (!isOpen) { - bulletinBoardCtrl.polling = false; - } - - // if polling, reload the bulletins - if (bulletinBoardCtrl.polling) { - bulletinBoardCtrl.loadBulletins().done(function () { - if (bulletinBoardCtrl.polling) { - setTimeout(poll, config.pollInterval * 1000); - } + // filter type + $('#bulletin-board-filter-type').combo({ + options: [{ + text: 'by message', + value: 'message' + }, { + text: 'by name', + value: 'sourceName' + }, { + text: 'by id', + value: 'sourceId' + }, { + text: 'by group id', + value: 'groupId' + }] }); - } - }; - /** - * Appends the specified string to the specified container and scrolls to the bottom. - * - * @argument {jQuery} bulletinContainer The container for the bulletins - * @argument {string} content The content to added to the bulletin container - */ - var appendAndScroll = function (bulletinContainer, content) { - bulletinContainer.append(content).animate({scrollTop: bulletinContainer[0].scrollHeight}, 'slow'); - }; - - /** - * Goes to the specified source on the graph. - * - * @argument {string} groupId The id of the group - * @argument {string} sourceId The id of the source component - */ - var goToSource = function (groupId, sourceId) { - // only attempt this if we're within a frame - if (top !== window) { - // and our parent has canvas utils and shell defined - if (nf.Common.isDefinedAndNotNull(parent.nf) && nf.Common.isDefinedAndNotNull(parent.nf.CanvasUtils) && nf.Common.isDefinedAndNotNull(parent.nf.Shell)) { - parent.nf.CanvasUtils.showComponent(groupId, sourceId); - parent.$('#shell-close-button').click(); - } - } - }; - - function BulletinBoardCtrl() { - /** - * Toggle state - */ - this.polling = true; - } - BulletinBoardCtrl.prototype = { - constructor: BulletinBoardCtrl, - - /** - * Register the bulletin board controller. - */ - register: function() { - if (serviceProvider.bulletinBoardCtrl === undefined) { - serviceProvider.register('bulletinBoardCtrl', bulletinBoardCtrl); - } - }, - - /** - * Initializes the bulletin board page. - */ - init: function () { - //alter styles if we're not in the shell - if (top === window) { - $('#bulletin-board').css({ - "position": "absolute", - "bottom": "40px", - "left": "40px", - "right": "40px", - "top": "40px" - }); - $('#bulletin-board-refresh-container').css({ - "position": "absolute", - "bottom": "40px", - "left": "40px", - "right": "40px" - }); - } - - nf.Storage.init(); - - initializePage().done(function () { - start(); - }); - }, - - /** - * Loads the bulletins since the last refresh. - */ - loadBulletins: function () { - var data = {}; - - // include the timestamp if appropriate - if (nf.Common.isDefinedAndNotNull(lastBulletin)) { - data['after'] = lastBulletin; - } else { - data['limit'] = 10; - } - - var bulletinContainer = $('#bulletin-board-container'); - - // get the filter text - var filter = $('#bulletin-board-filter').val(); - if (filter !== '') { - // determine which field to filter on - var filterOption = $('#bulletin-board-filter-type').combo('getSelectedOption'); - data[filterOption.value] = filter; - - // append filtering message if necessary - if (filterText !== filter || filterType !== filterOption.text) { - var filterContent = $('
').text('Filter ' + filterOption.text + ' matching \'' + filter + '\''); - appendAndScroll(bulletinContainer, filterContent.get(0)); - filterText = filter; - filterType = filterOption.text; - } - } else if (filterText !== null) { - appendAndScroll(bulletinContainer, '
Filter removed
'); - filterText = null; - filterType = null; - } - - return $.ajax({ + // get the about details + var getTitle = $.ajax({ type: 'GET', - url: config.urls.bulletinBoard, - data: data, + url: config.urls.about, dataType: 'json' }).done(function (response) { - // ensure the bulletin board was specified - if (nf.Common.isDefinedAndNotNull(response.bulletinBoard)) { - var bulletinBoard = response.bulletinBoard; + var aboutDetails = response.about; + var bulletinBoardTitle = aboutDetails.title + ' Bulletin Board'; - // update the stats last refreshed timestamp - $('#bulletin-board-last-refreshed').text(bulletinBoard.generated); + // set the document title and the about title + document.title = bulletinBoardTitle; + $('#bulletin-board-header-text').text(bulletinBoardTitle); + }).fail(errorHandler.handleAjaxError); - // process the bulletins - var bulletinEntities = response.bulletinBoard.bulletins; - var content = []; + // get the banners if we're not in the shell + var loadBanners = $.Deferred(function (deferred) { + if (top === window) { + $.ajax({ + type: 'GET', + url: config.urls.banners, + dataType: 'json' + }).done(function (response) { + // ensure the banners response is specified + if (common.isDefinedAndNotNull(response.banners)) { + if (common.isDefinedAndNotNull(response.banners.headerText) && response.banners.headerText !== '') { + // update the header text + var bannerHeader = $('#banner-header').text(response.banners.headerText).show(); - // append each bulletin - $.each(bulletinEntities, function (i, bulletinEntity) { - if (bulletinEntity.canRead === true) { - var bulletin = bulletinEntity.bulletin; + // show the banner + var updateTop = function (elementId) { + var element = $('#' + elementId); + element.css('top', (parseInt(bannerHeader.css('height'), 10) + parseInt(element.css('top'), 10)) + 'px'); + }; - // format the severity - var severityStyle = 'bulletin-normal'; - if (bulletin.level === 'ERROR') { - severityStyle = 'bulletin-error'; - } else if (bulletin.level === 'WARN' || bulletin.level === 'WARNING') { - severityStyle = 'bulletin-warn'; + // update the position of elements affected by top banners + updateTop('bulletin-board'); } - // format the source id - var source; - if (nf.Common.isDefinedAndNotNull(bulletin.sourceId) && nf.Common.isDefinedAndNotNull(bulletin.groupId) && top !== window) { - source = $('
').text(bulletin.sourceId).on('click', function () { - goToSource(bulletin.groupId, bulletin.sourceId); - }); - } else { - var sourceId = bulletin.sourceId; - if (nf.Common.isUndefined(sourceId) || nf.Common.isNull(sourceId)) { - sourceId = ''; - } - source = $('
').text(sourceId); + if (common.isDefinedAndNotNull(response.banners.footerText) && response.banners.footerText !== '') { + // update the footer text and show it + var bannerFooter = $('#banner-footer').text(response.banners.footerText).show(); + + var updateBottom = function (elementId) { + var element = $('#' + elementId); + element.css('bottom', parseInt(bannerFooter.css('height'), 10) + 'px'); + }; + + // update the position of elements affected by bottom banners + updateBottom('bulletin-board'); } - - // build the markup for this bulletin - var bulletinMarkup = $('
'); - - // build the markup for this bulletins info - var bulletinInfoMarkup = $('
').appendTo(bulletinMarkup); - $('
').text(bulletin.timestamp).appendTo(bulletinInfoMarkup); - $('
').addClass(severityStyle).text(bulletin.level).appendTo(bulletinInfoMarkup); - source.appendTo(bulletinInfoMarkup); - $('
').appendTo(bulletinInfoMarkup); - - // format the node address if applicable - if (nf.Common.isDefinedAndNotNull(bulletin.nodeAddress)) { - $('
').text(bulletin.nodeAddress).appendTo(bulletinMarkup); - } - - // add the bulletin message (treat as text) - $('
').text(bulletin.message).appendTo(bulletinMarkup);
-                            $('
').appendTo(bulletinMarkup);
-
-                            // append the content
-                            content.push(bulletinMarkup.get(0));
                         }
 
-                        // record the id of the last bulletin in this request
-                        if (i + 1 === bulletinEntities.length) {
-                            lastBulletin = bulletinEntity.id;
-                        }
+                        deferred.resolve();
+                    }).fail(function (xhr, status, error) {
+                        errorHandler.handleAjaxError(xhr, status, error);
+                        deferred.reject();
                     });
-
-                    // add the content to the scroll pane
-                    appendAndScroll(bulletinContainer, content);
-
-                    // trim the container as necessary
-                    var contents = bulletinContainer.contents();
-                    var length = contents.length;
-                    if (length > config.maxBulletins) {
-                        contents.slice(0, length - config.maxBulletins).remove();
-                        bulletinContainer.prepend('
…
');
-                    }
-                }
-            }).fail(function (xhr, status, error) {
-                // likely caused by a invalid regex
-                if (xhr.status === 404) {
-                    $('#bulletin-error-message').text(xhr.responseText).show();
-
-                    // stop future polling
-                    togglePolling();
                 } else {
-                    nf.Common.handleAjaxError(xhr, status, error);
+                    deferred.resolve();
                 }
             });
-        },
+
+            return $.Deferred(function (deferred) {
+                $.when(getTitle, loadBanners).done(function () {
+                    deferred.resolve();
+                }).fail(function () {
+                    deferred.reject();
+                });
+            }).promise();
+        };
 
         /**
-         * Toggles whether the page is actively polling for new bulletins.
+         * Starts polling for new bulletins.
          */
-        togglePolling: function () {
-            // conditionally start or stop
-            if (bulletinBoardCtrl.polling === true) {
-                start();
-            } else {
-                stop();
+        var start = function () {
+            var refreshButton = $('#refresh-button');
+            var bulletinContainer = $('#bulletin-board-container');
+
+            appendAndScroll(bulletinContainer, '
Auto refresh started
');
+
+            // clear any error messages
+            $('#bulletin-error-message').text('').hide();
+            poll();
+        };
+
+        /**
+         * Stops polling for new bulletins.
+         */
+        var stop = function () {
+            var refreshButton = $('#refresh-button');
+            var bulletinContainer = $('#bulletin-board-container');
+
+            appendAndScroll(bulletinContainer, '
Auto refresh stopped
');
+
+            // reset state
+            lastBulletin = null;
+            filterText = null;
+            filterType = null;
+        };
+
+        /**
+         * Polls for new bulletins
+         */
+        var poll = function () {
+            // if the page is no longer open, stop polling
+            var isOpen = $('#bulletin-board').is(':visible');
+            if (!isOpen) {
+                bulletinBoardCtrl.polling = false;
+            }
+
+            // if polling, reload the bulletins
+            if (bulletinBoardCtrl.polling) {
+                bulletinBoardCtrl.loadBulletins().done(function () {
+                    if (bulletinBoardCtrl.polling) {
+                        setTimeout(poll, config.pollInterval * 1000);
+                    }
+                });
+            }
+        };
+
+        /**
+         * Appends the specified string to the specified container and scrolls to the bottom.
+         *
+         * @argument {jQuery} bulletinContainer     The container for the bulletins
+         * @argument {string} content               The content to added to the bulletin container
+         */
+        var appendAndScroll = function (bulletinContainer, content) {
+            bulletinContainer.append(content).animate({scrollTop: bulletinContainer[0].scrollHeight}, 'slow');
+        };
+
+        /**
+         * Goes to the specified source on the graph.
+         *
+         * @argument {string} groupId   The id of the group
+         * @argument {string} sourceId  The id of the source component
+         */
+        var goToSource = function (groupId, sourceId) {
+            // only attempt this if we're within a frame
+            if (top !== window) {
+                // and our parent has canvas utils and shell defined
+                if (common.isDefinedAndNotNull(parent.nf) && common.isDefinedAndNotNull(parent.nf.CanvasUtils) && common.isDefinedAndNotNull(parent.nf.Shell)) {
+                    parent.nf.CanvasUtils.showComponent(groupId, sourceId);
+                    parent.$('#shell-close-button').click();
+                }
+            }
+        };
+
+        function BulletinBoardCtrl() {
+            /**
+             * Toggle state
+             */
+            this.polling = true;
+        }
+
+        BulletinBoardCtrl.prototype = {
+            constructor: BulletinBoardCtrl,
+
+            /**
+             *  Register the bulletin board controller.
+             */
+            register: function () {
+                if (serviceProvider.bulletinBoardCtrl === undefined) {
+                    serviceProvider.register('bulletinBoardCtrl', bulletinBoardCtrl);
+                }
+            },
+
+            /**
+             * Initializes the bulletin board page.
+             */
+            init: function () {
+                //alter styles if we're not in the shell
+                if (top === window) {
+                    $('#bulletin-board').css({
+                        "position": "absolute",
+                        "bottom": "40px",
+                        "left": "40px",
+                        "right": "40px",
+                        "top": "40px"
+                    });
+                    $('#bulletin-board-refresh-container').css({
+                        "position": "absolute",
+                        "bottom": "40px",
+                        "left": "40px",
+                        "right": "40px"
+                    });
+                }
+
+                storage.init();
+
+                initializePage().done(function () {
+                    start();
+                });
+            },
+
+            /**
+             * Loads the bulletins since the last refresh.
+             */
+            loadBulletins: function () {
+                var data = {};
+
+                // include the timestamp if appropriate
+                if (common.isDefinedAndNotNull(lastBulletin)) {
+                    data['after'] = lastBulletin;
+                } else {
+                    data['limit'] = 10;
+                }
+
+                var bulletinContainer = $('#bulletin-board-container');
+
+                // get the filter text
+                var filter = $('#bulletin-board-filter').val();
+                if (filter !== '') {
+                    // determine which field to filter on
+                    var filterOption = $('#bulletin-board-filter-type').combo('getSelectedOption');
+                    data[filterOption.value] = filter;
+
+                    // append filtering message if necessary
+                    if (filterText !== filter || filterType !== filterOption.text) {
+                        var filterContent = $('
').text('Filter ' + filterOption.text + ' matching \'' + filter + '\'');
+                        appendAndScroll(bulletinContainer, filterContent.get(0));
+                        filterText = filter;
+                        filterType = filterOption.text;
+                    }
+                } else if (filterText !== null) {
+                    appendAndScroll(bulletinContainer, '
Filter removed
');
+                    filterText = null;
+                    filterType = null;
+                }
+
+                return $.ajax({
+                    type: 'GET',
+                    url: config.urls.bulletinBoard,
+                    data: data,
+                    dataType: 'json'
+                }).done(function (response) {
+                    // ensure the bulletin board was specified
+                    if (common.isDefinedAndNotNull(response.bulletinBoard)) {
+                        var bulletinBoard = response.bulletinBoard;
+
+                        // update the stats last refreshed timestamp
+                        $('#bulletin-board-last-refreshed').text(bulletinBoard.generated);
+
+                        // process the bulletins
+                        var bulletinEntities = response.bulletinBoard.bulletins;
+                        var content = [];
+
+                        // append each bulletin
+                        $.each(bulletinEntities, function (i, bulletinEntity) {
+                            if (bulletinEntity.canRead === true) {
+                                var bulletin = bulletinEntity.bulletin;
+
+                                // format the severity
+                                var severityStyle = 'bulletin-normal';
+                                if (bulletin.level === 'ERROR') {
+                                    severityStyle = 'bulletin-error';
+                                } else if (bulletin.level === 'WARN' || bulletin.level === 'WARNING') {
+                                    severityStyle = 'bulletin-warn';
+                                }
+
+                                // format the source id
+                                var source;
+                                if (common.isDefinedAndNotNull(bulletin.sourceId) && common.isDefinedAndNotNull(bulletin.groupId) && top !== window) {
+                                    source = $('
').text(bulletin.sourceId).on('click', function () {
+                                        goToSource(bulletin.groupId, bulletin.sourceId);
+                                    });
+                                } else {
+                                    var sourceId = bulletin.sourceId;
+                                    if (common.isUndefined(sourceId) || common.isNull(sourceId)) {
+                                        sourceId = '';
+                                    }
+                                    source = $('
').text(sourceId);
+                                }
+
+                                // build the markup for this bulletin
+                                var bulletinMarkup = $('
');
+
+                                // build the markup for this bulletins info
+                                var bulletinInfoMarkup = $('
').appendTo(bulletinMarkup);
+                                $('
').text(bulletin.timestamp).appendTo(bulletinInfoMarkup);
+                                $('
').addClass(severityStyle).text(bulletin.level).appendTo(bulletinInfoMarkup);
+                                source.appendTo(bulletinInfoMarkup);
+                                $('
').appendTo(bulletinInfoMarkup);
+
+                                // format the node address if applicable
+                                if (common.isDefinedAndNotNull(bulletin.nodeAddress)) {
+                                    $('
').text(bulletin.nodeAddress).appendTo(bulletinMarkup);
+                                }
+
+                                // add the bulletin message (treat as text)
+                                $('
').text(bulletin.message).appendTo(bulletinMarkup);
+                                $('
').appendTo(bulletinMarkup);
+
+                                // append the content
+                                content.push(bulletinMarkup.get(0));
+                            }
+
+                            // record the id of the last bulletin in this request
+                            if (i + 1 === bulletinEntities.length) {
+                                lastBulletin = bulletinEntity.id;
+                            }
+                        });
+
+                        // add the content to the scroll pane
+                        appendAndScroll(bulletinContainer, content);
+
+                        // trim the container as necessary
+                        var contents = bulletinContainer.contents();
+                        var length = contents.length;
+                        if (length > config.maxBulletins) {
+                            contents.slice(0, length - config.maxBulletins).remove();
+                            bulletinContainer.prepend('
…
');
+                        }
+                    }
+                }).fail(function (xhr, status, error) {
+                    // likely caused by a invalid regex
+                    if (xhr.status === 404) {
+                        $('#bulletin-error-message').text(xhr.responseText).show();
+
+                        // stop future polling
+                        bulletinBoardCtrl.togglePolling();
+                    } else {
+                        errorHandler.handleAjaxError(xhr, status, error);
+                    }
+                });
+            },
+
+            /**
+             * Toggles whether the page is actively polling for new bulletins.
+             */
+            togglePolling: function () {
+                // conditionally start or stop
+                if (bulletinBoardCtrl.polling === true) {
+                    start();
+                } else {
+                    stop();
+                }
             }
         }
-    }
 
-    var bulletinBoardCtrl = new BulletinBoardCtrl();
-    bulletinBoardCtrl.register();
-    return bulletinBoardCtrl;
-};
\ No newline at end of file
+        var bulletinBoardCtrl = new BulletinBoardCtrl();
+        bulletinBoardCtrl.register();
+        return bulletinBoardCtrl;
+    };
+
+    return nfBulletinBoard;
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-flow-status-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-flow-status-controller.js
index 0db667cf6e..95b6ac0e4f 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-flow-status-controller.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-flow-status-controller.js
@@ -71,7 +71,7 @@ nf.ng.Canvas.FlowStatusCtrl = function (serviceProvider) {
              */
             init: function () {
 
-                var self = this;
+                var searchCtrl = this;
 
                 // Create new jQuery UI widget
                 $.widget('nf.searchAutocomplete', $.ui.autocomplete, {
@@ -92,7 +92,7 @@ nf.ng.Canvas.FlowStatusCtrl = function (serviceProvider) {
                         return items;
                     },
                     _renderMenu: function (ul, items) {
-                        var self = this;
+                        var nfSearchAutocomplete = this;
 
                         // the object that holds the search results is normalized into a single element array
                         var searchResults = items[0];
@@ -101,7 +101,7 @@ nf.ng.Canvas.FlowStatusCtrl = function (serviceProvider) {
                         if (!nf.Common.isEmpty(searchResults.processorResults)) {
                             ul.append('
  • Processors
    • ');
                             $.each(searchResults.processorResults, function (i, processorMatch) {
-                                self._renderItem(ul, processorMatch);
+                                nfSearchAutocomplete._renderItem(ul, processorMatch);
                             });
                         }
 
@@ -109,7 +109,7 @@ nf.ng.Canvas.FlowStatusCtrl = function (serviceProvider) {
                         if (!nf.Common.isEmpty(searchResults.processGroupResults)) {
                             ul.append('
  • Process Groups
    • ');
                             $.each(searchResults.processGroupResults, function (i, processGroupMatch) {
-                                self._renderItem(ul, processGroupMatch);
+                                nfSearchAutocomplete._renderItem(ul, processGroupMatch);
                             });
                         }
 
@@ -117,7 +117,7 @@ nf.ng.Canvas.FlowStatusCtrl = function (serviceProvider) {
                         if (!nf.Common.isEmpty(searchResults.remoteProcessGroupResults)) {
                             ul.append('
  • Remote Process Groups
    • ');
                             $.each(searchResults.remoteProcessGroupResults, function (i, remoteProcessGroupMatch) {
-                                self._renderItem(ul, remoteProcessGroupMatch);
+                                nfSearchAutocomplete._renderItem(ul, remoteProcessGroupMatch);
                             });
                         }
 
@@ -125,7 +125,7 @@ nf.ng.Canvas.FlowStatusCtrl = function (serviceProvider) {
                         if (!nf.Common.isEmpty(searchResults.connectionResults)) {
                             ul.append('
  • Connections
    • ');
                             $.each(searchResults.connectionResults, function (i, connectionMatch) {
-                                self._renderItem(ul, connectionMatch);
+                                nfSearchAutocomplete._renderItem(ul, connectionMatch);
                             });
                         }
 
@@ -133,7 +133,7 @@ nf.ng.Canvas.FlowStatusCtrl = function (serviceProvider) {
                         if (!nf.Common.isEmpty(searchResults.inputPortResults)) {
                             ul.append('
  • Input Ports
    • ');
                             $.each(searchResults.inputPortResults, function (i, inputPortMatch) {
-                                self._renderItem(ul, inputPortMatch);
+                                nfSearchAutocomplete._renderItem(ul, inputPortMatch);
                             });
                         }
 
@@ -141,7 +141,7 @@ nf.ng.Canvas.FlowStatusCtrl = function (serviceProvider) {
                         if (!nf.Common.isEmpty(searchResults.outputPortResults)) {
                             ul.append('
  • Output Ports
    • ');
                             $.each(searchResults.outputPortResults, function (i, outputPortMatch) {
-                                self._renderItem(ul, outputPortMatch);
+                                nfSearchAutocomplete._renderItem(ul, outputPortMatch);
                             });
                         }
 
@@ -149,7 +149,7 @@ nf.ng.Canvas.FlowStatusCtrl = function (serviceProvider) {
                         if (!nf.Common.isEmpty(searchResults.funnelResults)) {
                             ul.append('
  • Funnels
    • ');
                             $.each(searchResults.funnelResults, function (i, funnelMatch) {
-                                self._renderItem(ul, funnelMatch);
+                                nfSearchAutocomplete._renderItem(ul, funnelMatch);
                             });
                         }
 
@@ -194,7 +194,7 @@ nf.ng.Canvas.FlowStatusCtrl = function (serviceProvider) {
                         // show the selected component
                         nf.CanvasUtils.showComponent(item.groupId, item.id);
 
-                        self.getInputElement().val('').blur();
+                        searchCtrl.getInputElement().val('').blur();
 
                         // stop event propagation
                         return false;
@@ -208,7 +208,7 @@ nf.ng.Canvas.FlowStatusCtrl = function (serviceProvider) {
                     close: function (event, ui) {
                         // set the input text to '' and reset the cached term
                         $(this).searchAutocomplete('reset');
-                        self.getInputElement().val('');
+                        searchCtrl.getInputElement().val('');
 
                         // remove the glass pane
                         $('div.search-glass-pane').remove();
@@ -216,38 +216,38 @@ nf.ng.Canvas.FlowStatusCtrl = function (serviceProvider) {
                 });
 
                 // hide the search input
-                self.toggleSearchField();
+                searchCtrl.toggleSearchField();
             },
 
             /**
              * Toggle/Slide the search field open/closed.
              */
             toggleSearchField: function () {
-                var self = this;
+                var searchCtrl = this;
 
                 // hide the context menu if necessary
                 nf.ContextMenu.hide();
 
-                var isVisible = self.getInputElement().is(':visible');
+                var isVisible = searchCtrl.getInputElement().is(':visible');
                 var display = 'none';
                 var class1 = 'search-container-opened';
                 var class2 = 'search-container-closed';
                 if (!isVisible) {
-                    self.getButtonElement().css('background-color', '#FFFFFF');
+                    searchCtrl.getButtonElement().css('background-color', '#FFFFFF');
                     display = 'inline-block';
                     class1 = 'search-container-closed';
                     class2 = 'search-container-opened';
                 } else {
-                    self.getInputElement().css('display', display);
+                    searchCtrl.getInputElement().css('display', display);
                 }
 
                 this.getSearchContainerElement().switchClass(class1, class2, 500, function () {
-                    self.getInputElement().css('display', display);
+                    searchCtrl.getInputElement().css('display', display);
                     if (!isVisible) {
-                        self.getButtonElement().css('background-color', '#FFFFFF');
-                        self.getInputElement().focus();
+                        searchCtrl.getButtonElement().css('background-color', '#FFFFFF');
+                        searchCtrl.getInputElement().focus();
                     } else {
-                        self.getButtonElement().css('background-color', '#E3E8EB');
+                        searchCtrl.getButtonElement().css('background-color', '#E3E8EB');
                     }
                 });
             }
@@ -327,7 +327,7 @@ nf.ng.Canvas.FlowStatusCtrl = function (serviceProvider) {
          * Reloads the current status of the flow.
          */
         reloadFlowStatus: function () {
-            var self = this;
+            var flowStatusCtrl = this;
 
             return $.ajax({
                 type: 'GET',
@@ -336,9 +336,9 @@ nf.ng.Canvas.FlowStatusCtrl = function (serviceProvider) {
             }).done(function (response) {
                 // report the updated status
                 if (nf.Common.isDefinedAndNotNull(response.controllerStatus)) {
-                    self.update(response.controllerStatus);
+                    flowStatusCtrl.update(response.controllerStatus);
                 }
-            }).fail(nf.Common.handleAjaxError);
+            }).fail(nf.ErrorHandler.handleAjaxError);
         },
 
         /**
@@ -348,11 +348,11 @@ nf.ng.Canvas.FlowStatusCtrl = function (serviceProvider) {
          */
         updateClusterSummary: function (clusterSummary) {
             // see if this node has been (dis)connected
-            if (nf.Canvas.isConnectedToCluster() !== clusterSummary.connectedToCluster) {
+            if (nf.ClusterSummary.isConnectedToCluster() !== clusterSummary.connectedToCluster) {
                 if (clusterSummary.connectedToCluster) {
-                    nf.Canvas.showConnectedToClusterMessage();
+                    nf.Dialog.showConnectedToClusterMessage();
                 } else {
-                    nf.Canvas.showDisconnectedFromClusterMessage();
+                    nf.Dialog.showDisconnectedFromClusterMessage();
                 }
             }
 
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-global-menu-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-global-menu-controller.js
index 9981a32db5..6d0a3046f8 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-global-menu-controller.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-global-menu-controller.js
@@ -139,7 +139,7 @@ nf.ng.Canvas.GlobalMenuCtrl = function (serviceProvider) {
              * @returns {*|boolean}
              */
             visible: function () {
-                return nf.Canvas.isConnectedToCluster();
+                return nf.ClusterSummary.isConnectedToCluster();
             },
 
             /**
@@ -304,7 +304,7 @@ nf.ng.Canvas.GlobalMenuCtrl = function (serviceProvider) {
                         $('#nifi-content-viewer-url').text(aboutDetails.contentViewerUrl);
                         nf.QueueListing.initFlowFileDetailsDialog();
                     }
-                }).fail(nf.Common.handleAjaxError);
+                }).fail(nf.ErrorHandler.handleAjaxError);
 
                 this.modal.init();
             },
@@ -327,7 +327,7 @@ nf.ng.Canvas.GlobalMenuCtrl = function (serviceProvider) {
                  * Initialize the modal.
                  */
                 init: function () {
-                    var self = this;
+                    var aboutModal = this;
 
                     var resizeAbout = function(){
                         var dialog = $(this);
@@ -350,7 +350,7 @@ nf.ng.Canvas.GlobalMenuCtrl = function (serviceProvider) {
                             },
                             handler: {
                                 click: function () {
-                                    self.hide();
+                                    aboutModal.hide();
                                 }
                             }
                         }]
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-header-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-header-controller.js
index 3f9c5eae7d..903cea9fd4 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-header-controller.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-header-controller.js
@@ -42,7 +42,7 @@ nf.ng.Canvas.HeaderCtrl = function (serviceProvider, toolboxCtrl, globalMenuCtrl
              * Initialize the login controller.
              */
             init: function () {
-                var self = this;
+                var loginCtrl = this;
 
                 // if the user is not anonymous or accessing via http
                 if ($('#current-user').text() !== nf.Common.ANONYMOUS_USER_TEXT || location.protocol === 'http:') {
@@ -62,8 +62,8 @@ nf.ng.Canvas.HeaderCtrl = function (serviceProvider, toolboxCtrl, globalMenuCtrl
                 });
 
                 $.when(loginXhr).done(function (loginResult) {
-                    self.supportsLogin = loginResult.config.supportsLogin;
-                }).fail(nf.Common.handleAjaxError);
+                    loginCtrl.supportsLogin = loginResult.config.supportsLogin;
+                }).fail(nf.ErrorHandler.handleAjaxError);
             },
 
             /**
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-funnel-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-funnel-component.js
index b35f209f16..334a3fecd3 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-funnel-component.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-funnel-component.js
@@ -107,7 +107,7 @@ nf.ng.FunnelComponent = function (serviceProvider) {
 
                 // update the birdseye
                 nf.Birdseye.refresh();
-            }).fail(nf.Common.handleAjaxError);
+            }).fail(nf.ErrorHandler.handleAjaxError);
         }
     }
 
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-group-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-group-component.js
index 01a1194759..f654560e21 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-group-component.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-group-component.js
@@ -62,7 +62,7 @@ nf.ng.GroupComponent = function (serviceProvider) {
 
             // update the birdseye
             nf.Birdseye.refresh();
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(nf.ErrorHandler.handleAjaxError);
     };
 
     function GroupComponent() {
@@ -178,14 +178,14 @@ nf.ng.GroupComponent = function (serviceProvider) {
          * @argument {object} pt        The point that the group was dropped.
          */
         promptForGroupName: function (pt) {
-            var self = this;
+            var groupComponent = this;
             return $.Deferred(function (deferred) {
                 var addGroup = function () {
                     // get the name of the group and clear the textfield
                     var groupName = $('#new-process-group-name').val();
 
                     // hide the dialog
-                    self.modal.hide();
+                    groupComponent.modal.hide();
 
                     // create the group and resolve the deferred accordingly
                     createGroup(groupName, pt).done(function (response) {
@@ -195,7 +195,7 @@ nf.ng.GroupComponent = function (serviceProvider) {
                     });
                 };
 
-                self.modal.update('setButtonModel', [{
+                groupComponent.modal.update('setButtonModel', [{
                     buttonText: 'Add',
                     color: {
                         base: '#728E9B',
@@ -219,13 +219,13 @@ nf.ng.GroupComponent = function (serviceProvider) {
                                 deferred.reject();
 
                                 // close the dialog
-                                self.modal.hide();
+                                groupComponent.modal.hide();
                             }
                         }
                     }]);
 
                 // show the dialog
-                self.modal.show();
+                groupComponent.modal.show();
 
                 // set up the focus and key handlers
                 $('#new-process-group-name').focus().off('keyup').on('keyup', function (e) {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-input-port-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-input-port-component.js
index 6ec1d6c274..64d310ecb0 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-input-port-component.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-input-port-component.js
@@ -62,7 +62,7 @@ nf.ng.InputPortComponent = function (serviceProvider) {
 
             // update the birdseye
             nf.Birdseye.refresh();
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(nf.ErrorHandler.handleAjaxError);
     };
 
     function InputPortComponent() {
@@ -178,13 +178,13 @@ nf.ng.InputPortComponent = function (serviceProvider) {
          * @argument {object} pt        The point that the input port was dropped.
          */
         promptForInputPortName: function (pt) {
-            var self = this;
+            var inputPortComponent = this;
             var addInputPort = function () {
                 // get the name of the input port and clear the textfield
                 var portName = $('#new-port-name').val();
 
                 // hide the dialog
-                self.modal.hide();
+                inputPortComponent.modal.hide();
 
                 // create the input port
                 createInputPort(portName, pt);
@@ -210,7 +210,7 @@ nf.ng.InputPortComponent = function (serviceProvider) {
                     },
                     handler: {
                         click: function () {
-                            self.modal.hide();
+                            inputPortComponent.modal.hide();
                         }
                     }
                 }]);
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-label-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-label-component.js
index a0fabb37c2..a77739e27a 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-label-component.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-label-component.js
@@ -109,7 +109,7 @@ nf.ng.LabelComponent = function (serviceProvider) {
 
                 // update the birdseye
                 nf.Birdseye.refresh();
-            }).fail(nf.Common.handleAjaxError);
+            }).fail(nf.ErrorHandler.handleAjaxError);
         }
     }
 
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-output-port-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-output-port-component.js
index 7c37bfa7f9..d856691205 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-output-port-component.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-output-port-component.js
@@ -62,7 +62,7 @@ nf.ng.OutputPortComponent = function (serviceProvider) {
 
             // update the birdseye
             nf.Birdseye.refresh();
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(nf.ErrorHandler.handleAjaxError);
     };
 
     function OutputPortComponent() {
@@ -169,13 +169,13 @@ nf.ng.OutputPortComponent = function (serviceProvider) {
          * @argument {object} pt        The point that the output port was dropped.
          */
         promptForOutputPortName: function (pt) {
-            var self = this;
+            var outputPortComponent = this;
             var addOutputPort = function () {
                 // get the name of the output port and clear the textfield
                 var portName = $('#new-port-name').val();
 
                 // hide the dialog
-                self.modal.hide();
+                outputPortComponent.modal.hide();
 
                 // create the output port
                 createOutputPort(portName, pt);
@@ -201,7 +201,7 @@ nf.ng.OutputPortComponent = function (serviceProvider) {
                     },
                     handler: {
                         click: function () {
-                            self.modal.hide();
+                            outputPortComponent.modal.hide();
                         }
                     }
                 }]);
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-processor-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-processor-component.js
index 21e76f5511..ad011ca28a 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-processor-component.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-processor-component.js
@@ -235,7 +235,7 @@ nf.ng.ProcessorComponent = function (serviceProvider) {
 
             // update the birdseye
             nf.Birdseye.refresh();
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(nf.ErrorHandler.handleAjaxError);
     };
 
     /**
@@ -269,9 +269,23 @@ nf.ng.ProcessorComponent = function (serviceProvider) {
                 init: function () {
                     // initialize the processor type table
                     var processorTypesColumns = [
-                        {id: 'type', name: 'Type', field: 'label', formatter: nf.Common.typeFormatter, sortable: true, resizable: true},
-                        {id: 'tags', name: 'Tags', field: 'tags', sortable: true, resizable: true}
+                        {
+                            id: 'type',
+                            name: 'Type',
+                            field: 'label',
+                            formatter: nf.Common.typeFormatter,
+                            sortable: true,
+                            resizable: true
+                        },
+                        {
+                            id: 'tags',
+                            name: 'Tags',
+                            field: 'tags',
+                            sortable: true,
+                            resizable: true
+                        }
                     ];
+
                     var processorTypesOptions = {
                         forceFitColumns: true,
                         enableTextSelectionOnCells: true,
@@ -426,7 +440,7 @@ nf.ng.ProcessorComponent = function (serviceProvider) {
                             select: applyFilter,
                             remove: applyFilter
                         });
-                    }).fail(nf.Common.handleAjaxError);
+                    }).fail(nf.ErrorHandler.handleAjaxError);
                 }
             },
 
@@ -443,8 +457,6 @@ nf.ng.ProcessorComponent = function (serviceProvider) {
              * Initialize the modal.
              */
             init: function () {
-                var self = this;
-                
                 this.filter.init();
 
                 // configure the new processor dialog
@@ -539,7 +551,7 @@ nf.ng.ProcessorComponent = function (serviceProvider) {
          * @argument {object} pt        The point that the processor was dropped
          */
         promptForProcessorType: function (pt) {
-            var self = this;
+            var processorComponent = this;
 
             // handles adding the selected processor at the specified point
             var addProcessor = function () {
@@ -559,7 +571,7 @@ nf.ng.ProcessorComponent = function (serviceProvider) {
                 }
 
                 // hide the dialog
-                self.modal.hide();
+                processorComponent.modal.hide();
             };
 
             // get the grid reference
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-remote-process-group-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-remote-process-group-component.js
index 90e67b6fa8..8985f16eb1 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-remote-process-group-component.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-remote-process-group-component.js
@@ -88,7 +88,7 @@ nf.ng.RemoteProcessGroupComponent = function (serviceProvider) {
                     headerText: 'Configuration Error'
                 });
             } else {
-                nf.Common.handleAjaxError(xhr, status, error);
+                nf.ErrorHandler.handleAjaxError(xhr, status, error);
             }
         });
     };
@@ -230,7 +230,7 @@ nf.ng.RemoteProcessGroupComponent = function (serviceProvider) {
          * @argument {object} pt        The point that the remote group was dropped.
          */
         promptForRemoteProcessGroupUri: function (pt) {
-            var self = this;
+            var remoteProcessGroupComponent = this;
             var addRemoteProcessGroup = function () {
                 // create the remote process group
                 createRemoteProcessGroup(pt);
@@ -256,7 +256,7 @@ nf.ng.RemoteProcessGroupComponent = function (serviceProvider) {
                     },
                     handler: {
                         click: function () {
-                            self.modal.hide();
+                            remoteProcessGroupComponent.modal.hide();
                         }
                     }
                 }]);
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-template-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-template-component.js
index c671a1cc1b..a4945f6de7 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-template-component.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-template-component.js
@@ -51,7 +51,7 @@ nf.ng.TemplateComponent = function (serviceProvider) {
 
             // update the birdseye
             nf.Birdseye.refresh();
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(nf.ErrorHandler.handleAjaxError);
     };
 
     function TemplateComponent() {
@@ -162,7 +162,7 @@ nf.ng.TemplateComponent = function (serviceProvider) {
          * @argument {object} pt        The point that the template was dropped.
          */
         promptForTemplate: function (pt) {
-            var self = this;
+            var templateComponent = this;
             $.ajax({
                 type: 'GET',
                 url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/flow/templates',
@@ -197,7 +197,7 @@ nf.ng.TemplateComponent = function (serviceProvider) {
                     });
 
                     // update the button model
-                    self.modal.update('setButtonModel', [{
+                    templateComponent.modal.update('setButtonModel', [{
                         buttonText: 'Add',
                         color: {
                             base: '#728E9B',
@@ -211,7 +211,7 @@ nf.ng.TemplateComponent = function (serviceProvider) {
                                 var templateId = selectedOption.value;
 
                                 // hide the dialog
-                                self.modal.hide();
+                                templateComponent.modal.hide();
 
                                 // instantiate the specified template
                                 createTemplate(templateId, pt);
@@ -227,13 +227,13 @@ nf.ng.TemplateComponent = function (serviceProvider) {
                             },
                             handler: {
                                 click: function () {
-                                    self.modal.hide();
+                                    templateComponent.modal.hide();
                                 }
                             }
                         }]);
 
                     // show the dialog
-                    self.modal.show();
+                    templateComponent.modal.show();
                 } else {
                     nf.Dialog.showOkDialog({
                         headerText: 'Instantiate Template',
@@ -241,7 +241,7 @@ nf.ng.TemplateComponent = function (serviceProvider) {
                     });
                 }
 
-            }).fail(nf.Common.handleAjaxError);
+            }).fail(nf.ErrorHandler.handleAjaxError);
         }
     }
 
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js
index b27e291bef..52786b668e 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js
@@ -827,7 +827,7 @@ nf.Actions = (function () {
                         nf.Birdseye.refresh();
                         // inform Angular app values have changed
                         nf.ng.Bridge.digest();
-                    }).fail(nf.Common.handleAjaxError);
+                    }).fail(nf.ErrorHandler.handleAjaxError);
                 } else {
                     // create a snippet for the specified component and link to the data flow
                     var snippet = nf.Snippet.marshal(selection);
@@ -877,8 +877,8 @@ nf.Actions = (function () {
 
                             // inform Angular app values have changed
                             nf.ng.Bridge.digest();
-                        }).fail(nf.Common.handleAjaxError);
-                    }).fail(nf.Common.handleAjaxError);
+                        }).fail(nf.ErrorHandler.handleAjaxError);
+                    }).fail(nf.ErrorHandler.handleAjaxError);
                 }
             }
         },
@@ -1033,7 +1033,7 @@ nf.Actions = (function () {
                             processDropRequest(nextDelay);
                         }).fail(function (xhr, status, error) {
                             if (xhr.status === 403) {
-                                nf.Common.handleAjaxError(xhr, status, error);
+                                nf.ErrorHandler.handleAjaxError(xhr, status, error);
                             } else {
                                 completeDropRequest()
                             }
@@ -1058,7 +1058,7 @@ nf.Actions = (function () {
                         processDropRequest(1);
                     }).fail(function (xhr, status, error) {
                         if (xhr.status === 403) {
-                            nf.Common.handleAjaxError(xhr, status, error);
+                            nf.ErrorHandler.handleAjaxError(xhr, status, error);
                         } else {
                             completeDropRequest()
                         }
@@ -1417,8 +1417,8 @@ nf.Actions = (function () {
                                 // clear the template dialog fields
                                 $('#new-template-name').val('');
                                 $('#new-template-description').val('');
-                            }).fail(nf.Common.handleAjaxError);
-                        }).fail(nf.Common.handleAjaxError);
+                            }).fail(nf.ErrorHandler.handleAjaxError);
+                        }).fail(nf.ErrorHandler.handleAjaxError);
                     }
                 }
             }, {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-error-handler.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-error-handler.js
new file mode 100644
index 0000000000..88dc4ec555
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-error-handler.js
@@ -0,0 +1,60 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global nf, define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['nf.ErrorHandler', 'nf.Common', 'nf.Canvas', 'nf.ContextMenu'], function (ajaxErrorHandler, common, canvas, contextMenu) {
+            return (nf.ErrorHandler = factory(ajaxErrorHandler, common, canvas, contextMenu));
+        });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.ErrorHandler = factory(require('nf.ErrorHandler'), require('nf.Common'), require('nf.Canvas'), require('nf.ContextMenu')));
+    } else {
+        nf.ErrorHandler = factory(root.nf.ErrorHandler, root.nf.Common, root.nf.Canvas, root.nf.ContextMenu);
+    }
+}(this, function (ajaxErrorHandler, common, canvas, contextMenu) {
+    'use strict';
+
+    return {
+        /**
+         * Method for handling ajax errors. This also closes the canvas.
+         *
+         * @argument {object} xhr       The XmlHttpRequest
+         * @argument {string} status    The status of the request
+         * @argument {string} error     The error
+         */
+        handleAjaxError: function (xhr, status, error) {
+            ajaxErrorHandler.handleAjaxError(xhr, status, error);
+            common.showLogoutLink();
+
+            // hide the splash screen if required
+            if ($('#splash').is(':visible')) {
+                canvas.hideSplash();
+            }
+
+            // hide the context menu
+            contextMenu.hide();
+
+            // shut off the auto refresh
+            canvas.stopPolling();
+
+            // allow page refresh with ctrl-r
+            canvas.disableRefreshHotKey();
+        }
+    };
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
index c118ecefbc..be4dde8019 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
@@ -117,8 +117,6 @@ nf.Canvas = (function () {
     var groupName = null;
     var permissions = null;
     var parentGroupId = null;
-    var clustered = false;
-    var connectedToCluster = false;
     var configurableAuthorizer = false;
     var svg = null;
     var canvas = null;
@@ -134,9 +132,7 @@ nf.Canvas = (function () {
             kerberos: '../nifi-api/access/kerberos',
             revision: '../nifi-api/flow/revision',
             banners: '../nifi-api/flow/banners',
-            flowConfig: '../nifi-api/flow/config',
-            clusterSummary: '../nifi-api/flow/cluster/summary',
-            cluster: '../nifi-api/controller/cluster'
+            flowConfig: '../nifi-api/flow/config'
         }
     };
 
@@ -659,7 +655,7 @@ nf.Canvas = (function () {
 
             // update the graph dimensions
             updateGraphSize();
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(nf.ErrorHandler.handleAjaxError);
     };
 
     /**
@@ -720,7 +716,7 @@ nf.Canvas = (function () {
 
             // update the birdseye
             nf.Birdseye.refresh();
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(nf.ErrorHandler.handleAjaxError);
     };
 
     /**
@@ -740,19 +736,6 @@ nf.Canvas = (function () {
         });
     };
 
-    /**
-     * Loads the flow configuration and updated the cluster state.
-     *
-     * @returns xhr
-     */
-    var loadClusterSummary = function () {
-        return $.ajax({
-            type: 'GET',
-            url: config.urls.clusterSummary,
-            dataType: 'json'
-        });
-    };
-
     return {
         CANVAS_OFFSET: 0,
 
@@ -800,15 +783,11 @@ nf.Canvas = (function () {
                 }).done(function (response) {
                     nf.ng.Bridge.injector.get('flowStatusCtrl').updateBulletins(response);
                 });
-                var clusterSummary = loadClusterSummary().done(function (response) {
+                var clusterSummary = nf.ClusterSummary.loadClusterSummary().done(function (response) {
                     var clusterSummary = response.clusterSummary;
 
                     // update the cluster summary
                     nf.ng.Bridge.injector.get('flowStatusCtrl').updateClusterSummary(clusterSummary);
-
-                    // update the clustered flag
-                    clustered = clusterSummary.clustered;
-                    connectedToCluster = clusterSummary.connectedToCluster;
                 });
 
                 // wait for all requests to complete
@@ -824,26 +803,6 @@ nf.Canvas = (function () {
             }).promise();
         },
 
-        /**
-         * Shows a message when disconnected from the cluster.
-         */
-        showDisconnectedFromClusterMessage: function () {
-            nf.Dialog.showOkDialog({
-                headerText: 'Cluster Connection',
-                dialogContent: 'This node is currently not connected to the cluster. Any modifications to the data flow made here will not replicate across the cluster.'
-            });
-        },
-
-        /**
-         * Shows a message when connected to the cluster.
-         */
-        showConnectedToClusterMessage: function () {
-            nf.Dialog.showOkDialog({
-                headerText: 'Cluster Connection',
-                dialogContent: 'This node just joined the cluster. Any modifications to the data flow made here will replicate across the cluster.'
-            });
-        },
-
         /**
          * Initialize NiFi.
          */
@@ -909,13 +868,9 @@ nf.Canvas = (function () {
                     dataType: 'json'
                 });
 
-                // get the initial cluster summary
-                var clusterSummary = loadClusterSummary();
-
                 // ensure the config requests are loaded
-                $.when(configXhr, clusterSummary, userXhr, clientXhr).done(function (configResult, clusterSummaryResult) {
+                $.when(configXhr, nf.ClusterSummary.loadClusterSummary(), userXhr, clientXhr).done(function (configResult) {
                     var configResponse = configResult[0];
-                    var clusterSummaryResponse = clusterSummaryResult[0];
 
                     // calculate the canvas offset
                     var canvasContainer = $('#canvas-container');
@@ -923,20 +878,12 @@ nf.Canvas = (function () {
 
                     // get the config details
                     var configDetails = configResponse.flowConfiguration;
-                    var clusterSummary = clusterSummaryResponse.clusterSummary;
 
                     // show disconnected message on load if necessary
-                    if (clusterSummary.clustered && !clusterSummary.connectedToCluster) {
-                        nf.Canvas.showDisconnectedFromClusterMessage();
+                    if (nf.ClusterSummary.isClustered() && !nf.ClusterSummary.isConnectedToCluster()) {
+                        nf.Dialog.showDisconnectedFromClusterMessage();
                     }
 
-                    // establish the initial cluster state
-                    clustered = clusterSummary.clustered;
-                    connectedToCluster = clusterSummary.connectedToCluster;
-
-                    // update the cluster summary
-                    nf.ng.Bridge.injector.get('flowStatusCtrl').updateClusterSummary(clusterSummary);
-
                     // get the auto refresh interval
                     var autoRefreshIntervalSeconds = parseInt(configDetails.autoRefreshIntervalSeconds, 10);
 
@@ -978,7 +925,7 @@ nf.Canvas = (function () {
                     nf.RemoteProcessGroupPorts.init();
                     nf.PortConfiguration.init();
                     nf.LabelConfiguration.init();
-                    nf.ProcessorDetails.init();
+                    nf.ProcessorDetails.init(true);
                     nf.PortDetails.init();
                     nf.ConnectionDetails.init();
                     nf.RemoteProcessGroupDetails.init();
@@ -996,27 +943,9 @@ nf.Canvas = (function () {
 
                         // hide the splash screen
                         nf.Canvas.hideSplash();
-                    }).fail(nf.Common.handleAjaxError);
-                }).fail(nf.Common.handleAjaxError);
-            }).fail(nf.Common.handleAjaxError);
-        },
-
-        /**
-         * Return whether this instance of NiFi is clustered.
-         *
-         * @returns {Boolean}
-         */
-        isClustered: function () {
-            return clustered === true;
-        },
-
-        /**
-         * Return whether this instance is connected to a cluster.
-         *
-         * @returns {boolean}
-         */
-        isConnectedToCluster: function () {
-            return connectedToCluster === true;
+                    }).fail(nf.ErrorHandler.handleAjaxError);
+                }).fail(nf.ErrorHandler.handleAjaxError);
+            }).fail(nf.ErrorHandler.handleAjaxError);
         },
 
         /**
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js
index c71981eb8c..0d5c198097 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js
@@ -253,7 +253,7 @@ nf.ComponentState = (function () {
 
                             // reload the table with no state
                             loadComponentState()
-                        }).fail(nf.Common.handleAjaxError);
+                        }).fail(nf.ErrorHandler.handleAjaxError);
                     } else {
                         nf.Dialog.showOkDialog({
                             headerText: 'Component State',
@@ -265,12 +265,24 @@ nf.ComponentState = (function () {
 
             // initialize the queue listing table
             var componentStateColumns = [
-                {id: 'key', field: 'key', name: 'Key', sortable: true, resizable: true},
-                {id: 'value', field: 'value', name: 'Value', sortable: true, resizable: true}
+                {
+                    id: 'key',
+                    field: 'key',
+                    name: 'Key',
+                    sortable: true,
+                    resizable: true
+                },
+                {
+                    id: 'value',
+                    field: 'value',
+                    name: 'Value',
+                    sortable: true,
+                    resizable: true
+                }
             ];
 
             // conditionally show the cluster node identifier
-            if (nf.Canvas.isClustered()) {
+            if (nf.ClusterSummary.isClustered()) {
                 componentStateColumns.push({
                     id: 'scope',
                     field: 'scope',
@@ -378,7 +390,7 @@ nf.ComponentState = (function () {
                 // reset the grid size
                 var componentStateGrid = componentStateTable.data('gridInstance');
                 componentStateGrid.resizeCanvas();
-            }).fail(nf.Common.handleAjaxError);
+            }).fail(nf.ErrorHandler.handleAjaxError);
         }
     };
 }());
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js
index 74fc03d0fd..df943fbcb1 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js
@@ -340,7 +340,7 @@ nf.ConnectionConfiguration = (function () {
                 }
             }).fail(function (xhr, status, error) {
                 // handle the error
-                nf.Common.handleAjaxError(xhr, status, error);
+                nf.ErrorHandler.handleAjaxError(xhr, status, error);
 
                 deferred.reject();
             });
@@ -416,7 +416,7 @@ nf.ConnectionConfiguration = (function () {
                 }
             }).fail(function (xhr, status, error) {
                 // handle the error
-                nf.Common.handleAjaxError(xhr, status, error);
+                nf.ErrorHandler.handleAjaxError(xhr, status, error);
 
                 deferred.reject();
             });
@@ -565,7 +565,7 @@ nf.ConnectionConfiguration = (function () {
                 }
             }).fail(function (xhr, status, error) {
                 // handle the error
-                nf.Common.handleAjaxError(xhr, status, error);
+                nf.ErrorHandler.handleAjaxError(xhr, status, error);
 
                 deferred.reject();
             });
@@ -641,7 +641,7 @@ nf.ConnectionConfiguration = (function () {
                 }
             }).fail(function (xhr, status, error) {
                 // handle the error
-                nf.Common.handleAjaxError(xhr, status, error);
+                nf.ErrorHandler.handleAjaxError(xhr, status, error);
 
                 deferred.reject();
             });
@@ -926,7 +926,7 @@ nf.ConnectionConfiguration = (function () {
                 nf.Birdseye.refresh();
             }).fail(function (xhr, status, error) {
                 // handle the error
-                nf.Common.handleAjaxError(xhr, status, error);
+                nf.ErrorHandler.handleAjaxError(xhr, status, error);
             });
         }
     };
@@ -1000,7 +1000,7 @@ nf.ConnectionConfiguration = (function () {
                         dialogContent: nf.Common.escapeHtml(xhr.responseText),
                     });
                 } else {
-                    nf.Common.handleAjaxError(xhr, status, error);
+                    nf.ErrorHandler.handleAjaxError(xhr, status, error);
                 }
             });
         } else {
@@ -1179,7 +1179,7 @@ nf.ConnectionConfiguration = (function () {
                     opacity: 0.6
                 });
                 $('#prioritizer-available, #prioritizer-selected').disableSelection();
-            }).fail(nf.Common.handleAjaxError);
+            }).fail(nf.ErrorHandler.handleAjaxError);
         },
 
         /**
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection.js
index a6bbef7f96..e6252cbfdc 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection.js
@@ -1483,7 +1483,7 @@ nf.Connection = (function () {
                     dialogContent: nf.Common.escapeHtml(xhr.responseText)
                 });
             } else {
-                nf.Common.handleAjaxError(xhr, status, error);
+                nf.ErrorHandler.handleAjaxError(xhr, status, error);
             }
         });
     };
@@ -1706,7 +1706,7 @@ nf.Connection = (function () {
                                         'updateLabel': false
                                     });
                                 } else {
-                                    nf.Common.handleAjaxError(xhr, status, error);
+                                    nf.ErrorHandler.handleAjaxError(xhr, status, error);
                                 }
                             });
                         }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js
index aee36228a1..444fe52ab5 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js
@@ -52,7 +52,7 @@ nf.ControllerService = (function () {
                 headerText: 'Controller Service'
             });
         } else {
-            nf.Common.handleAjaxError(xhr, status, error);
+            nf.ErrorHandler.handleAjaxError(xhr, status, error);
         }
     };
 
@@ -140,7 +140,7 @@ nf.ControllerService = (function () {
             dataType: 'json'
         }).done(function (response) {
             renderControllerService(serviceTable, response);
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(nf.ErrorHandler.handleAjaxError);
     };
 
     /**
@@ -583,7 +583,7 @@ nf.ControllerService = (function () {
                 sourceId: ids
             },
             dataType: 'json'
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(nf.ErrorHandler.handleAjaxError);
     };
 
     /**
@@ -612,7 +612,7 @@ nf.ControllerService = (function () {
             contentType: 'application/json'
         }).done(function (response) {
             renderControllerService(serviceTable, response);
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(nf.ErrorHandler.handleAjaxError);
 
         // wait until the polling of each service finished
         return $.Deferred(function (deferred) {
@@ -730,7 +730,7 @@ nf.ControllerService = (function () {
             data: JSON.stringify(referenceEntity),
             dataType: 'json',
             contentType: 'application/json'
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(nf.ErrorHandler.handleAjaxError);
 
         // Note: updated revisions will be retrieved after updateReferencingSchedulableComponents is invoked
 
@@ -810,7 +810,7 @@ nf.ControllerService = (function () {
                     conditionMet(serviceResponse.component, bulletinResponse.bulletinBoard.bulletins);
                 }).fail(function (xhr, status, error) {
                     deferred.reject();
-                    nf.Common.handleAjaxError(xhr, status, error);
+                    nf.ErrorHandler.handleAjaxError(xhr, status, error);
                 });
             };
 
@@ -832,7 +832,7 @@ nf.ControllerService = (function () {
                 conditionMet(controllerService, response.bulletinBoard.bulletins);
             }).fail(function (xhr, status, error) {
                 deferred.reject();
-                nf.Common.handleAjaxError(xhr, status, error);
+                nf.ErrorHandler.handleAjaxError(xhr, status, error);
             });
         }).promise();
     };
@@ -1002,7 +1002,7 @@ nf.ControllerService = (function () {
             data: JSON.stringify(referenceEntity),
             dataType: 'json',
             contentType: 'application/json'
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(nf.ErrorHandler.handleAjaxError);
 
         // Note: updated revisions will be retrieved after updateReferencingServices is invoked
 
@@ -1448,7 +1448,7 @@ nf.ControllerService = (function () {
                 propertyName: propertyName
             },
             dataType: 'json'
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(nf.ErrorHandler.handleAjaxError);
     };
 
     /**
@@ -1737,6 +1737,7 @@ nf.ControllerService = (function () {
                 // initialize the property table
                 $('#controller-service-properties').propertytable('destroy').propertytable({
                     readOnly: false,
+                    supportsGoTo: true,
                     dialogContainer: '#new-controller-service-property-container',
                     descriptorDeferred: getControllerServicePropertyDescriptor,
                     controllerServiceCreatedDeferred: function(response) {
@@ -1909,7 +1910,7 @@ nf.ControllerService = (function () {
                 updateReferencingComponentsBorder(referenceContainer);
 
                 $('#controller-service-properties').propertytable('resetTableSize');
-            }).fail(nf.Common.handleAjaxError);
+            }).fail(nf.ErrorHandler.handleAjaxError);
         },
 
         /**
@@ -1927,6 +1928,7 @@ nf.ControllerService = (function () {
 
                 // initialize the property table
                 $('#controller-service-properties').propertytable('destroy').propertytable({
+                    supportsGoTo: true,
                     readOnly: true
                 });
 
@@ -2108,7 +2110,7 @@ nf.ControllerService = (function () {
                 if (controllerServiceEntity.permissions.canRead) {
                     reloadControllerServiceReferences(serviceTable, controllerServiceEntity.component);
                 }
-            }).fail(nf.Common.handleAjaxError);
+            }).fail(nf.ErrorHandler.handleAjaxError);
         }
     };
 }());
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js
index 5fdc8c9c32..5010013ca7 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js
@@ -252,7 +252,7 @@ nf.ControllerServices = (function () {
             var row = controllerServicesData.getRowById(controllerServiceEntity.id);
             controllerServicesGrid.setSelectedRows([row]);
             controllerServicesGrid.scrollRowIntoView(row);
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(nf.ErrorHandler.handleAjaxError);
 
         // hide the dialog
         $('#new-controller-service-dialog').modal('hide');
@@ -266,8 +266,21 @@ nf.ControllerServices = (function () {
     var initNewControllerServiceDialog = function () {
         // initialize the processor type table
         var controllerServiceTypesColumns = [
-            {id: 'type', name: 'Type', field: 'label', formatter: nf.Common.typeFormatter, sortable: false, resizable: true},
-            {id: 'tags', name: 'Tags', field: 'tags', sortable: false, resizable: true}
+            {
+                id: 'type',
+                name: 'Type',
+                field: 'label',
+                formatter: nf.Common.typeFormatter,
+                sortable: false,
+                resizable: true
+            },
+            {
+                id: 'tags',
+                name: 'Tags',
+                field: 'tags',
+                sortable: false,
+                resizable: true
+            }
         ];
 
         // initialize the dataview
@@ -403,7 +416,7 @@ nf.ControllerServices = (function () {
                 select: applyControllerServiceTypeFilter,
                 remove: applyControllerServiceTypeFilter
             });
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(nf.ErrorHandler.handleAjaxError);
 
         // initialize the controller service dialog
         $('#new-controller-service-dialog').modal({
@@ -651,11 +664,44 @@ nf.ControllerServices = (function () {
 
         // define the column model for the controller services table
         var controllerServicesColumns = [
-            {id: 'moreDetails', name: ' ', resizable: false, formatter: moreControllerServiceDetails, sortable: true, width: 90, maxWidth: 90, toolTip: 'Sorts based on presence of bulletins'},
-            {id: 'name', name: 'Name', formatter: nameFormatter, sortable: true, resizable: true},
-            {id: 'type', name: 'Type', formatter: typeFormatter, sortable: true, resizable: true},
-            {id: 'state', name: 'State', formatter: controllerServiceStateFormatter, sortable: true, resizeable: true},
-            {id: 'parentGroupId', name: 'Process Group', formatter: groupIdFormatter, sortable: true, resizeable: true}
+            {
+                id: 'moreDetails',
+                name: ' ',
+                resizable: false,
+                formatter: moreControllerServiceDetails,
+                sortable: true,
+                width: 90,
+                maxWidth: 90,
+                toolTip: 'Sorts based on presence of bulletins'
+            },
+            {
+                id: 'name',
+                name: 'Name',
+                formatter: nameFormatter,
+                sortable: true,
+                resizable: true
+            },
+            {
+                id: 'type',
+                name: 'Type',
+                formatter: typeFormatter,
+                sortable: true,
+                resizable: true
+            },
+            {
+                id: 'state',
+                name: 'State',
+                formatter: controllerServiceStateFormatter,
+                sortable: true,
+                resizeable: true
+            },
+            {
+                id: 'parentGroupId',
+                name: 'Process Group',
+                formatter: groupIdFormatter,
+                sortable: true,
+                resizeable: true
+            }
         ];
 
         // action column should always be last
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-custom-ui.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-custom-ui.js
index fafc76f7cd..4d82308b56 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-custom-ui.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-custom-ui.js
@@ -15,48 +15,74 @@
  * limitations under the License.
  */
 
-/* global nf */
+/* global nf, define, module, require, exports */
 
-nf.CustomUi = {
-    /**
-     * Shows the custom ui.
-     * 
-     * @argument {object} entity            The component id
-     * @arugment {string} uri               The custom ui uri
-     * @argument {boolean} editable         Whether the custom ui should support editing
-     */
-    showCustomUi: function (entity, uri, editable) {
-        return $.Deferred(function (deferred) {
-            nf.Common.getAccessToken('../nifi-api/access/ui-extension-token').done(function (uiExtensionToken) {
-                // record the processor id
-                $('#shell-close-button');
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+            'nf.Common',
+            'nf.Shell',
+            'nf.Dialog',
+            'nf.Client'], function ($, common, shell, dialog, client) {
+            return (nf.CustomUi = factory($, common, shell, dialog, client));
+        });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.CustomUi = factory(require('jquery'),
+            require('nf.Common'),
+            require('nf.Shell'),
+            require('nf.Dialog'),
+            require('nf.Client')));
+    } else {
+        nf.CustomUi = factory(root.$,
+            root.nf.Common,
+            root.nf.Shell,
+            root.nf.Dialog,
+            root.nf.Client);
+    }
+}(this, function ($, common, shell, dialog, client) {
+    'use strict';
 
-                var revision = nf.Client.getRevision(entity);
+    return {
+        /**
+         * Shows the custom ui.
+         *
+         * @argument {object} entity            The component id
+         * @arugment {string} uri               The custom ui uri
+         * @argument {boolean} editable         Whether the custom ui should support editing
+         */
+        showCustomUi: function (entity, uri, editable) {
+            return $.Deferred(function (deferred) {
+                common.getAccessToken('../nifi-api/access/ui-extension-token').done(function (uiExtensionToken) {
+                    // record the processor id
+                    $('#shell-close-button');
 
-                // build the customer ui params
-                var customUiParams = {
-                    'id': entity.id,
-                    'revision': revision.version,
-                    'clientId': revision.clientId,
-                    'editable': editable
-                };
+                    var revision = client.getRevision(entity);
 
-                // conditionally include the ui extension token
-                if (!nf.Common.isBlank(uiExtensionToken)) {
-                    customUiParams['access_token'] = uiExtensionToken;
-                }
+                    // build the customer ui params
+                    var customUiParams = {
+                        'id': entity.id,
+                        'revision': revision.version,
+                        'clientId': revision.clientId,
+                        'editable': editable
+                    };
 
-                // show the shell
-                nf.Shell.showPage('..' + uri + '?' + $.param(customUiParams), false).done(function () {
+                    // conditionally include the ui extension token
+                    if (!common.isBlank(uiExtensionToken)) {
+                        customUiParams['access_token'] = uiExtensionToken;
+                    }
+
+                    // show the shell
+                    shell.showPage('..' + uri + '?' + $.param(customUiParams), false).done(function () {
+                        deferred.resolve();
+                    });
+                }).fail(function () {
+                    dialog.showOkDialog({
+                        headerText: 'Advanced Configuration',
+                        dialogContent: 'Unable to generate access token for accessing the advanced configuration dialog.'
+                    });
                     deferred.resolve();
                 });
-            }).fail(function () {
-                nf.Dialog.showOkDialog({
-                    headerText: 'Advanced Configuration',
-                    dialogContent: 'Unable to generate access token for accessing the advanced configuration dialog.'
-                });
-                deferred.resolve();
-            });
-        }).promise();
+            }).promise();
+        }
     }
-};
\ No newline at end of file
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js
index 08b45900aa..a771fc51c9 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js
@@ -248,7 +248,7 @@ nf.Draggable = (function () {
                             dialogContent: nf.Common.escapeHtml(xhr.responseText)
                         });
                     } else {
-                        nf.Common.handleAjaxError(xhr, status, error);
+                        nf.ErrorHandler.handleAjaxError(xhr, status, error);
                     }
 
                     deferred.reject();
@@ -309,7 +309,7 @@ nf.Draggable = (function () {
                             dialogContent: nf.Common.escapeHtml(xhr.responseText)
                         });
                     } else {
-                        nf.Common.handleAjaxError(xhr, status, error);
+                        nf.ErrorHandler.handleAjaxError(xhr, status, error);
                     }
 
                     deferred.reject();
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js
index 2b23b1a5df..5e387efc10 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js
@@ -683,7 +683,7 @@ nf.GoTo = (function () {
 
                 // show the upstream dialog
                 $('#connections-dialog').modal('setHeaderText', 'Upstream Connections').modal('show');
-            }).fail(nf.Common.handleAjaxError);
+            }).fail(nf.ErrorHandler.handleAjaxError);
         },
 
         /**
@@ -734,7 +734,7 @@ nf.GoTo = (function () {
 
                 // show the downstream dialog
                 $('#connections-dialog').modal('setHeaderText', 'Downstream Connections').modal('show');
-            }).fail(nf.Common.handleAjaxError);
+            }).fail(nf.ErrorHandler.handleAjaxError);
         },
 
         /**
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-configuration.js
index 8963fa4157..0eba38e650 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-configuration.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-configuration.js
@@ -71,7 +71,7 @@ nf.LabelConfiguration = (function () {
 
                                 // inform Angular app values have changed
                                 nf.ng.Bridge.digest();
-                            }).fail(nf.Common.handleAjaxError);
+                            }).fail(nf.ErrorHandler.handleAjaxError);
 
                             // reset and hide the dialog
                             this.modal('hide');
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 dc40c95702..b19d033b91 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
@@ -129,11 +129,11 @@ nf.PolicyManagement = (function () {
                 var allowedGroups = getAllAllowedGroups();
                 var allowedUsers = getAllAllowedUsers();
 
-                var self = this;
+                var nfUserSearchAutocomplete = this;
                 $.each(searchResults.userGroups, function (_, tenant) {
                     // see if this match is not already selected
                     if ($.inArray(tenant.id, allowedGroups) === -1) {
-                        self._renderGroup(ul, $.extend({
+                        nfUserSearchAutocomplete._renderGroup(ul, $.extend({
                             type: 'group'
                         }, tenant));
                     }
@@ -141,7 +141,7 @@ nf.PolicyManagement = (function () {
                 $.each(searchResults.users, function (_, tenant) {
                     // see if this match is not already selected
                     if ($.inArray(tenant.id, allowedUsers) === -1) {
-                        self._renderUser(ul, $.extend({
+                        nfUserSearchAutocomplete._renderUser(ul, $.extend({
                             type: 'user'
                         }, tenant));
                     }
@@ -504,9 +504,24 @@ nf.PolicyManagement = (function () {
 
         // initialize the templates table
         var usersColumns = [
-            {id: 'identity', name: 'User', sortable: true, resizable: true, formatter: identityFormatter},
-            {id: 'actions', name: ' ', sortable: false, resizable: false, formatter: actionFormatter, width: 100, maxWidth: 100}
+            {
+                id: 'identity',
+                name: 'User',
+                sortable: true,
+                resizable: true,
+                formatter: identityFormatter
+            },
+            {
+                id: 'actions',
+                name: ' ',
+                sortable: false,
+                resizable: false,
+                formatter: actionFormatter,
+                width: 100,
+                maxWidth: 100
+            }
         ];
+
         var usersOptions = {
             forceFitColumns: true,
             enableTextSelectionOnCells: true,
@@ -669,7 +684,7 @@ nf.PolicyManagement = (function () {
             }).done(function () {
                 loadPolicy();
             }).fail(function (xhr, status, error) {
-                nf.Common.handleAjaxError(xhr, status, error);
+                nf.ErrorHandler.handleAjaxError(xhr, status, error);
                 resetPolicy();
                 loadPolicy();
             });
@@ -896,7 +911,7 @@ nf.PolicyManagement = (function () {
                         resetPolicy();
 
                         deferred.reject();
-                        nf.Common.handleAjaxError(xhr, status, error);
+                        nf.ErrorHandler.handleAjaxError(xhr, status, error);
                     }
                 });
             }).promise();
@@ -954,7 +969,7 @@ nf.PolicyManagement = (function () {
                         resetPolicy();
 
                         deferred.reject();
-                        nf.Common.handleAjaxError(xhr, status, error);
+                        nf.ErrorHandler.handleAjaxError(xhr, status, error);
                     }
                 });
             }).promise();
@@ -1022,7 +1037,7 @@ nf.PolicyManagement = (function () {
                 resetPolicy();
                 loadPolicy();
             }
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(nf.ErrorHandler.handleAjaxError);
     };
 
     /**
@@ -1077,7 +1092,7 @@ nf.PolicyManagement = (function () {
                     loadPolicy();
                 }
             }).fail(function (xhr, status, error) {
-                nf.Common.handleAjaxError(xhr, status, error);
+                nf.ErrorHandler.handleAjaxError(xhr, status, error);
                 resetPolicy();
                 loadPolicy();
             }).always(function () {
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 420febb1a5..a49290a5ca 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
@@ -103,7 +103,7 @@ nf.PortConfiguration = (function () {
                                 $('#port-configuration').modal('hide');
 
                                 // handle the error
-                                nf.Common.handleAjaxError(xhr, status, error);
+                                nf.ErrorHandler.handleAjaxError(xhr, status, error);
                             }
                         });
                     }
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 aa37034a72..7311f074ae 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
@@ -86,7 +86,7 @@ nf.ProcessGroupConfiguration = (function () {
             });
 
             nf.Canvas.reload();
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(nf.ErrorHandler.handleAjaxError);
     };
 
     /**
@@ -179,7 +179,7 @@ nf.ProcessGroupConfiguration = (function () {
 
             // update the current time
             $('#process-group-configuration-last-refreshed').text(controllerServicesResponse.currentTime);
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(nf.ErrorHandler.handleAjaxError);
     };
 
     /**
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor-configuration.js
index a9a51f5cfa..bf13707357 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor-configuration.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor-configuration.js
@@ -87,7 +87,7 @@ nf.ProcessorConfiguration = (function () {
             text: 'Primary node',
             value: 'PRIMARY',
             description: 'Processor will be scheduled to run only on the primary node',
-            disabled: !nf.Canvas.isClustered() && processor.config['executionNode'] === 'PRIMARY'
+            disabled: !nf.ClusterSummary.isClustered() && processor.config['executionNode'] === 'PRIMARY'
         }];
     };
 
@@ -114,7 +114,7 @@ nf.ProcessorConfiguration = (function () {
                 headerText: 'Processor Configuration'
             });
         } else {
-            nf.Common.handleAjaxError(xhr, status, error);
+            nf.ErrorHandler.handleAjaxError(xhr, status, error);
         }
     };
 
@@ -562,6 +562,7 @@ nf.ProcessorConfiguration = (function () {
             // initialize the property table
             $('#processor-properties').propertytable({
                 readOnly: false,
+                supportsGoTo: true,
                 dialogContainer: '#new-processor-property-container',
                 descriptorDeferred: function (propertyName) {
                     var processor = $('#processor-configuration').data('processorDetails');
@@ -573,7 +574,7 @@ nf.ProcessorConfiguration = (function () {
                             propertyName: propertyName
                         },
                         dataType: 'json'
-                    }).fail(nf.Common.handleAjaxError);
+                    }).fail(nf.ErrorHandler.handleAjaxError);
                 },
                 goToServiceDeferred: goToServiceFromProperty
             });
@@ -689,7 +690,7 @@ nf.ProcessorConfiguration = (function () {
                     });
 
                     // show the execution node option if we're cluster or we're currently configured to run on the primary node only
-                    if (nf.Canvas.isClustered() || executionNode === 'PRIMARY') {
+                    if (nf.ClusterSummary.isClustered() || executionNode === 'PRIMARY') {
                         $('#execution-node-options').show();
                     } else {
                         $('#execution-node-options').hide();
@@ -852,7 +853,7 @@ nf.ProcessorConfiguration = (function () {
                     if (processorRelationships.is(':visible') && processorRelationships.get(0).scrollHeight > processorRelationships.innerHeight()) {
                         processorRelationships.css('border-width', '1px');
                     }
-                }).fail(nf.Common.handleAjaxError);
+                }).fail(nf.ErrorHandler.handleAjaxError);
             }
         }
     };
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-queue-listing.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-queue-listing.js
index 641fc6f3c3..0dac31ae86 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-queue-listing.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-queue-listing.js
@@ -316,7 +316,7 @@ nf.QueueListing = (function () {
                 }).done(function (response) {
                     listingRequest = response.listingRequest;
                     processListingRequest(nextDelay);
-                }).fail(completeListingRequest).fail(nf.Common.handleAjaxError);
+                }).fail(completeListingRequest).fail(nf.ErrorHandler.handleAjaxError);
             };
 
             // issue the request to list the flow files
@@ -335,7 +335,7 @@ nf.QueueListing = (function () {
                 // process the drop request
                 listingRequest = response.listingRequest;
                 processListingRequest(1);
-            }).fail(completeListingRequest).fail(nf.Common.handleAjaxError);
+            }).fail(completeListingRequest).fail(nf.ErrorHandler.handleAjaxError);
         }).promise();
     };
 
@@ -436,7 +436,7 @@ nf.QueueListing = (function () {
 
             // show the dialog
             $('#flowfile-details-dialog').modal('show');
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(nf.ErrorHandler.handleAjaxError);
     };
 
     return {
@@ -496,8 +496,20 @@ nf.QueueListing = (function () {
                     width: 75,
                     maxWidth: 75
                 },
-                {id: 'uuid', name: 'UUID', field: 'uuid', sortable: false, resizable: true},
-                {id: 'filename', name: 'Filename', field: 'filename', sortable: false, resizable: true},
+                {
+                    id: 'uuid',
+                    name: 'UUID',
+                    field: 'uuid',
+                    sortable: false,
+                    resizable: true
+                },
+                {
+                    id: 'filename',
+                    name: 'Filename',
+                    field: 'filename',
+                    sortable: false,
+                    resizable: true
+                },
                 {
                     id: 'size',
                     name: 'File Size',
@@ -536,7 +548,7 @@ nf.QueueListing = (function () {
             ];
 
             // conditionally show the cluster node identifier
-            if (nf.Canvas.isClustered()) {
+            if (nf.ClusterSummary.isClustered()) {
                 queueListingColumns.push({
                     id: 'clusterNodeAddress',
                     name: 'Node',
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-configuration.js
index ece8be69fe..d012be4660 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-configuration.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-configuration.js
@@ -82,7 +82,7 @@ nf.RemoteProcessGroupConfiguration = (function () {
                                         headerText: 'Remote Process Group Configuration'
                                     });
                                 } else {
-                                    nf.Common.handleAjaxError(xhr, status, error);
+                                    nf.ErrorHandler.handleAjaxError(xhr, status, error);
                                 }
                             });
                         }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-ports.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-ports.js
index d5c9ae7c59..7c75aa2481 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-ports.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-ports.js
@@ -100,7 +100,7 @@ nf.RemoteProcessGroupPorts = (function () {
                                         headerText: 'Remote Process Group Ports'
                                     });
                                 } else {
-                                    nf.Common.handleAjaxError(xhr, status, error);
+                                    nf.ErrorHandler.handleAjaxError(xhr, status, error);
                                 }
                             }).always(function () {
                                 // close the dialog
@@ -351,7 +351,7 @@ nf.RemoteProcessGroupPorts = (function () {
                                 dialogContent: content
                             });
                         } else {
-                            nf.Common.handleAjaxError(xhr, status, error);
+                            nf.ErrorHandler.handleAjaxError(xhr, status, error);
                         }
                     });
                 });
@@ -548,7 +548,7 @@ nf.RemoteProcessGroupPorts = (function () {
 
                     // show the details
                     $('#remote-process-group-ports').modal('show');
-                }).fail(nf.Common.handleAjaxError);
+                }).fail(nf.ErrorHandler.handleAjaxError);
             }
         }
     };
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-reporting-task.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-reporting-task.js
index f134b69e00..cf94ba293d 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-reporting-task.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-reporting-task.js
@@ -62,7 +62,7 @@ nf.ReportingTask = (function () {
                 headerText: 'Reporting Task'
             });
         } else {
-            nf.Common.handleAjaxError(xhr, status, error);
+            nf.ErrorHandler.handleAjaxError(xhr, status, error);
         }
     };
 
@@ -219,7 +219,7 @@ nf.ReportingTask = (function () {
             // update the task
             renderReportingTask(response);
             nf.ControllerService.reloadReferencedServices(getControllerServicesTable(), response.component);
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(nf.ErrorHandler.handleAjaxError);
     };
 
     /**
@@ -299,7 +299,7 @@ nf.ReportingTask = (function () {
                 propertyName: propertyName
             },
             dataType: 'json'
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(nf.ErrorHandler.handleAjaxError);
     };
 
     return {
@@ -363,6 +363,7 @@ nf.ReportingTask = (function () {
             // initialize the property table
             $('#reporting-task-properties').propertytable({
                 readOnly: false,
+                supportsGoTo: true,
                 dialogContainer: '#new-reporting-task-property-container',
                 descriptorDeferred: getReportingTaskPropertyDescriptor,
                 controllerServiceCreatedDeferred: function(response){
@@ -387,6 +388,7 @@ nf.ReportingTask = (function () {
                 // initialize the property table
                 $('#reporting-task-properties').propertytable('destroy').propertytable({
                     readOnly: false,
+                    supportsGoTo: true,
                     dialogContainer: '#new-reporting-task-property-container',
                     descriptorDeferred: getReportingTaskPropertyDescriptor,
                     controllerServiceCreatedDeferred: function(response){
@@ -581,7 +583,7 @@ nf.ReportingTask = (function () {
                 $('#reporting-task-configuration').modal('show');
 
                 $('#reporting-task-properties').propertytable('resetTableSize');
-            }).fail(nf.Common.handleAjaxError);
+            }).fail(nf.ErrorHandler.handleAjaxError);
         },
 
         /**
@@ -598,6 +600,7 @@ nf.ReportingTask = (function () {
 
                 // initialize the property table
                 $('#reporting-task-properties').propertytable('destroy').propertytable({
+                    supportsGoTo: true,
                     readOnly: true
                 });
 
@@ -733,7 +736,7 @@ nf.ReportingTask = (function () {
                 dataType: 'json'
             }).done(function (response) {
                 renderReportingTask(response);
-            }).fail(nf.Common.handleAjaxError);
+            }).fail(nf.ErrorHandler.handleAjaxError);
         },
         
         /**
@@ -773,7 +776,7 @@ nf.ReportingTask = (function () {
                 var reportingTaskGrid = $('#reporting-tasks-table').data('gridInstance');
                 var reportingTaskData = reportingTaskGrid.getData();
                 reportingTaskData.deleteItem(reportingTaskEntity.id);
-            }).fail(nf.Common.handleAjaxError);
+            }).fail(nf.ErrorHandler.handleAjaxError);
         }
     };
 }());
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js
index 295c428532..65f222dfe9 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js
@@ -83,7 +83,7 @@ nf.Settings = (function () {
             $('#settings-save').off('click').on('click', function () {
                 saveSettings(response.revision.version);
             });
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(nf.ErrorHandler.handleAjaxError);
     }
 
     /**
@@ -402,7 +402,7 @@ nf.Settings = (function () {
             var row = reportingTaskData.getRowById(reportingTaskEntity.id);
             reportingTaskGrid.setSelectedRows([row]);
             reportingTaskGrid.scrollRowIntoView(row);
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(nf.ErrorHandler.handleAjaxError);
 
         // hide the dialog
         $('#new-reporting-task-dialog').modal('hide');
@@ -436,8 +436,21 @@ nf.Settings = (function () {
 
         // initialize the processor type table
         var reportingTaskTypesColumns = [
-            {id: 'type', name: 'Type', field: 'label', formatter: nf.Common.typeFormatter, sortable: false, resizable: true},
-            {id: 'tags', name: 'Tags', field: 'tags', sortable: false, resizable: true}
+            {
+                id: 'type',
+                name: 'Type',
+                field: 'label',
+                formatter: nf.Common.typeFormatter,
+                sortable: false,
+                resizable: true
+            },
+            {
+                id: 'tags',
+                name: 'Tags',
+                field: 'tags',
+                sortable: false,
+                resizable: true
+            }
         ];
 
         // initialize the dataview
@@ -580,7 +593,7 @@ nf.Settings = (function () {
                 select: applyReportingTaskTypeFilter,
                 remove: applyReportingTaskTypeFilter
             });
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(nf.ErrorHandler.handleAjaxError);
 
         // initialize the reporting task dialog
         $('#new-reporting-task-dialog').modal({
@@ -980,7 +993,7 @@ nf.Settings = (function () {
 
             // update the current time
             $('#settings-last-refreshed').text(controllerServicesResponse.currentTime);
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(nf.ErrorHandler.handleAjaxError);
     };
 
     /**
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster-table.js
index f91d73554d..93fff60866 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster-table.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster-table.js
@@ -15,9 +15,34 @@
  * limitations under the License.
  */
 
-/* global nf, Slick */
+/* global nf, define, module, require, exports */
 
-nf.ClusterTable = (function () {
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'Slick',
+                'nf.Common',
+                'nf.Dialog',
+                'nf.ErrorHandler'],
+            function ($, Slick, common, dialog, errorHandler) {
+                return (nf.ClusterTable = factory($, Slick, common, dialog, errorHandler));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.ClusterTable =
+            factory(require('jquery'),
+                require('Slick'),
+                require('nf.Common'),
+                require('nf.Dialog'),
+                require('nf.ErrorHandler')));
+    } else {
+        nf.ClusterTable = factory(root.$,
+            root.Slick,
+            root.nf.Common,
+            root.nf.Dialog,
+            root.nf.ErrorHandler);
+    }
+}(this, function ($, Slick, common, dialog, errorHandler) {
+    'use strict';
 
     /**
      * Configuration object used to hold a number of configuration items.
@@ -31,14 +56,14 @@ nf.ClusterTable = (function () {
             systemDiagnostics: '../nifi-api/system-diagnostics'
         },
         data: [{
-                name: 'cluster',
-                update: refreshClusterData,
-                isAuthorized: nf.Common.canAccessController
-            },{
-                name: 'systemDiagnostics',
-                update: refreshSystemDiagnosticsData,
-                isAuthorized: nf.Common.canAccessSystem
-            }
+            name: 'cluster',
+            update: refreshClusterData,
+            isAuthorized: common.canAccessController
+        }, {
+            name: 'systemDiagnostics',
+            update: refreshSystemDiagnosticsData,
+            isAuthorized: common.canAccessSystem
+        }
         ]
     };
 
@@ -51,7 +76,7 @@ nf.ClusterTable = (function () {
         rowHeight: 24
     };
 
-    var nodesTab =  {
+    var nodesTab = {
         name: 'Nodes',
         data: {
             dataSet: 'cluster',
@@ -85,14 +110,78 @@ nf.ClusterTable = (function () {
         tableId: 'cluster-jvm-table',
         tableColumnModel: [
             {id: 'node', field: 'node', name: 'Node Address', sortable: true, resizable: true},
-            {id: 'heapMax', field: 'maxHeap', name: 'Heap Max', sortable: true, resizable: true, cssClass: 'cell-right', headerCssClass: 'header-right'},
-            {id: 'heapTotal', field: 'totalHeap', name: 'Heap Total', sortable: true, resizable: true, cssClass: 'cell-right', headerCssClass: 'header-right'},
-            {id: 'heapUsed', field: 'usedHeap', name: 'Heap Used', sortable: true, resizable: true, cssClass: 'cell-right', headerCssClass: 'header-right'},
-            {id: 'heapUtilPct', field: 'heapUtilization', name: 'Heap Utilization', sortable: true, resizable: true, cssClass: 'cell-right', headerCssClass: 'header-right'},
-            {id: 'nonHeapTotal', field: 'totalNonHeap', name: 'Non-Heap Total', sortable: true, resizable: true, cssClass: 'cell-right', headerCssClass: 'header-right'},
-            {id: 'nonHeapUsed', field: 'usedNonHeap', name: 'Non-Heap Used', sortable: true, resizable: true, cssClass: 'cell-right', headerCssClass: 'header-right'},
-            {id: 'gcOldGen', field: 'gcOldGen', name: 'G1 Old Generation', sortable: true, resizable: true, cssClass: 'cell-right', headerCssClass: 'header-right'},
-            {id: 'gcNewGen', field: 'gcNewGen', name: 'G1 Young Generation', sortable: true, resizable: true, cssClass: 'cell-right', headerCssClass: 'header-right'}
+            {
+                id: 'heapMax',
+                field: 'maxHeap',
+                name: 'Heap Max',
+                sortable: true,
+                resizable: true,
+                cssClass: 'cell-right',
+                headerCssClass: 'header-right'
+            },
+            {
+                id: 'heapTotal',
+                field: 'totalHeap',
+                name: 'Heap Total',
+                sortable: true,
+                resizable: true,
+                cssClass: 'cell-right',
+                headerCssClass: 'header-right'
+            },
+            {
+                id: 'heapUsed',
+                field: 'usedHeap',
+                name: 'Heap Used',
+                sortable: true,
+                resizable: true,
+                cssClass: 'cell-right',
+                headerCssClass: 'header-right'
+            },
+            {
+                id: 'heapUtilPct',
+                field: 'heapUtilization',
+                name: 'Heap Utilization',
+                sortable: true,
+                resizable: true,
+                cssClass: 'cell-right',
+                headerCssClass: 'header-right'
+            },
+            {
+                id: 'nonHeapTotal',
+                field: 'totalNonHeap',
+                name: 'Non-Heap Total',
+                sortable: true,
+                resizable: true,
+                cssClass: 'cell-right',
+                headerCssClass: 'header-right'
+            },
+            {
+                id: 'nonHeapUsed',
+                field: 'usedNonHeap',
+                name: 'Non-Heap Used',
+                sortable: true,
+                resizable: true,
+                cssClass: 'cell-right',
+                headerCssClass: 'header-right'
+            },
+            {
+                id: 'gcOldGen',
+                field: 'gcOldGen',
+                name: 'G1 Old Generation',
+                sortable: true,
+                resizable: true,
+                cssClass: 'cell-right',
+                headerCssClass: 'header-right'
+            },
+            {
+                id: 'gcNewGen',
+                field: 'gcNewGen',
+                name: 'G1 Young Generation',
+                sortable: true,
+                resizable: true,
+                cssClass: 'cell-right',
+                headerCssClass: 'header-right'
+            }
         ],
         tableIdColumn: 'id',
         tableOptions: commonTableOptions,
@@ -116,10 +205,42 @@ nf.ClusterTable = (function () {
         tableId: 'cluster-system-table',
         tableColumnModel: [
             {id: 'node', field: 'node', name: 'Node Address', sortable: true, resizable: true},
-            {id: 'processors', field: 'processors', name: 'Processors', sortable: true, resizable: true, cssClass: 'cell-right', headerCssClass: 'header-right'},
-            {id: 'processorLoadAverage', field: 'processorLoadAverage', name: 'Processor Load Average', sortable: true, resizable: true, cssClass: 'cell-right', headerCssClass: 'header-right'},
-            {id: 'totalThreads', field: 'totalThreads', name: 'Total Threads', sortable: true, resizable: true, cssClass: 'cell-right', headerCssClass: 'header-right'},
-            {id: 'daemonThreads', field: 'daemonThreads', name: 'Daemon Threads', sortable: true, resizable: true, cssClass: 'cell-right', headerCssClass: 'header-right'}
+            {
+                id: 'processors',
+                field: 'processors',
+                name: 'Processors',
+                sortable: true,
+                resizable: true,
+                cssClass: 'cell-right',
+                headerCssClass: 'header-right'
+            },
+            {
+                id: 'processorLoadAverage',
+                field: 'processorLoadAverage',
+                name: 'Processor Load Average',
+                sortable: true,
+                resizable: true,
+                cssClass: 'cell-right',
+                headerCssClass: 'header-right'
+            },
+            {
+                id: 'totalThreads',
+                field: 'totalThreads',
+                name: 'Total Threads',
+                sortable: true,
+                resizable: true,
+                cssClass: 'cell-right',
+                headerCssClass: 'header-right'
+            },
+            {
+                id: 'daemonThreads',
+                field: 'daemonThreads',
+                name: 'Daemon Threads',
+                sortable: true,
+                resizable: true,
+                cssClass: 'cell-right',
+                headerCssClass: 'header-right'
+            }
         ],
         tableIdColumn: 'id',
         tableOptions: commonTableOptions,
@@ -143,10 +264,42 @@ nf.ClusterTable = (function () {
         tableId: 'cluster-flowfile-table',
         tableColumnModel: [
             {id: 'node', field: 'node', name: 'Node Address', sortable: true, resizable: true},
-            {id: 'ffRepoTotal', field: 'ffRepoTotal', name: 'Total Space', sortable: true, resizable: true, cssClass: 'cell-right', headerCssClass: 'header-right'},
-            {id: 'ffRepoUsed', field: 'ffRepoUsed', name: 'Used Space', sortable: true, resizable: true, cssClass: 'cell-right', headerCssClass: 'header-right'},
-            {id: 'ffRepoFree', field: 'ffRepoFree', name: 'Free Space', sortable: true, resizable: true, cssClass: 'cell-right', headerCssClass: 'header-right'},
-            {id: 'ffStoreUtil', field: 'ffRepoUtil', name: 'Utilization', sortable: true, resizable: true, cssClass: 'cell-right', headerCssClass: 'header-right'}
+            {
+                id: 'ffRepoTotal',
+                field: 'ffRepoTotal',
+                name: 'Total Space',
+                sortable: true,
+                resizable: true,
+                cssClass: 'cell-right',
+                headerCssClass: 'header-right'
+            },
+            {
+                id: 'ffRepoUsed',
+                field: 'ffRepoUsed',
+                name: 'Used Space',
+                sortable: true,
+                resizable: true,
+                cssClass: 'cell-right',
+                headerCssClass: 'header-right'
+            },
+            {
+                id: 'ffRepoFree',
+                field: 'ffRepoFree',
+                name: 'Free Space',
+                sortable: true,
+                resizable: true,
+                cssClass: 'cell-right',
+                headerCssClass: 'header-right'
+            },
+            {
+                id: 'ffStoreUtil',
+                field: 'ffRepoUtil',
+                name: 'Utilization',
+                sortable: true,
+                resizable: true,
+                cssClass: 'cell-right',
+                headerCssClass: 'header-right'
+            }
         ],
         tableIdColumn: 'id',
         tableOptions: commonTableOptions,
@@ -171,10 +324,42 @@ nf.ClusterTable = (function () {
         tableColumnModel: [
             {id: 'node', field: 'node', name: 'Node Address', sortable: true, resizable: true},
             {id: 'contentRepoId', field: 'contentRepoId', name: 'Content Repository', sortable: true, resizable: true},
-            {id: 'contentRepoTotal', field: 'contentRepoTotal', name: 'Total Space', sortable: true, resizable: true, cssClass: 'cell-right', headerCssClass: 'header-right'},
-            {id: 'contentRepoUsed', field: 'contentRepoUsed', name: 'Used Space', sortable: true, resizable: true, cssClass: 'cell-right', headerCssClass: 'header-right'},
-            {id: 'contentRepoFree', field: 'contentRepoFree', name: 'Free Space', sortable: true, resizable: true, cssClass: 'cell-right', headerCssClass: 'header-right'},
-            {id: 'contentRepoUtil', field: 'contentRepoUtil', name: 'Utilization', sortable: true, resizable: true, cssClass: 'cell-right', headerCssClass: 'header-right'}
+            {
+                id: 'contentRepoTotal',
+                field: 'contentRepoTotal',
+                name: 'Total Space',
+                sortable: true,
+                resizable: true,
+                cssClass: 'cell-right',
+                headerCssClass: 'header-right'
+            },
+            {
+                id: 'contentRepoUsed',
+                field: 'contentRepoUsed',
+                name: 'Used Space',
+                sortable: true,
+                resizable: true,
+                cssClass: 'cell-right',
+                headerCssClass: 'header-right'
+            },
+            {
+                id: 'contentRepoFree',
+                field: 'contentRepoFree',
+                name: 'Free Space',
+                sortable: true,
+                resizable: true,
+                cssClass: 'cell-right',
+                headerCssClass: 'header-right'
+            },
+            {
+                id: 'contentRepoUtil',
+                field: 'contentRepoUtil',
+                name: 'Utilization',
+                sortable: true,
+                resizable: true,
+                cssClass: 'cell-right',
+                headerCssClass: 'header-right'
+            }
         ],
         tableIdColumn: 'id',
         tableOptions: commonTableOptions,
@@ -186,9 +371,9 @@ nf.ClusterTable = (function () {
             text: 'by address',
             value: 'node'
         }, {
-           text: 'by repository',
-           value: 'contentRepoId'
-       }]
+            text: 'by repository',
+            value: 'contentRepoId'
+        }]
     };
 
     var versionTab = {
@@ -227,7 +412,7 @@ nf.ClusterTable = (function () {
     /**
      * Click handler for the Nodes table options.
      */
-    function nodesTableOnClick (e, args, target, item) {
+    function nodesTableOnClick(e, args, target, item) {
         if (nodesTab.grid.getColumns()[args.cell].id === 'actions') {
             if (target.hasClass('prompt-for-connect')) {
                 promptForConnect(item);
@@ -246,7 +431,7 @@ nf.ClusterTable = (function () {
     /**
      * Creates the Slick Grid column model for the Nodes table.
      */
-    function createNodeTableColumnModel () {
+    function createNodeTableColumnModel() {
         var moreDetailsFormatter = function (row, cell, value, columnDef, dataContext) {
             return '
    ';
         };
@@ -258,7 +443,7 @@ nf.ClusterTable = (function () {
 
         // function for formatting the last accessed time
         var valueFormatter = function (row, cell, value, columnDef, dataContext) {
-            return nf.Common.formatValue(value);
+            return common.formatValue(value);
         };
 
         // define a custom formatter for the status column
@@ -267,17 +452,69 @@ nf.ClusterTable = (function () {
         };
 
         var columnModel = [
-            {id: 'moreDetails', name: ' ', sortable: false, resizable: false, formatter: moreDetailsFormatter, width: 50, maxWidth: 50},
-            {id: 'formattedNodeAddress', field: 'formattedNodeAddress', name: 'Node Address', formatter: nodeFormatter, resizable: true, sortable: true},
-            {id: 'activeThreadCount', field: 'activeThreadCount', name: 'Active Thread Count', resizable: true, sortable: true, defaultSortAsc: false},
-            {id: 'queued', field: 'queued', name: 'Queue / Size', resizable: true, sortable: true, defaultSortAsc: false},
-            {id: 'status', field: 'status', name: 'Status', formatter: statusFormatter, resizable: true, sortable: true},
-            {id: 'uptime', field: 'nodeStartTime', name: 'Uptime', formatter: valueFormatter, resizable: true, sortable: true, defaultSortAsc: false},
-            {id: 'heartbeat', field: 'heartbeat', name: 'Last Heartbeat', formatter: valueFormatter, resizable: true, sortable: true, defaultSortAsc: false}
+            {
+                id: 'moreDetails',
+                name: ' ',
+                sortable: false,
+                resizable: false,
+                formatter: moreDetailsFormatter,
+                width: 50,
+                maxWidth: 50
+            },
+            {
+                id: 'formattedNodeAddress',
+                field: 'formattedNodeAddress',
+                name: 'Node Address',
+                formatter: nodeFormatter,
+                resizable: true,
+                sortable: true
+            },
+            {
+                id: 'activeThreadCount',
+                field: 'activeThreadCount',
+                name: 'Active Thread Count',
+                resizable: true,
+                sortable: true,
+                defaultSortAsc: false
+            },
+            {
+                id: 'queued',
+                field: 'queued',
+                name: 'Queue / Size',
+                resizable: true,
+                sortable: true,
+                defaultSortAsc: false
+            },
+            {
+                id: 'status',
+                field: 'status',
+                name: 'Status',
+                formatter: statusFormatter,
+                resizable: true,
+                sortable: true
+            },
+            {
+                id: 'uptime',
+                field: 'nodeStartTime',
+                name: 'Uptime',
+                formatter: valueFormatter,
+                resizable: true,
+                sortable: true,
+                defaultSortAsc: false
+            },
+            {
+                id: 'heartbeat',
+                field: 'heartbeat',
+                name: 'Last Heartbeat',
+                formatter: valueFormatter,
+                resizable: true,
+                sortable: true,
+                defaultSortAsc: false
+            }
         ];
 
         // only allow the admin to modify the cluster
-        if (nf.Common.canModifyController()) {
+        if (common.canModifyController()) {
             var actionFormatter = function (row, cell, value, columnDef, dataContext) {
                 var canDisconnect = false;
                 var canConnect = false;
@@ -299,7 +536,15 @@ nf.ClusterTable = (function () {
                 }
             };
 
-            columnModel.push({id: 'actions', label: ' ', formatter: actionFormatter, resizable: false, sortable: false, width: 80, maxWidth: 80});
+            columnModel.push({
+                id: 'actions',
+                label: ' ',
+                formatter: actionFormatter,
+                resizable: false,
+                sortable: false,
+                width: 80,
+                maxWidth: 80
+            });
         }
 
         return columnModel;
@@ -313,12 +558,12 @@ nf.ClusterTable = (function () {
      * @param {object} sortDetails
      * @param {object} data
      */
-    function sort (sortDetails, dataView, tab) {
+    function sort(sortDetails, dataView, tab) {
         // defines a function for sorting
         var comparer = function (a, b) {
             if (sortDetails.columnId === 'heartbeat' || sortDetails.columnId === 'uptime') {
-                var aDate = nf.Common.parseDateTime(a[sortDetails.columnId]);
-                var bDate = nf.Common.parseDateTime(b[sortDetails.columnId]);
+                var aDate = common.parseDateTime(a[sortDetails.columnId]);
+                var bDate = common.parseDateTime(b[sortDetails.columnId]);
                 return aDate.getTime() - bDate.getTime();
             } else if (sortDetails.columnId === 'queued') {
                 var aSplit = a[sortDetails.columnId].split(/ \/ /);
@@ -326,33 +571,33 @@ nf.ClusterTable = (function () {
                 var mod = count % 4;
                 if (mod < 2) {
                     $('#cluster-nodes-table span.queued-title').addClass('sorted');
-                    var aCount = nf.Common.parseCount(aSplit[0]);
-                    var bCount = nf.Common.parseCount(bSplit[0]);
+                    var aCount = common.parseCount(aSplit[0]);
+                    var bCount = common.parseCount(bSplit[0]);
                     return aCount - bCount;
                 } else {
                     $('#cluster-nodes-table span.queued-size-title').addClass('sorted');
-                    var aSize = nf.Common.parseSize(aSplit[1]);
-                    var bSize = nf.Common.parseSize(bSplit[1]);
+                    var aSize = common.parseSize(aSplit[1]);
+                    var bSize = common.parseSize(bSplit[1]);
                     return aSize - bSize;
                 }
             } else if (sortDetails.columnId === 'maxHeap' || sortDetails.columnId === 'totalHeap' || sortDetails.columnId === 'usedHeap'
-                    || sortDetails.columnId === 'totalNonHeap' || sortDetails.columnId === 'usedNonHeap'
-                    || sortDetails.columnId === 'ffRepoTotal' || sortDetails.columnId === 'ffRepoUsed'
-                    || sortDetails.columnId === 'ffRepoFree' || sortDetails.columnId === 'contentRepoTotal'
-                    || sortDetails.columnId === 'contentRepoUsed' || sortDetails.columnId === 'contentRepoFree') {
-                var aSize = nf.Common.parseSize(a[sortDetails.columnId]);
-                var bSize = nf.Common.parseSize(b[sortDetails.columnId]);
+                || sortDetails.columnId === 'totalNonHeap' || sortDetails.columnId === 'usedNonHeap'
+                || sortDetails.columnId === 'ffRepoTotal' || sortDetails.columnId === 'ffRepoUsed'
+                || sortDetails.columnId === 'ffRepoFree' || sortDetails.columnId === 'contentRepoTotal'
+                || sortDetails.columnId === 'contentRepoUsed' || sortDetails.columnId === 'contentRepoFree') {
+                var aSize = common.parseSize(a[sortDetails.columnId]);
+                var bSize = common.parseSize(b[sortDetails.columnId]);
                 return aSize - bSize;
             } else if (sortDetails.columnId === 'totalThreads' || sortDetails.columnId === 'daemonThreads'
-                    || sortDetails.columnId === 'processors') {
-                var aCount = nf.Common.parseCount(a[sortDetails.columnId]);
-                var bCount = nf.Common.parseCount(b[sortDetails.columnId]);
+                || sortDetails.columnId === 'processors') {
+                var aCount = common.parseCount(a[sortDetails.columnId]);
+                var bCount = common.parseCount(b[sortDetails.columnId]);
                 return aCount - bCount;
             } else if (sortDetails.columnId === 'gcOldGen' || sortDetails.columnId === 'gcNewGen') {
                 var aSplit = a[sortDetails.columnId].split(/ /);
                 var bSplit = b[sortDetails.columnId].split(/ /);
-                var aCount = nf.Common.parseCount(aSplit[0]);
-                var bCount = nf.Common.parseCount(bSplit[0]);
+                var aCount = common.parseCount(aSplit[0]);
+                var bCount = common.parseCount(bSplit[0]);
                 return aCount - bCount;
             } else if (sortDetails.columnId === 'status') {
                 var aStatus = formatNodeStatus(a);
@@ -363,8 +608,8 @@ nf.ClusterTable = (function () {
                 var bNode = formatNodeAddress(b);
                 return aNode === bNode ? 0 : aNode > bNode ? 1 : -1;
             } else {
-                var aString = nf.Common.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
-                var bString = nf.Common.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
+                var aString = common.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
+                var bString = common.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
                 return aString === bString ? 0 : aString > bString ? 1 : -1;
             }
         };
@@ -394,7 +639,7 @@ nf.ClusterTable = (function () {
      * @returns {string}
      */
     var formatNodeAddress = function (node) {
-        return nf.Common.escapeHtml(node.address) + ':' + nf.Common.escapeHtml(node.apiPort);
+        return common.escapeHtml(node.address) + ':' + common.escapeHtml(node.apiPort);
     };
 
     /**
@@ -421,7 +666,7 @@ nf.ClusterTable = (function () {
      */
     var promptForConnect = function (node) {
         // prompt to connect
-        nf.Dialog.showYesNoDialog({
+        dialog.showYesNoDialog({
             headerText: 'Connect Node',
             dialogContent: 'Connect \'' + formatNodeAddress(node) + '\' to this cluster?',
             yesHandler: function () {
@@ -455,7 +700,7 @@ nf.ClusterTable = (function () {
             var clusterGrid = $('#cluster-nodes-table').data('gridInstance');
             var clusterData = clusterGrid.getData();
             clusterData.updateItem(node.nodeId, node);
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(errorHandler.handleAjaxError);
     };
 
     /**
@@ -465,7 +710,7 @@ nf.ClusterTable = (function () {
      */
     var promptForDisconnect = function (node) {
         // prompt for disconnect
-        nf.Dialog.showYesNoDialog({
+        dialog.showYesNoDialog({
             headerText: 'Disconnect Node',
             dialogContent: 'Disconnect \'' + formatNodeAddress(node) + '\' from the cluster?',
             yesHandler: function () {
@@ -500,7 +745,7 @@ nf.ClusterTable = (function () {
             var clusterGrid = $('#cluster-nodes-table').data('gridInstance');
             var clusterData = clusterGrid.getData();
             clusterData.updateItem(node.nodeId, node);
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(errorHandler.handleAjaxError);
     };
 
     /**
@@ -510,7 +755,7 @@ nf.ClusterTable = (function () {
      */
     var promptForRemoval = function (node) {
         // prompt for disconnect
-        nf.Dialog.showYesNoDialog({
+        dialog.showYesNoDialog({
             headerText: 'Remove Node',
             dialogContent: 'Remove \'' + formatNodeAddress(node) + '\' from the cluster?',
             yesHandler: function () {
@@ -534,7 +779,7 @@ nf.ClusterTable = (function () {
             var clusterGrid = $('#cluster-nodes-table').data('gridInstance');
             var clusterData = clusterGrid.getData();
             clusterData.deleteItem(nodeId);
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(errorHandler.handleAjaxError);
     };
 
     /**
@@ -558,7 +803,7 @@ nf.ClusterTable = (function () {
         var grid = visibleTab.grid;
 
         // ensure the grid has been initialized
-        if (nf.Common.isDefinedAndNotNull(grid)) {
+        if (common.isDefinedAndNotNull(grid)) {
             var gridData = grid.getData();
 
             // update the search criteria
@@ -614,7 +859,7 @@ nf.ClusterTable = (function () {
     /**
      * Updates count of displayed and total rows.
      */
-    function updateFilterStats (selectedTab) {
+    function updateFilterStats(selectedTab) {
         if (!selectedTab) {
             selectedTab = getSelectedTab();
         }
@@ -658,22 +903,22 @@ nf.ClusterTable = (function () {
                 $.each(node.events, function (i, event) {
                     eventMessages.push(event.timestamp + ": " + event.message);
                 });
-                $('
    ').append(nf.Common.formatUnorderedList(eventMessages)).appendTo(events);
+                $('
    ').append(common.formatUnorderedList(eventMessages)).appendTo(events);
             } else {
                 events.append('
    None
    ');
             }
 
             // show the dialog
             $('#node-details-dialog').modal('show');
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(errorHandler.handleAjaxError);
     };
 
     /**
      * Applies system diagnostics data to the JVM tab.
      */
-    function updateJvmTableData (systemDiagnosticsResponse) {
-        if (nf.Common.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
-            && nf.Common.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
+    function updateJvmTableData(systemDiagnosticsResponse) {
+        if (common.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
+            && common.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
 
             var jvmTableRows = [];
             systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots.forEach(function (nodeSnapshot) {
@@ -697,9 +942,9 @@ nf.ClusterTable = (function () {
                     totalNonHeap: snapshot.totalNonHeap,
                     usedNonHeap: snapshot.usedNonHeap,
                     gcOldGen: garbageCollection[0].collectionCount + ' times (' +
-                        garbageCollection[0].collectionTime + ')',
+                    garbageCollection[0].collectionTime + ')',
                     gcNewGen: garbageCollection[1].collectionCount + ' times (' +
-                        garbageCollection[1].collectionTime + ')'
+                    garbageCollection[1].collectionTime + ')'
                 });
             });
             jvmTab.rowCount = jvmTableRows.length;
@@ -714,9 +959,9 @@ nf.ClusterTable = (function () {
     /**
      * Applies system diagnostics data to the System tab.
      */
-    function updateSystemTableData (systemDiagnosticsResponse) {
-        if (nf.Common.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
-            && nf.Common.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
+    function updateSystemTableData(systemDiagnosticsResponse) {
+        if (common.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
+            && common.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
 
             var systemTableRows = [];
             systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots.forEach(function (nodeSnapshot) {
@@ -743,9 +988,9 @@ nf.ClusterTable = (function () {
     /**
      * Applies system diagnostics data to the FlowFile Storage tab.
      */
-    function updateFlowFileTableData (systemDiagnosticsResponse) {
-        if (nf.Common.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
-            && nf.Common.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
+    function updateFlowFileTableData(systemDiagnosticsResponse) {
+        if (common.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
+            && common.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
 
             var flowFileTableRows = [];
             systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots.forEach(function (nodeSnapshot) {
@@ -772,9 +1017,9 @@ nf.ClusterTable = (function () {
     /**
      * Applies system diagnostics data to the Content Storage tab.
      */
-    function updateContentTableData (systemDiagnosticsResponse) {
-        if (nf.Common.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
-            && nf.Common.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
+    function updateContentTableData(systemDiagnosticsResponse) {
+        if (common.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
+            && common.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
 
             var contentStorageTableRows = [];
             systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots.forEach(function (nodeSnapshot) {
@@ -805,9 +1050,9 @@ nf.ClusterTable = (function () {
     /**
      * Applies system diagnostics data to the Versions tab.
      */
-    function updateVersionTableData (systemDiagnosticsResponse) {
-        if (nf.Common.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
-            && nf.Common.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
+    function updateVersionTableData(systemDiagnosticsResponse) {
+        if (common.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
+            && common.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
 
             var versionTableRows = [];
             systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots.forEach(function (nodeSnapshot) {
@@ -834,7 +1079,7 @@ nf.ClusterTable = (function () {
     /**
      * Loads system diagnostics data for the cluster.
      */
-    function refreshSystemDiagnosticsData () {
+    function refreshSystemDiagnosticsData() {
         var systemDiagnosticsUri = config.urls.systemDiagnostics
         var loadPromise = $.ajax({
             type: 'GET',
@@ -848,14 +1093,14 @@ nf.ClusterTable = (function () {
             handlers.forEach(function (handler) {
                 handler(systemDiagnosticsResponse);
             });
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(errorHandler.handleAjaxError);
         return loadPromise;
     };
 
     /**
      * Generic initialization for Slick Grid tables
      */
-    function commonTableInit (tab) {
+    function commonTableInit(tab) {
         var dataView = new Slick.Data.DataView({
             inlineFilters: false
         });
@@ -917,11 +1162,11 @@ nf.ClusterTable = (function () {
     /**
      * Apply the cluster nodes data set to the table.
      */
-    function updateNodesTableData (clusterResponse) {
+    function updateNodesTableData(clusterResponse) {
         var cluster = clusterResponse.cluster;
 
         // ensure there are groups specified
-        if (nf.Common.isDefinedAndNotNull(cluster.nodes)) {
+        if (common.isDefinedAndNotNull(cluster.nodes)) {
             var clusterGrid = nodesTab.grid;
             var clusterData = clusterGrid.getData();
 
@@ -941,7 +1186,7 @@ nf.ClusterTable = (function () {
     /**
      * Refreshes cluster data sets from the server.
      */
-    function refreshClusterData () {
+    function refreshClusterData() {
         var clusterNodesDataPromise = $.ajax({
             type: 'GET',
             url: config.urls.cluster,
@@ -951,17 +1196,17 @@ nf.ClusterTable = (function () {
             handlers.forEach(function (handler) {
                 handler(response);
             });
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(errorHandler.handleAjaxError);
         return clusterNodesDataPromise;
     }
 
     /**
      * Event handler triggered when the user switches tabs.
      */
-    function onSelectTab (tab) {
+    function onSelectTab(tab) {
         // Resize table
         var tabGrid = tab.grid;
-        if (nf.Common.isDefinedAndNotNull(tabGrid)) {
+        if (common.isDefinedAndNotNull(tabGrid)) {
             tabGrid.resizeCanvas();
         }
 
@@ -979,7 +1224,7 @@ nf.ClusterTable = (function () {
         updateFilterStats(tab);
     }
 
-    return {
+    var nfClusterTable = {
         /**
          * Initializes the cluster list.
          */
@@ -1066,7 +1311,7 @@ nf.ClusterTable = (function () {
 
             // listen for browser resize events to update the page size
             $(window).resize(function () {
-                nf.ClusterTable.resetTableSize();
+                nfClusterTable.resetTableSize();
             });
 
             // initialize tabs
@@ -1106,4 +1351,5 @@ nf.ClusterTable = (function () {
         }
     };
 
-}());
\ No newline at end of file
+    return nfClusterTable;
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster.js
index 2e988cbcf8..32e7bb0e11 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster.js
@@ -15,14 +15,39 @@
  * limitations under the License.
  */
 
-/* global nf, top */
+/* global nf, top, define, module, require, exports */
 
-$(document).ready(function () {
-    // initialize the counters page
-    nf.Cluster.init();
-});
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'nf.Common',
+                'nf.ClusterTable',
+                'nf.ErrorHandler',
+                'nf.Storage'],
+            function ($, common, clusterTable, errorHandler, storage) {
+                return (nf.Cluster = factory($, common, clusterTable, errorHandler, storage));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.Cluster =
+            factory(require('jquery'),
+                require('nf.Common'),
+                require('nf.ClusterTable'),
+                require('nf.ErrorHandler'),
+                require('nf.Storage')));
+    } else {
+        nf.Cluster = factory(root.$,
+            root.nf.Common,
+            root.nf.ClusterTable,
+            root.nf.ErrorHandler,
+            root.nf.Storage);
+    }
+}(this, function ($, common, clusterTable, errorHandler, storage) {
+    'use strict';
 
-nf.Cluster = (function () {
+    $(document).ready(function () {
+        // initialize the counters page
+        nfCluster.init();
+    });
 
     /**
      * Configuration object used to hold a number of configuration items.
@@ -44,8 +69,8 @@ nf.Cluster = (function () {
             url: config.urls.currentUser,
             dataType: 'json'
         }).done(function (currentUser) {
-            nf.Common.setCurrentUser(currentUser);
-        }).fail(nf.Common.handleAjaxError);
+            common.setCurrentUser(currentUser);
+        }).fail(errorHandler.handleAjaxError);
     };
 
     /**
@@ -54,7 +79,7 @@ nf.Cluster = (function () {
     var initializeClusterPage = function () {
         // define mouse over event for the refresh button
         $('#refresh-button').click(function () {
-            nf.ClusterTable.loadClusterTable();
+            clusterTable.loadClusterTable();
         });
 
         // return a deferred for page initialization
@@ -67,8 +92,8 @@ nf.Cluster = (function () {
                     dataType: 'json'
                 }).done(function (bannerResponse) {
                     // ensure the banners response is specified
-                    if (nf.Common.isDefinedAndNotNull(bannerResponse.banners)) {
-                        if (nf.Common.isDefinedAndNotNull(bannerResponse.banners.headerText) && bannerResponse.banners.headerText !== '') {
+                    if (common.isDefinedAndNotNull(bannerResponse.banners)) {
+                        if (common.isDefinedAndNotNull(bannerResponse.banners.headerText) && bannerResponse.banners.headerText !== '') {
                             // update the header text
                             var bannerHeader = $('#banner-header').text(bannerResponse.banners.headerText).show();
 
@@ -82,7 +107,7 @@ nf.Cluster = (function () {
                             updateTop('counters');
                         }
 
-                        if (nf.Common.isDefinedAndNotNull(bannerResponse.banners.footerText) && bannerResponse.banners.footerText !== '') {
+                        if (common.isDefinedAndNotNull(bannerResponse.banners.footerText) && bannerResponse.banners.footerText !== '') {
                             // update the footer text and show it
                             var bannerFooter = $('#banner-footer').text(bannerResponse.banners.footerText).show();
 
@@ -98,7 +123,7 @@ nf.Cluster = (function () {
 
                     deferred.resolve();
                 }).fail(function (xhr, status, error) {
-                    nf.Common.handleAjaxError(xhr, status, error);
+                    errorHandler.handleAjaxError(xhr, status, error);
                     deferred.reject();
                 });
             } else {
@@ -107,13 +132,13 @@ nf.Cluster = (function () {
         }).promise();
     };
 
-    return {
+    var nfCluster = {
         /**
          * Initializes the counters page.
          */
         init: function () {
-            nf.Storage.init();
-            
+            storage.init();
+
             // load the current user
             loadCurrentUser().done(function () {
                 var setBodySize = function () {
@@ -134,13 +159,13 @@ nf.Cluster = (function () {
                 setBodySize();
 
                 // create the cluster table
-                nf.ClusterTable.init();
+                clusterTable.init();
 
                 // resize to fit
-                nf.ClusterTable.resetTableSize();
+                clusterTable.resetTableSize();
 
                 // load the table
-                nf.ClusterTable.loadClusterTable().done(function () {
+                clusterTable.loadClusterTable().done(function () {
                     // once the table is initialized, finish initializing the page
                     initializeClusterPage().done(function () {
 
@@ -156,15 +181,15 @@ nf.Cluster = (function () {
                             // set the document title and the about title
                             document.title = countersTitle;
                             $('#counters-header-text').text(countersTitle);
-                        }).fail(nf.Common.handleAjaxError);
+                        }).fail(errorHandler.handleAjaxError);
 
                         $(window).on('resize', function (e) {
                             setBodySize();
                             // resize dialogs when appropriate
                             var dialogs = $('.dialog');
                             for (var i = 0, len = dialogs.length; i < len; i++) {
-                                if ($(dialogs[i]).is(':visible')){
-                                    setTimeout(function(dialog){
+                                if ($(dialogs[i]).is(':visible')) {
+                                    setTimeout(function (dialog) {
                                         dialog.modal('resize');
                                     }, 50, $(dialogs[i]));
                                 }
@@ -173,8 +198,8 @@ nf.Cluster = (function () {
                             // resize grids when appropriate
                             var gridElements = $('*[class*="slickgrid_"]');
                             for (var j = 0, len = gridElements.length; j < len; j++) {
-                                if ($(gridElements[j]).is(':visible')){
-                                    setTimeout(function(gridElement){
+                                if ($(gridElements[j]).is(':visible')) {
+                                    setTimeout(function (gridElement) {
                                         gridElement.data('gridInstance').resizeCanvas();
                                     }, 50, $(gridElements[j]));
                                 }
@@ -184,12 +209,12 @@ nf.Cluster = (function () {
                             var tabsContainers = $('.tab-container');
                             var tabsContents = [];
                             for (var k = 0, len = tabsContainers.length; k < len; k++) {
-                                if ($(tabsContainers[k]).is(':visible')){
+                                if ($(tabsContainers[k]).is(':visible')) {
                                     tabsContents.push($('#' + $(tabsContainers[k]).attr('id') + '-content'));
                                 }
                             }
                             $.each(tabsContents, function (index, tabsContent) {
-                                nf.Common.toggleScrollable(tabsContent.get(0));
+                                common.toggleScrollable(tabsContent.get(0));
                             });
                         });
                     });
@@ -197,4 +222,6 @@ nf.Cluster = (function () {
             });
         }
     };
-}());
\ No newline at end of file
+
+    return nfCluster;
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters-table.js
index ec9bace54c..ade82363ea 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters-table.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters-table.js
@@ -15,9 +15,31 @@
  * limitations under the License.
  */
 
-/* global nf, Slick */
+/* global nf, define, module, require, exports */
 
-nf.CountersTable = (function () {
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'Slick',
+                'nf.Common',
+                'nf.ErrorHandler'],
+            function ($, Slick, common, errorHandler) {
+                return (nf.CountersTable = factory($, Slick, common, errorHandler));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.CountersTable =
+            factory(require('jquery'),
+                require('Slick'),
+                require('nf.Common'),
+                require('nf.ErrorHandler')));
+    } else {
+        nf.CountersTable = factory(root.$,
+            root.Slick,
+            root.nf.Common,
+            root.nf.ErrorHandler);
+    }
+}(this, function ($, Slick, common, errorHandler) {
+    'use strict';
 
     /**
      * Configuration object used to hold a number of configuration items.
@@ -30,7 +52,7 @@ nf.CountersTable = (function () {
 
     /**
      * Sorts the specified data using the specified sort details.
-     * 
+     *
      * @param {object} sortDetails
      * @param {object} data
      */
@@ -38,12 +60,12 @@ nf.CountersTable = (function () {
         // defines a function for sorting
         var comparer = function (a, b) {
             if (sortDetails.columnId === 'value') {
-                var aCount = nf.Common.parseCount(a[sortDetails.columnId]);
-                var bCount = nf.Common.parseCount(b[sortDetails.columnId]);
+                var aCount = common.parseCount(a[sortDetails.columnId]);
+                var bCount = common.parseCount(b[sortDetails.columnId]);
                 return aCount - bCount;
             } else {
-                var aString = nf.Common.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
-                var bString = nf.Common.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
+                var aString = common.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
+                var bString = common.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
                 return aString === bString ? 0 : aString > bString ? 1 : -1;
             }
         };
@@ -69,7 +91,7 @@ nf.CountersTable = (function () {
         var countersGrid = $('#counters-table').data('gridInstance');
 
         // ensure the grid has been initialized
-        if (nf.Common.isDefinedAndNotNull(countersGrid)) {
+        if (common.isDefinedAndNotNull(countersGrid)) {
             var countersData = countersGrid.getData();
 
             // update the search criteria
@@ -83,7 +105,7 @@ nf.CountersTable = (function () {
 
     /**
      * Performs the filtering.
-     * 
+     *
      * @param {object} item     The item subject to filtering
      * @param {object} args     Filter arguments
      * @returns {Boolean}       Whether or not to include the item
@@ -104,10 +126,10 @@ nf.CountersTable = (function () {
         // perform the filter
         return item[args.property].search(filterExp) >= 0;
     };
-    
+
     /**
      * Resets the specified counter.
-     * 
+     *
      * @argument {object} item     The counter item
      */
     var resetCounter = function (item) {
@@ -122,7 +144,7 @@ nf.CountersTable = (function () {
             var countersGrid = $('#counters-table').data('gridInstance');
             var countersData = countersGrid.getData();
             countersData.updateItem(counter.id, counter);
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(errorHandler.handleAjaxError);
     };
 
     return {
@@ -138,12 +160,12 @@ nf.CountersTable = (function () {
             // filter type
             $('#counters-filter-type').combo({
                 options: [{
-                        text: 'by name',
-                        value: 'name'
-                    }, {
-                        text: 'by context',
-                        value: 'context'
-                    }],
+                    text: 'by name',
+                    value: 'name'
+                }, {
+                    text: 'by context',
+                    value: 'context'
+                }],
                 select: function (option) {
                     applyFilter();
                 }
@@ -151,20 +173,47 @@ nf.CountersTable = (function () {
 
             // initialize the templates table
             var countersColumns = [
-                {id: 'context', name: 'Context', field: 'context', sortable: true, resizable: true},
-                {id: 'name', name: 'Name', field: 'name', sortable: true, resizable: true},
-                {id: 'value', name: 'Value', field: 'value', sortable: true, resizable: true, defaultSortAsc: false}
+                {
+                    id: 'context',
+                    name: 'Context',
+                    field: 'context',
+                    sortable: true,
+                    resizable: true
+                },
+                {
+                    id: 'name',
+                    name: 'Name',
+                    field: 'name',
+                    sortable: true,
+                    resizable: true
+                },
+                {
+                    id: 'value',
+                    name: 'Value',
+                    field: 'value',
+                    sortable: true,
+                    resizable: true,
+                    defaultSortAsc: false
+                }
             ];
 
             // only allow dfm's to reset counters
-            if (nf.Common.canModifyCounters()) {
+            if (common.canModifyCounters()) {
                 // function for formatting the actions column
                 var actionFormatter = function (row, cell, value, columnDef, dataContext) {
                     return '
    ';
                 };
 
                 // add the action column
-                countersColumns.push({id: 'actions', name: ' ', sortable: false, resizable: false, formatter: actionFormatter, width: 100, maxWidth: 100});
+                countersColumns.push({
+                    id: 'actions',
+                    name: ' ',
+                    sortable: false,
+                    resizable: false,
+                    formatter: actionFormatter,
+                    width: 100,
+                    maxWidth: 100
+                });
             }
 
             var countersOptions = {
@@ -204,7 +253,7 @@ nf.CountersTable = (function () {
                     sortAsc: args.sortAsc
                 }, countersData);
             });
-            
+
             // configure a click listener
             countersGrid.onClick.subscribe(function (e, args) {
                 var target = $(e.target);
@@ -239,17 +288,17 @@ nf.CountersTable = (function () {
             // initialize the number of display items
             $('#displayed-counters').text('0');
         },
-        
+
         /**
          * Update the size of the grid based on its container's current size.
          */
         resetTableSize: function () {
             var countersGrid = $('#counters-table').data('gridInstance');
-            if (nf.Common.isDefinedAndNotNull(countersGrid)) {
+            if (common.isDefinedAndNotNull(countersGrid)) {
                 countersGrid.resizeCanvas();
             }
         },
-        
+
         /**
          * Load the processor counters table.
          */
@@ -263,7 +312,7 @@ nf.CountersTable = (function () {
                 var aggregateSnapshot = report.aggregateSnapshot;
 
                 // ensure there are groups specified
-                if (nf.Common.isDefinedAndNotNull(aggregateSnapshot.counters)) {
+                if (common.isDefinedAndNotNull(aggregateSnapshot.counters)) {
                     var countersGrid = $('#counters-table').data('gridInstance');
                     var countersData = countersGrid.getData();
 
@@ -280,7 +329,7 @@ nf.CountersTable = (function () {
                 } else {
                     $('#total-counters').text('0');
                 }
-            }).fail(nf.Common.handleAjaxError);
+            }).fail(errorHandler.handleAjaxError);
         }
     };
-}());
\ No newline at end of file
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters.js
index c18b9b314f..be321e6306 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters.js
@@ -15,14 +15,39 @@
  * limitations under the License.
  */
 
-/* global nf, top */
+/* global nf, top, define, module, require, exports */
 
-$(document).ready(function () {
-    // initialize the counters page
-    nf.Counters.init();
-});
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'nf.Common',
+                'nf.CountersTable',
+                'nf.ErrorHandler',
+                'nf.Storage'],
+            function ($, common, countersTable, errorHandler, storage) {
+                return (nf.Counters = factory($, common, countersTable, errorHandler, storage));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.Counters =
+            factory(require('jquery'),
+                require('nf.Common'),
+                require('nf.CountersTable'),
+                require('nf.ErrorHandler'),
+                require('nf.Storage')));
+    } else {
+        nf.Counters = factory(root.$,
+            root.nf.Common,
+            root.nf.CountersTable,
+            root.nf.ErrorHandler,
+            root.nf.Storage);
+    }
+}(this, function ($, common, countersTable, errorHandler, storage) {
+    'use strict';
 
-nf.Counters = (function () {
+    $(document).ready(function () {
+        // initialize the counters page
+        nfCounters.init();
+    });
 
     /**
      * Configuration object used to hold a number of configuration items.
@@ -44,9 +69,9 @@ nf.Counters = (function () {
             url: config.urls.currentUser,
             dataType: 'json'
         }).done(function (currentUser) {
-            nf.Common.setCurrentUser(currentUser);
+            common.setCurrentUser(currentUser);
 
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(errorHandler.handleAjaxError);
     };
 
     /**
@@ -55,7 +80,7 @@ nf.Counters = (function () {
     var initializeCountersPage = function () {
         // define mouse over event for the refresh button
         $('#refresh-button').click(function () {
-            nf.CountersTable.loadCountersTable();
+            countersTable.loadCountersTable();
         });
 
         // return a deferred for page initialization
@@ -68,8 +93,8 @@ nf.Counters = (function () {
                     dataType: 'json'
                 }).done(function (response) {
                     // ensure the banners response is specified
-                    if (nf.Common.isDefinedAndNotNull(response.banners)) {
-                        if (nf.Common.isDefinedAndNotNull(response.banners.headerText) && response.banners.headerText !== '') {
+                    if (common.isDefinedAndNotNull(response.banners)) {
+                        if (common.isDefinedAndNotNull(response.banners.headerText) && response.banners.headerText !== '') {
                             // update the header text
                             var bannerHeader = $('#banner-header').text(response.banners.headerText).show();
 
@@ -83,7 +108,7 @@ nf.Counters = (function () {
                             updateTop('counters');
                         }
 
-                        if (nf.Common.isDefinedAndNotNull(response.banners.footerText) && response.banners.footerText !== '') {
+                        if (common.isDefinedAndNotNull(response.banners.footerText) && response.banners.footerText !== '') {
                             // update the footer text and show it
                             var bannerFooter = $('#banner-footer').text(response.banners.footerText).show();
 
@@ -99,7 +124,7 @@ nf.Counters = (function () {
 
                     deferred.resolve();
                 }).fail(function (xhr, status, error) {
-                    nf.Common.handleAjaxError(xhr, status, error);
+                    errorHandler.handleAjaxError(xhr, status, error);
                     deferred.reject();
                 });
             } else {
@@ -108,20 +133,20 @@ nf.Counters = (function () {
         }).promise();
     };
 
-    return {
+    var nfCounters = {
         /**
          * Initializes the counters page.
          */
         init: function () {
-            nf.Storage.init();
-            
+            storage.init();
+
             // load the current user
             loadCurrentUser().done(function () {
                 // create the counters table
-                nf.CountersTable.init();
+                countersTable.init();
 
                 // load the table
-                nf.CountersTable.loadCountersTable().done(function () {
+                countersTable.loadCountersTable().done(function () {
                     // once the table is initialized, finish initializing the page
                     initializeCountersPage().done(function () {
                         var setBodySize = function () {
@@ -131,14 +156,14 @@ nf.Counters = (function () {
                                     'height': $(window).height() + 'px',
                                     'width': $(window).width() + 'px'
                                 });
-                                
+
                                 $('#counters').css('margin', 40);
                                 $('#counters-table').css('bottom', 127);
                                 $('#counters-refresh-container').css('margin', 40);
                             }
 
                             // configure the initial grid height
-                            nf.CountersTable.resetTableSize();
+                            countersTable.resetTableSize();
                         };
 
                         // get the about details
@@ -156,15 +181,15 @@ nf.Counters = (function () {
 
                             // set the initial size
                             setBodySize();
-                        }).fail(nf.Common.handleAjaxError);
+                        }).fail(errorHandler.handleAjaxError);
 
                         $(window).on('resize', function (e) {
                             setBodySize();
                             // resize dialogs when appropriate
                             var dialogs = $('.dialog');
                             for (var i = 0, len = dialogs.length; i < len; i++) {
-                                if ($(dialogs[i]).is(':visible')){
-                                    setTimeout(function(dialog){
+                                if ($(dialogs[i]).is(':visible')) {
+                                    setTimeout(function (dialog) {
                                         dialog.modal('resize');
                                     }, 50, $(dialogs[i]));
                                 }
@@ -173,8 +198,8 @@ nf.Counters = (function () {
                             // resize grids when appropriate
                             var gridElements = $('*[class*="slickgrid_"]');
                             for (var j = 0, len = gridElements.length; j < len; j++) {
-                                if ($(gridElements[j]).is(':visible')){
-                                    setTimeout(function(gridElement){
+                                if ($(gridElements[j]).is(':visible')) {
+                                    setTimeout(function (gridElement) {
                                         gridElement.data('gridInstance').resizeCanvas();
                                     }, 50, $(gridElements[j]));
                                 }
@@ -184,12 +209,12 @@ nf.Counters = (function () {
                             var tabsContainers = $('.tab-container');
                             var tabsContents = [];
                             for (var k = 0, len = tabsContainers.length; k < len; k++) {
-                                if ($(tabsContainers[k]).is(':visible')){
+                                if ($(tabsContainers[k]).is(':visible')) {
                                     tabsContents.push($('#' + $(tabsContainers[k]).attr('id') + '-content'));
                                 }
                             }
                             $.each(tabsContents, function (index, tabsContent) {
-                                nf.Common.toggleScrollable(tabsContent.get(0));
+                                common.toggleScrollable(tabsContent.get(0));
                             });
                         });
                     });
@@ -197,4 +222,6 @@ nf.Counters = (function () {
             });
         }
     };
-}());
\ No newline at end of file
+
+    return nfCounters;
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-model.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-model.js
index 366a275b03..a2132ec2c4 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-model.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-model.js
@@ -15,207 +15,225 @@
  * limitations under the License.
  */
 
-/* global Slick, nf */
+/* global nf, define, module, require, exports */
 
-(function ($) {
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'Slick',
+                'nf.Common',
+                'nf.ErrorHandler'],
+            function ($, Slick, common, errorHandler) {
+                return (nf.HistoryModel = factory($, Slick, common, errorHandler));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.HistoryModel =
+            factory(require('jquery'),
+                require('Slick'),
+                require('nf.Common'),
+                require('nf.ErrorHandler')));
+    } else {
+        nf.HistoryModel = factory(root.$,
+            root.Slick,
+            root.nf.Common,
+            root.nf.ErrorHandler);
+    }
+}(this, function ($, Slick, common, errorHandler) {
+    'use strict';
 
-    function HistoryModel() {
-        // private
-        var PAGESIZE = 50;
+    // private
+    var PAGESIZE = 50;
 
-        var data = {
-            length: 0
-        };
+    var data = {
+        length: 0
+    };
 
-        var filter = {};
-        var sortcol = null;
-        var sortdir = 1;
+    var filter = {};
+    var sortcol = null;
+    var sortdir = 1;
 
-        var h_request = null;
-        var xhr = null; // ajax request
+    var h_request = null;
+    var xhr = null; // ajax request
 
-        // events
-        var onDataLoading = new Slick.Event();
-        var onDataLoaded = new Slick.Event();
+    // events
+    var onDataLoading = new Slick.Event();
+    var onDataLoaded = new Slick.Event();
 
-        var init = function () {
-        };
+    var isDataLoaded = function (from, to) {
+        for (var i = from; i <= to; i++) {
+            if (data[i] === undefined || data[i] === null) {
+                return false;
+            }
+        }
 
-        var isDataLoaded = function (from, to) {
-            for (var i = from; i <= to; i++) {
-                if (data[i] === undefined || data[i] === null) {
-                    return false;
-                }
+        return true;
+    };
+
+    var clear = function () {
+        for (var key in data) {
+            delete data[key];
+        }
+        data.length = 0;
+    };
+
+    var ensureData = function (from, to) {
+        if (xhr) {
+            xhr.abort();
+            for (var i = xhr.fromPage; i <= xhr.toPage; i++) {
+                data[i * PAGESIZE] = undefined;
+            }
+        }
+
+        if (from < 0) {
+            from = 0;
+        }
+
+        var fromPage = Math.floor(from / PAGESIZE);
+        var toPage = Math.floor(to / PAGESIZE);
+
+        while (data[fromPage * PAGESIZE] !== undefined && fromPage < toPage) {
+            fromPage++;
+        }
+
+        while (data[toPage * PAGESIZE] !== undefined && fromPage < toPage) {
+            toPage--;
+        }
+
+        if (fromPage > toPage || ((fromPage === toPage) && data[fromPage * PAGESIZE] !== undefined)) {
+            // TODO:  look-ahead
+            return;
+        }
+
+        var query = {};
+
+        // add the start and end date to the query params
+        query = $.extend({
+            count: ((toPage - fromPage) * PAGESIZE) + PAGESIZE,
+            offset: fromPage * PAGESIZE
+        }, query);
+
+        // conditionally add the sort details
+        if (sortcol !== null) {
+            query['sortColumn'] = sortcol;
+            query['sortOrder'] = (sortdir > 0) ? "asc" : "desc";
+        }
+
+        // add the filter
+        query = $.extend(query, filter);
+
+        // if there is an request currently scheduled, cancel it
+        if (h_request !== null) {
+            clearTimeout(h_request);
+        }
+
+        // schedule the request for data
+        h_request = setTimeout(function () {
+            for (var i = fromPage; i <= toPage; i++) {
+                data[i * PAGESIZE] = null; // null indicates a 'requested but not available yet'
             }
 
-            return true;
-        };
+            // notify that loading is about to occur
+            onDataLoading.notify({
+                from: from,
+                to: to
+            });
 
-        var clear = function () {
-            for (var key in data) {
-                delete data[key];
-            }
-            data.length = 0;
-        };
+            // perform query...
+            var xhr = $.ajax({
+                type: 'GET',
+                url: '../nifi-api/flow/history',
+                data: query,
+                dataType: 'json'
+            }).done(function (response) {
+                var history = response.history;
 
-        var ensureData = function (from, to) {
-            if (xhr) {
-                xhr.abort();
-                for (var i = xhr.fromPage; i <= xhr.toPage; i++) {
-                    data[i * PAGESIZE] = undefined;
-                }
-            }
+                // calculate the indices
+                var from = fromPage * PAGESIZE;
+                var to = from + history.actions.length;
 
-            if (from < 0) {
-                from = 0;
-            }
+                // update the data length
+                data.length = history.total;
 
-            var fromPage = Math.floor(from / PAGESIZE);
-            var toPage = Math.floor(to / PAGESIZE);
-
-            while (data[fromPage * PAGESIZE] !== undefined && fromPage < toPage) {
-                fromPage++;
-            }
-
-            while (data[toPage * PAGESIZE] !== undefined && fromPage < toPage) {
-                toPage--;
-            }
-
-            if (fromPage > toPage || ((fromPage === toPage) && data[fromPage * PAGESIZE] !== undefined)) {
-                // TODO:  look-ahead
-                return;
-            }
-
-            var query = {};
-
-            // add the start and end date to the query params
-            query = $.extend({
-                count: ((toPage - fromPage) * PAGESIZE) + PAGESIZE,
-                offset: fromPage * PAGESIZE
-            }, query);
-
-            // conditionally add the sort details
-            if (sortcol !== null) {
-                query['sortColumn'] = sortcol;
-                query['sortOrder'] = (sortdir > 0) ? "asc" : "desc";
-            }
-
-            // add the filter
-            query = $.extend(query, filter);
-
-            // if there is an request currently scheduled, cancel it
-            if (h_request !== null) {
-                clearTimeout(h_request);
-            }
-
-            // schedule the request for data
-            h_request = setTimeout(function () {
-                for (var i = fromPage; i <= toPage; i++) {
-                    data[i * PAGESIZE] = null; // null indicates a 'requested but not available yet'
+                // populate the history actions
+                for (var i = 0; i < history.actions.length; i++) {
+                    data[from + i] = history.actions[i];
+                    data[from + i].index = from + i;
                 }
 
-                // notify that loading is about to occur
-                onDataLoading.notify({
+                // update the stats last refreshed timestamp
+                $('#history-last-refreshed').text(history.lastRefreshed);
+
+                // set the timezone for the start and end time
+                $('.timezone').text(common.substringAfterLast(history.lastRefreshed, ' '));
+
+                // show the filter message if applicable
+                if (query['sourceId'] || query['userIdentity'] || query['startDate'] || query['endDate']) {
+                    $('#history-filter-overview').css('visibility', 'visible');
+                } else {
+                    $('#history-filter-overview').css('visibility', 'hidden');
+                }
+
+                // clear the current request
+                xhr = null;
+
+                // notify data loaded
+                onDataLoaded.notify({
                     from: from,
                     to: to
                 });
+            }).fail(errorHandler.handleAjaxError);
+            xhr.fromPage = fromPage;
+            xhr.toPage = toPage;
 
-                // perform query...
-                var xhr = $.ajax({
-                    type: 'GET',
-                    url: '../nifi-api/flow/history',
-                    data: query,
-                    dataType: 'json'
-                }).done(function (response) {
-                    var history = response.history;
+        }, 50);
+    };
 
-                    // calculate the indices
-                    var from = fromPage * PAGESIZE;
-                    var to = from + history.actions.length;
+    var reloadData = function (from, to) {
+        for (var i = from; i <= to; i++)
+            delete data[i];
 
-                    // update the data length
-                    data.length = history.total;
+        ensureData(from, to);
+    };
 
-                    // populate the history actions
-                    for (var i = 0; i < history.actions.length; i++) {
-                        data[from + i] = history.actions[i];
-                        data[from + i].index = from + i;
-                    }
+    var setSort = function (column, dir) {
+        sortcol = column;
+        sortdir = dir;
+        clear();
+    };
 
-                    // update the stats last refreshed timestamp
-                    $('#history-last-refreshed').text(history.lastRefreshed);
+    var setFilterArgs = function (newFilter) {
+        filter = newFilter;
+        clear();
+    };
 
-                    // set the timezone for the start and end time
-                    $('.timezone').text(nf.Common.substringAfterLast(history.lastRefreshed, ' '));
+    var getItem = function (i) {
+        return data[i];
+    };
 
-                    // show the filter message if applicable
-                    if (query['sourceId'] || query['userIdentity'] || query['startDate'] || query['endDate']) {
-                        $('#history-filter-overview').css('visibility', 'visible');
-                    } else {
-                        $('#history-filter-overview').css('visibility', 'hidden');
-                    }
+    var getLength = function () {
+        return data.length;
+    };
 
-                    // clear the current request
-                    xhr = null;
-
-                    // notify data loaded
-                    onDataLoaded.notify({
-                        from: from,
-                        to: to
-                    });
-                }).fail(nf.Common.handleAjaxError);
-                xhr.fromPage = fromPage;
-                xhr.toPage = toPage;
-
-            }, 50);
-        };
-
-        var reloadData = function (from, to) {
-            for (var i = from; i <= to; i++)
-                delete data[i];
-
-            ensureData(from, to);
-        };
-
-        var setSort = function (column, dir) {
-            sortcol = column;
-            sortdir = dir;
-            clear();
-        };
-
-        var setFilterArgs = function (newFilter) {
-            filter = newFilter;
-            clear();
-        };
-
-        var getItem = function (i) {
-            return data[i];
-        };
-
-        var getLength = function () {
-            return data.length;
-        };
-
-        init();
-
-        return {
-            // properties
-            data: data,
-            // methods
-            clear: clear,
-            isDataLoaded: isDataLoaded,
-            ensureData: ensureData,
-            reloadData: reloadData,
-            setSort: setSort,
-            setFilterArgs: setFilterArgs,
-            getItem: getItem,
-            getLength: getLength,
-            // events
-            onDataLoading: onDataLoading,
-            onDataLoaded: onDataLoaded
-        };
+    function HistoryModel() {
     }
 
-    // nf.HistoryModel
-    $.extend(true, window, {nf: {HistoryModel: HistoryModel}});
-})(jQuery);
\ No newline at end of file
+    HistoryModel.prototype = {
+        constructor: HistoryModel,
+        // properties
+        data: data,
+        // methods
+        clear: clear,
+        isDataLoaded: isDataLoaded,
+        ensureData: ensureData,
+        reloadData: reloadData,
+        setSort: setSort,
+        setFilterArgs: setFilterArgs,
+        getItem: getItem,
+        getLength: getLength,
+        // events
+        onDataLoading: onDataLoading,
+        onDataLoaded: onDataLoaded
+    }
+
+    return HistoryModel;
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-table.js
index 5de244079f..38f21e8e26 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-table.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-table.js
@@ -15,9 +15,37 @@
  * limitations under the License.
  */
 
-/* global nf, Slick */
+/* global nf, top, define, module, require, exports */
 
-nf.HistoryTable = (function () {
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'Slick',
+                'nf.Common',
+                'nf.Dialog',
+                'nf.ErrorHandler',
+                'nf.HistoryModel'],
+            function ($, Slick, common, dialog, errorHandler, HistoryModel) {
+                return (nf.HistoryTable = factory($, Slick, common, dialog, errorHandler, HistoryModel));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.HistoryTable =
+            factory(require('jquery'),
+                require('Slick'),
+                require('nf.Common'),
+                require('nf.Dialog'),
+                require('nf.ErrorHandler'),
+                require('nf.HistoryModel')));
+    } else {
+        nf.HistoryTable = factory(root.$,
+            root.Slick,
+            root.nf.Common,
+            root.nf.Dialog,
+            root.nf.ErrorHandler,
+            root.nf.HistoryModel);
+    }
+}(this, function ($, Slick, common, dialog, errorHandler, HistoryModel) {
+    'use strict';
 
     /**
      * Configuration object used to hold a number of configuration items.
@@ -151,7 +179,7 @@ nf.HistoryTable = (function () {
                         historyModel.setFilterArgs(filter);
 
                         // reload the table
-                        nf.HistoryTable.loadHistoryTable();
+                        nfHistoryTable.loadHistoryTable();
                     }
                 }
             },
@@ -212,15 +240,15 @@ nf.HistoryTable = (function () {
                             }
                             var endDateTime = endDate + ' ' + endTime;
                             var timezone = $('.timezone:first').text();
-                            nf.Dialog.showYesNoDialog({
+                            dialog.showYesNoDialog({
                                 headerText: 'History',
-                                dialogContent: "Are you sure you want to delete all history before '" + nf.Common.escapeHtml(endDateTime) + " " + nf.Common.escapeHtml(timezone) + "'?",
+                                dialogContent: "Are you sure you want to delete all history before '" + common.escapeHtml(endDateTime) + " " + common.escapeHtml(timezone) + "'?",
                                 yesHandler: function () {
                                     purgeHistory(endDateTime);
                                 }
                             });
                         } else {
-                            nf.Dialog.showOkDialog({
+                            dialog.showOkDialog({
                                 headerText: 'History',
                                 dialogContent: 'The end date must be specified.'
                             });
@@ -262,7 +290,7 @@ nf.HistoryTable = (function () {
             historyModel.setFilterArgs({});
 
             // refresh the table
-            nf.HistoryTable.loadHistoryTable();
+            nfHistoryTable.loadHistoryTable();
         });
 
         // add hover effect and click handler for opening the dialog
@@ -272,7 +300,7 @@ nf.HistoryTable = (function () {
 
         // define a custom formatter for the more details column
         var moreDetailsFormatter = function (row, cell, value, columnDef, dataContext) {
-            if(dataContext.canRead === true) {
+            if (dataContext.canRead === true) {
                 return '
    ';
             }
             return "";
@@ -280,10 +308,10 @@ nf.HistoryTable = (function () {
 
         // define how general values are formatted
         var valueFormatter = function (row, cell, value, columnDef, dataContext) {
-            if(dataContext.canRead !== true) {
+            if (dataContext.canRead !== true) {
                 return 'Not authorized';
             }
-            return nf.Common.formatValue(dataContext.action[columnDef.field]);
+            return common.formatValue(dataContext.action[columnDef.field]);
         };
 
         // initialize the templates table
@@ -297,12 +325,48 @@ nf.HistoryTable = (function () {
                 width: 50,
                 maxWidth: 50
             },
-            {id: 'timestamp', name: 'Date/Time', field: 'timestamp', sortable: true, resizable: true, formatter: valueFormatter},
-            {id: 'sourceName', name: 'Name', field: 'sourceName', sortable: true, resizable: true, formatter: valueFormatter},
-            {id: 'sourceType', name: 'Type', field: 'sourceType', sortable: true, resizable: true, formatter: valueFormatter},
-            {id: 'operation', name: 'Operation', field: 'operation', sortable: true, resizable: true, formatter: valueFormatter},
-            {id: 'userIdentity', name: 'User', field: 'userIdentity', sortable: true, resizable: true, formatter: valueFormatter}
+            {
+                id: 'timestamp',
+                name: 'Date/Time',
+                field: 'timestamp',
+                sortable: true,
+                resizable: true,
+                formatter: valueFormatter
+            },
+            {
+                id: 'sourceName',
+                name: 'Name',
+                field: 'sourceName',
+                sortable: true,
+                resizable: true,
+                formatter: valueFormatter
+            },
+            {
+                id: 'sourceType',
+                name: 'Type',
+                field: 'sourceType',
+                sortable: true,
+                resizable: true,
+                formatter: valueFormatter
+            },
+            {
+                id: 'operation',
+                name: 'Operation',
+                field: 'operation',
+                sortable: true,
+                resizable: true,
+                formatter: valueFormatter
+            },
+            {
+                id: 'userIdentity',
+                name: 'User',
+                field: 'userIdentity',
+                sortable: true,
+                resizable: true,
+                formatter: valueFormatter
+            }
         ];
+
         var historyOptions = {
             forceFitColumns: true,
             enableTextSelectionOnCells: true,
@@ -313,7 +377,7 @@ nf.HistoryTable = (function () {
         };
 
         // create the remote model
-        var historyModel = new nf.HistoryModel();
+        var historyModel = new HistoryModel();
 
         // initialize the grid
         var historyGrid = new Slick.Grid('#history-table', historyModel, historyColumns, historyOptions);
@@ -365,7 +429,7 @@ nf.HistoryTable = (function () {
         $('#history-table').data('gridInstance', historyGrid);
 
         // add the purge button if appropriate
-        if (nf.Common.canModifyController()) {
+        if (common.canModifyController()) {
             $('#history-purge-button').on('click', function () {
                 $('#history-purge-dialog').modal('show');
             }).show();
@@ -385,8 +449,8 @@ nf.HistoryTable = (function () {
             }),
             dataType: 'json'
         }).done(function () {
-            nf.HistoryTable.loadHistoryTable();
-        }).fail(nf.Common.handleAjaxError);
+            nfHistoryTable.loadHistoryTable();
+        }).fail(errorHandler.handleAjaxError);
     };
 
     /**
@@ -397,19 +461,19 @@ nf.HistoryTable = (function () {
     var showActionDetails = function (action) {
         // create the markup for the dialog
         var detailsMarkup = $('
    ').append(
-            $('
    Id
    ' + nf.Common.escapeHtml(action.sourceId) + '
    '));
+            $('
    Id
    ' + common.escapeHtml(action.sourceId) + '
    '));
 
         // get any component details
         var componentDetails = action.componentDetails;
 
         // inspect the operation to determine if there are any component details
-        if (nf.Common.isDefinedAndNotNull(componentDetails)) {
+        if (common.isDefinedAndNotNull(componentDetails)) {
             if (action.sourceType === 'Processor' || action.sourceType === 'ControllerService' || action.sourceType === 'ReportingTask') {
                 detailsMarkup.append(
-                    $('
    Type
    ' + nf.Common.escapeHtml(componentDetails.type) + '
    '));
+                    $('
    Type
    ' + common.escapeHtml(componentDetails.type) + '
    '));
             } else if (action.sourceType === 'RemoteProcessGroup') {
                 detailsMarkup.append(
-                    $('
    Uri
    ' + nf.Common.formatValue(componentDetails.uri) + '
    '));
+                    $('
    Uri
    ' + common.formatValue(componentDetails.uri) + '
    '));
             }
         }
 
@@ -417,30 +481,30 @@ nf.HistoryTable = (function () {
         var actionDetails = action.actionDetails;
 
         // inspect the operation to determine if there are any action details
-        if (nf.Common.isDefinedAndNotNull(actionDetails)) {
+        if (common.isDefinedAndNotNull(actionDetails)) {
             if (action.operation === 'Configure') {
                 detailsMarkup.append(
-                    $('
    Name
    ' + nf.Common.formatValue(actionDetails.name) + '
    ')).append(
-                    $('
    Value
    ' + nf.Common.formatValue(actionDetails.value) + '
    ')).append(
-                    $('
    Previous Value
    ' + nf.Common.formatValue(actionDetails.previousValue) + '
    '));
+                    $('
    Name
    ' + common.formatValue(actionDetails.name) + '
    ')).append(
+                    $('
    Value
    ' + common.formatValue(actionDetails.value) + '
    ')).append(
+                    $('
    Previous Value
    ' + common.formatValue(actionDetails.previousValue) + '
    '));
             } else if (action.operation === 'Connect' || action.operation === 'Disconnect') {
                 detailsMarkup.append(
-                    $('
    Source Id
    ' + nf.Common.escapeHtml(actionDetails.sourceId) + '
    ')).append(
-                    $('
    Source Name
    ' + nf.Common.formatValue(actionDetails.sourceName) + '
    ')).append(
-                    $('
    Source Type
    ' + nf.Common.escapeHtml(actionDetails.sourceType) + '
    ')).append(
-                    $('
    Relationship(s)
    ' + nf.Common.formatValue(actionDetails.relationship) + '
    ')).append(
-                    $('
    Destination Id
    ' + nf.Common.escapeHtml(actionDetails.destinationId) + '
    ')).append(
-                    $('
    Destination Name
    ' + nf.Common.formatValue(actionDetails.destinationName) + '
    ')).append(
-                    $('
    Destination Type
    ' + nf.Common.escapeHtml(actionDetails.destinationType) + '
    '));
+                    $('
    Source Id
    ' + common.escapeHtml(actionDetails.sourceId) + '
    ')).append(
+                    $('
    Source Name
    ' + common.formatValue(actionDetails.sourceName) + '
    ')).append(
+                    $('
    Source Type
    ' + common.escapeHtml(actionDetails.sourceType) + '
    ')).append(
+                    $('
    Relationship(s)
    ' + common.formatValue(actionDetails.relationship) + '
    ')).append(
+                    $('
    Destination Id
    ' + common.escapeHtml(actionDetails.destinationId) + '
    ')).append(
+                    $('
    Destination Name
    ' + common.formatValue(actionDetails.destinationName) + '
    ')).append(
+                    $('
    Destination Type
    ' + common.escapeHtml(actionDetails.destinationType) + '
    '));
             } else if (action.operation === 'Move') {
                 detailsMarkup.append(
-                    $('
    Group
    ' + nf.Common.formatValue(actionDetails.group) + '
    ')).append(
-                    $('
    Group Id
    ' + nf.Common.escapeHtml(actionDetails.groupId) + '
    ')).append(
-                    $('
    Previous Group
    ' + nf.Common.formatValue(actionDetails.previousGroup) + '
    ')).append(
-                    $('
    Previous Group Id
    ' + nf.Common.escapeHtml(actionDetails.previousGroupId) + '
    '));
+                    $('
    Group
    ' + common.formatValue(actionDetails.group) + '
    ')).append(
+                    $('
    Group Id
    ' + common.escapeHtml(actionDetails.groupId) + '
    ')).append(
+                    $('
    Previous Group
    ' + common.formatValue(actionDetails.previousGroup) + '
    ')).append(
+                    $('
    Previous Group Id
    ' + common.escapeHtml(actionDetails.previousGroupId) + '
    '));
             } else if (action.operation === 'Purge') {
                 detailsMarkup.append(
-                    $('
    End Date
    ' + nf.Common.escapeHtml(actionDetails.endDate) + '
    '));
+                    $('
    End Date
    ' + common.escapeHtml(actionDetails.endDate) + '
    '));
             }
         }
 
@@ -451,7 +515,7 @@ nf.HistoryTable = (function () {
         $('#action-details-dialog').modal('show');
     };
 
-    return {
+    var nfHistoryTable = {
         init: function () {
             initDetailsDialog();
             initFilterDialog();
@@ -464,7 +528,7 @@ nf.HistoryTable = (function () {
          */
         resetTableSize: function () {
             var historyGrid = $('#history-table').data('gridInstance');
-            if (nf.Common.isDefinedAndNotNull(historyGrid)) {
+            if (common.isDefinedAndNotNull(historyGrid)) {
                 historyGrid.resizeCanvas();
             }
         },
@@ -483,4 +547,6 @@ nf.HistoryTable = (function () {
             historyGrid.onViewportChanged.notify();
         }
     };
-}());
+
+    return nfHistoryTable;
+}));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history.js
index 0f436e9d96..7f737244a7 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history.js
@@ -15,14 +15,42 @@
  * limitations under the License.
  */
 
-/* global nf, top */
+/* global nf, top, define, module, require, exports */
 
-$(document).ready(function () {
-    // initialize the status page
-    nf.History.init();
-});
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'nf.Common',
+                'nf.HistoryTable',
+                'nf.ErrorHandler',
+                'nf.Storage',
+                'nf.ClusterSummary'],
+            function ($, common, historyTable, errorHandler, storage, clusterSummary) {
+                return (nf.History = factory($, common, historyTable, errorHandler, storage, clusterSummary));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.History =
+            factory(require('jquery'),
+                require('nf.Common'),
+                require('nf.HistoryTable'),
+                require('nf.ErrorHandler'),
+                require('nf.Storage'),
+                require('nf.ClusterSummary')));
+    } else {
+        nf.History = factory(root.$,
+            root.nf.Common,
+            root.nf.HistoryTable,
+            root.nf.ErrorHandler,
+            root.nf.Storage,
+            root.nf.ClusterSummary);
+    }
+}(this, function ($, common, historyTable, errorHandler, storage, clusterSummary) {
+    'use strict';
 
-nf.History = (function () {
+    $(document).ready(function () {
+        // initialize the status page
+        nfHistory.init();
+    });
 
     /**
      * Configuration object used to hold a number of configuration items.
@@ -31,8 +59,7 @@ nf.History = (function () {
         urls: {
             banners: '../nifi-api/flow/banners',
             about: '../nifi-api/flow/about',
-            currentUser: '../nifi-api/flow/current-user',
-            clusterSummary: '../nifi-api/flow/cluster/summary'
+            currentUser: '../nifi-api/flow/current-user'
         }
     };
 
@@ -45,28 +72,8 @@ nf.History = (function () {
             url: config.urls.currentUser,
             dataType: 'json'
         }).done(function (currentUser) {
-            nf.Common.setCurrentUser(currentUser);
-        }).fail(nf.Common.handleAjaxError);
-    };
-
-    /**
-     * Loads the flow configuration and updated the cluster state.
-     *
-     * @returns xhr
-     */
-    var loadClusterSummary = function () {
-        return $.ajax({
-            type: 'GET',
-            url: config.urls.clusterSummary,
-            dataType: 'json'
-        }).done(function (response) {
-            var clusterSummary = response.clusterSummary;
-
-            // if clustered, show message to indicate location of actions
-            if (clusterSummary.clustered === true) {
-                $('#cluster-history-message').show();
-            }
-        });
+            common.setCurrentUser(currentUser);
+        }).fail(errorHandler.handleAjaxError);
     };
 
     /**
@@ -75,7 +82,7 @@ nf.History = (function () {
     var initializeHistoryPage = function () {
         // define mouse over event for the refresh button
         $('#refresh-button').click(function () {
-            nf.HistoryTable.loadHistoryTable();
+            historyTable.loadHistoryTable();
         });
 
         // return a deferred for page initialization
@@ -88,8 +95,8 @@ nf.History = (function () {
                     dataType: 'json'
                 }).done(function (response) {
                     // ensure the banners response is specified
-                    if (nf.Common.isDefinedAndNotNull(response.banners)) {
-                        if (nf.Common.isDefinedAndNotNull(response.banners.headerText) && response.banners.headerText !== '') {
+                    if (common.isDefinedAndNotNull(response.banners)) {
+                        if (common.isDefinedAndNotNull(response.banners.headerText) && response.banners.headerText !== '') {
                             // update the header text
                             var bannerHeader = $('#banner-header').text(response.banners.headerText).show();
 
@@ -103,7 +110,7 @@ nf.History = (function () {
                             updateTop('history');
                         }
 
-                        if (nf.Common.isDefinedAndNotNull(response.banners.footerText) && response.banners.footerText !== '') {
+                        if (common.isDefinedAndNotNull(response.banners.footerText) && response.banners.footerText !== '') {
                             // update the footer text and show it
                             var bannerFooter = $('#banner-footer').text(response.banners.footerText).show();
 
@@ -119,7 +126,7 @@ nf.History = (function () {
 
                     deferred.resolve();
                 }).fail(function (xhr, status, error) {
-                    nf.Common.handleAjaxError(xhr, status, error);
+                    errorHandler.handleAjaxError(xhr, status, error);
                     deferred.reject();
                 });
             } else {
@@ -128,22 +135,28 @@ nf.History = (function () {
         }).promise();
     };
 
-    return {
+    var nfHistory = {
         /**
          * Initializes the status page.
          */
         init: function () {
-            nf.Storage.init();
-            
             // load the current user
-            loadCurrentUser().done(function () {
-                loadClusterSummary();
+            var currentUser = loadCurrentUser()
+
+            storage.init();
+
+            // ensure the config requests are loaded
+            $.when(currentUser).done(function (currentUserResult) {
+                // if clustered, show message to indicate location of actions
+                if (clusterSummary.isClustered() === true) {
+                    $('#cluster-history-message').show();
+                }
 
                 // create the history table
-                nf.HistoryTable.init();
+                historyTable.init();
 
                 // load the history table
-                nf.HistoryTable.loadHistoryTable();
+                historyTable.loadHistoryTable();
 
                 // once the table is initialized, finish initializing the page
                 initializeHistoryPage().done(function () {
@@ -154,13 +167,13 @@ nf.History = (function () {
                                 'height': $(window).height() + 'px',
                                 'width': $(window).width() + 'px'
                             });
-                            
+
                             $('#history').css('margin', 40);
                             $('#history-refresh-container').css('margin', 40);
                         }
 
                         // configure the initial grid height
-                        nf.HistoryTable.resetTableSize();
+                        historyTable.resetTableSize();
                     };
 
                     // get the about details
@@ -178,15 +191,15 @@ nf.History = (function () {
 
                         // set the initial size
                         setBodySize();
-                    }).fail(nf.Common.handleAjaxError);
+                    }).fail(errorHandler.handleAjaxError);
 
                     $(window).on('resize', function (e) {
                         setBodySize();
                         // resize dialogs when appropriate
                         var dialogs = $('.dialog');
                         for (var i = 0, len = dialogs.length; i < len; i++) {
-                            if ($(dialogs[i]).is(':visible')){
-                                setTimeout(function(dialog){
+                            if ($(dialogs[i]).is(':visible')) {
+                                setTimeout(function (dialog) {
                                     dialog.modal('resize');
                                 }, 50, $(dialogs[i]));
                             }
@@ -195,8 +208,8 @@ nf.History = (function () {
                         // resize grids when appropriate
                         var gridElements = $('*[class*="slickgrid_"]');
                         for (var j = 0, len = gridElements.length; j < len; j++) {
-                            if ($(gridElements[j]).is(':visible')){
-                                setTimeout(function(gridElement){
+                            if ($(gridElements[j]).is(':visible')) {
+                                setTimeout(function (gridElement) {
                                     gridElement.data('gridInstance').resizeCanvas();
                                 }, 50, $(gridElements[j]));
                             }
@@ -206,16 +219,18 @@ nf.History = (function () {
                         var tabsContainers = $('.tab-container');
                         var tabsContents = [];
                         for (var k = 0, len = tabsContainers.length; k < len; k++) {
-                            if ($(tabsContainers[k]).is(':visible')){
+                            if ($(tabsContainers[k]).is(':visible')) {
                                 tabsContents.push($('#' + $(tabsContainers[k]).attr('id') + '-content'));
                             }
                         }
                         $.each(tabsContents, function (index, tabsContent) {
-                            nf.Common.toggleScrollable(tabsContent.get(0));
+                            common.toggleScrollable(tabsContent.get(0));
                         });
                     });
                 });
             });
         }
     };
-}());
\ No newline at end of file
+
+    return nfHistory;
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/login/nf-login.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/login/nf-login.js
index 11faba5fb5..a18d5d7aa6 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/login/nf-login.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/login/nf-login.js
@@ -15,13 +15,32 @@
  * limitations under the License.
  */
 
-/* global nf, top */
+/* global nf, top, define, module, require, exports */
 
-$(document).ready(function () {
-    nf.Login.init();
-});
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'nf.Common',
+                'nf.Dialog',
+                'nf.Storage'],
+            function ($, common, dialog, storage) {
+                return (nf.Login = factory($, common, dialog, storage));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.Login =
+            factory(require('jquery'),
+                require('nf.Common'),
+                require('nf.Dialog'),
+                require('nf.Storage')));
+    } else {
+        nf.Login = factory(root.$, root.nf.Common, root.nf.Dialog, root.nf.Storage);
+    }
+}(this, function ($, common, dialog, storage) {
+    'use strict';
 
-nf.Login = (function () {
+    $(document).ready(function () {
+        nfLogin.init();
+    });
 
     var config = {
         urls: {
@@ -62,12 +81,12 @@ nf.Login = (function () {
     var login = function () {
         // remove focus
         $('#username, #password').blur();
-        
+
         // show the logging message...
         $('#login-progress-label').text('Logging in...');
         $('#login-progress-container').show();
         $('#login-submission-container').hide();
-        
+
         // login submit
         $.ajax({
             type: 'POST',
@@ -78,9 +97,9 @@ nf.Login = (function () {
             }
         }).done(function (jwt) {
             // get the payload and store the token with the appropirate expiration
-            var token = nf.Common.getJwtPayload(jwt);
-            var expiration = parseInt(token['exp'], 10) * nf.Common.MILLIS_PER_SECOND;
-            nf.Storage.setItem('jwt', jwt, expiration);
+            var token = common.getJwtPayload(jwt);
+            var expiration = parseInt(token['exp'], 10) * common.MILLIS_PER_SECOND;
+            storage.setItem('jwt', jwt, expiration);
 
             // check to see if they actually have access now
             $.ajax({
@@ -89,10 +108,10 @@ nf.Login = (function () {
                 dataType: 'json'
             }).done(function (response) {
                 var accessStatus = response.accessStatus;
-                
+
                 // update the logout link appropriately
                 showLogoutLink();
-                
+
                 // update according to the access status
                 if (accessStatus.status === 'ACTIVE') {
                     // reload as appropriate - no need to schedule token refresh as the page is reloading
@@ -122,9 +141,9 @@ nf.Login = (function () {
                 $('#login-message-container').show();
             });
         }).fail(function (xhr, status, error) {
-            nf.Dialog.showOkDialog({
+            dialog.showOkDialog({
                 headerText: 'Login',
-                dialogContent: nf.Common.escapeHtml(xhr.responseText)
+                dialogContent: common.escapeHtml(xhr.responseText)
             });
 
             // update the form visibility
@@ -134,20 +153,20 @@ nf.Login = (function () {
     };
 
     var showLogoutLink = function () {
-        nf.Common.showLogoutLink();
+        common.showLogoutLink();
     };
 
-    return {
+    var nfLogin = {
         /**
          * Initializes the login page.
          */
         init: function () {
-            nf.Storage.init();
+            storage.init();
 
-            if (nf.Storage.getItem('jwt') !== null) {
+            if (storage.getItem('jwt') !== null) {
                 showLogoutLink();
             }
-            
+
             // supporting logging in via enter press
             $('#username, #password').on('keyup', function (e) {
                 var code = e.keyCode ? e.keyCode : e.which;
@@ -166,7 +185,7 @@ nf.Login = (function () {
                 $('#login-message').text(xhr.responseText);
                 initializeMessage();
             });
-            
+
             // access config
             var accessConfigXhr = $.ajax({
                 type: 'GET',
@@ -180,22 +199,22 @@ nf.Login = (function () {
 
                 var accessConfigResponse = accessConfigResult[0];
                 var accessConfig = accessConfigResponse.config;
-                
+
                 // possible login states
                 var needsLogin = true;
                 var showMessage = false;
-                
+
                 // handle the status appropriately
                 if (accessStatus.status === 'UNKNOWN') {
                     needsLogin = true;
                 } else if (accessStatus.status === 'ACTIVE') {
                     showMessage = true;
                     needsLogin = false;
-                    
+
                     $('#login-message-title').text('Success');
                     $('#login-message').text(accessStatus.message);
                 }
-                
+
                 // if login is required, verify its supported
                 if (accessConfig.supportsLogin === false && needsLogin === true) {
                     $('#login-message-title').text('Access Denied');
@@ -214,4 +233,6 @@ nf.Login = (function () {
             });
         }
     };
-}());
\ No newline at end of file
+
+    return nfLogin;
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ajax-setup.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ajax-setup.js
index ad540b88da..eaf61cf223 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ajax-setup.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ajax-setup.js
@@ -15,25 +15,43 @@
  * limitations under the License.
  */
 
-/**
- * Performs ajax setup for use within NiFi.
- */
-$(document).ready(function ($) {
-    // include jwt when possible
-    $.ajaxSetup({
-        'beforeSend': function(xhr) {
-            var hadToken = nf.Storage.hasItem('jwt');
+/* global nf, define, module, require, exports */
 
-            // get the token to include in all requests
-            var token = nf.Storage.getItem('jwt');
-            if (token !== null) {
-                xhr.setRequestHeader('Authorization', 'Bearer ' + token);
-            } else {
-                // if the current user was logged in with a token and the token just expired, cancel the request
-                if (hadToken === true) {
-                    return false;
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'nf.Storage'],
+            function ($, storage) {
+                return (nf.AjaxSetup = factory($, storage));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.AjaxSetup = factory(require('jquery'),
+            require('nf.Storage')));
+    } else {
+        nf.AjaxSetup = factory(root.$,
+            root.nf.Storage);
+    }
+}(this, function ($, storage) {
+    /**
+     * Performs ajax setup for use within NiFi.
+     */
+    $(document).ready(function ($) {
+        // include jwt when possible
+        $.ajaxSetup({
+            'beforeSend': function (xhr) {
+                var hadToken = storage.hasItem('jwt');
+
+                // get the token to include in all requests
+                var token = storage.getItem('jwt');
+                if (token !== null) {
+                    xhr.setRequestHeader('Authorization', 'Bearer ' + token);
+                } else {
+                    // if the current user was logged in with a token and the token just expired, cancel the request
+                    if (hadToken === true) {
+                        return false;
+                    }
                 }
             }
-        }
+        });
     });
-});
\ No newline at end of file
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-client.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-client.js
index 3cf9fdfd04..aedd555465 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-client.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-client.js
@@ -15,15 +15,33 @@
  * limitations under the License.
  */
 
-/* global nf */
+/* global nf, define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'nf.Common'],
+            function ($, common) {
+                return (nf.Client = factory($, common));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.Client =
+            factory(require('jquery'),
+                require('nf.Common')));
+    } else {
+        nf.Client =
+            factory(root.$,
+                root.nf.Common);
+    }
+}(this, function ($, common) {
+    'use strict';
 
-nf.Client = (function() {
     var clientId = null;
-    
+
     return {
         /**
          * Initializes the client.
-         * 
+         *
          * @returns deferred
          */
         init: function () {
@@ -55,7 +73,7 @@ nf.Client = (function() {
          * @return {boolean} whether proposedData is newer than currentData
          */
         isNewerRevision: function (currentData, proposedData) {
-            if (nf.Common.isDefinedAndNotNull(currentData)) {
+            if (common.isDefinedAndNotNull(currentData)) {
                 var currentRevision = currentData.revision;
                 var proposedRevision = proposedData.revision;
 
@@ -66,4 +84,4 @@ nf.Client = (function() {
             }
         }
     };
-}());
\ No newline at end of file
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-cluster-summary.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-cluster-summary.js
new file mode 100644
index 0000000000..1352843676
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-cluster-summary.js
@@ -0,0 +1,81 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global nf, define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery'], function ($) {
+            return (nf.ClusterSummary = factory($));
+        });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.ClusterSummary =
+            factory(require('jquery')));
+    } else {
+        nf.ClusterSummary = factory(root.$);
+    }
+}(this, function ($) {
+    var clustered = false;
+    var connectedToCluster = false;
+
+    var config = {
+        urls: {
+            clusterSummary: '../nifi-api/flow/cluster/summary'
+        }
+    };
+
+    return {
+
+        /**
+         * Loads the flow configuration and updated the cluster state.
+         *
+         * @returns xhr
+         */
+        loadClusterSummary: function () {
+            return $.ajax({
+                type: 'GET',
+                url: config.urls.clusterSummary,
+                dataType: 'json'
+            }).done(function (clusterSummaryResult) {
+                var clusterSummaryResponse = clusterSummaryResult;
+                var clusterSummary = clusterSummaryResponse.clusterSummary;
+
+                // establish the initial cluster state
+                clustered = clusterSummary.clustered;
+                connectedToCluster = clusterSummary.connectedToCluster;
+            });
+        },
+
+        /**
+         * Return whether this instance of NiFi is clustered.
+         *
+         * @returns {Boolean}
+         */
+        isClustered: function () {
+            return clustered === true;
+        },
+
+        /**
+         * Return whether this instance is connected to a cluster.
+         *
+         * @returns {boolean}
+         */
+        isConnectedToCluster: function () {
+            return connectedToCluster === true;
+        }
+    };
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js
index faecda7051..7ae237aa4e 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js
@@ -15,66 +15,82 @@
  * limitations under the License.
  */
 
-/* global nf, parseFloat */
-
-$(document).ready(function () {
-    // preload the image for the error page - this is preloaded because the system
-    // may be unavailable to return the image when the error page is rendered
-    var imgSrc = 'images/bg-error.png';
-    $('').attr('src', imgSrc).on('load', function () {
-        $('div.message-pane').css('background-image', imgSrc);
-    });
-
-    // mouse over for links
-    $(document).on('mouseenter', 'span.link', function () {
-        $(this).addClass('link-over');
-    }).on('mouseleave', 'span.link', function () {
-        $(this).removeClass('link-over');
-    });
-
-    // setup custom checkbox
-    $(document).on('click', 'div.nf-checkbox', function () {
-        var checkbox = $(this);
-        if (checkbox.hasClass('checkbox-unchecked')) {
-            checkbox.removeClass('checkbox-unchecked').addClass('checkbox-checked');
-        } else {
-            checkbox.removeClass('checkbox-checked').addClass('checkbox-unchecked');
-        }
-    });
-
-    // show the loading icon when appropriate
-    $(document).ajaxStart(function () {
-        // show the loading indicator 
-        $('div.loading-container').addClass('ajax-loading');
-    }).ajaxStop(function () {
-        // hide the loading indicator 
-        $('div.loading-container').removeClass('ajax-loading');
-    });
-    
-    // shows the logout link in the message-pane when appropriate and schedule token refresh
-    if (nf.Storage.getItem('jwt') !== null) {
-        $('#user-logout-container').css('display', 'block');
-        nf.Common.scheduleTokenRefresh();
-    }
-    
-    // handle logout
-    $('#user-logout').on('click', function () {
-        nf.Storage.removeItem('jwt');
-        window.location = '/nifi/login';
-    });
-    
-    // handle home
-    $('#user-home').on('click', function () {
-        if (top !== window) {
-            parent.window.location = '/nifi';
-        } else {
-            window.location = '/nifi';
-        }
-    });
-});
+/* global nf, define, module, require, exports, parseFloat */
 
 // Define a common utility class used across the entire application.
-nf.Common = (function () {
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'nf.Storage'],
+            function ($, storage) {
+                return (nf.Common = factory($, storage));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.Common = factory(require('jquery'),
+            require('nf.Storage')));
+    } else {
+        nf.Common = factory(root.$,
+            root.nf.Storage);
+    }
+}(this, function ($, storage) {
+    'use strict';
+
+    $(document).ready(function () {
+        // preload the image for the error page - this is preloaded because the system
+        // may be unavailable to return the image when the error page is rendered
+        var imgSrc = 'images/bg-error.png';
+        $('').attr('src', imgSrc).on('load', function () {
+            $('div.message-pane').css('background-image', imgSrc);
+        });
+
+        // mouse over for links
+        $(document).on('mouseenter', 'span.link', function () {
+            $(this).addClass('link-over');
+        }).on('mouseleave', 'span.link', function () {
+            $(this).removeClass('link-over');
+        });
+
+        // setup custom checkbox
+        $(document).on('click', 'div.nf-checkbox', function () {
+            var checkbox = $(this);
+            if (checkbox.hasClass('checkbox-unchecked')) {
+                checkbox.removeClass('checkbox-unchecked').addClass('checkbox-checked');
+            } else {
+                checkbox.removeClass('checkbox-checked').addClass('checkbox-unchecked');
+            }
+        });
+
+        // show the loading icon when appropriate
+        $(document).ajaxStart(function () {
+            // show the loading indicator
+            $('div.loading-container').addClass('ajax-loading');
+        }).ajaxStop(function () {
+            // hide the loading indicator
+            $('div.loading-container').removeClass('ajax-loading');
+        });
+
+        // shows the logout link in the message-pane when appropriate and schedule token refresh
+        if (storage.getItem('jwt') !== null) {
+            $('#user-logout-container').css('display', 'block');
+            nfCommon.scheduleTokenRefresh();
+        }
+
+        // handle logout
+        $('#user-logout').on('click', function () {
+            storage.removeItem('jwt');
+            window.location = '/nifi/login';
+        });
+
+        // handle home
+        $('#user-home').on('click', function () {
+            if (top !== window) {
+                parent.window.location = '/nifi';
+            } else {
+                window.location = '/nifi';
+            }
+        });
+    });
+
     // interval for cancelling token refresh when necessary
     var tokenRefreshInterval = null;
 
@@ -120,7 +136,7 @@ nf.Common = (function () {
         description: 'Allows users to view/modify Counters'
     }];
 
-    return {
+    var nfCommon = {
         ANONYMOUS_USER_TEXT: 'Anonymous user',
 
         config: {
@@ -131,12 +147,12 @@ nf.Common = (function () {
                 },
                 show: {
                     solo: true,
-                    effect: function(offset) {
+                    effect: function (offset) {
                         $(this).slideDown(100);
                     }
                 },
                 hide: {
-                    effect: function(offset) {
+                    effect: function (offset) {
                         $(this).slideUp(100);
                     }
                 },
@@ -174,8 +190,8 @@ nf.Common = (function () {
             var markup = '';
 
             // restriction
-            if (nf.Common.isBlank(dataContext.usageRestriction) === false) {
-                markup += '
    ';
+            if (nfCommon.isBlank(dataContext.usageRestriction) === false) {
+                markup += '
    ';
             } else {
                 markup += '
    ';
             }
@@ -188,11 +204,11 @@ nf.Common = (function () {
 
         /**
          * Sets the current user.
-         * 
+         *
          * @param currentUser
          */
         setCurrentUser: function (currentUser) {
-            nf.Common.currentUser = currentUser;
+            nfCommon.currentUser = currentUser;
         },
 
         /**
@@ -203,12 +219,12 @@ nf.Common = (function () {
             if (tokenRefreshInterval !== null) {
                 clearInterval(tokenRefreshInterval);
             }
-            
+
             // set the interval to one hour
-            var interval = nf.Common.MILLIS_PER_MINUTE;
-            
+            var interval = nfCommon.MILLIS_PER_MINUTE;
+
             var checkExpiration = function () {
-                var expiration = nf.Storage.getItemExpiration('jwt');
+                var expiration = storage.getItemExpiration('jwt');
 
                 // ensure there is an expiration and token present
                 if (expiration !== null) {
@@ -216,11 +232,11 @@ nf.Common = (function () {
                     var now = new Date();
 
                     // get the time remainging plus a little bonus time to reload the token
-                    var timeRemaining = expirationDate.valueOf() - now.valueOf() - (30 * nf.Common.MILLIS_PER_SECOND);
+                    var timeRemaining = expirationDate.valueOf() - now.valueOf() - (30 * nfCommon.MILLIS_PER_SECOND);
                     if (timeRemaining < interval) {
-                        if ($('#current-user').text() !== nf.Common.ANONYMOUS_USER_TEXT && !$('#anonymous-user-alert').is(':visible')) {
+                        if ($('#current-user').text() !== nfCommon.ANONYMOUS_USER_TEXT && !$('#anonymous-user-alert').is(':visible')) {
                             // if the token will expire before the next interval minus some bonus time, notify the user to re-login
-                            $('#anonymous-user-alert').show().qtip($.extend({}, nf.Common.config.tooltipConfig, {
+                            $('#anonymous-user-alert').show().qtip($.extend({}, nfCommon.config.tooltipConfig, {
                                 content: 'Your session will expire soon. Please log in again to avoid being automatically logged out.',
                                 position: {
                                     my: 'top right',
@@ -231,10 +247,10 @@ nf.Common = (function () {
                     }
                 }
             };
-            
+
             // perform initial check
             checkExpiration();
-            
+
             // schedule subsequent checks
             tokenRefreshInterval = setInterval(checkExpiration, interval);
         },
@@ -247,9 +263,9 @@ nf.Common = (function () {
             if (anonymousUserAlert.data('qtip')) {
                 anonymousUserAlert.qtip('api').destroy(true);
             }
-                        
+
             // alert user's of anonymous access
-            anonymousUserAlert.show().qtip($.extend({}, nf.Common.config.tooltipConfig, {
+            anonymousUserAlert.show().qtip($.extend({}, nfCommon.config.tooltipConfig, {
                 content: 'You are accessing with limited authority. Log in or request an account to access with additional authority granted to you by an administrator.',
                 position: {
                     my: 'top right',
@@ -258,18 +274,18 @@ nf.Common = (function () {
             }));
 
             // render the anonymous user text
-            $('#current-user').text(nf.Common.ANONYMOUS_USER_TEXT).show();  
+            $('#current-user').text(nfCommon.ANONYMOUS_USER_TEXT).show();
         },
 
         /**
          * Extracts the subject from the specified jwt. If the jwt is not as expected
          * an empty string is returned.
-         * 
+         *
          * @param {string} jwt
          * @returns {string}
          */
         getJwtPayload: function (jwt) {
-            if (nf.Common.isDefinedAndNotNull(jwt)) {
+            if (nfCommon.isDefinedAndNotNull(jwt)) {
                 var segments = jwt.split(/\./);
                 if (segments.length !== 3) {
                     return '';
@@ -278,7 +294,7 @@ nf.Common = (function () {
                 var rawPayload = $.base64.atob(segments[1]);
                 var payload = JSON.parse(rawPayload);
 
-                if (nf.Common.isDefinedAndNotNull(payload)) {
+                if (nfCommon.isDefinedAndNotNull(payload)) {
                     return payload;
                 } else {
                     return null;
@@ -290,12 +306,12 @@ nf.Common = (function () {
 
         /**
          * Determines whether the current user can access provenance.
-         * 
+         *
          * @returns {boolean}
          */
         canAccessProvenance: function () {
-            if (nf.Common.isDefinedAndNotNull(nf.Common.currentUser)) {
-                return nf.Common.currentUser.provenancePermissions.canRead === true;
+            if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                return nfCommon.currentUser.provenancePermissions.canRead === true;
             } else {
                 return false;
             }
@@ -307,8 +323,8 @@ nf.Common = (function () {
          * @returns {boolean}
          */
         canAccessRestrictedComponents: function () {
-            if (nf.Common.isDefinedAndNotNull(nf.Common.currentUser)) {
-                return nf.Common.currentUser.restrictedComponentsPermissions.canWrite === true;
+            if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                return nfCommon.currentUser.restrictedComponentsPermissions.canWrite === true;
             } else {
                 return false;
             }
@@ -316,12 +332,12 @@ nf.Common = (function () {
 
         /**
          * Determines whether the current user can access counters.
-         * 
+         *
          * @returns {boolean}
          */
         canAccessCounters: function () {
-            if (nf.Common.isDefinedAndNotNull(nf.Common.currentUser)) {
-                return nf.Common.currentUser.countersPermissions.canRead === true;
+            if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                return nfCommon.currentUser.countersPermissions.canRead === true;
             } else {
                 return false;
             }
@@ -329,12 +345,12 @@ nf.Common = (function () {
 
         /**
          * Determines whether the current user can modify counters.
-         * 
+         *
          * @returns {boolean}
          */
         canModifyCounters: function () {
-            if (nf.Common.isDefinedAndNotNull(nf.Common.currentUser)) {
-                return nf.Common.currentUser.countersPermissions.canRead === true && nf.Common.currentUser.countersPermissions.canWrite === true;
+            if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                return nfCommon.currentUser.countersPermissions.canRead === true && nfCommon.currentUser.countersPermissions.canWrite === true;
             } else {
                 return false;
             }
@@ -346,8 +362,8 @@ nf.Common = (function () {
          * @returns {boolean}
          */
         canAccessTenants: function () {
-            if (nf.Common.isDefinedAndNotNull(nf.Common.currentUser)) {
-                return nf.Common.currentUser.tenantsPermissions.canRead === true;
+            if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                return nfCommon.currentUser.tenantsPermissions.canRead === true;
             } else {
                 return false;
             }
@@ -359,8 +375,8 @@ nf.Common = (function () {
          * @returns {boolean}
          */
         canModifyTenants: function () {
-            if (nf.Common.isDefinedAndNotNull(nf.Common.currentUser)) {
-                return nf.Common.currentUser.tenantsPermissions.canRead === true && nf.Common.currentUser.tenantsPermissions.canWrite === true;
+            if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                return nfCommon.currentUser.tenantsPermissions.canRead === true && nfCommon.currentUser.tenantsPermissions.canWrite === true;
             } else {
                 return false;
             }
@@ -372,8 +388,8 @@ nf.Common = (function () {
          * @returns {boolean}
          */
         canAccessPolicies: function () {
-            if (nf.Common.isDefinedAndNotNull(nf.Common.currentUser)) {
-                return nf.Common.currentUser.policiesPermissions.canRead === true;
+            if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                return nfCommon.currentUser.policiesPermissions.canRead === true;
             } else {
                 return false;
             }
@@ -385,8 +401,8 @@ nf.Common = (function () {
          * @returns {boolean}
          */
         canModifyPolicies: function () {
-            if (nf.Common.isDefinedAndNotNull(nf.Common.currentUser)) {
-                return nf.Common.currentUser.policiesPermissions.canRead === true && nf.Common.currentUser.policiesPermissions.canWrite === true;
+            if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                return nfCommon.currentUser.policiesPermissions.canRead === true && nfCommon.currentUser.policiesPermissions.canWrite === true;
             } else {
                 return false;
             }
@@ -398,8 +414,8 @@ nf.Common = (function () {
          * @returns {boolean}
          */
         canAccessController: function () {
-            if (nf.Common.isDefinedAndNotNull(nf.Common.currentUser)) {
-                return nf.Common.currentUser.controllerPermissions.canRead === true;
+            if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                return nfCommon.currentUser.controllerPermissions.canRead === true;
             } else {
                 return false;
             }
@@ -411,8 +427,8 @@ nf.Common = (function () {
          * @returns {boolean}
          */
         canModifyController: function () {
-            if (nf.Common.isDefinedAndNotNull(nf.Common.currentUser)) {
-                return nf.Common.currentUser.controllerPermissions.canRead === true && nf.Common.currentUser.controllerPermissions.canWrite === true;
+            if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                return nfCommon.currentUser.controllerPermissions.canRead === true && nfCommon.currentUser.controllerPermissions.canWrite === true;
             } else {
                 return false;
             }
@@ -424,8 +440,8 @@ nf.Common = (function () {
          * @returns {boolean}
          */
         canAccessSystem: function () {
-            if (nf.Common.isDefinedAndNotNull(nf.Common.currentUser)) {
-                return nf.Common.currentUser.systemPermissions.canRead === true;
+            if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                return nfCommon.currentUser.systemPermissions.canRead === true;
             } else {
                 return false;
             }
@@ -434,7 +450,7 @@ nf.Common = (function () {
         /**
          * Adds a mouse over effect for the specified selector using
          * the specified styles.
-         * 
+         *
          * @argument {string} selector      The selector for the element to add a hover effect for
          * @argument {string} normalStyle   The css style for the normal state
          * @argument {string} overStyle     The css style for the over state
@@ -454,7 +470,7 @@ nf.Common = (function () {
          * @param {HTMLElement} element The DOM element to toggle .scrollable upon.
          */
         toggleScrollable: function (element) {
-            if ($(element).is(':visible')){
+            if ($(element).is(':visible')) {
                 if (element.offsetHeight < element.scrollHeight ||
                     element.offsetWidth < element.scrollWidth) {
                     // your element has overflow
@@ -471,158 +487,18 @@ nf.Common = (function () {
          * @param {string} hex  The hex color to test.
          * @returns {string} The contrasting color string.
          */
-        determineContrastColor: function (hex){
-            if (parseInt(hex, 16) > 0xffffff/1.5) {
+        determineContrastColor: function (hex) {
+            if (parseInt(hex, 16) > 0xffffff / 1.5) {
                 return '#000000';
             }
             return '#ffffff';
         },
 
-
-        /**
-         * Method for handling ajax errors.
-         * 
-         * @argument {object} xhr       The XmlHttpRequest
-         * @argument {string} status    The status of the request
-         * @argument {string} error     The error
-         */
-        handleAjaxError: function (xhr, status, error) {
-            if (status === 'canceled') {
-                if ($('#splash').is(':visible')) {
-                    $('#message-title').text('Session Expired');
-                    $('#message-content').text('Your session has expired. Please reload to log in again.');
-
-                    // show the error pane
-                    $('#message-pane').show();
-                } else {
-                    nf.Dialog.showOkDialog({
-                        headerText: 'Session Expired',
-                        dialogContent: 'Your session has expired. Please press Ok to log in again.',
-                        okHandler: function () {
-                            window.location = '/nifi';
-                        }
-                    });
-                }
-                
-                // close the canvas
-                nf.Common.closeCanvas();
-                return;
-            }
-            
-            // if an error occurs while the splash screen is visible close the canvas show the error message
-            if ($('#splash').is(':visible')) {
-                if (xhr.status === 401) {
-                    $('#message-title').text('Unauthorized');
-                } else if (xhr.status === 403) {
-                    $('#message-title').text('Insufficient Permissions');
-                } else if (xhr.status === 409) {
-                    $('#message-title').text('Invalid State');
-                } else {
-                    $('#message-title').text('An unexpected error has occurred');
-                }
-
-                if ($.trim(xhr.responseText) === '') {
-                    $('#message-content').text('Please check the logs.');
-                } else {
-                    $('#message-content').text(xhr.responseText);
-                }
-
-                // show the error pane
-                $('#message-pane').show();
-
-                // close the canvas
-                nf.Common.closeCanvas();
-                return;
-            }
-
-            // status code 400, 404, and 409 are expected response codes for common errors.
-            if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409 || xhr.status === 503) {
-                nf.Dialog.showOkDialog({
-                    headerText: 'Error',
-                    dialogContent: nf.Common.escapeHtml(xhr.responseText)
-                });
-            } else if (xhr.status === 403) {
-                nf.Dialog.showOkDialog({
-                    headerText: 'Insufficient Permissions',
-                    dialogContent: nf.Common.escapeHtml(xhr.responseText)
-                });
-            } else {
-                if (xhr.status < 99 || xhr.status === 12007 || xhr.status === 12029) {
-                    var content = 'Please ensure the application is running and check the logs for any errors.';
-                    if (nf.Common.isDefinedAndNotNull(status)) {
-                        if (status === 'timeout') {
-                            content = 'Request has timed out. Please ensure the application is running and check the logs for any errors.';
-                        } else if (status === 'abort') {
-                            content = 'Request has been aborted.';
-                        } else if (status === 'No Transport') {
-                            content = 'Request transport mechanism failed. Please ensure the host where the application is running is accessible.';
-                        }
-                    }
-                    $('#message-title').text('Unable to communicate with NiFi');
-                    $('#message-content').text(content);
-                } else if (xhr.status === 401) {
-                    $('#message-title').text('Unauthorized');
-                    if ($.trim(xhr.responseText) === '') {
-                        $('#message-content').text('Authentication is required to use this NiFi.');
-                    } else {
-                        $('#message-content').text(xhr.responseText);
-                    }
-                } else if (xhr.status === 500) {
-                    $('#message-title').text('An unexpected error has occurred');
-                    if ($.trim(xhr.responseText) === '') {
-                        $('#message-content').text('An error occurred communicating with the application core. Please check the logs and fix any configuration issues before restarting.');
-                    } else {
-                        $('#message-content').text(xhr.responseText);
-                    }
-                } else if (xhr.status === 200 || xhr.status === 201) {
-                    $('#message-title').text('Parse Error');
-                    if ($.trim(xhr.responseText) === '') {
-                        $('#message-content').text('Unable to interpret response from NiFi.');
-                    } else {
-                        $('#message-content').text(xhr.responseText);
-                    }
-                } else {
-                    $('#message-title').text(xhr.status + ': Unexpected Response');
-                    $('#message-content').text('An unexpected error has occurred. Please check the logs.');
-                }
-
-                // show the error pane
-                $('#message-pane').show();
-
-                // close the canvas
-                nf.Common.closeCanvas();
-            }
-        },
-
-        /**
-         * Closes the canvas by removing the splash screen and stats poller.
-         */
-        closeCanvas: function () {
-            nf.Common.showLogoutLink();
-            
-            // ensure this javascript has been loaded in the nf canvas page
-            if (nf.Common.isDefinedAndNotNull(nf.Canvas)) {
-                // hide the splash screen if required
-                if ($('#splash').is(':visible')) {
-                    nf.Canvas.hideSplash();
-                }
-
-                // hide the context menu
-                nf.ContextMenu.hide();
-
-                // shut off the auto refresh
-                nf.Canvas.stopPolling();
-
-                // allow page refresh with ctrl-r
-                nf.Canvas.disableRefreshHotKey();
-            }
-        },
-
         /**
          * Shows the logout link if appropriate.
          */
         showLogoutLink: function () {
-            if (nf.Storage.getItem('jwt') === null) {
+            if (storage.getItem('jwt') === null) {
                 $('#user-logout-container').css('display', 'none');
             } else {
                 $('#user-logout-container').css('display', 'block');
@@ -636,19 +512,19 @@ nf.Common = (function () {
          */
         isContentViewConfigured: function () {
             var contentViewerUrl = $('#nifi-content-viewer-url').text();
-            return !nf.Common.isBlank(contentViewerUrl);
+            return !nfCommon.isBlank(contentViewerUrl);
         },
 
         /**
-         * Populates the specified field with the specified value. If the value is 
+         * Populates the specified field with the specified value. If the value is
          * undefined, the field will read 'No value set.' If the value is an empty
          * string, the field will read 'Empty string set.'
-         * 
+         *
          * @argument {string} target        The dom Id of the target
          * @argument {string} value         The value
          */
         populateField: function (target, value) {
-            if (nf.Common.isUndefined(value) || nf.Common.isNull(value)) {
+            if (nfCommon.isUndefined(value) || nfCommon.isNull(value)) {
                 return $('#' + target).addClass('unset').text('No value set');
             } else if (value === '') {
                 return $('#' + target).addClass('blank').text('Empty string set');
@@ -660,7 +536,7 @@ nf.Common = (function () {
         /**
          * Clears the specified field. Removes any style that may have been applied
          * by a preceeding call to populateField.
-         * 
+         *
          * @argument {string} target        The dom Id of the target
          */
         clearField: function (target) {
@@ -669,11 +545,11 @@ nf.Common = (function () {
 
         /**
          * Cleans up any tooltips that have been created for the specified container.
-         * 
+         *
          * @param {jQuery} container
          * @param {string} tooltipTarget
          */
-        cleanUpTooltips: function(container, tooltipTarget) {
+        cleanUpTooltips: function (container, tooltipTarget) {
             container.find(tooltipTarget).each(function () {
                 var tip = $(this);
                 if (tip.data('qtip')) {
@@ -685,7 +561,7 @@ nf.Common = (function () {
 
         /**
          * Formats the tooltip for the specified property.
-         * 
+         *
          * @param {object} propertyDescriptor      The property descriptor
          * @param {object} propertyHistory         The property history
          * @returns {string}
@@ -694,23 +570,23 @@ nf.Common = (function () {
             var tipContent = [];
 
             // show the property description if applicable
-            if (nf.Common.isDefinedAndNotNull(propertyDescriptor)) {
-                if (!nf.Common.isBlank(propertyDescriptor.description)) {
-                    tipContent.push(nf.Common.escapeHtml(propertyDescriptor.description));
+            if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
+                if (!nfCommon.isBlank(propertyDescriptor.description)) {
+                    tipContent.push(nfCommon.escapeHtml(propertyDescriptor.description));
                 }
-                if (!nf.Common.isBlank(propertyDescriptor.defaultValue)) {
-                    tipContent.push('Default value: ' + nf.Common.escapeHtml(propertyDescriptor.defaultValue));
+                if (!nfCommon.isBlank(propertyDescriptor.defaultValue)) {
+                    tipContent.push('Default value: ' + nfCommon.escapeHtml(propertyDescriptor.defaultValue));
                 }
-                if (!nf.Common.isBlank(propertyDescriptor.supportsEl)) {
-                    tipContent.push('Supports expression language: ' + nf.Common.escapeHtml(propertyDescriptor.supportsEl));
+                if (!nfCommon.isBlank(propertyDescriptor.supportsEl)) {
+                    tipContent.push('Supports expression language: ' + nfCommon.escapeHtml(propertyDescriptor.supportsEl));
                 }
             }
 
-            if (nf.Common.isDefinedAndNotNull(propertyHistory)) {
-                if (!nf.Common.isEmpty(propertyHistory.previousValues)) {
+            if (nfCommon.isDefinedAndNotNull(propertyHistory)) {
+                if (!nfCommon.isEmpty(propertyHistory.previousValues)) {
                     var history = [];
                     $.each(propertyHistory.previousValues, function (_, previousValue) {
-                        history.push('
  • ' + nf.Common.escapeHtml(previousValue.previousValue) + ' - ' + nf.Common.escapeHtml(previousValue.timestamp) + ' (' + nf.Common.escapeHtml(previousValue.userIdentity) + ')
    • ');
+                        history.push('
  • ' + nfCommon.escapeHtml(previousValue.previousValue) + ' - ' + nfCommon.escapeHtml(previousValue.timestamp) + ' (' + nfCommon.escapeHtml(previousValue.userIdentity) + ')
    • ');
                     });
                     tipContent.push('History:
      ' + history.join('') + '
    ');
                 }
@@ -725,25 +601,25 @@ nf.Common = (function () {
 
         /**
          * Formats the specified property (name and value) accordingly.
-         * 
+         *
          * @argument {string} name      The name of the property
          * @argument {string} value     The value of the property
          */
         formatProperty: function (name, value) {
-            return '
    ' + nf.Common.formatValue(name) + ': ' + nf.Common.formatValue(value) + '
    ';
+            return '
    ' + nfCommon.formatValue(name) + ': ' + nfCommon.formatValue(value) + '
    ';
         },
 
         /**
          * Formats the specified value accordingly.
-         * 
+         *
          * @argument {string} value     The value of the property
          */
         formatValue: function (value) {
-            if (nf.Common.isDefinedAndNotNull(value)) {
+            if (nfCommon.isDefinedAndNotNull(value)) {
                 if (value === '') {
                     return 'Empty string set';
                 } else {
-                    return nf.Common.escapeHtml(value);
+                    return nfCommon.escapeHtml(value);
                 }
             } else {
                 return 'No value set';
@@ -751,9 +627,9 @@ nf.Common = (function () {
         },
 
         /**
-         * HTML escapes the specified string. If the string is null 
+         * HTML escapes the specified string. If the string is null
          * or undefined, an empty string is returned.
-         * 
+         *
          * @returns {string}
          */
         escapeHtml: (function () {
@@ -767,7 +643,7 @@ nf.Common = (function () {
             };
 
             return function (string) {
-                if (nf.Common.isDefinedAndNotNull(string)) {
+                if (nfCommon.isDefinedAndNotNull(string)) {
                     return String(string).replace(/[&<>"'\/]/g, function (s) {
                         return entityMap[s];
                     });
@@ -779,11 +655,11 @@ nf.Common = (function () {
 
         /**
          * Determines if the specified property is sensitive.
-         * 
+         *
          * @argument {object} propertyDescriptor        The property descriptor
          */
         isSensitiveProperty: function (propertyDescriptor) {
-            if (nf.Common.isDefinedAndNotNull(propertyDescriptor)) {
+            if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
                 return propertyDescriptor.sensitive === true;
             } else {
                 return false;
@@ -792,11 +668,11 @@ nf.Common = (function () {
 
         /**
          * Determines if the specified property is required.
-         * 
+         *
          * @param {object} propertyDescriptor           The property descriptor
          */
         isRequiredProperty: function (propertyDescriptor) {
-            if (nf.Common.isDefinedAndNotNull(propertyDescriptor)) {
+            if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
                 return propertyDescriptor.required === true;
             } else {
                 return false;
@@ -805,11 +681,11 @@ nf.Common = (function () {
 
         /**
          * Determines if the specified property is required.
-         * 
+         *
          * @param {object} propertyDescriptor           The property descriptor
          */
         isDynamicProperty: function (propertyDescriptor) {
-            if (nf.Common.isDefinedAndNotNull(propertyDescriptor)) {
+            if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
                 return propertyDescriptor.dynamic === true;
             } else {
                 return false;
@@ -818,11 +694,11 @@ nf.Common = (function () {
 
         /**
          * Gets the allowable values for the specified property.
-         * 
+         *
          * @argument {object} propertyDescriptor        The property descriptor
          */
         getAllowableValues: function (propertyDescriptor) {
-            if (nf.Common.isDefinedAndNotNull(propertyDescriptor)) {
+            if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
                 return propertyDescriptor.allowableValues;
             } else {
                 return null;
@@ -831,11 +707,11 @@ nf.Common = (function () {
 
         /**
          * Returns whether the specified property supports EL.
-         * 
+         *
          * @param {object} propertyDescriptor           The property descriptor
          */
         supportsEl: function (propertyDescriptor) {
-            if (nf.Common.isDefinedAndNotNull(propertyDescriptor)) {
+            if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
                 return propertyDescriptor.supportsEl === true;
             } else {
                 return false;
@@ -843,9 +719,9 @@ nf.Common = (function () {
         },
 
         /**
-         * Formats the specified array as an unordered list. If the array is not an 
+         * Formats the specified array as an unordered list. If the array is not an
          * array, null is returned.
-         * 
+         *
          * @argument {array} array      The array to convert into an unordered list
          */
         formatUnorderedList: function (array) {
@@ -869,7 +745,7 @@ nf.Common = (function () {
          * Extracts the contents of the specified str after the strToFind. If the
          * strToFind is not found or the last part of the str, an empty string is
          * returned.
-         * 
+         *
          * @argument {string} str       The full string
          * @argument {string} strToFind The substring to find
          */
@@ -913,7 +789,7 @@ nf.Common = (function () {
          * @argument {string} str       The full string
          * @argument {string} strToFind The substring to find
          */
-        substringBeforeFirst: function(str, strToFind) {
+        substringBeforeFirst: function (str, strToFind) {
             var result = '';
             var indexOfStrToFind = str.indexOf(strToFind);
             if (indexOfStrToFind >= 0) {
@@ -924,7 +800,7 @@ nf.Common = (function () {
 
         /**
          * Updates the mouse pointer.
-         * 
+         *
          * @argument {string} domId         The id of the element for the new cursor style
          * @argument {boolean} isMouseOver  Whether or not the mouse is over the element
          */
@@ -944,7 +820,7 @@ nf.Common = (function () {
          */
         getAccessToken: function (accessTokenUrl) {
             return $.Deferred(function (deferred) {
-                if (nf.Storage.hasItem('jwt')) {
+                if (storage.hasItem('jwt')) {
                     $.ajax({
                         type: 'POST',
                         url: accessTokenUrl
@@ -969,7 +845,7 @@ nf.Common = (function () {
 
         /**
          * Formats the specified duration.
-         * 
+         *
          * @param {integer} duration in millis
          */
         formatDuration: function (duration) {
@@ -977,35 +853,35 @@ nf.Common = (function () {
             duration = duration < 1 ? 0 : duration;
 
             // determine the number of days in the specified duration
-            var days = duration / nf.Common.MILLIS_PER_DAY;
+            var days = duration / nfCommon.MILLIS_PER_DAY;
             days = days >= 1 ? parseInt(days, 10) : 0;
-            duration %= nf.Common.MILLIS_PER_DAY;
+            duration %= nfCommon.MILLIS_PER_DAY;
 
             // remaining duration should be less than 1 day, get number of hours
-            var hours = duration / nf.Common.MILLIS_PER_HOUR;
+            var hours = duration / nfCommon.MILLIS_PER_HOUR;
             hours = hours >= 1 ? parseInt(hours, 10) : 0;
-            duration %= nf.Common.MILLIS_PER_HOUR;
+            duration %= nfCommon.MILLIS_PER_HOUR;
 
             // remaining duration should be less than 1 hour, get number of minutes
-            var minutes = duration / nf.Common.MILLIS_PER_MINUTE;
+            var minutes = duration / nfCommon.MILLIS_PER_MINUTE;
             minutes = minutes >= 1 ? parseInt(minutes, 10) : 0;
-            duration %= nf.Common.MILLIS_PER_MINUTE;
+            duration %= nfCommon.MILLIS_PER_MINUTE;
 
             // remaining duration should be less than 1 minute, get number of seconds
-            var seconds = duration / nf.Common.MILLIS_PER_SECOND;
+            var seconds = duration / nfCommon.MILLIS_PER_SECOND;
             seconds = seconds >= 1 ? parseInt(seconds, 10) : 0;
 
             // remaining duration is the number millis (don't support sub millisecond resolution)
-            duration = Math.floor(duration % nf.Common.MILLIS_PER_SECOND);
+            duration = Math.floor(duration % nfCommon.MILLIS_PER_SECOND);
 
             // format the time
-            var time = nf.Common.pad(hours, 2, '0') +
-                    ':' +
-                    nf.Common.pad(minutes, 2, '0') +
-                    ':' +
-                    nf.Common.pad(seconds, 2, '0') +
-                    '.' +
-                    nf.Common.pad(duration, 3, '0');
+            var time = nfCommon.pad(hours, 2, '0') +
+                ':' +
+                nfCommon.pad(minutes, 2, '0') +
+                ':' +
+                nfCommon.pad(seconds, 2, '0') +
+                '.' +
+                nfCommon.pad(duration, 3, '0');
 
             // only include days if appropriate
             if (days > 0) {
@@ -1025,31 +901,31 @@ nf.Common = (function () {
 
         /**
          * Formats the specified number of bytes into a human readable string.
-         * 
+         *
          * @param {integer} dataSize
          * @returns {string}
          */
         formatDataSize: function (dataSize) {
             // check terabytes
-            var dataSizeToFormat = parseFloat(dataSize / nf.Common.BYTES_IN_TERABYTE);
+            var dataSizeToFormat = parseFloat(dataSize / nfCommon.BYTES_IN_TERABYTE);
             if (dataSizeToFormat > 1) {
                 return dataSizeToFormat.toFixed(2) + " TB";
             }
 
             // check gigabytes
-            dataSizeToFormat = parseFloat(dataSize / nf.Common.BYTES_IN_GIGABYTE);
+            dataSizeToFormat = parseFloat(dataSize / nfCommon.BYTES_IN_GIGABYTE);
             if (dataSizeToFormat > 1) {
                 return dataSizeToFormat.toFixed(2) + " GB";
             }
 
             // check megabytes
-            dataSizeToFormat = parseFloat(dataSize / nf.Common.BYTES_IN_MEGABYTE);
+            dataSizeToFormat = parseFloat(dataSize / nfCommon.BYTES_IN_MEGABYTE);
             if (dataSizeToFormat > 1) {
                 return dataSizeToFormat.toFixed(2) + " MB";
             }
 
             // check kilobytes
-            dataSizeToFormat = parseFloat(dataSize / nf.Common.BYTES_IN_KILOBYTE);
+            dataSizeToFormat = parseFloat(dataSize / nfCommon.BYTES_IN_KILOBYTE);
             if (dataSizeToFormat > 1) {
                 return dataSizeToFormat.toFixed(2) + " KB";
             }
@@ -1061,7 +937,7 @@ nf.Common = (function () {
         /**
          * Formats the specified integer as a string (adding commas). At this
          * point this does not take into account any locales.
-         * 
+         *
          * @param {integer} integer
          */
         formatInteger: function (integer) {
@@ -1075,11 +951,11 @@ nf.Common = (function () {
 
         /**
          * Formats the specified float using two demical places.
-         * 
+         *
          * @param {float} f
          */
         formatFloat: function (f) {
-            if (nf.Common.isUndefinedOrNull(f)) {
+            if (nfCommon.isUndefinedOrNull(f)) {
                 return 0.00 + '';
             }
             return f.toFixed(2) + '';
@@ -1089,7 +965,7 @@ nf.Common = (function () {
          * Pads the specified value to the specified width with the specified character.
          * If the specified value is already wider than the specified width, the original
          * value is returned.
-         * 
+         *
          * @param {integer} value
          * @param {integer} width
          * @param {string} character
@@ -1108,37 +984,37 @@ nf.Common = (function () {
 
         /**
          * Formats the specified DateTime.
-         * 
+         *
          * @param {Date} date
          * @returns {String}
          */
         formatDateTime: function (date) {
-            return nf.Common.pad(date.getMonth() + 1, 2, '0') +
-                    '/' +
-                    nf.Common.pad(date.getDate(), 2, '0') +
-                    '/' +
-                    nf.Common.pad(date.getFullYear(), 2, '0') +
-                    ' ' +
-                    nf.Common.pad(date.getHours(), 2, '0') +
-                    ':' +
-                    nf.Common.pad(date.getMinutes(), 2, '0') +
-                    ':' +
-                    nf.Common.pad(date.getSeconds(), 2, '0') +
-                    '.' +
-                    nf.Common.pad(date.getMilliseconds(), 3, '0');
+            return nfCommon.pad(date.getMonth() + 1, 2, '0') +
+                '/' +
+                nfCommon.pad(date.getDate(), 2, '0') +
+                '/' +
+                nfCommon.pad(date.getFullYear(), 2, '0') +
+                ' ' +
+                nfCommon.pad(date.getHours(), 2, '0') +
+                ':' +
+                nfCommon.pad(date.getMinutes(), 2, '0') +
+                ':' +
+                nfCommon.pad(date.getSeconds(), 2, '0') +
+                '.' +
+                nfCommon.pad(date.getMilliseconds(), 3, '0');
         },
 
         /**
          * Parses the specified date time into a Date object. The resulting
          * object does not account for timezone and should only be used for
          * performing relative comparisons.
-         * 
+         *
          * @param {string} rawDateTime
          * @returns {Date}
          */
         parseDateTime: function (rawDateTime) {
             // handle non date values
-            if (!nf.Common.isDefinedAndNotNull(rawDateTime)) {
+            if (!nfCommon.isDefinedAndNotNull(rawDateTime)) {
                 return new Date();
             }
             if (rawDateTime === 'No value set') {
@@ -1176,7 +1052,7 @@ nf.Common = (function () {
 
         /**
          * Parses the specified duration and returns the total number of millis.
-         * 
+         *
          * @param {string} rawDuration
          * @returns {number}        The number of millis
          */
@@ -1199,7 +1075,7 @@ nf.Common = (function () {
 
         /**
          * Parses the specified size.
-         * 
+         *
          * @param {string} rawSize
          * @returns {int}
          */
@@ -1223,7 +1099,7 @@ nf.Common = (function () {
 
         /**
          * Parses the specified count.
-         * 
+         *
          * @param {string} rawCount
          * @returns {int}
          */
@@ -1248,25 +1124,25 @@ nf.Common = (function () {
 
         /**
          * Determines if the specified object is defined and not null.
-         * 
+         *
          * @argument {object} obj   The object to test
          */
         isDefinedAndNotNull: function (obj) {
-            return !nf.Common.isUndefined(obj) && !nf.Common.isNull(obj);
+            return !nfCommon.isUndefined(obj) && !nfCommon.isNull(obj);
         },
 
         /**
          * Determines if the specified object is undefined or null.
-         * 
+         *
          * @param {object} obj      The object to test
          */
         isUndefinedOrNull: function (obj) {
-            return nf.Common.isUndefined(obj) || nf.Common.isNull(obj);
+            return nfCommon.isUndefined(obj) || nfCommon.isNull(obj);
         },
 
         /**
          * Determines if the specified object is undefined.
-         * 
+         *
          * @argument {object} obj   The object to test
          */
         isUndefined: function (obj) {
@@ -1275,16 +1151,16 @@ nf.Common = (function () {
 
         /**
          * Determines whether the specified string is blank (or null or undefined).
-         * 
+         *
          * @argument {string} str   The string to test
          */
         isBlank: function (str) {
-            return nf.Common.isUndefined(str) || nf.Common.isNull(str) || $.trim(str) === '';
+            return nfCommon.isUndefined(str) || nfCommon.isNull(str) || $.trim(str) === '';
         },
 
         /**
          * Determines if the specified object is null.
-         * 
+         *
          * @argument {object} obj   The object to test
          */
         isNull: function (obj) {
@@ -1294,7 +1170,7 @@ nf.Common = (function () {
         /**
          * Determines if the specified array is empty. If the specified arg is not an
          * array, then true is returned.
-         * 
+         *
          * @argument {array} arr    The array to test
          */
         isEmpty: function (arr) {
@@ -1304,7 +1180,7 @@ nf.Common = (function () {
         /**
          * Determines if these are the same bulletins. If both arguments are not
          * arrays, false is returned.
-         * 
+         *
          * @param {array} bulletins
          * @param {array} otherBulletins
          * @returns {boolean}
@@ -1328,7 +1204,7 @@ nf.Common = (function () {
 
         /**
          * Formats the specified bulletin list.
-         * 
+         *
          * @argument {array} bulletins      The bulletins
          * @return {array}                  The jQuery objects
          */
@@ -1340,8 +1216,8 @@ nf.Common = (function () {
 
                     // format the node address
                     var nodeAddress = '';
-                    if (nf.Common.isDefinedAndNotNull(bulletin.nodeAddress)) {
-                        nodeAddress = '- ' + nf.Common.escapeHtml(bulletin.nodeAddress) + ' - ';
+                    if (nfCommon.isDefinedAndNotNull(bulletin.nodeAddress)) {
+                        nodeAddress = '- ' + nfCommon.escapeHtml(bulletin.nodeAddress) + ' - ';
                     }
 
                     // set the bulletin message (treat as text)
@@ -1351,10 +1227,10 @@ nf.Common = (function () {
 
                     // create the bulletin message
                     var formattedBulletin = $('
    ' +
-                            nf.Common.escapeHtml(bulletin.timestamp) + ' ' +
-                            nodeAddress + ' ' +
-                            '' + nf.Common.escapeHtml(bulletin.level) + ' ' +
-                            '
    ').append(bulletinMessage);
+                        nfCommon.escapeHtml(bulletin.timestamp) + ' ' +
+                        nodeAddress + ' ' +
+                        '' + nfCommon.escapeHtml(bulletin.level) + ' ' +
+                        '
    ').append(bulletinMessage);
 
                     formattedBulletinEntities.push(formattedBulletin);
                 }
@@ -1364,9 +1240,13 @@ nf.Common = (function () {
 
         getPolicyTypeListing: function (value) {
             var nest = d3.nest()
-                .key(function(d) { return d.value; })
+                .key(function (d) {
+                    return d.value;
+                })
                 .map(policyTypeListing, d3.map);
             return nest.get(value)[0];
         }
     };
-}());
+
+    return nfCommon;
+}));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js
index 1479023fb3..4527c50664 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js
@@ -15,9 +15,27 @@
  * limitations under the License.
  */
 
-/* global nf */
+/* global nf, define, module, require, exports */
 
-nf.ConnectionDetails = (function () {
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'nf.Common',
+                'nf.ErrorHandler'],
+            function ($, common, errorHandler) {
+                return (nf.ConnectionDetails = factory($, common, errorHandler));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.ConnectionDetails = factory(require('jquery'),
+            require('nf.Common'),
+            require('nf.ErrorHandler')));
+    } else {
+        nf.ConnectionDetails = factory(root.$,
+            root.nf.Common,
+            root.nf.ErrorHandler);
+    }
+}(this, function ($, common, errorHandler) {
+    'use strict';
 
     /**
      * Initialize the details for the source of the connection.
@@ -54,7 +72,7 @@ nf.ConnectionDetails = (function () {
             }).done(function (response) {
                 var processor = response.component;
                 var processorName = $('
    ').text(processor.name).addClass('ellipsis').attr('title', processor.name);
-                var processorType = $('
    ').text(nf.Common.substringAfterLast(processor.type, '.')).addClass('ellipsis').attr('title', nf.Common.substringAfterLast(processor.type, '.'));
+                var processorType = $('
    ').text(common.substringAfterLast(processor.type, '.')).addClass('ellipsis').attr('title', common.substringAfterLast(processor.type, '.'));
 
                 // populate source processor details
                 $('#read-only-connection-source-label').text('From processor');
@@ -214,7 +232,7 @@ nf.ConnectionDetails = (function () {
             }).done(function (response) {
                 var processor = response.component;
                 var processorName = $('
    ').text(processor.name).addClass('ellipsis').attr('title', processor.name);
-                var processorType = $('
    ').text(nf.Common.substringAfterLast(processor.type, '.')).addClass('ellipsis').attr('title', nf.Common.substringAfterLast(processor.type, '.'));
+                var processorType = $('
    ').text(common.substringAfterLast(processor.type, '.')).addClass('ellipsis').attr('title', common.substringAfterLast(processor.type, '.'));
 
                 // populate destination processor details
                 $('#read-only-connection-target-label').text('To processor');
@@ -392,8 +410,8 @@ nf.ConnectionDetails = (function () {
                         $('#read-only-relationship-names').empty();
 
                         // clear the connection details
-                        nf.Common.clearField('read-only-connection-name');
-                        nf.Common.clearField('read-only-connection-id');
+                        common.clearField('read-only-connection-name');
+                        common.clearField('read-only-connection-id');
 
                         // clear the connection source details
                         $('#read-only-connection-source-label').text('');
@@ -415,7 +433,7 @@ nf.ConnectionDetails = (function () {
                         $('#read-only-prioritizers').empty();
                     },
                     open: function () {
-                        nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
+                        common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
                     }
                 }
             });
@@ -465,7 +483,7 @@ nf.ConnectionDetails = (function () {
                         var selectedRelationships = connection.selectedRelationships;
 
                         // show the available relationship if applicable
-                        if (nf.Common.isDefinedAndNotNull(availableRelationships) || nf.Common.isDefinedAndNotNull(selectedRelationships)) {
+                        if (common.isDefinedAndNotNull(availableRelationships) || common.isDefinedAndNotNull(selectedRelationships)) {
                             // populate the available connections
                             $.each(availableRelationships, function (i, name) {
                                 createRelationshipOption(name);
@@ -498,17 +516,17 @@ nf.ConnectionDetails = (function () {
                         }
 
                         // set the connection details
-                        nf.Common.populateField('read-only-connection-name', connection.name);
-                        nf.Common.populateField('read-only-connection-id', connection.id);
-                        nf.Common.populateField('read-only-flow-file-expiration', connection.flowFileExpiration);
-                        nf.Common.populateField('read-only-back-pressure-object-threshold', connection.backPressureObjectThreshold);
-                        nf.Common.populateField('read-only-back-pressure-data-size-threshold', connection.backPressureDataSizeThreshold);
+                        common.populateField('read-only-connection-name', connection.name);
+                        common.populateField('read-only-connection-id', connection.id);
+                        common.populateField('read-only-flow-file-expiration', connection.flowFileExpiration);
+                        common.populateField('read-only-back-pressure-object-threshold', connection.backPressureObjectThreshold);
+                        common.populateField('read-only-back-pressure-data-size-threshold', connection.backPressureDataSizeThreshold);
 
                         // prioritizers
-                        if (nf.Common.isDefinedAndNotNull(connection.prioritizers) && connection.prioritizers.length > 0) {
+                        if (common.isDefinedAndNotNull(connection.prioritizers) && connection.prioritizers.length > 0) {
                             var prioritizerList = $('
      ').css('list-style', 'decimal inside none');
                             $.each(connection.prioritizers, function (i, type) {
-                                prioritizerList.append($('
    1. ').text(nf.Common.substringAfterLast(type, '.')));
+                                prioritizerList.append($('
    2. ').text(common.substringAfterLast(type, '.')));
                             });
                             $('#read-only-prioritizers').append(prioritizerList);
                         } else {
@@ -527,9 +545,9 @@ nf.ConnectionDetails = (function () {
                         if (relationshipNames.is(':visible') && relationshipNames.get(0).scrollHeight > relationshipNames.innerHeight()) {
                             relationshipNames.css('border-width', '1px');
                         }
-                    }).fail(nf.Common.handleAjaxError);
+                    }).fail(errorHandler.handleAjaxError);
                 }
-            }).fail(nf.Common.handleAjaxError);
+            }).fail(errorHandler.handleAjaxError);
         }
     };
-}());
\ No newline at end of file
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-dialog.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-dialog.js
index 50aa70402b..ed6667ce48 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-dialog.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-dialog.js
@@ -15,36 +15,47 @@
  * limitations under the License.
  */
 
-/* global nf */
+/* global nf, define, module, require, exports */
 
-$(document).ready(function () {
-    // configure the ok dialog
-    $('#nf-ok-dialog').modal({
-        scrollableContentStyle: 'scrollable',
-        handler: {
-            close: function () {
-                // clear the content
-                $('#nf-ok-dialog-content').empty();
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery'], function ($) {
+            return (nf.Dialog = factory($));
+        });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.Dialog = factory(require('jquery')));
+    } else {
+        nf.Dialog = factory(root.$);
+    }
+}(this, function ($) {
+    'use strict';
+
+    $(document).ready(function () {
+        // configure the ok dialog
+        $('#nf-ok-dialog').modal({
+            scrollableContentStyle: 'scrollable',
+            handler: {
+                close: function () {
+                    // clear the content
+                    $('#nf-ok-dialog-content').empty();
+                }
             }
-        }
+        });
+
+        // configure the yes/no dialog
+        $('#nf-yes-no-dialog').modal({
+            scrollableContentStyle: 'scrollable',
+            handler: {
+                close: function () {
+                    // clear the content and reset the button model
+                    $('#nf-yes-no-dialog-content').empty();
+                    $('#nf-yes-no-dialog').modal('setButtonModel', []);
+                }
+            }
+        });
     });
 
-    // configure the yes/no dialog
-    $('#nf-yes-no-dialog').modal({
-        scrollableContentStyle: 'scrollable',
-        handler: {
-            close: function () {
-                // clear the content and reset the button model
-                $('#nf-yes-no-dialog-content').empty();
-                $('#nf-yes-no-dialog').modal('setButtonModel', []);
-            }
-        }
-    });
-});
-
-nf.Dialog = (function () {
-
-    return {
+    var nfDialog = {
         /**
          * Shows an general dialog with an Okay button populated with the
          * specified dialog content.
@@ -140,6 +151,28 @@ nf.Dialog = (function () {
 
             // show the dialog
             $('#nf-yes-no-dialog').modal('setHeaderText', options.headerText).modal('show');
+        },
+
+        /**
+         * Shows a message when disconnected from the cluster.
+         */
+        showDisconnectedFromClusterMessage: function () {
+            nfDialog.showOkDialog({
+                headerText: 'Cluster Connection',
+                dialogContent: 'This node is currently not connected to the cluster. Any modifications to the data flow made here will not replicate across the cluster.'
+            });
+        },
+
+        /**
+         * Shows a message when connected to the cluster.
+         */
+        showConnectedToClusterMessage: function () {
+            nfDialog.showOkDialog({
+                headerText: 'Cluster Connection',
+                dialogContent: 'This node just joined the cluster. Any modifications to the data flow made here will replicate across the cluster.'
+            });
         }
     };
-}());
\ No newline at end of file
+
+    return nfDialog;
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-error-handler.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-error-handler.js
new file mode 100644
index 0000000000..f604fecec5
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-error-handler.js
@@ -0,0 +1,147 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global nf, define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'nf.Dialog',
+                'nf.Common'],
+            function ($, dialog, common) {
+                return (nf.ErrorHandler = factory($, dialog, common));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.ErrorHandler = factory(require('jquery'),
+            require('nf.Dialog'),
+            require('nf.Common')));
+    } else {
+        nf.ErrorHandler = factory(root.$,
+            root.nf.Dialog,
+            root.nf.Common);
+    }
+}(this, function ($, dialog, common) {
+    'use strict';
+
+    return {
+        /**
+         * Method for handling ajax errors.
+         *
+         * @argument {object} xhr       The XmlHttpRequest
+         * @argument {string} status    The status of the request
+         * @argument {string} error     The error
+         */
+        handleAjaxError: function (xhr, status, error) {
+            if (status === 'canceled') {
+                if ($('#splash').is(':visible')) {
+                    $('#message-title').text('Session Expired');
+                    $('#message-content').text('Your session has expired. Please reload to log in again.');
+
+                    // show the error pane
+                    $('#message-pane').show();
+                } else {
+                    dialog.showOkDialog({
+                        headerText: 'Session Expired',
+                        dialogContent: 'Your session has expired. Please press Ok to log in again.',
+                        okHandler: function () {
+                            window.location = '/nifi';
+                        }
+                    });
+                }
+                return;
+            }
+
+            // if an error occurs while the splash screen is visible close the canvas show the error message
+            if ($('#splash').is(':visible')) {
+                if (xhr.status === 401) {
+                    $('#message-title').text('Unauthorized');
+                } else if (xhr.status === 403) {
+                    $('#message-title').text('Insufficient Permissions');
+                } else if (xhr.status === 409) {
+                    $('#message-title').text('Invalid State');
+                } else {
+                    $('#message-title').text('An unexpected error has occurred');
+                }
+
+                if ($.trim(xhr.responseText) === '') {
+                    $('#message-content').text('Please check the logs.');
+                } else {
+                    $('#message-content').text(xhr.responseText);
+                }
+
+                // show the error pane
+                $('#message-pane').show();
+                return;
+            }
+
+            // status code 400, 404, and 409 are expected response codes for common errors.
+            if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409 || xhr.status === 503) {
+                dialog.showOkDialog({
+                    headerText: 'Error',
+                    dialogContent: common.escapeHtml(xhr.responseText)
+                });
+            } else if (xhr.status === 403) {
+                dialog.showOkDialog({
+                    headerText: 'Insufficient Permissions',
+                    dialogContent: common.escapeHtml(xhr.responseText)
+                });
+            } else {
+                if (xhr.status < 99 || xhr.status === 12007 || xhr.status === 12029) {
+                    var content = 'Please ensure the application is running and check the logs for any errors.';
+                    if (common.isDefinedAndNotNull(status)) {
+                        if (status === 'timeout') {
+                            content = 'Request has timed out. Please ensure the application is running and check the logs for any errors.';
+                        } else if (status === 'abort') {
+                            content = 'Request has been aborted.';
+                        } else if (status === 'No Transport') {
+                            content = 'Request transport mechanism failed. Please ensure the host where the application is running is accessible.';
+                        }
+                    }
+                    $('#message-title').text('Unable to communicate with NiFi');
+                    $('#message-content').text(content);
+                } else if (xhr.status === 401) {
+                    $('#message-title').text('Unauthorized');
+                    if ($.trim(xhr.responseText) === '') {
+                        $('#message-content').text('Authentication is required to use this NiFi.');
+                    } else {
+                        $('#message-content').text(xhr.responseText);
+                    }
+                } else if (xhr.status === 500) {
+                    $('#message-title').text('An unexpected error has occurred');
+                    if ($.trim(xhr.responseText) === '') {
+                        $('#message-content').text('An error occurred communicating with the application core. Please check the logs and fix any configuration issues before restarting.');
+                    } else {
+                        $('#message-content').text(xhr.responseText);
+                    }
+                } else if (xhr.status === 200 || xhr.status === 201) {
+                    $('#message-title').text('Parse Error');
+                    if ($.trim(xhr.responseText) === '') {
+                        $('#message-content').text('Unable to interpret response from NiFi.');
+                    } else {
+                        $('#message-content').text(xhr.responseText);
+                    }
+                } else {
+                    $('#message-title').text(xhr.status + ': Unexpected Response');
+                    $('#message-content').text('An unexpected error has occurred. Please check the logs.');
+                }
+
+                // show the error pane
+                $('#message-pane').show();
+            }
+        }
+    };
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-config.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-config.js
index 54dccde026..b0406aac20 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-config.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-config.js
@@ -15,81 +15,95 @@
  * limitations under the License.
  */
 
-/* global nf, d3 */
+/* global nf, define, module, require, exports */
 
-nf.ng.AppConfig = function ($mdThemingProvider, $compileProvider) {
-    //Enable production mode, to re-enable debug mode open up a
-    //console and call 'angular.reloadWithDebugInfo();'
-    $compileProvider.debugInfoEnabled(false);
-    //Define app palettes
-    $mdThemingProvider.definePalette('basePalette', {
-        '50': '728E9B',
-        '100': '728E9B',
-        '200': '004849', /* link-color */
-        '300': '775351', /* value-color */
-        '400': '728E9B',
-        '500': '728E9B', /* base-color */
-        '600': '728E9B',
-        '700': '728E9B',
-        '800': '728E9B',
-        '900': 'rgba(249,250,251,0.97)', /* tint base-color 96% */
-        'A100': '728E9B',
-        'A200': '728E9B',
-        'A400': '728E9B',
-        'A700': '728E9B',
-        'contrastDefaultColor': 'light',
-        'contrastDarkColors': ['A100'],
-        'contrastLightColors': undefined
-    });
-    $mdThemingProvider.definePalette('tintPalette', {
-        '50': '728E9B',
-        '100': '728E9B',
-        '200': 'CCDADB', /* tint link-color 20% */
-        '300': '728E9B',
-        '400': 'AABBC3', /* tint base-color 40% */
-        '500': '728E9B',
-        '600': 'C7D2D7', /* tint base-color 60% */
-        '700': '728E9B',
-        '800': 'E3E8EB', /* tint base-color 80% */
-        '900': '728E9B',
-        'A100': '728E9B',
-        'A200': '728E9B',
-        'A400': '728E9B',
-        'A700': '728E9B',
-        'contrastDefaultColor': 'light',
-        'contrastDarkColors': ['A100'],
-        'contrastLightColors': undefined
-    });
-    $mdThemingProvider.definePalette('warnPalette', {
-        '50': 'BA554A',
-        '100': 'BA554A',
-        '200': 'BA554A',
-        '300': 'BA554A',
-        '400': 'BA554A',
-        '500': 'BA554A', /* warn-color */
-        '600': 'BA554A',
-        '700': 'BA554A',
-        '800': 'BA554A',
-        '900': 'BA554A',
-        'A100': 'BA554A',
-        'A200': 'BA554A',
-        'A400': 'BA554A',
-        'A700': 'BA554A',
-        'contrastDefaultColor': 'light',
-        'contrastDarkColors': ['A100'],
-        'contrastLightColors': undefined
-    });
-    $mdThemingProvider.theme("default").primaryPalette("basePalette", {
-        "default": "500",
-        "hue-1": "200",
-        "hue-2": "300",
-        "hue-3": "900"
-    }).accentPalette("tintPalette", {
-        "default": "200",
-        "hue-1": "400",
-        "hue-2": "600",
-        "hue-3": "800"
-    }).warnPalette("warnPalette", {
-        "default": "500"
-    });
-};
\ No newline at end of file
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define([], function () {
+            return (nf.ng.AppConfig = factory());
+        });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.ng.AppConfig = factory());
+    } else {
+        nf.ng.AppConfig = factory();
+    }
+}(this, function () {
+    'use strict';
+
+    return function ($mdThemingProvider, $compileProvider) {
+        //Enable production mode, to re-enable debug mode open up a
+        //console and call 'angular.reloadWithDebugInfo();'
+        $compileProvider.debugInfoEnabled(false);
+        //Define app palettes
+        $mdThemingProvider.definePalette('basePalette', {
+            '50': '728E9B',
+            '100': '728E9B',
+            '200': '004849', /* link-color */
+            '300': '775351', /* value-color */
+            '400': '728E9B',
+            '500': '728E9B', /* base-color */
+            '600': '728E9B',
+            '700': '728E9B',
+            '800': '728E9B',
+            '900': 'rgba(249,250,251,0.97)', /* tint base-color 96% */
+            'A100': '728E9B',
+            'A200': '728E9B',
+            'A400': '728E9B',
+            'A700': '728E9B',
+            'contrastDefaultColor': 'light',
+            'contrastDarkColors': ['A100'],
+            'contrastLightColors': undefined
+        });
+        $mdThemingProvider.definePalette('tintPalette', {
+            '50': '728E9B',
+            '100': '728E9B',
+            '200': 'CCDADB', /* tint link-color 20% */
+            '300': '728E9B',
+            '400': 'AABBC3', /* tint base-color 40% */
+            '500': '728E9B',
+            '600': 'C7D2D7', /* tint base-color 60% */
+            '700': '728E9B',
+            '800': 'E3E8EB', /* tint base-color 80% */
+            '900': '728E9B',
+            'A100': '728E9B',
+            'A200': '728E9B',
+            'A400': '728E9B',
+            'A700': '728E9B',
+            'contrastDefaultColor': 'light',
+            'contrastDarkColors': ['A100'],
+            'contrastLightColors': undefined
+        });
+        $mdThemingProvider.definePalette('warnPalette', {
+            '50': 'BA554A',
+            '100': 'BA554A',
+            '200': 'BA554A',
+            '300': 'BA554A',
+            '400': 'BA554A',
+            '500': 'BA554A', /* warn-color */
+            '600': 'BA554A',
+            '700': 'BA554A',
+            '800': 'BA554A',
+            '900': 'BA554A',
+            'A100': 'BA554A',
+            'A200': 'BA554A',
+            'A400': 'BA554A',
+            'A700': 'BA554A',
+            'contrastDefaultColor': 'light',
+            'contrastDarkColors': ['A100'],
+            'contrastLightColors': undefined
+        });
+        $mdThemingProvider.theme("default").primaryPalette("basePalette", {
+            "default": "500",
+            "hue-1": "200",
+            "hue-2": "300",
+            "hue-3": "900"
+        }).accentPalette("tintPalette", {
+            "default": "200",
+            "hue-1": "400",
+            "hue-2": "600",
+            "hue-3": "800"
+        }).warnPalette("warnPalette", {
+            "default": "500"
+        });
+    }
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-controller.js
index 1b9f0d0801..ae93c95125 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-controller.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-controller.js
@@ -15,25 +15,41 @@
  * limitations under the License.
  */
 
-/* global nf, d3 */
+/* global nf, define, module, require, exports */
 
-nf.ng.AppCtrl = function ($scope, serviceProvider) {
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['nf.ng.Bridge'],
+            function (angularBridge) {
+                return (nf.ng.AppCtrl = factory(angularBridge));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.ng.AppCtrl = factory(require('nf.ng.Bridge')));
+    } else {
+        nf.ng.AppCtrl = factory(root.nf.ng.Bridge);
+    }
+}(this, function (angularBridge) {
     'use strict';
 
-    function AppCtrl(serviceProvider) {
-        //global nf namespace for reference throughout angular app
-        this.nf = nf;
-        //any registered angular service is available through the serviceProvider
-        this.serviceProvider = serviceProvider;
-    }
-    AppCtrl.prototype = {
-        constructor: AppCtrl
-    }
+    return function ($scope, serviceProvider) {
+        'use strict';
 
-    var appCtrl = new AppCtrl(serviceProvider);
-    $scope.appCtrl = appCtrl;
+        function AppCtrl(serviceProvider) {
+            //global nf namespace for reference throughout angular app
+            this.nf = nf;
+            //any registered angular service is available through the serviceProvider
+            this.serviceProvider = serviceProvider;
+        }
 
-    //For production angular applications .scope() is unavailable so we set
-    //the root scope of the bootstrapped app on the bridge
-    nf.ng.Bridge.rootScope = $scope;
-};
\ No newline at end of file
+        AppCtrl.prototype = {
+            constructor: AppCtrl
+        }
+
+        var appCtrl = new AppCtrl(serviceProvider);
+        $scope.appCtrl = appCtrl;
+
+        //For production angular applications .scope() is unavailable so we set
+        //the root scope of the bootstrapped app on the bridge
+        angularBridge.rootScope = $scope;
+    }
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-bridge.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-bridge.js
index bc78f152fd..92de4ec0a6 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-bridge.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-bridge.js
@@ -15,9 +15,19 @@
  * limitations under the License.
  */
 
-/* global nf, d3 */
+/* global nf, define, module, require, exports */
 
-nf.ng.Bridge = (function () {
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['angular'], function (angular) {
+            return (nf.ng.Bridge = factory(angular));
+        });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.ng.Bridge = factory(require('angular')));
+    } else {
+        nf.ng.Bridge = factory(root.angular);
+    }
+}(this, function (angular) {
     'use strict';
 
     function AngularBridge() {
@@ -84,7 +94,5 @@ nf.ng.Bridge = (function () {
         }
     };
 
-    var angularBridge = new AngularBridge();
-
-    return angularBridge;
-}());
\ No newline at end of file
+    return new AngularBridge();
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-service-provider.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-service-provider.js
index 5ebc9aadd1..acdaba5729 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-service-provider.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-service-provider.js
@@ -15,37 +15,48 @@
  * limitations under the License.
  */
 
-/* global nf, d3 */
+/* global nf, define, module, require, exports */
 
-nf.ng.ServiceProvider = function () {
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define([], function () {
+            return (nf.ng.ServiceProvider = factory());
+        });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.ng.ServiceProvider = factory());
+    } else {
+        nf.ng.ServiceProvider = factory();
+    }
+}(this, function () {
     'use strict';
 
-    function ServiceProvider() {
-
-    }
-    ServiceProvider.prototype = {
-        constructor: ServiceProvider,
-
-        /**
-         * Registers the given `object` by `name`.
-         *
-         * @param {string} name     The lookup name of the object being registered
-         * @param {object} object   The object to register
-         */
-        register: function(name, object) {
-            serviceProvider[name] = object;
-        },
-
-        /**
-         * Removes the given object from the registry.
-         *
-         * @param {string objectName    The lookup name of the object to remove from the registry
-             */
-        remove: function(objectName) {
-            delete serviceProvider[objectName];
+    return function () {
+        function ServiceProvider() {
         }
-    }
 
-    var serviceProvider = new ServiceProvider();
-    return serviceProvider;
-};
\ No newline at end of file
+        ServiceProvider.prototype = {
+            constructor: ServiceProvider,
+
+            /**
+             * Registers the given `object` by `name`.
+             *
+             * @param {string} name     The lookup name of the object being registered
+             * @param {object} object   The object to register
+             */
+            register: function (name, object) {
+                this[name] = object;
+            },
+
+            /**
+             * Removes the given object from the registry.
+             *
+             * @param {string} objectName    The lookup name of the object to remove from the registry
+             */
+            remove: function (objectName) {
+                delete this[objectName];
+            }
+        }
+
+        return new ServiceProvider();
+    }
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-processor-details.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-processor-details.js
index e5dd2a6cf5..829490f704 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-processor-details.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-processor-details.js
@@ -15,9 +15,40 @@
  * limitations under the License.
  */
 
-/* global nf */
+/* global nf, define, module, require, exports */
 
-nf.ProcessorDetails = (function () {
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'nf.Common',
+                'nf.UniversalCapture',
+                'nf.Dialog',
+                'nf.ErrorHandler',
+                'nf.CustomUi',
+                'nf.ClusterSummary'],
+            function ($, common, universalCapture, dialog, errorHandler, customUi, clusterSummary) {
+                return (nf.ProcessorDetails = factory($, common, universalCapture, dialog, errorHandler, customUi, clusterSummary));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.ProcessorDetails =
+            factory(require('jquery'),
+                require('nf.Common'),
+                require('nf.UniversalCapture'),
+                require('nf.Dialog'),
+                require('nf.ErrorHandler'),
+                require('nf.CustomUi'),
+                require('nf.ClusterSummary')));
+    } else {
+        nf.ProcessorDetails = factory(root.$,
+            root.nf.Common,
+            root.nf.UniversalCapture,
+            root.nf.Dialog,
+            root.nf.ErrorHandler,
+            root.nf.CustomUi,
+            root.nf.ClusterSummary);
+    }
+}(this, function ($, common, universalCapture, dialog, errorHandler, customUi, clusterSummary) {
+    'use strict';
 
     /**
      * Creates an option for the specified relationship name.
@@ -34,7 +65,7 @@ nf.ProcessorDetails = (function () {
 
         // build the relationship container element
         var relationshipContainerElement = $('
      ').append(relationshipLabel).appendTo('#read-only-auto-terminate-relationship-names');
-        if (!nf.Common.isBlank(relationship.description)) {
+        if (!common.isBlank(relationship.description)) {
             var relationshipDescription = $('
      ').text(relationship.description);
             relationshipContainerElement.append(relationshipDescription);
         }
@@ -46,7 +77,8 @@ nf.ProcessorDetails = (function () {
         /**
          * Initializes the processor details dialog.
          */
-        init: function () {
+        init: function (supportsGoTo) {
+
             // initialize the properties tabs
             $('#processor-details-tabs').tabbs({
                 tabStyle: 'tab',
@@ -67,7 +99,7 @@ nf.ProcessorDetails = (function () {
                 }],
                 select: function () {
                     // remove all property detail dialogs
-                    nf.UniversalCapture.removeAllPropertyDetailDialogs();
+                    universalCapture.removeAllPropertyDetailDialogs();
 
                     // resize the property grid in case this is the first time its rendered
                     if ($(this).text() === 'Properties') {
@@ -95,31 +127,32 @@ nf.ProcessorDetails = (function () {
                         $('#read-only-processor-properties').propertytable('clear');
 
                         // clear the processor details
-                        nf.Common.clearField('read-only-processor-id');
-                        nf.Common.clearField('read-only-processor-type');
-                        nf.Common.clearField('read-only-processor-name');
-                        nf.Common.clearField('read-only-concurrently-schedulable-tasks');
-                        nf.Common.clearField('read-only-scheduling-period');
-                        nf.Common.clearField('read-only-penalty-duration');
-                        nf.Common.clearField('read-only-yield-duration');
-                        nf.Common.clearField('read-only-run-duration');
-                        nf.Common.clearField('read-only-bulletin-level');
-                        nf.Common.clearField('read-only-execution-node');
-                        nf.Common.clearField('read-only-execution-status');
-                        nf.Common.clearField('read-only-processor-comments');
+                        common.clearField('read-only-processor-id');
+                        common.clearField('read-only-processor-type');
+                        common.clearField('read-only-processor-name');
+                        common.clearField('read-only-concurrently-schedulable-tasks');
+                        common.clearField('read-only-scheduling-period');
+                        common.clearField('read-only-penalty-duration');
+                        common.clearField('read-only-yield-duration');
+                        common.clearField('read-only-run-duration');
+                        common.clearField('read-only-bulletin-level');
+                        common.clearField('read-only-execution-node');
+                        common.clearField('read-only-execution-status');
+                        common.clearField('read-only-processor-comments');
 
                         // removed the cached processor details
                         $('#processor-details').removeData('processorDetails');
                         $('#processor-details').removeData('processorHistory');
                     },
                     open: function () {
-                        nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
+                        common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
                     }
                 }
             });
 
             // initialize the properties
             $('#read-only-processor-properties').propertytable({
+                supportsGoTo: supportsGoTo,
                 readOnly: true
             });
         },
@@ -137,7 +170,7 @@ nf.ProcessorDetails = (function () {
                 url: '../nifi-api/processors/' + encodeURIComponent(processorId),
                 dataType: 'json'
             }).done(function (response) {
-                if (nf.Common.isDefinedAndNotNull(response.component)) {
+                if (common.isDefinedAndNotNull(response.component)) {
                     // get the processor details
                     var details = response.component;
 
@@ -145,16 +178,16 @@ nf.ProcessorDetails = (function () {
                     $('#processor-details').data('processorDetails', details);
 
                     // populate the processor settings
-                    nf.Common.populateField('read-only-processor-id', details['id']);
-                    nf.Common.populateField('read-only-processor-type', nf.Common.substringAfterLast(details['type'], '.'));
-                    nf.Common.populateField('read-only-processor-name', details['name']);
-                    nf.Common.populateField('read-only-concurrently-schedulable-tasks', details.config['concurrentlySchedulableTaskCount']);
-                    nf.Common.populateField('read-only-scheduling-period', details.config['schedulingPeriod']);
-                    nf.Common.populateField('read-only-penalty-duration', details.config['penaltyDuration']);
-                    nf.Common.populateField('read-only-yield-duration', details.config['yieldDuration']);
-                    nf.Common.populateField('read-only-run-duration', nf.Common.formatDuration(details.config['runDurationMillis']));
-                    nf.Common.populateField('read-only-bulletin-level', details.config['bulletinLevel']);
-                    nf.Common.populateField('read-only-processor-comments', details.config['comments']);
+                    common.populateField('read-only-processor-id', details['id']);
+                    common.populateField('read-only-processor-type', common.substringAfterLast(details['type'], '.'));
+                    common.populateField('read-only-processor-name', details['name']);
+                    common.populateField('read-only-concurrently-schedulable-tasks', details.config['concurrentlySchedulableTaskCount']);
+                    common.populateField('read-only-scheduling-period', details.config['schedulingPeriod']);
+                    common.populateField('read-only-penalty-duration', details.config['penaltyDuration']);
+                    common.populateField('read-only-yield-duration', details.config['yieldDuration']);
+                    common.populateField('read-only-run-duration', common.formatDuration(details.config['runDurationMillis']));
+                    common.populateField('read-only-bulletin-level', details.config['bulletinLevel']);
+                    common.populateField('read-only-processor-comments', details.config['comments']);
 
                     var showRunSchedule = true;
 
@@ -171,7 +204,7 @@ nf.ProcessorDetails = (function () {
                     } else {
                         schedulingStrategy = "On primary node";
                     }
-                    nf.Common.populateField('read-only-scheduling-strategy', schedulingStrategy);
+                    common.populateField('read-only-scheduling-strategy', schedulingStrategy);
 
                     // only show the run schedule when applicable
                     if (showRunSchedule === true) {
@@ -183,13 +216,13 @@ nf.ProcessorDetails = (function () {
                     var executionNode = details.config['executionNode'];
 
                     // only show the execution-node when applicable
-                    if (nf.Canvas.isClustered() || executionNode === 'PRIMARY') {
+                    if (clusterSummary.isClustered() || executionNode === 'PRIMARY') {
                         if (executionNode === 'ALL') {
                             executionNode = "All nodes";
                         } else if (executionNode === 'PRIMARY') {
                             executionNode = "Primary node only";
                         }
-                        nf.Common.populateField('read-only-execution-node', executionNode);
+                        common.populateField('read-only-execution-node', executionNode);
 
                         $('#read-only-execution-node-options').show();
                     } else {
@@ -197,7 +230,7 @@ nf.ProcessorDetails = (function () {
                     }
 
                     // load the relationship list
-                    if (!nf.Common.isEmpty(details.relationships)) {
+                    if (!common.isEmpty(details.relationships)) {
                         $.each(details.relationships, function (i, relationship) {
                             createRelationshipOption(relationship);
                         });
@@ -245,7 +278,7 @@ nf.ProcessorDetails = (function () {
                 }];
 
                 // determine if we should show the advanced button
-                if (nf.Common.isDefinedAndNotNull(nf.CustomUi) && nf.Common.isDefinedAndNotNull(processor.config.customUiUrl) && processor.config.customUiUrl !== '') {
+                if (top === window && common.isDefinedAndNotNull(customUi) && common.isDefinedAndNotNull(processor.config.customUiUrl) && processor.config.customUiUrl !== '') {
                     buttons.push({
                         buttonText: 'Advanced',
                         clazz: 'fa fa-cog button-icon',
@@ -260,7 +293,7 @@ nf.ProcessorDetails = (function () {
                                 $('#processor-details').modal('hide');
 
                                 // show the custom ui
-                                nf.CustomUi.showCustomUi(processorResponse, processor.config.customUiUrl, false);
+                                customUi.showCustomUi(processorResponse, processor.config.customUiUrl, false);
                             }
                         }
                     });
@@ -279,14 +312,14 @@ nf.ProcessorDetails = (function () {
                 }
             }).fail(function (xhr, status, error) {
                 if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
-                    nf.Dialog.showOkDialog({
+                    dialog.showOkDialog({
                         headerText: 'Error',
-                        dialogContent: nf.Common.escapeHtml(xhr.responseText)
+                        dialogContent: common.escapeHtml(xhr.responseText)
                     });
                 } else {
-                    nf.Common.handleAjaxError(xhr, status, error);
+                    errorHandler.handleAjaxError(xhr, status, error);
                 }
             });
         }
     };
-}());
+}));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js
index c51f03f017..d3644addd8 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js
@@ -15,46 +15,64 @@
  * limitations under the License.
  */
 
-/* global nf */
+/* global nf, define, module, require, exports */
 
-$(document).ready(function () {
-    // configure the dialog
-    $('#shell-dialog').modal({
-        scrollableContentStyle: 'scrollable',
-        header: false,
-        footer: false,
-        responsive: {
-            x: false,
-            y: false
-        }
-    });
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'nf.Common',
+                'nf.ContextMenu'],
+            function ($, common, contextMenu) {
+                return (nf.Shell = factory($, common, contextMenu));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.Shell = factory(require('jquery'),
+            require('nf.Common'),
+            require('nf.ContextMenu')));
+    } else {
+        nf.Shell = factory(root.$,
+            root.nf.Common,
+            root.nf.ContextMenu);
+    }
+}(this, function ($, common, contextMenu) {
+    'use strict';
 
-    // register a listener when the frame is closed
-    $('#shell-close-button').click(function () {
-        // close the shell
-        $('#shell-dialog').modal('hide');
-    });
-
-    // register a listener when the frame is undocked
-    $('#shell-undock-button').click(function () {
-        var uri = $('#shell-iframe').attr('src');
-        if (!nf.Common.isBlank(uri)) {
-            // open the page and close the shell
-            window.open(uri);
+    $(document).ready(function () {
+        // configure the dialog
+        $('#shell-dialog').modal({
+            scrollableContentStyle: 'scrollable',
+            header: false,
+            footer: false,
+            responsive: {
+                x: false,
+                y: false
+            }
+        });
 
+        // register a listener when the frame is closed
+        $('#shell-close-button').click(function () {
             // close the shell
             $('#shell-dialog').modal('hide');
-        }
-    });
-});
+        });
 
-nf.Shell = (function () {
+        // register a listener when the frame is undocked
+        $('#shell-undock-button').click(function () {
+            var uri = $('#shell-iframe').attr('src');
+            if (!common.isBlank(uri)) {
+                // open the page and close the shell
+                window.open(uri);
+
+                // close the shell
+                $('#shell-dialog').modal('hide');
+            }
+        });
+    });
 
     var showPageResize = null;
     var showContentResize = null;
 
     return {
-        
+
         resizeContent: function (shell) {
             var contentContainer = shell.find('.shell-content-container');
             contentContainer.css({
@@ -73,24 +91,24 @@ nf.Shell = (function () {
             });
             shell.trigger("shell:iframe:resize");
         },
-        
+
         /**
          * Shows a page in the shell.
-         * 
+         *
          * @argument {string} uri               The URI to show
          * @argument {boolean} canUndock        Whether or not the shell is undockable
          */
         showPage: function (uri, canUndock) {
             // if the context menu is on this page, attempt to close
-            if (nf.Common.isDefinedAndNotNull(nf.ContextMenu)) {
-                nf.ContextMenu.hide();
+            if (common.isDefinedAndNotNull(contextMenu)) {
+                contextMenu.hide();
             }
-            
+
             return $.Deferred(function (deferred) {
                 var shell = $('#shell');
 
                 // default undockable to true
-                if (nf.Common.isNull(canUndock) || nf.Common.isUndefined(canUndock)) {
+                if (common.isNull(canUndock) || common.isUndefined(canUndock)) {
                     canUndock = true;
                 }
 
@@ -103,7 +121,7 @@ nf.Shell = (function () {
 
                 // register a new open handler
                 $('#shell-dialog').modal('setOpenHandler', function () {
-                    nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
+                    common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
                 });
 
                 // show the custom processor ui
@@ -127,19 +145,19 @@ nf.Shell = (function () {
                 }).appendTo(shell);
             }).promise();
         },
-        
+
         /**
          * Shows the specified content in the shell. When the shell is closed, the content
          * will be hidden and returned to its previous location in the dom.
-         * 
+         *
          * @argument {string} domId             The id of the element to show in the shell
          */
         showContent: function (domId) {
             // if the context menu is on this page, attempt to close
-            if (nf.Common.isDefinedAndNotNull(nf.ContextMenu)) {
-                nf.ContextMenu.hide();
+            if (common.isDefinedAndNotNull(contextMenu)) {
+                contextMenu.hide();
             }
-            
+
             return $.Deferred(function (deferred) {
                 var content = $(domId);
                 if (content.length) {
@@ -154,7 +172,7 @@ nf.Shell = (function () {
                         // close any open combos
                         var combos = $('.combo');
                         for (var i = 0, len = combos.length; i < len; i++) {
-                            if ($(combos[i]).is(':visible')){
+                            if ($(combos[i]).is(':visible')) {
                                 $(combos[i]).combo('close');
                             }
                         }
@@ -179,11 +197,11 @@ nf.Shell = (function () {
                         width: shell.width(),
                         height: shell.height()
                     }).append(content).appendTo(shell);
-                    
+
                     // show the content
                     content.show();
                 }
             }).promise();
         }
     };
-}());
+}));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js
index 17d40d85fa..04fbf00472 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js
@@ -15,9 +15,32 @@
  * limitations under the License.
  */
 
-/* global nf, d3 */
+/* global nf, define, module, require, exports */
 
-nf.StatusHistory = (function () {
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+            'd3',
+            'nf.Common',
+            'nf.Dialog',
+            'nf.ErrorHandler'],
+            function ($, d3, common, dialog, errorHandler) {
+            return (nf.StatusHistory = factory($, d3, common, dialog, errorHandler));
+        });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.StatusHistory = factory(require('jquery'),
+            require('d3'),
+            require('nf.Common'),
+            require('nf.Dialog'),
+            require('nf.ErrorHandler')));
+    } else {
+        nf.StatusHistory = factory(root.$,
+            root.d3,
+            root.nf.Common,
+            root.nf.Dialog,
+            root.nf.ErrorHandler);
+    }
+}(this, function ($, d3, common, dialog, errorHandler) {
     var config = {
         nifiInstanceId: 'nifi-instance-id',
         nifiInstanceLabel: 'NiFi',
@@ -42,19 +65,19 @@ nf.StatusHistory = (function () {
      */
     var formatters = {
         'DURATION': function (d) {
-            return nf.Common.formatDuration(d);
+            return common.formatDuration(d);
         },
         'COUNT': function (d) {
             // need to handle floating point number since this formatter 
             // will also be used for average values
             if (d % 1 === 0) {
-                return nf.Common.formatInteger(d);
+                return common.formatInteger(d);
             } else {
-                return nf.Common.formatFloat(d);
+                return common.formatFloat(d);
             }
         },
         'DATA_SIZE': function (d) {
-            return nf.Common.formatDataSize(d);
+            return common.formatDataSize(d);
         }
     };
 
@@ -102,10 +125,10 @@ nf.StatusHistory = (function () {
         // get the descriptors
         var descriptors = componentStatusHistory.fieldDescriptors;
         statusHistory.details = componentStatusHistory.componentDetails;
-        statusHistory.selectedDescriptor = nf.Common.isUndefined(selectedDescriptor) ? descriptors[0] : selectedDescriptor;
+        statusHistory.selectedDescriptor = common.isUndefined(selectedDescriptor) ? descriptors[0] : selectedDescriptor;
 
         // ensure enough status snapshots
-        if (nf.Common.isDefinedAndNotNull(componentStatusHistory.aggregateSnapshots) && componentStatusHistory.aggregateSnapshots.length > 1) {
+        if (common.isDefinedAndNotNull(componentStatusHistory.aggregateSnapshots) && componentStatusHistory.aggregateSnapshots.length > 1) {
             statusHistory.instances.push({
                 id: config.nifiInstanceId,
                 label: config.nifiInstanceLabel,
@@ -119,7 +142,7 @@ nf.StatusHistory = (function () {
         // get the status for each node in the cluster if applicable
         $.each(componentStatusHistory.nodeSnapshots, function (_, nodeSnapshots) {
             // ensure enough status snapshots
-            if (nf.Common.isDefinedAndNotNull(nodeSnapshots.statusSnapshots) && nodeSnapshots.statusSnapshots.length > 1) {
+            if (common.isDefinedAndNotNull(nodeSnapshots.statusSnapshots) && nodeSnapshots.statusSnapshots.length > 1) {
                 statusHistory.instances.push({
                     id: nodeSnapshots.nodeId,
                     label: nodeSnapshots.address + ':' + nodeSnapshots.apiPort,
@@ -145,7 +168,7 @@ nf.StatusHistory = (function () {
      */
     var insufficientHistory = function () {
         // notify the user
-        nf.Dialog.showOkDialog({
+        dialog.showOkDialog({
             headerText: 'Status History',
             dialogContent: 'Insufficient history, please try again later.'
         });
@@ -193,7 +216,7 @@ nf.StatusHistory = (function () {
             options.push({
                 text: d.label,
                 value: d.field,
-                description: nf.Common.escapeHtml(d.description)
+                description: common.escapeHtml(d.description)
             });
         });
 
@@ -306,7 +329,7 @@ nf.StatusHistory = (function () {
             // go through each instance of this status history
             $.each(statusHistory.instances, function (_, instance) {
                 // if this is the first time this instance is being rendered, make it visible
-                if (nf.Common.isUndefinedOrNull(instances[instance.id])) {
+                if (common.isUndefinedOrNull(instances[instance.id])) {
                     instances[instance.id] = true;
                 }
 
@@ -363,7 +386,7 @@ nf.StatusHistory = (function () {
             var chartContainer = $('#status-history-chart-container').empty();
             if (chartContainer.hasClass('ui-resizable')) {
                 chartContainer.resizable('destroy');
-                chartContainer.removeAttr( "style" );
+                chartContainer.removeAttr("style");
             }
 
             // calculate the dimensions
@@ -440,8 +463,8 @@ nf.StatusHistory = (function () {
                     return s.timestamp;
                 });
             });
-            addDetailItem(detailsContainer, 'Start', nf.Common.formatDateTime(minDate));
-            addDetailItem(detailsContainer, 'End', nf.Common.formatDateTime(maxDate));
+            addDetailItem(detailsContainer, 'Start', common.formatDateTime(minDate));
+            addDetailItem(detailsContainer, 'End', common.formatDateTime(maxDate));
 
             // determine the x axis range
             x.domain([minDate, maxDate]);
@@ -721,7 +744,7 @@ nf.StatusHistory = (function () {
                 .on('brush', brushed);
 
             // conditionally set the brush extent
-            if (nf.Common.isDefinedAndNotNull(brushExtent)) {
+            if (common.isDefinedAndNotNull(brushExtent)) {
                 brush = brush.extent(brushExtent);
             }
 
@@ -902,7 +925,7 @@ nf.StatusHistory = (function () {
                     // -----------
                     dialog = $('#status-history-dialog');
                     var nfDialog = {};
-                    if (nf.Common.isDefinedAndNotNull(dialog.data('nf-dialog'))) {
+                    if (common.isDefinedAndNotNull(dialog.data('nf-dialog'))) {
                         nfDialog = dialog.data('nf-dialog');
                     }
                     nfDialog['min-width'] = (dialog.width() / $(window).width()) * 100 + '%';
@@ -1019,12 +1042,12 @@ nf.StatusHistory = (function () {
         $('
      ').text(label).appendTo(detailContainer);
         var detailElement = $('
      ').text(value).appendTo(detailContainer);
 
-        if (nf.Common.isDefinedAndNotNull(valueElementId)) {
+        if (common.isDefinedAndNotNull(valueElementId)) {
             detailElement.attr('id', valueElementId);
         }
     };
 
-    return {
+    var nfStatusHistory = {
         /**
          * Initializes the lineage graph.
          *
@@ -1037,13 +1060,13 @@ nf.StatusHistory = (function () {
                 var statusHistory = $('#status-history-dialog').data('status-history');
                 if (statusHistory !== null) {
                     if (statusHistory.type === config.type.processor) {
-                        nf.StatusHistory.showProcessorChart(statusHistory.groupId, statusHistory.id, statusHistory.selectedDescriptor);
+                        nfStatusHistory.showProcessorChart(statusHistory.groupId, statusHistory.id, statusHistory.selectedDescriptor);
                     } else if (statusHistory.type === config.type.processGroup) {
-                        nf.StatusHistory.showProcessGroupChart(statusHistory.groupId, statusHistory.id, statusHistory.selectedDescriptor);
+                        nfStatusHistory.showProcessGroupChart(statusHistory.groupId, statusHistory.id, statusHistory.selectedDescriptor);
                     } else if (statusHistory.type === config.type.remoteProcessGroup) {
-                        nf.StatusHistory.showRemoteProcessGroupChart(statusHistory.groupId, statusHistory.id, statusHistory.selectedDescriptor);
+                        nfStatusHistory.showRemoteProcessGroupChart(statusHistory.groupId, statusHistory.id, statusHistory.selectedDescriptor);
                     } else {
-                        nf.StatusHistory.showConnectionChart(statusHistory.groupId, statusHistory.id, statusHistory.selectedDescriptor);
+                        nfStatusHistory.showConnectionChart(statusHistory.groupId, statusHistory.id, statusHistory.selectedDescriptor);
                     }
                 }
             });
@@ -1088,7 +1111,7 @@ nf.StatusHistory = (function () {
                 if (e.target === window) {
                     updateChart();
                 }
-                nf.Common.toggleScrollable($('#status-history-details').get(0));
+                common.toggleScrollable($('#status-history-details').get(0));
             })
         },
 
@@ -1106,7 +1129,7 @@ nf.StatusHistory = (function () {
                 dataType: 'json'
             }).done(function (response) {
                 handleStatusHistoryResponse(groupId, connectionId, response.statusHistory, config.type.connection, selectedDescriptor);
-            }).fail(nf.Common.handleAjaxError);
+            }).fail(errorHandler.handleAjaxError);
         },
 
         /**
@@ -1123,7 +1146,7 @@ nf.StatusHistory = (function () {
                 dataType: 'json'
             }).done(function (response) {
                 handleStatusHistoryResponse(groupId, processorId, response.statusHistory, config.type.processor, selectedDescriptor);
-            }).fail(nf.Common.handleAjaxError);
+            }).fail(errorHandler.handleAjaxError);
         },
 
         /**
@@ -1140,7 +1163,7 @@ nf.StatusHistory = (function () {
                 dataType: 'json'
             }).done(function (response) {
                 handleStatusHistoryResponse(groupId, processGroupId, response.statusHistory, config.type.processGroup, selectedDescriptor);
-            }).fail(nf.Common.handleAjaxError);
+            }).fail(errorHandler.handleAjaxError);
         },
 
         /**
@@ -1157,7 +1180,9 @@ nf.StatusHistory = (function () {
                 dataType: 'json'
             }).done(function (response) {
                 handleStatusHistoryResponse(groupId, remoteProcessGroupId, response.statusHistory, config.type.remoteProcessGroup, selectedDescriptor);
-            }).fail(nf.Common.handleAjaxError);
+            }).fail(errorHandler.handleAjaxError);
         }
     };
-}());
\ No newline at end of file
+
+    return nfStatusHistory;
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-storage.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-storage.js
index efb90fe9ee..b96d61efaf 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-storage.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-storage.js
@@ -15,9 +15,19 @@
  * limitations under the License.
  */
 
-/* global nf, d3 */
+/* global nf, define, module, require, exports */
 
-nf.Storage = (function () {
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define([], function () {
+            return (nf.Storage = factory());
+        });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.Storage = factory());
+    } else {
+        nf.Storage = factory();
+    }
+}(this, function () {
 
     // Store items for two days before being eligible for removal.
     var MILLIS_PER_DAY = 86400000;
@@ -37,7 +47,7 @@ nf.Storage = (function () {
 
     /**
      * Checks the expiration for the specified entry.
-     * 
+     *
      * @param {object} entry
      * @returns {boolean}
      */
@@ -53,10 +63,10 @@ nf.Storage = (function () {
             return false;
         }
     };
-    
+
     /**
      * Gets an enty for the key. The entry expiration is not checked.
-     * 
+     *
      * @param {string} key
      */
     var getEntry = function (key) {
@@ -74,7 +84,7 @@ nf.Storage = (function () {
             return null;
         }
     };
-    
+
     return {
         /**
          * Initializes the storage. Items will be persisted for two days. Once the scripts runs
@@ -85,17 +95,17 @@ nf.Storage = (function () {
                 try {
                     // get the next item
                     var key = localStorage.key(i);
-                    
+
                     // attempt to get the item which will expire if necessary
-                    nf.Storage.getItem(key);
+                    this.getItem(key);
                 } catch (e) {
                 }
             }
         },
-        
+
         /**
          * Stores the specified item.
-         * 
+         *
          * @param {string} key
          * @param {object} item
          * @param {integer} expires
@@ -113,23 +123,23 @@ nf.Storage = (function () {
             // store the item
             localStorage.setItem(key, JSON.stringify(entry));
         },
-        
+
         /**
          * Returns whether there is an entry for this key. This will not check the expiration. If
          * the entry is expired, it will return null on a subsequent getItem invocation.
-         * 
+         *
          * @param {string} key
          * @returns {boolean}
          */
         hasItem: function (key) {
             return getEntry(key) !== null;
         },
-        
+
         /**
          * Gets the item with the specified key. If an item with this key does
          * not exist, null is returned. If an item exists but cannot be parsed
          * or is malformed/unrecognized, null is returned.
-         * 
+         *
          * @param {type} key
          */
         getItem: function (key) {
@@ -140,7 +150,7 @@ nf.Storage = (function () {
 
             // if the entry is expired, drop it and return null
             if (checkExpiration(entry)) {
-                nf.Storage.removeItem(key);
+                this.removeItem(key);
                 return null;
             }
 
@@ -151,11 +161,11 @@ nf.Storage = (function () {
                 return null;
             }
         },
-        
+
         /**
          * Gets the expiration for the specified item. This will not check the expiration. If
          * the entry is expired, it will return null on a subsequent getItem invocation.
-         * 
+         *
          * @param {string} key
          * @returns {integer}
          */
@@ -172,14 +182,14 @@ nf.Storage = (function () {
                 return null;
             }
         },
-        
+
         /**
          * Removes the item with the specified key.
-         * 
+         *
          * @param {type} key
          */
         removeItem: function (key) {
             localStorage.removeItem(key);
         }
     };
-}());
\ No newline at end of file
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-universal-capture.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-universal-capture.js
index 6db1cc5b2b..ffadf646cf 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-universal-capture.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-universal-capture.js
@@ -15,108 +15,122 @@
  * limitations under the License.
  */
 
-/**
- * Captures keydown on the window to ensure certain keystrokes are handled in a consistent manner, particularly those
- * that can lead to browser navigation/reload.
- */
-$(document).ready(function ($) {
-    // setup a listener to ensure keystrokes are being overridden in a consistent manner
-    $(window).on('keydown', function (evt) {
-        // consider escape, before checking dialogs
-        var isCtrl = evt.ctrlKey || evt.metaKey;
-        if (!isCtrl && evt.keyCode === 27) {
-            // esc
+/* global nf, define, module, require, exports */
 
-            // prevent escape when editing a property with allowable values - that component does not handle key
-            // events so it can bubble up to here. once here we are unable to cancel the current edit so we simply
-            // return. this is not an issue for viewing in read only mode as the table is not in an edit mode. this
-            // is not an issue for other fields as they can handle key events locally and cancel the edit appropriately
-            var visibleCombo = $('div.value-combo');
-            if (visibleCombo.is(':visible') && visibleCombo.parent().hasClass('combo-editor')) {
-                return;
-            }
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery'], function ($) {
+            return (nf.UniversalCapture = factory($));
+        });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.UniversalCapture = factory(require('jquery')));
+    } else {
+        nf.UniversalCapture = factory(root.$);
+    }
+}(this, function ($) {
+    'use strict';
 
-            // consider property detail dialogs
-            if ($('div.property-detail').is(':visible')) {
-                nf.UniversalCapture.removeAllPropertyDetailDialogs();
+    /**
+     * Captures keydown on the window to ensure certain keystrokes are handled in a consistent manner, particularly those
+     * that can lead to browser navigation/reload.
+     */
+    $(document).ready(function ($) {
+        // setup a listener to ensure keystrokes are being overridden in a consistent manner
+        $(window).on('keydown', function (evt) {
+            // consider escape, before checking dialogs
+            var isCtrl = evt.ctrlKey || evt.metaKey;
+            if (!isCtrl && evt.keyCode === 27) {
+                // esc
 
-                // prevent further bubbling as we're already handled it
-                evt.stopImmediatePropagation();
-                evt.preventDefault();
-            } else {
-                var target = $(evt.target);
-                if (target.length) {
-                    // special handling for body as the target
-                    var cancellables = $('.cancellable');
-                    if (cancellables.length) {
-                        var zIndexMax = null;
-                        var dialogMax = null;
+                // prevent escape when editing a property with allowable values - that component does not handle key
+                // events so it can bubble up to here. once here we are unable to cancel the current edit so we simply
+                // return. this is not an issue for viewing in read only mode as the table is not in an edit mode. this
+                // is not an issue for other fields as they can handle key events locally and cancel the edit appropriately
+                var visibleCombo = $('div.value-combo');
+                if (visibleCombo.is(':visible') && visibleCombo.parent().hasClass('combo-editor')) {
+                    return;
+                }
 
-                        // identify the top most cancellable
-                        $.each(cancellables, function (_, cancellable) {
-                            var dialog = $(cancellable);
-                            var zIndex = dialog.css('zIndex');
+                // consider property detail dialogs
+                if ($('div.property-detail').is(':visible')) {
+                    nfUniversalDialog.removeAllPropertyDetailDialogs();
 
-                            // if the dialog has a zIndex consider it
-                            if (dialog.is(':visible') && (zIndex !== null && typeof zIndex !== 'undefined')) {
-                                zIndex = parseInt(zIndex, 10);
-                                if (zIndexMax === null || zIndex > zIndexMax) {
-                                    zIndexMax = zIndex;
-                                    dialogMax = dialog;
+                    // prevent further bubbling as we're already handled it
+                    evt.stopImmediatePropagation();
+                    evt.preventDefault();
+                } else {
+                    var target = $(evt.target);
+                    if (target.length) {
+                        // special handling for body as the target
+                        var cancellables = $('.cancellable');
+                        if (cancellables.length) {
+                            var zIndexMax = null;
+                            var dialogMax = null;
+
+                            // identify the top most cancellable
+                            $.each(cancellables, function (_, cancellable) {
+                                var dialog = $(cancellable);
+                                var zIndex = dialog.css('zIndex');
+
+                                // if the dialog has a zIndex consider it
+                                if (dialog.is(':visible') && (zIndex !== null && typeof zIndex !== 'undefined')) {
+                                    zIndex = parseInt(zIndex, 10);
+                                    if (zIndexMax === null || zIndex > zIndexMax) {
+                                        zIndexMax = zIndex;
+                                        dialogMax = dialog;
+                                    }
                                 }
+                            });
+
+                            // if we've identified a dialog to close do so and stop propagation
+                            if (dialogMax !== null) {
+                                // hide the cancellable
+                                if (dialogMax.hasClass('modal')) {
+                                    dialogMax.modal('hide');
+                                } else {
+                                    dialogMax.hide();
+                                }
+
+                                // prevent further bubbling as we're already handled it
+                                evt.stopImmediatePropagation();
+                                evt.preventDefault();
+
+                                return;
                             }
-                        });
+                        }
 
-                        // if we've identified a dialog to close do so and stop propagation
-                        if (dialogMax !== null) {
-                            // hide the cancellable
-                            if (dialogMax.hasClass('modal')) {
-                                dialogMax.modal('hide');
-                            } else {
-                                dialogMax.hide();
+                        // now see if we're in a frame
+                        if (top !== window) {
+                            // and our parent has shell defined
+                            if (typeof parent.nf !== 'undefined' && typeof parent.nf.Shell !== 'undefined') {
+                                parent.$('#shell-close-button').click();
+
+                                // prevent further bubbling as we're already handled it
+                                evt.stopImmediatePropagation();
+                                evt.preventDefault();
+
+                                return;
                             }
-
-                            // prevent further bubbling as we're already handled it
-                            evt.stopImmediatePropagation();
-                            evt.preventDefault();
-
-                            return;
                         }
                     }
-
-                    // now see if we're in a frame
-                    if (top !== window) {
-                        // and our parent has shell defined
-                        if (typeof parent.nf !== 'undefined' && typeof parent.nf.Shell !== 'undefined') {
-                            parent.$('#shell-close-button').click();
-
-                            // prevent further bubbling as we're already handled it
-                            evt.stopImmediatePropagation();
-                            evt.preventDefault();
-
-                            return;
-                        }
-                    }
-                }
-            }
-        } else {
-            if (isCtrl) {
-                if (evt.keyCode === 82) {
-                    // ctrl-r
-                    evt.preventDefault();
                 }
             } else {
-                if (!$('input, textarea').is(':focus') && (evt.keyCode == 8 || evt.keyCode === 46)) {
-                    // backspace or delete
-                    evt.preventDefault();
+                if (isCtrl) {
+                    if (evt.keyCode === 82) {
+                        // ctrl-r
+                        evt.preventDefault();
+                    }
+                } else {
+                    if (!$('input, textarea').is(':focus') && (evt.keyCode == 8 || evt.keyCode === 46)) {
+                        // backspace or delete
+                        evt.preventDefault();
+                    }
                 }
             }
-        }
+        });
     });
-});
 
-nf.UniversalCapture = (function() {
-    return {
+    var nfUniversalDialog = {
         /**
          * Removes all read only property detail dialogs.
          */
@@ -127,4 +141,6 @@ nf.UniversalCapture = (function() {
             propertyDetails.hide().remove();
         }
     };
-}());
\ No newline at end of file
+
+    return nfUniversalDialog;
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js
index d20737cebd..ddada58541 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js
@@ -15,1383 +15,1416 @@
  * limitations under the License.
  */
 
-/* global nf, d3 */
+/* global nf, top, define, module, require, exports */
 
-nf.ng.ProvenanceLineage = function () {
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'd3',
+                'nf.Common',
+                'nf.Dialog',
+                'nf.ErrorHandler'],
+            function ($, d3, common, dialog, errorHandler) {
+                return (nf.ng.ProvenanceLineage = factory($, d3, common, dialog, errorHandler));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.ng.ProvenanceLineage =
+            factory(require('jquery'),
+                require('d3'),
+                require('nf.Common'),
+                require('nf.Dialog'),
+                require('nf.ErrorHandler')));
+    } else {
+        nf.ng.ProvenanceLineage = factory(root.$,
+            root.d3,
+            root.nf.Common,
+            root.nf.Dialog,
+            root.nf.ErrorHandler);
+    }
+}(this, function ($, d3, common, dialog, errorHandler) {
     'use strict';
 
-    /**
-     * Configuration object used to hold a number of configuration items.
-     */
-    var config = {
-        sliderTickCount: 75,
-        urls: {
-            lineage: '../nifi-api/provenance/lineage'
-        }
-    };
+    var mySelf = function () {
+        'use strict';
 
-    /**
-     * Initializes the lineage query dialog.
-     */
-    var initLineageQueryDialog = function () {
-        // initialize the dialog
-        $('#lineage-query-dialog').modal({
-            scrollableContentStyle: 'scrollable',
-            headerText: 'Computing FlowFile lineage...'
-        });
-    };
+        /**
+         * Configuration object used to hold a number of configuration items.
+         */
+        var config = {
+            sliderTickCount: 75,
+            urls: {
+                lineage: '../nifi-api/provenance/lineage'
 
-    var downloadSvgFile = function(svgString){
-        var link = document.getElementById("image-download-link");
-        var downloadSupported = typeof link.download != 'undefined';
-        var fileName ='lineage.svg';
+            }
+        };
 
-        if (downloadSupported) {
-            var DOMURL = self.URL || self.webkitURL || self;
-            var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
+        /**
+         * Initializes the lineage query dialog.
+         */
+        var initLineageQueryDialog = function () {
+            // initialize the dialog
+            $('#lineage-query-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+                headerText: 'Computing FlowFile lineage...'
+            });
+        };
 
-            if (window.navigator.msSaveOrOpenBlob) {
-                window.navigator.msSaveOrOpenBlob(svg, fileName);
+        var downloadSvgFile = function (svgString) {
+            var link = document.getElementById("image-download-link");
+            var downloadSupported = typeof link.download != 'undefined';
+            var fileName = 'lineage.svg';
+
+            if (downloadSupported) {
+                var DOMURL = self.URL || self.webkitURL || self;
+                var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
+
+                if (window.navigator.msSaveOrOpenBlob) {
+                    window.navigator.msSaveOrOpenBlob(svg, fileName);
+                } else {
+                    var url = DOMURL.createObjectURL(svg);
+                    link.href = url;
+                    link.download = fileName;
+                    link.click();
+                }
             } else {
-                var url = DOMURL.createObjectURL(svg);
-                link.href = url;
-                link.download = fileName;
-                link.click();
-            }
-        } else {
-            window.open('data:image/svg+xml;charset=utf-8,' + encodeURI(svgString));
-        }
-    };
-
-    /**
-     * Appends the items to the context menu.
-     *
-     * items = [{class: ..., text: ..., click: function() {...}}, ...]
-     *
-     * @param {array} items
-     */
-    var addContextMenuItems = function (items) {
-        var contextMenu = $('#provenance-lineage-context-menu');
-
-        $.each(items, function (_, item) {
-            if (typeof item.click === 'function') {
-                var menuItem = $('
      ').on('click', item.click).on('mouseenter', function () {
-                    $(this).addClass('hover');
-                }).on('mouseleave', function () {
-                    $(this).removeClass('hover');
-                }).appendTo(contextMenu);
-
-                // add the img and the text
-                $('
      ').addClass(item['class']).appendTo(menuItem);
-                $('
      ').text(item['text']).appendTo(menuItem);
-                $('
      ').appendTo(menuItem);
-            }
-        });
-    };
-
-    /**
-     * Submits the specified lineage request.
-     *
-     * @param {type} lineageRequest
-     * @returns {deferred}
-     */
-    var submitLineage = function (lineageRequest) {
-        var lineageEntity = {
-            'lineage': {
-                'request': lineageRequest
+                window.open('data:image/svg+xml;charset=utf-8,' + encodeURI(svgString));
             }
         };
 
-        return $.ajax({
-            type: 'POST',
-            url: config.urls.lineage,
-            data: JSON.stringify(lineageEntity),
-            dataType: 'json',
-            contentType: 'application/json'
-        }).fail(nf.Common.handleAjaxError);
-    };
+        /**
+         * Appends the items to the context menu.
+         *
+         * items = [{class: ..., text: ..., click: function() {...}}, ...]
+         *
+         * @param {array} items
+         */
+        var addContextMenuItems = function (items) {
+            var contextMenu = $('#provenance-lineage-context-menu');
 
-    /**
-     * Gets the specified lineage.
-     *
-     * @param {type} lineage
-     * @returns {deferred}
-     */
-    var getLineage = function (lineage) {
-        var url = lineage.uri;
-        if (nf.Common.isDefinedAndNotNull(lineage.request.clusterNodeId)) {
-            url += '?' + $.param({
-                    clusterNodeId: lineage.request.clusterNodeId
-                });
-        }
+            $.each(items, function (_, item) {
+                if (typeof item.click === 'function') {
+                    var menuItem = $('
      ').on('click', item.click).on('mouseenter', function () {
+                        $(this).addClass('hover');
+                    }).on('mouseleave', function () {
+                        $(this).removeClass('hover');
+                    }).appendTo(contextMenu);
 
-        return $.ajax({
-            type: 'GET',
-            url: url,
-            dataType: 'json'
-        }).fail(nf.Common.handleAjaxError);
-    };
-
-    /**
-     * Cancels the specified lineage.
-     *
-     * @param {type} lineage
-     * @returns {deferred}
-     */
-    var cancelLineage = function (lineage) {
-        var url = lineage.uri;
-        if (nf.Common.isDefinedAndNotNull(lineage.request.clusterNodeId)) {
-            url += '?' + $.param({
-                    clusterNodeId: lineage.request.clusterNodeId
-                });
-        }
-
-        return $.ajax({
-            type: 'DELETE',
-            url: url,
-            dataType: 'json'
-        }).fail(nf.Common.handleAjaxError);
-    };
-
-    var DEFAULT_NODE_SPACING = 100;
-    var DEFAULT_LEVEL_DIFFERENCE = 120;
-
-    /**
-     * Renders the lineage in the specified results.
-     *
-     * @param {object} lineageResults
-     * @param {integer} eventId
-     * @param {string} clusterNodeId    The id of the node in the cluster where this event/flowfile originated
-     */
-    var renderLineage = function (lineageResults, eventId, clusterNodeId, provenanceTableCtrl) {
-        // get the container
-        var lineageContainer = $('#provenance-lineage');
-        var width = lineageContainer.width();
-        var height = lineageContainer.height();
-
-        // record the min/max event time
-        var minMillis;
-        var minTimestamp;
-        var maxMillis;
-
-        // data lookups
-        var nodeLookup = d3.map();
-        var linkLookup = d3.map();
-
-        var locateDescendants = function (nodeIds, descendants, depth) {
-            $.each(nodeIds, function (_, nodeId) {
-                var node = nodeLookup.get(nodeId);
-
-                var children = [];
-                $.each(node.outgoing, function (_, link) {
-                    children.push(link.target.id);
-                    descendants.add(link.target.id);
-                });
-
-                if (nf.Common.isUndefined(depth)) {
-                    locateDescendants(children, descendants);
-                } else if (depth > 1) {
-                    locateDescendants(children, descendants, depth - 1);
+                    // add the img and the text
+                    $('
      ').addClass(item['class']).appendTo(menuItem);
+                    $('
      ').text(item['text']).appendTo(menuItem);
+                    $('
      ').appendTo(menuItem);
                 }
             });
         };
 
-        var positionNodes = function (nodeIds, depth, parents, levelDifference) {
-            var immediateSet = d3.set(nodeIds);
-            var childSet = d3.set();
-            var descendantSet = d3.set();
+        /**
+         * Submits the specified lineage request.
+         *
+         * @param {type} lineageRequest
+         * @returns {deferred}
+         */
+        var submitLineage = function (lineageRequest) {
+            var lineageEntity = {
+                'lineage': {
+                    'request': lineageRequest
+                }
+            };
 
-            // locate children
-            locateDescendants(nodeIds, childSet, 1);
+            return $.ajax({
+                type: 'POST',
+                url: config.urls.lineage,
+                data: JSON.stringify(lineageEntity),
+                dataType: 'json',
+                contentType: 'application/json'
+            }).fail(errorHandler.handleAjaxError);
+        };
 
-            // locate all descendants (including children)
-            locateDescendants(nodeIds, descendantSet);
+        /**
+         * Gets the specified lineage.
+         *
+         * @param {type} lineage
+         * @returns {deferred}
+         */
+        var getLineage = function (lineage) {
+            var url = lineage.uri;
+            if (common.isDefinedAndNotNull(lineage.request.clusterNodeId)) {
+                url += '?' + $.param({
+                        clusterNodeId: lineage.request.clusterNodeId
+                    });
+            }
 
-            // push off processing a node until its deepest point
-            // by removing any descendants from the immediate nodes.
-            // in this case, a link is panning multiple levels
-            descendantSet.forEach(function (d) {
-                immediateSet.remove(d);
-            });
+            return $.ajax({
+                type: 'GET',
+                url: url,
+                dataType: 'json'
+            }).fail(errorHandler.handleAjaxError);
+        };
 
-            // convert the children to an array to ensure consistent
-            // order when performing index of checks below
-            var children = childSet.values().sort(d3.descending);
+        /**
+         * Cancels the specified lineage.
+         *
+         * @param {type} lineage
+         * @returns {deferred}
+         */
+        var cancelLineage = function (lineage) {
+            var url = lineage.uri;
+            if (common.isDefinedAndNotNull(lineage.request.clusterNodeId)) {
+                url += '?' + $.param({
+                        clusterNodeId: lineage.request.clusterNodeId
+                    });
+            }
 
-            // convert the immediate to allow for sorting below
-            var immediate = immediateSet.values();
+            return $.ajax({
+                type: 'DELETE',
+                url: url,
+                dataType: 'json'
+            }).fail(errorHandler.handleAjaxError);
+        };
 
-            // attempt to identify fan in/out cases
-            var nodesWithTwoParents = 0;
-            $.each(immediate, function (_, nodeId) {
-                var node = nodeLookup.get(nodeId);
+        var DEFAULT_NODE_SPACING = 100;
+        var DEFAULT_LEVEL_DIFFERENCE = 120;
 
-                // identify fanning cases
-                if (node.incoming.length > 3) {
+        /**
+         * Renders the lineage in the specified results.
+         *
+         * @param {object} lineageResults
+         * @param {integer} eventId
+         * @param {string} clusterNodeId    The id of the node in the cluster where this event/flowfile originated
+         */
+        var renderLineage = function (lineageResults, eventId, clusterNodeId, provenanceTableCtrl) {
+            // get the container
+            var lineageContainer = $('#provenance-lineage');
+            var width = lineageContainer.width();
+            var height = lineageContainer.height();
+
+            // record the min/max event time
+            var minMillis;
+            var minTimestamp;
+            var maxMillis;
+
+            // data lookups
+            var nodeLookup = d3.map();
+            var linkLookup = d3.map();
+
+            var locateDescendants = function (nodeIds, descendants, depth) {
+                $.each(nodeIds, function (_, nodeId) {
+                    var node = nodeLookup.get(nodeId);
+
+                    var children = [];
+                    $.each(node.outgoing, function (_, link) {
+                        children.push(link.target.id);
+                        descendants.add(link.target.id);
+                    });
+
+                    if (common.isUndefined(depth)) {
+                        locateDescendants(children, descendants);
+                    } else if (depth > 1) {
+                        locateDescendants(children, descendants, depth - 1);
+                    }
+                });
+            };
+
+            var positionNodes = function (nodeIds, depth, parents, levelDifference) {
+                var immediateSet = d3.set(nodeIds);
+                var childSet = d3.set();
+                var descendantSet = d3.set();
+
+                // locate children
+                locateDescendants(nodeIds, childSet, 1);
+
+                // locate all descendants (including children)
+                locateDescendants(nodeIds, descendantSet);
+
+                // push off processing a node until its deepest point
+                // by removing any descendants from the immediate nodes.
+                // in this case, a link is panning multiple levels
+                descendantSet.forEach(function (d) {
+                    immediateSet.remove(d);
+                });
+
+                // convert the children to an array to ensure consistent
+                // order when performing index of checks below
+                var children = childSet.values().sort(d3.descending);
+
+                // convert the immediate to allow for sorting below
+                var immediate = immediateSet.values();
+
+                // attempt to identify fan in/out cases
+                var nodesWithTwoParents = 0;
+                $.each(immediate, function (_, nodeId) {
+                    var node = nodeLookup.get(nodeId);
+
+                    // identify fanning cases
+                    if (node.incoming.length > 3) {
+                        levelDifference = DEFAULT_LEVEL_DIFFERENCE;
+                    } else if (node.incoming.length >= 2) {
+                        nodesWithTwoParents++;
+                    }
+                });
+
+                // increate the level difference if more than two nodes have two or more parents
+                if (nodesWithTwoParents > 2) {
                     levelDifference = DEFAULT_LEVEL_DIFFERENCE;
-                } else if (node.incoming.length >= 2) {
-                    nodesWithTwoParents++;
-                }
-            });
-
-            // increate the level difference if more than two nodes have two or more parents
-            if (nodesWithTwoParents > 2) {
-                levelDifference = DEFAULT_LEVEL_DIFFERENCE;
-            }
-
-            // attempt to sort the nodes to provide an optimum layout
-            if (parents.length === 1) {
-                immediate = immediate.sort(function (one, two) {
-                    var oneNode = nodeLookup.get(one);
-                    var twoNode = nodeLookup.get(two);
-
-                    // try to order by children
-                    if (oneNode.outgoing.length > 0 && twoNode.outgoing.length > 0) {
-                        var oneIndex = children.indexOf(oneNode.outgoing[0].target.id);
-                        var twoIndex = children.indexOf(twoNode.outgoing[0].target.id);
-                        if (oneIndex !== twoIndex) {
-                            return oneIndex - twoIndex;
-                        }
-                    }
-
-                    // try to order by parents
-                    if (oneNode.incoming.length > 0 && twoNode.incoming.length > 0) {
-                        var oneIndex = oneNode.incoming[0].source.index;
-                        var twoIndex = twoNode.incoming[0].source.index;
-                        if (oneIndex !== twoIndex) {
-                            return oneIndex - twoIndex;
-                        }
-                    }
-
-                    // type of node
-                    if (oneNode.type !== twoNode.type) {
-                        return oneNode.type > twoNode.type ? 1 : -1;
-                    }
-
-                    // type of event
-                    if (oneNode.eventType !== twoNode.eventType) {
-                        return oneNode.eventType > twoNode.eventType ? 1 : -1;
-                    }
-
-                    // timestamp
-                    return oneNode.millis - twoNode.millis;
-                });
-            } else if (parents.length > 1) {
-                immediate = immediate.sort(function (one, two) {
-                    var oneNode = nodeLookup.get(one);
-                    var twoNode = nodeLookup.get(two);
-
-                    // try to order by parents
-                    if (oneNode.incoming.length > 0 && twoNode.incoming.length > 0) {
-                        var oneIndex = oneNode.incoming[0].source.index;
-                        var twoIndex = twoNode.incoming[0].source.index;
-                        if (oneIndex !== twoIndex) {
-                            return oneIndex - twoIndex;
-                        }
-                    }
-
-                    // try to order by children
-                    if (oneNode.outgoing.length > 0 && twoNode.outgoing.length > 0) {
-                        var oneIndex = children.indexOf(oneNode.outgoing[0].target.id);
-                        var twoIndex = children.indexOf(twoNode.outgoing[0].target.id);
-                        if (oneIndex !== twoIndex) {
-                            return oneIndex - twoIndex;
-                        }
-                    }
-
-                    // node type
-                    if (oneNode.type !== twoNode.type) {
-                        return oneNode.type > twoNode.type ? 1 : -1;
-                    }
-
-                    // event type
-                    if (oneNode.eventType !== twoNode.eventType) {
-                        return oneNode.eventType > twoNode.eventType ? 1 : -1;
-                    }
-
-                    // timestamp
-                    return oneNode.millis - twoNode.millis;
-                });
-            }
-
-            var originX = width / 2;
-            if (parents.length > 0) {
-                originX = d3.mean(parents, function (parentId) {
-                    var parent = nodeLookup.get(parentId);
-                    return parent.x;
-                });
-            }
-
-            var depthWidth = (immediate.length - 1) * DEFAULT_NODE_SPACING;
-            $.each(immediate, function (i, nodeId) {
-                var node = nodeLookup.get(nodeId);
-
-                // set the y position based on the depth
-                node.y = levelDifference + depth - 25;
-
-                // ensure the children won't position on top of one another
-                // based on the number of parent nodes
-                if (immediate.length <= parents.length) {
-                    if (node.incoming.length === 1) {
-                        var parent = node.incoming[0].source;
-                        if (parent.outgoing.length === 1) {
-                            node.x = parent.x;
-                            return;
-                        }
-                    } else if (node.incoming.length > 1) {
-                        var nodesOnPreviousLevel = $.grep(node.incoming, function (link) {
-                            return (node.y - link.source.y) <= DEFAULT_LEVEL_DIFFERENCE;
-                        });
-                        node.x = d3.mean(nodesOnPreviousLevel, function (link) {
-                            return link.source.x;
-                        });
-                        return;
-                    }
                 }
 
-                // evenly space the nodes under the origin
-                node.x = (i * DEFAULT_NODE_SPACING) + originX - (depthWidth / 2);
-            });
+                // attempt to sort the nodes to provide an optimum layout
+                if (parents.length === 1) {
+                    immediate = immediate.sort(function (one, two) {
+                        var oneNode = nodeLookup.get(one);
+                        var twoNode = nodeLookup.get(two);
 
-            // sort the immediate nodes after positioning by the x coordinate
-            // so they can be shifted accordingly if necessary
-            var sortedImmediate = immediate.slice().sort(function (one, two) {
-                var nodeOne = nodeLookup.get(one);
-                var nodeTwo = nodeLookup.get(two);
-                return nodeOne.x - nodeTwo.x;
-            });
+                        // try to order by children
+                        if (oneNode.outgoing.length > 0 && twoNode.outgoing.length > 0) {
+                            var oneIndex = children.indexOf(oneNode.outgoing[0].target.id);
+                            var twoIndex = children.indexOf(twoNode.outgoing[0].target.id);
+                            if (oneIndex !== twoIndex) {
+                                return oneIndex - twoIndex;
+                            }
+                        }
 
-            // adjust the x positioning if necessary to avoid positioning on top
-            // of one another, only need to consider the x coordinate since the
-            // y coordinate will be the same for each node on this row
-            for (var i = 0; i < sortedImmediate.length - 1; i++) {
-                var first = nodeLookup.get(sortedImmediate[i]);
-                var second = nodeLookup.get(sortedImmediate[i + 1]);
-                var difference = second.x - first.x;
+                        // try to order by parents
+                        if (oneNode.incoming.length > 0 && twoNode.incoming.length > 0) {
+                            var oneIndex = oneNode.incoming[0].source.index;
+                            var twoIndex = twoNode.incoming[0].source.index;
+                            if (oneIndex !== twoIndex) {
+                                return oneIndex - twoIndex;
+                            }
+                        }
 
-                if (difference < DEFAULT_NODE_SPACING) {
-                    second.x += (DEFAULT_NODE_SPACING - difference);
+                        // type of node
+                        if (oneNode.type !== twoNode.type) {
+                            return oneNode.type > twoNode.type ? 1 : -1;
+                        }
+
+                        // type of event
+                        if (oneNode.eventType !== twoNode.eventType) {
+                            return oneNode.eventType > twoNode.eventType ? 1 : -1;
+                        }
+
+                        // timestamp
+                        return oneNode.millis - twoNode.millis;
+                    });
+                } else if (parents.length > 1) {
+                    immediate = immediate.sort(function (one, two) {
+                        var oneNode = nodeLookup.get(one);
+                        var twoNode = nodeLookup.get(two);
+
+                        // try to order by parents
+                        if (oneNode.incoming.length > 0 && twoNode.incoming.length > 0) {
+                            var oneIndex = oneNode.incoming[0].source.index;
+                            var twoIndex = twoNode.incoming[0].source.index;
+                            if (oneIndex !== twoIndex) {
+                                return oneIndex - twoIndex;
+                            }
+                        }
+
+                        // try to order by children
+                        if (oneNode.outgoing.length > 0 && twoNode.outgoing.length > 0) {
+                            var oneIndex = children.indexOf(oneNode.outgoing[0].target.id);
+                            var twoIndex = children.indexOf(twoNode.outgoing[0].target.id);
+                            if (oneIndex !== twoIndex) {
+                                return oneIndex - twoIndex;
+                            }
+                        }
+
+                        // node type
+                        if (oneNode.type !== twoNode.type) {
+                            return oneNode.type > twoNode.type ? 1 : -1;
+                        }
+
+                        // event type
+                        if (oneNode.eventType !== twoNode.eventType) {
+                            return oneNode.eventType > twoNode.eventType ? 1 : -1;
+                        }
+
+                        // timestamp
+                        return oneNode.millis - twoNode.millis;
+                    });
                 }
-            }
 
-            // if there are children to position
-            if (children.length > 0) {
-                var childLevelDifference = DEFAULT_LEVEL_DIFFERENCE / 3;
+                var originX = width / 2;
+                if (parents.length > 0) {
+                    originX = d3.mean(parents, function (parentId) {
+                        var parent = nodeLookup.get(parentId);
+                        return parent.x;
+                    });
+                }
 
-                // resort the immediate values after each node has been positioned
-                immediate = immediate.sort(function (one, two) {
-                    var oneNode = nodeLookup.get(one);
-                    var twoNode = nodeLookup.get(two);
-                    return oneNode.x - twoNode.x;
-                });
-
-                // mark each nodes index so subsequent recursive calls can position children accordingly
-                var nodesWithTwoChildren = 0;
+                var depthWidth = (immediate.length - 1) * DEFAULT_NODE_SPACING;
                 $.each(immediate, function (i, nodeId) {
                     var node = nodeLookup.get(nodeId);
-                    node.index = i;
 
-                    // precompute the next level difference since we have easy access to going here
-                    if (node.outgoing.length > 3) {
-                        childLevelDifference = DEFAULT_LEVEL_DIFFERENCE;
-                    } else if (node.outgoing.length >= 2) {
-                        nodesWithTwoChildren++;
-                    }
-                });
+                    // set the y position based on the depth
+                    node.y = levelDifference + depth - 25;
 
-                // if there are at least two immediate nodes with two or more children, increase the level difference
-                if (nodesWithTwoChildren > 2) {
-                    childLevelDifference = DEFAULT_LEVEL_DIFFERENCE;
-                }
-
-                // position the children
-                positionNodes(children, levelDifference + depth, immediate, childLevelDifference);
-            }
-        };
-
-        var addLineage = function (nodes, links, provenanceTableCtrl) {
-            // add the new nodes
-            $.each(nodes, function (_, node) {
-                if (nodeLookup.has(node.id)) {
-                    return;
-                }
-
-                // add values to the node to support rendering
-                $.extend(node, {
-                    x: 0,
-                    y: 0,
-                    visible: true
-                });
-
-                // store the node in a lookup
-                nodeLookup.set(node.id, node);
-            });
-
-            // add the new links
-            $.each(links, function (_, link) {
-                // create the link object
-                var linkObj = {
-                    id: link.sourceId + '-' + link.targetId,
-                    source: nodeLookup.get(link.sourceId),
-                    target: nodeLookup.get(link.targetId),
-                    flowFileUuid: link.flowFileUuid,
-                    millis: link.millis,
-                    visible: true
-                };
-
-                linkLookup.set(linkObj.id, linkObj);
-            });
-
-            refresh(provenanceTableCtrl);
-        };
-
-        var refresh = function (provenanceTableCtrl) {
-            // consider all nodes as starting points
-            var startNodes = d3.set(nodeLookup.keys());
-
-            // go through the nodes to reset their outgoing links
-            nodeLookup.forEach(function (id, node) {
-                node.outgoing = [];
-                node.incoming = [];
-
-                // ensure this event has an event time
-                if (nf.Common.isUndefined(minMillis) || minMillis > node.millis) {
-                    minMillis = node.millis;
-                    minTimestamp = node.timestamp;
-                }
-                if (nf.Common.isUndefined(maxMillis) || maxMillis < node.millis) {
-                    maxMillis = node.millis;
-                }
-            });
-
-            // go through the links in order to compute the new layout
-            linkLookup.forEach(function (id, link) {
-                // updating the nodes connections
-                link.source.outgoing.push(link);
-                link.target.incoming.push(link);
-
-                // remove the target from being a potential starting node
-                startNodes.remove(link.target.id);
-            });
-
-            // position the nodes
-            positionNodes(startNodes.values(), 1, [], 50);
-
-            // update the slider min/max/step values
-            var step = (maxMillis - minMillis) / config.sliderTickCount;
-            slider.slider('option', 'min', minMillis).slider('option', 'max', maxMillis).slider('option', 'step', step).slider('value', maxMillis);
-
-            // populate the event timeline
-            $('#event-time').text(formatEventTime(maxMillis, provenanceTableCtrl));
-
-            // update the layout
-            update(provenanceTableCtrl);
-        };
-
-        // formats the specified millis
-        var formatEventTime = function (millis, provenanceTableCtrl) {
-            // get the current user time to properly convert the server time
-            var now = new Date();
-
-            // conver the user offset to millis
-            var userTimeOffset = now.getTimezoneOffset() * 60 * 1000;
-
-            // create the proper date by adjusting by the offsets
-            var date = new Date(millis + userTimeOffset + provenanceTableCtrl.serverTimeOffset);
-            return nf.Common.formatDateTime(date);
-        };
-
-        // handle context menu clicks...
-        $('#provenance-lineage-context-menu').on('click', function () {
-            $(this).hide().empty();
-        });
-
-        // handle zoom behavior
-        var lineageZoom = d3.behavior.zoom()
-            .scaleExtent([0.2, 8])
-            .on('zoom', function () {
-                d3.select('g.lineage').attr('transform', function () {
-                    return 'translate(' + d3.event.translate + ') scale(' + d3.event.scale + ')';
-                });
-            });
-
-        // build the svg img
-        var svg = d3.select('#provenance-lineage-container').append('svg:svg')
-            .attr('width', '100%')
-            .attr('height', '100%')
-            .call(lineageZoom)
-            .on('dblclick.zoom', null)
-            .on('mousedown', function (d) {
-                // hide the context menu if necessary
-                d3.selectAll('circle.context').classed('context', false);
-                $('#provenance-lineage-context-menu').hide().empty();
-            })
-            .on('contextmenu', function () {
-                var contextMenu = $('#provenance-lineage-context-menu');
-
-                // if there is something to show in the context menu
-                if (!contextMenu.is(':empty')) {
-                    var position = d3.mouse(this);
-
-                    // show the context menu
-                    contextMenu.css({
-                        'left': position[0] + 'px',
-                        'top': position[1] + 'px'
-                    }).show();
-                }
-
-                // prevent the native default context menu
-                d3.event.preventDefault();
-            });
-
-        svg.append('rect')
-            .attr({
-                'width': '100%',
-                'height': '100%',
-                'fill': '#f9fafb'
-            });
-
-        svg.append('defs').selectAll('marker')
-            .data(['FLOWFILE', 'FLOWFILE-SELECTED', 'EVENT', 'EVENT-SELECTED'])
-            .enter().append('marker')
-            .attr({
-                'id': function (d) {
-                    return d;
-                },
-                'viewBox': '0 -3 6 6',
-                'refX': function (d) {
-                    if (d.indexOf('FLOWFILE') >= 0) {
-                        return 16;
-                    } else {
-                        return 11;
-                    }
-                },
-                'refY': 0,
-                'markerWidth': 6,
-                'markerHeight': 6,
-                'orient': 'auto',
-                'fill': function (d) {
-                    if (d.indexOf('SELECTED') >= 0) {
-                        return '#ba554a';
-                    } else {
-                        return '#000000';
-                    }
-                }
-            })
-            .append('path')
-            .attr('d', 'M0,-3 L6,0 L0,3');
-
-        // group everything together
-        var lineageContainer = svg.append('g')
-            .attr({
-                'transform': 'translate(0, 0) scale(1)',
-                'pointer-events': 'all',
-                'class': 'lineage'
-            });
-
-        // select the nodes and links
-        var nodes = lineageContainer.selectAll('g.node');
-        var links = lineageContainer.selectAll('path.link');
-
-        var previousMillis = maxMillis;
-        var slide = function (event, ui) {
-            if (previousMillis > ui.value) {
-                // the slider is descending
-
-                // determine the nodes to hide
-                var nodesToHide = nodes.filter(function (d) {
-                    return d.millis > ui.value && d.millis <= previousMillis;
-                });
-                var linksToHide = links.filter(function (d) {
-                    return d.millis > ui.value && d.millis <= previousMillis;
-                });
-
-                // hide applicable nodes and lines
-                linksToHide.transition().duration(400).style('opacity', 0);
-                nodesToHide.transition().delay(200).duration(400).style('opacity', 0);
-            } else {
-                // the slider is ascending
-
-                // determine the nodes to show
-                var nodesToShow = nodes.filter(function (d) {
-                    return d.millis <= ui.value && d.millis > previousMillis;
-                });
-                var linksToShow = links.filter(function (d) {
-                    return d.millis <= ui.value && d.millis > previousMillis;
-                });
-
-                // show applicable nodes and lines
-                nodesToShow.transition().duration(400).style('opacity', 1);
-                linksToShow.transition().delay(200).duration(400).style('opacity', 1);
-            }
-
-            // update the event time
-            $('#event-time').text(formatEventTime(ui.value, provenanceTableCtrl));
-
-            // update the previous value
-            previousMillis = ui.value;
-        };
-
-        // set up a slider for the showing the timeline of events
-        var slider = $('#provenance-lineage-slider').slider({
-            min: minMillis,
-            max: maxMillis,
-            step: (maxMillis - minMillis) / config.sliderTickCount,
-            value: maxMillis,
-            change: slide,
-            slide: slide
-        });
-
-        // renders flowfile nodes
-        var renderFlowFile = function (flowfiles) {
-            flowfiles.classed('flowfile', true);
-
-            // node
-            flowfiles.append('circle')
-                .attr({
-                    'r': 16,
-                    'fill': '#fff',
-                    'stroke': '#000',
-                    'stroke-width': 1.0
-                })
-                .on('mousedown', function (d) {
-                    // empty context menu if necessary
-                    $('#provenance-lineage-context-menu').hide().empty();
-
-                    // prevents the drag event when something other than the
-                    // left button is clicked
-                    if (d3.event.button !== 0) {
-                        d3.event.stopPropagation();
-                    }
-                }, true)
-                .on('mouseover', function (d) {
-                    links.filter(function (linkDatum) {
-                        return d.id === linkDatum.flowFileUuid;
-                    })
-                        .classed('selected', true)
-                        .attr('marker-end', function (d) {
-                            return 'url(#' + d.target.type + '-SELECTED)';
-                        });
-                })
-                .on('mouseout', function (d) {
-                    links.filter(function (linkDatum) {
-                        return d.id === linkDatum.flowFileUuid;
-                    }).classed('selected', false)
-                        .attr('marker-end', function (d) {
-                            return 'url(#' + d.target.type + ')';
-                        });
-                });
-
-            var icon = flowfiles.append('g')
-                .attr({
-                    'class': 'flowfile-icon',
-                    'transform': function (d) {
-                        return 'translate(-9,-9)';
-                    }
-                }).append('text')
-                .attr({
-                    'font-family': 'flowfont',
-                    'font-size': '18px',
-                    'fill': '#ad9897',
-                    'transform': function (d) {
-                        return 'translate(0,15)';
-                    }
-                })
-                .on('mousedown', function (d) {
-                    // empty context menu if necessary
-                    $('#provenance-lineage-context-menu').hide().empty();
-
-                    // prevents the drag event when something other than the
-                    // left button is clicked
-                    if (d3.event.button !== 0) {
-                        d3.event.stopPropagation();
-                    }
-                }, true)
-                .on('mouseover', function (d) {
-                    links.filter(function (linkDatum) {
-                        return d.id === linkDatum.flowFileUuid;
-                    })
-                        .classed('selected', true)
-                        .attr('marker-end', function (d) {
-                            return 'url(#' + d.target.type + '-SELECTED)';
-                        });
-                })
-                .on('mouseout', function (d) {
-                    links.filter(function (linkDatum) {
-                        return d.id === linkDatum.flowFileUuid;
-                    }).classed('selected', false)
-                        .attr('marker-end', function (d) {
-                            return 'url(#' + d.target.type + ')';
-                        });
-                })
-                .text(function(d) { return '\ue808' });
-        };
-
-        // renders event nodes
-        var renderEvent = function (events, provenanceTableCtrl) {
-            events
-                .classed('event', true)
-                .append('circle')
-                .classed('selected', function (d) {
-                    return d.id === eventId;
-                })
-                .attr({
-                    'r': 8,
-                    'fill': '#aabbc3',
-                    'stroke': '#000',
-                    'stroke-width': 1.0,
-                    'id': function (d) {
-                        return 'event-node-' + d.id;
-                    }
-                })
-                .on('contextmenu', function (d) {
-                    // select the current node for a visible cue
-                    d3.select(this).classed('context', true);
-
-                    // empty an previous contents - in case they right click on the
-                    // node twice without closing the previous context menu
-                    $('#provenance-lineage-context-menu').hide().empty();
-
-                    var menuItems = [{
-                        'class': 'lineage-view-event',
-                        'text': 'View details',
-                        'click': function () {
-                            provenanceTableCtrl.showEventDetails(d.id, clusterNodeId);
+                    // ensure the children won't position on top of one another
+                    // based on the number of parent nodes
+                    if (immediate.length <= parents.length) {
+                        if (node.incoming.length === 1) {
+                            var parent = node.incoming[0].source;
+                            if (parent.outgoing.length === 1) {
+                                node.x = parent.x;
+                                return;
+                            }
+                        } else if (node.incoming.length > 1) {
+                            var nodesOnPreviousLevel = $.grep(node.incoming, function (link) {
+                                return (node.y - link.source.y) <= DEFAULT_LEVEL_DIFFERENCE;
+                            });
+                            node.x = d3.mean(nodesOnPreviousLevel, function (link) {
+                                return link.source.x;
+                            });
+                            return;
                         }
-                    }];
+                    }
 
-                    // if this is a spawn event show appropriate actions
-                    if (d.eventType === 'SPAWN' || d.eventType === 'CLONE' || d.eventType === 'FORK' || d.eventType === 'JOIN' || d.eventType === 'REPLAY') {
-                        // starts the lineage expansion process
-                        var expandLineage = function (lineageRequest) {
-                            var lineageProgress = $('#lineage-percent-complete');
+                    // evenly space the nodes under the origin
+                    node.x = (i * DEFAULT_NODE_SPACING) + originX - (depthWidth / 2);
+                });
 
-                            // add support to cancel outstanding requests - when the button is pressed we
-                            // could be in one of two stages, 1) waiting to GET the status or 2)
-                            // in the process of GETting the status. Handle both cases by cancelling
-                            // the setTimeout (1) and by setting a flag to indicate that a request has
-                            // been request so we can ignore the results (2).
+                // sort the immediate nodes after positioning by the x coordinate
+                // so they can be shifted accordingly if necessary
+                var sortedImmediate = immediate.slice().sort(function (one, two) {
+                    var nodeOne = nodeLookup.get(one);
+                    var nodeTwo = nodeLookup.get(two);
+                    return nodeOne.x - nodeTwo.x;
+                });
 
-                            var cancelled = false;
-                            var lineage = null;
-                            var lineageTimer = null;
+                // adjust the x positioning if necessary to avoid positioning on top
+                // of one another, only need to consider the x coordinate since the
+                // y coordinate will be the same for each node on this row
+                for (var i = 0; i < sortedImmediate.length - 1; i++) {
+                    var first = nodeLookup.get(sortedImmediate[i]);
+                    var second = nodeLookup.get(sortedImmediate[i + 1]);
+                    var difference = second.x - first.x;
 
-                            // update the progress bar value
-                            provenanceTableCtrl.updateProgress(lineageProgress, 0);
+                    if (difference < DEFAULT_NODE_SPACING) {
+                        second.x += (DEFAULT_NODE_SPACING - difference);
+                    }
+                }
 
-                            // show the 'searching...' dialog
-                            $('#lineage-query-dialog').modal('setButtonModel', [{
-                                buttonText: 'Cancel',
-                                color: {
-                                    base: '#E3E8EB',
-                                    hover: '#C7D2D7',
-                                    text: '#004849'
-                                },
-                                handler: {
-                                    click: function () {
-                                        cancelled = true;
+                // if there are children to position
+                if (children.length > 0) {
+                    var childLevelDifference = DEFAULT_LEVEL_DIFFERENCE / 3;
 
-                                        // we are waiting for the next poll attempt
-                                        if (lineageTimer !== null) {
-                                            // cancel it
-                                            clearTimeout(lineageTimer);
+                    // resort the immediate values after each node has been positioned
+                    immediate = immediate.sort(function (one, two) {
+                        var oneNode = nodeLookup.get(one);
+                        var twoNode = nodeLookup.get(two);
+                        return oneNode.x - twoNode.x;
+                    });
 
-                                            // cancel the provenance
-                                            closeDialog();
+                    // mark each nodes index so subsequent recursive calls can position children accordingly
+                    var nodesWithTwoChildren = 0;
+                    $.each(immediate, function (i, nodeId) {
+                        var node = nodeLookup.get(nodeId);
+                        node.index = i;
+
+                        // precompute the next level difference since we have easy access to going here
+                        if (node.outgoing.length > 3) {
+                            childLevelDifference = DEFAULT_LEVEL_DIFFERENCE;
+                        } else if (node.outgoing.length >= 2) {
+                            nodesWithTwoChildren++;
+                        }
+                    });
+
+                    // if there are at least two immediate nodes with two or more children, increase the level difference
+                    if (nodesWithTwoChildren > 2) {
+                        childLevelDifference = DEFAULT_LEVEL_DIFFERENCE;
+                    }
+
+                    // position the children
+                    positionNodes(children, levelDifference + depth, immediate, childLevelDifference);
+                }
+            };
+
+            var addLineage = function (nodes, links, provenanceTableCtrl) {
+                // add the new nodes
+                $.each(nodes, function (_, node) {
+                    if (nodeLookup.has(node.id)) {
+                        return;
+                    }
+
+                    // add values to the node to support rendering
+                    $.extend(node, {
+                        x: 0,
+                        y: 0,
+                        visible: true
+                    });
+
+                    // store the node in a lookup
+                    nodeLookup.set(node.id, node);
+                });
+
+                // add the new links
+                $.each(links, function (_, link) {
+                    // create the link object
+                    var linkObj = {
+                        id: link.sourceId + '-' + link.targetId,
+                        source: nodeLookup.get(link.sourceId),
+                        target: nodeLookup.get(link.targetId),
+                        flowFileUuid: link.flowFileUuid,
+                        millis: link.millis,
+                        visible: true
+                    };
+
+                    linkLookup.set(linkObj.id, linkObj);
+                });
+
+                refresh(provenanceTableCtrl);
+            };
+
+            var refresh = function (provenanceTableCtrl) {
+                // consider all nodes as starting points
+                var startNodes = d3.set(nodeLookup.keys());
+
+                // go through the nodes to reset their outgoing links
+                nodeLookup.forEach(function (id, node) {
+                    node.outgoing = [];
+                    node.incoming = [];
+
+                    // ensure this event has an event time
+                    if (common.isUndefined(minMillis) || minMillis > node.millis) {
+                        minMillis = node.millis;
+                        minTimestamp = node.timestamp;
+                    }
+                    if (common.isUndefined(maxMillis) || maxMillis < node.millis) {
+                        maxMillis = node.millis;
+                    }
+                });
+
+                // go through the links in order to compute the new layout
+                linkLookup.forEach(function (id, link) {
+                    // updating the nodes connections
+                    link.source.outgoing.push(link);
+                    link.target.incoming.push(link);
+
+                    // remove the target from being a potential starting node
+                    startNodes.remove(link.target.id);
+                });
+
+                // position the nodes
+                positionNodes(startNodes.values(), 1, [], 50);
+
+                // update the slider min/max/step values
+                var step = (maxMillis - minMillis) / config.sliderTickCount;
+                slider.slider('option', 'min', minMillis).slider('option', 'max', maxMillis).slider('option', 'step', step).slider('value', maxMillis);
+
+                // populate the event timeline
+                $('#event-time').text(formatEventTime(maxMillis, provenanceTableCtrl));
+
+                // update the layout
+                update(provenanceTableCtrl);
+            };
+
+            // formats the specified millis
+            var formatEventTime = function (millis, provenanceTableCtrl) {
+                // get the current user time to properly convert the server time
+                var now = new Date();
+
+                // conver the user offset to millis
+                var userTimeOffset = now.getTimezoneOffset() * 60 * 1000;
+
+                // create the proper date by adjusting by the offsets
+                var date = new Date(millis + userTimeOffset + provenanceTableCtrl.serverTimeOffset);
+                return common.formatDateTime(date);
+            };
+
+            // handle context menu clicks...
+            $('#provenance-lineage-context-menu').on('click', function () {
+                $(this).hide().empty();
+            });
+
+            // handle zoom behavior
+            var lineageZoom = d3.behavior.zoom()
+                .scaleExtent([0.2, 8])
+                .on('zoom', function () {
+                    d3.select('g.lineage').attr('transform', function () {
+                        return 'translate(' + d3.event.translate + ') scale(' + d3.event.scale + ')';
+                    });
+                });
+
+            // build the svg img
+            var svg = d3.select('#provenance-lineage-container').append('svg:svg')
+                .attr('width', '100%')
+                .attr('height', '100%')
+                .call(lineageZoom)
+                .on('dblclick.zoom', null)
+                .on('mousedown', function (d) {
+                    // hide the context menu if necessary
+                    d3.selectAll('circle.context').classed('context', false);
+                    $('#provenance-lineage-context-menu').hide().empty();
+                })
+                .on('contextmenu', function () {
+                    var contextMenu = $('#provenance-lineage-context-menu');
+
+                    // if there is something to show in the context menu
+                    if (!contextMenu.is(':empty')) {
+                        var position = d3.mouse(this);
+
+                        // show the context menu
+                        contextMenu.css({
+                            'left': position[0] + 'px',
+                            'top': position[1] + 'px'
+                        }).show();
+                    }
+
+                    // prevent the native default context menu
+                    d3.event.preventDefault();
+                });
+
+            svg.append('rect')
+                .attr({
+                    'width': '100%',
+                    'height': '100%',
+                    'fill': '#f9fafb'
+                });
+
+            svg.append('defs').selectAll('marker')
+                .data(['FLOWFILE', 'FLOWFILE-SELECTED', 'EVENT', 'EVENT-SELECTED'])
+                .enter().append('marker')
+                .attr({
+                    'id': function (d) {
+                        return d;
+                    },
+                    'viewBox': '0 -3 6 6',
+                    'refX': function (d) {
+                        if (d.indexOf('FLOWFILE') >= 0) {
+                            return 16;
+                        } else {
+                            return 11;
+                        }
+                    },
+                    'refY': 0,
+                    'markerWidth': 6,
+                    'markerHeight': 6,
+                    'orient': 'auto',
+                    'fill': function (d) {
+                        if (d.indexOf('SELECTED') >= 0) {
+                            return '#ba554a';
+                        } else {
+                            return '#000000';
+                        }
+                    }
+                })
+                .append('path')
+                .attr('d', 'M0,-3 L6,0 L0,3');
+
+            // group everything together
+            var lineageContainer = svg.append('g')
+                .attr({
+                    'transform': 'translate(0, 0) scale(1)',
+                    'pointer-events': 'all',
+                    'class': 'lineage'
+                });
+
+            // select the nodes and links
+            var nodes = lineageContainer.selectAll('g.node');
+            var links = lineageContainer.selectAll('path.link');
+
+            var previousMillis = maxMillis;
+            var slide = function (event, ui) {
+                if (previousMillis > ui.value) {
+                    // the slider is descending
+
+                    // determine the nodes to hide
+                    var nodesToHide = nodes.filter(function (d) {
+                        return d.millis > ui.value && d.millis <= previousMillis;
+                    });
+                    var linksToHide = links.filter(function (d) {
+                        return d.millis > ui.value && d.millis <= previousMillis;
+                    });
+
+                    // hide applicable nodes and lines
+                    linksToHide.transition().duration(400).style('opacity', 0);
+                    nodesToHide.transition().delay(200).duration(400).style('opacity', 0);
+                } else {
+                    // the slider is ascending
+
+                    // determine the nodes to show
+                    var nodesToShow = nodes.filter(function (d) {
+                        return d.millis <= ui.value && d.millis > previousMillis;
+                    });
+                    var linksToShow = links.filter(function (d) {
+                        return d.millis <= ui.value && d.millis > previousMillis;
+                    });
+
+                    // show applicable nodes and lines
+                    nodesToShow.transition().duration(400).style('opacity', 1);
+                    linksToShow.transition().delay(200).duration(400).style('opacity', 1);
+                }
+
+                // update the event time
+                $('#event-time').text(formatEventTime(ui.value, provenanceTableCtrl));
+
+                // update the previous value
+                previousMillis = ui.value;
+            };
+
+            // set up a slider for the showing the timeline of events
+            var slider = $('#provenance-lineage-slider').slider({
+                min: minMillis,
+                max: maxMillis,
+                step: (maxMillis - minMillis) / config.sliderTickCount,
+                value: maxMillis,
+                change: slide,
+                slide: slide
+            });
+
+            // renders flowfile nodes
+            var renderFlowFile = function (flowfiles) {
+                flowfiles.classed('flowfile', true);
+
+                // node
+                flowfiles.append('circle')
+                    .attr({
+                        'r': 16,
+                        'fill': '#fff',
+                        'stroke': '#000',
+                        'stroke-width': 1.0
+                    })
+                    .on('mousedown', function (d) {
+                        // empty context menu if necessary
+                        $('#provenance-lineage-context-menu').hide().empty();
+
+                        // prevents the drag event when something other than the
+                        // left button is clicked
+                        if (d3.event.button !== 0) {
+                            d3.event.stopPropagation();
+                        }
+                    }, true)
+                    .on('mouseover', function (d) {
+                        links.filter(function (linkDatum) {
+                            return d.id === linkDatum.flowFileUuid;
+                        })
+                            .classed('selected', true)
+                            .attr('marker-end', function (d) {
+                                return 'url(#' + d.target.type + '-SELECTED)';
+                            });
+                    })
+                    .on('mouseout', function (d) {
+                        links.filter(function (linkDatum) {
+                            return d.id === linkDatum.flowFileUuid;
+                        }).classed('selected', false)
+                            .attr('marker-end', function (d) {
+                                return 'url(#' + d.target.type + ')';
+                            });
+                    });
+
+                var icon = flowfiles.append('g')
+                    .attr({
+                        'class': 'flowfile-icon',
+                        'transform': function (d) {
+                            return 'translate(-9,-9)';
+                        }
+                    }).append('text')
+                    .attr({
+                        'font-family': 'flowfont',
+                        'font-size': '18px',
+                        'fill': '#ad9897',
+                        'transform': function (d) {
+                            return 'translate(0,15)';
+                        }
+                    })
+                    .on('mousedown', function (d) {
+                        // empty context menu if necessary
+                        $('#provenance-lineage-context-menu').hide().empty();
+
+                        // prevents the drag event when something other than the
+                        // left button is clicked
+                        if (d3.event.button !== 0) {
+                            d3.event.stopPropagation();
+                        }
+                    }, true)
+                    .on('mouseover', function (d) {
+                        links.filter(function (linkDatum) {
+                            return d.id === linkDatum.flowFileUuid;
+                        })
+                            .classed('selected', true)
+                            .attr('marker-end', function (d) {
+                                return 'url(#' + d.target.type + '-SELECTED)';
+                            });
+                    })
+                    .on('mouseout', function (d) {
+                        links.filter(function (linkDatum) {
+                            return d.id === linkDatum.flowFileUuid;
+                        }).classed('selected', false)
+                            .attr('marker-end', function (d) {
+                                return 'url(#' + d.target.type + ')';
+                            });
+                    })
+                    .text(function (d) {
+                        return '\ue808'
+                    });
+            };
+
+            // renders event nodes
+            var renderEvent = function (events, provenanceTableCtrl) {
+                events
+                    .classed('event', true)
+                    .append('circle')
+                    .classed('selected', function (d) {
+                        return d.id === eventId;
+                    })
+                    .attr({
+                        'r': 8,
+                        'fill': '#aabbc3',
+                        'stroke': '#000',
+                        'stroke-width': 1.0,
+                        'id': function (d) {
+                            return 'event-node-' + d.id;
+                        }
+                    })
+                    .on('contextmenu', function (d) {
+                        // select the current node for a visible cue
+                        d3.select(this).classed('context', true);
+
+                        // empty an previous contents - in case they right click on the
+                        // node twice without closing the previous context menu
+                        $('#provenance-lineage-context-menu').hide().empty();
+
+                        var menuItems = [{
+                            'class': 'lineage-view-event',
+                            'text': 'View details',
+                            'click': function () {
+                                provenanceTableCtrl.showEventDetails(d.id, clusterNodeId);
+                            }
+                        }];
+
+                        // if this is a spawn event show appropriate actions
+                        if (d.eventType === 'SPAWN' || d.eventType === 'CLONE' || d.eventType === 'FORK' || d.eventType === 'JOIN' || d.eventType === 'REPLAY') {
+                            // starts the lineage expansion process
+                            var expandLineage = function (lineageRequest) {
+                                var lineageProgress = $('#lineage-percent-complete');
+
+                                // add support to cancel outstanding requests - when the button is pressed we
+                                // could be in one of two stages, 1) waiting to GET the status or 2)
+                                // in the process of GETting the status. Handle both cases by cancelling
+                                // the setTimeout (1) and by setting a flag to indicate that a request has
+                                // been request so we can ignore the results (2).
+
+                                var cancelled = false;
+                                var lineage = null;
+                                var lineageTimer = null;
+
+                                // update the progress bar value
+                                provenanceTableCtrl.updateProgress(lineageProgress, 0);
+
+                                // show the 'searching...' dialog
+                                $('#lineage-query-dialog').modal('setButtonModel', [{
+                                    buttonText: 'Cancel',
+                                    color: {
+                                        base: '#E3E8EB',
+                                        hover: '#C7D2D7',
+                                        text: '#004849'
+                                    },
+                                    handler: {
+                                        click: function () {
+                                            cancelled = true;
+
+                                            // we are waiting for the next poll attempt
+                                            if (lineageTimer !== null) {
+                                                // cancel it
+                                                clearTimeout(lineageTimer);
+
+                                                // cancel the provenance
+                                                closeDialog();
+                                            }
                                         }
                                     }
-                                }
-                            }]).modal('show');
+                                }]).modal('show');
 
 
-                            // closes the searching dialog and cancels the query on the server
-                            var closeDialog = function () {
-                                // cancel the provenance results since we've successfully processed the results
-                                if (nf.Common.isDefinedAndNotNull(lineage)) {
-                                    cancelLineage(lineage);
-                                }
+                                // closes the searching dialog and cancels the query on the server
+                                var closeDialog = function () {
+                                    // cancel the provenance results since we've successfully processed the results
+                                    if (common.isDefinedAndNotNull(lineage)) {
+                                        cancelLineage(lineage);
+                                    }
 
-                                // close the dialog
-                                $('#lineage-query-dialog').modal('hide');
-                            };
+                                    // close the dialog
+                                    $('#lineage-query-dialog').modal('hide');
+                                };
 
-                            // polls for the event lineage
-                            var pollLineage = function () {
-                                getLineage(lineage).done(function (response) {
+                                // polls for the event lineage
+                                var pollLineage = function () {
+                                    getLineage(lineage).done(function (response) {
+                                        lineage = response.lineage;
+
+                                        // process the lineage
+                                        processLineage();
+                                    }).fail(closeDialog);
+                                };
+
+                                // processes the event lineage
+                                var processLineage = function () {
+                                    // if the request was cancelled just ignore the current response
+                                    if (cancelled === true) {
+                                        closeDialog();
+                                        return;
+                                    }
+
+                                    // close the dialog if the results contain an error
+                                    if (!common.isEmpty(lineage.results.errors)) {
+                                        var errors = lineage.results.errors;
+                                        dialog.showOkDialog({
+                                            headerText: 'Process Lineage',
+                                            dialogContent: common.formatUnorderedList(errors)
+                                        });
+
+                                        closeDialog();
+                                        return;
+                                    }
+
+                                    // update the precent complete
+                                    provenanceTableCtrl.updateProgress(lineageProgress, lineage.percentCompleted);
+
+                                    // process the results if they are finished
+                                    if (lineage.finished === true) {
+                                        var results = lineage.results;
+
+                                        // ensure the events haven't aged off
+                                        if (results.nodes.length > 0) {
+                                            // update the lineage graph
+                                            renderEventLineage(results);
+                                        } else {
+                                            // inform the user that no results were found
+                                            dialog.showOkDialog({
+                                                headerText: 'Lineage Results',
+                                                dialogContent: 'The lineage search has completed successfully but there no results were found. The events may have aged off.'
+                                            });
+                                        }
+
+                                        // close the searching.. dialog
+                                        closeDialog();
+                                    } else {
+                                        lineageTimer = setTimeout(function () {
+                                            // clear the timer since we've been invoked
+                                            lineageTimer = null;
+
+                                            //  for the lineage
+                                            pollLineage();
+                                        }, 2000);
+                                    }
+                                };
+
+                                // once the query is submitted wait until its finished
+                                submitLineage(lineageRequest).done(function (response) {
                                     lineage = response.lineage;
 
-                                    // process the lineage
-                                    processLineage();
+                                    // process the lineage, if its not done computing wait 1 second before checking again
+                                    processLineage(1);
                                 }).fail(closeDialog);
                             };
 
-                            // processes the event lineage
-                            var processLineage = function () {
-                                // if the request was cancelled just ignore the current response
-                                if (cancelled === true) {
-                                    closeDialog();
-                                    return;
-                                }
-
-                                // close the dialog if the results contain an error
-                                if (!nf.Common.isEmpty(lineage.results.errors)) {
-                                    var errors = lineage.results.errors;
-                                    nf.Dialog.showOkDialog({
-                                        headerText: 'Process Lineage',
-                                        dialogContent: nf.Common.formatUnorderedList(errors)
-                                    });
-
-                                    closeDialog();
-                                    return;
-                                }
-
-                                // update the precent complete
-                                provenanceTableCtrl.updateProgress(lineageProgress, lineage.percentCompleted);
-
-                                // process the results if they are finished
-                                if (lineage.finished === true) {
-                                    var results = lineage.results;
-
-                                    // ensure the events haven't aged off
-                                    if (results.nodes.length > 0) {
-                                        // update the lineage graph
-                                        renderEventLineage(results);
-                                    } else {
-                                        // inform the user that no results were found
-                                        nf.Dialog.showOkDialog({
-                                            headerText: 'Lineage Results',
-                                            dialogContent: 'The lineage search has completed successfully but there no results were found. The events may have aged off.'
-                                        });
-                                    }
-
-                                    // close the searching.. dialog
-                                    closeDialog();
-                                } else {
-                                    lineageTimer = setTimeout(function () {
-                                        // clear the timer since we've been invoked
-                                        lineageTimer = null;
-
-                                        // for the lineage
-                                        pollLineage();
-                                    }, 2000);
-                                }
+                            // handles updating the lineage graph
+                            var renderEventLineage = function (lineageResults) {
+                                addLineage(lineageResults.nodes, lineageResults.links, provenanceTableCtrl);
                             };
 
-                            // once the query is submitted wait until its finished
-                            submitLineage(lineageRequest).done(function (response) {
-                                lineage = response.lineage;
+                            // collapses the lineage for the specified event in the specified direction
+                            var collapseLineage = function (eventId, provenanceTableCtrl) {
+                                // get the event in question and collapse in the appropriate direction
+                                provenanceTableCtrl.getEventDetails(eventId, clusterNodeId).done(function (response) {
+                                    var provenanceEvent = response.provenanceEvent;
+                                    var eventUuid = provenanceEvent.flowFileUuid;
+                                    var eventUuids = d3.set(provenanceEvent.childUuids);
 
-                                // process the lineage, if its not done computing wait 1 second before checking again
-                                processLineage(1);
-                            }).fail(closeDialog);
-                        };
+                                    // determines if the specified event should be removable based on if the collapsing is fanning in/out
+                                    var allowEventRemoval = function (fanIn, node) {
+                                        if (fanIn) {
+                                            return node.id !== eventId;
+                                        } else {
+                                            return node.flowFileUuid !== eventUuid && $.inArray(eventUuid, node.parentUuids) === -1;
+                                        }
+                                    };
 
-                        // handles updating the lineage graph
-                        var renderEventLineage = function (lineageResults) {
-                            addLineage(lineageResults.nodes, lineageResults.links, provenanceTableCtrl);
-                        };
+                                    // determines if the specified link should be removable based on if the collapsing is fanning in/out
+                                    var allowLinkRemoval = function (fanIn, link) {
+                                        if (fanIn) {
+                                            return true;
+                                        } else {
+                                            return link.flowFileUuid !== eventUuid;
+                                        }
+                                    };
 
-                        // collapses the lineage for the specified event in the specified direction
-                        var collapseLineage = function (eventId, provenanceTableCtrl) {
-                            // get the event in question and collapse in the appropriate direction
-                            provenanceTableCtrl.getEventDetails(eventId, clusterNodeId).done(function (response) {
-                                var provenanceEvent = response.provenanceEvent;
-                                var eventUuid = provenanceEvent.flowFileUuid;
-                                var eventUuids = d3.set(provenanceEvent.childUuids);
+                                    // the event is fan in if the flowfile uuid is in the children
+                                    var fanIn = $.inArray(eventUuid, provenanceEvent.childUuids) >= 0;
 
-                                // determines if the specified event should be removable based on if the collapsing is fanning in/out
-                                var allowEventRemoval = function (fanIn, node) {
-                                    if (fanIn) {
-                                        return node.id !== eventId;
-                                    } else {
-                                        return node.flowFileUuid !== eventUuid && $.inArray(eventUuid, node.parentUuids) === -1;
-                                    }
-                                };
+                                    // collapses the specified uuids
+                                    var collapse = function (uuids) {
+                                        var newUuids = false;
 
-                                // determines if the specified link should be removable based on if the collapsing is fanning in/out
-                                var allowLinkRemoval = function (fanIn, link) {
-                                    if (fanIn) {
-                                        return true;
-                                    } else {
-                                        return link.flowFileUuid !== eventUuid;
-                                    }
-                                };
+                                        // consider each node for being collapsed
+                                        $.each(nodeLookup.values(), function (_, node) {
+                                            // if this node is in the uuids remove it unless its the original event or is part of this and another lineage
+                                            if (uuids.has(node.flowFileUuid) && allowEventRemoval(fanIn, node)) {
+                                                // remove it from the look lookup
+                                                nodeLookup.remove(node.id);
 
-                                // the event is fan in if the flowfile uuid is in the children
-                                var fanIn = $.inArray(eventUuid, provenanceEvent.childUuids) >= 0;
+                                                // include all related outgoing flow file uuids
+                                                $.each(node.outgoing, function (_, outgoing) {
+                                                    if (!uuids.has(outgoing.flowFileUuid)) {
+                                                        uuids.add(outgoing.flowFileUuid);
+                                                        newUuids = true;
+                                                    }
+                                                });
+                                            }
+                                        });
 
-                                // collapses the specified uuids
-                                var collapse = function (uuids) {
-                                    var newUuids = false;
+                                        // update the link data
+                                        $.each(linkLookup.values(), function (_, link) {
+                                            // if this link is in the uuids remove it
+                                            if (uuids.has(link.flowFileUuid) && allowLinkRemoval(fanIn, link)) {
+                                                // remove it from the link lookup
+                                                linkLookup.remove(link.id);
 
-                                    // consider each node for being collapsed
-                                    $.each(nodeLookup.values(), function (_, node) {
-                                        // if this node is in the uuids remove it unless its the original event or is part of this and another lineage
-                                        if (uuids.has(node.flowFileUuid) && allowEventRemoval(fanIn, node)) {
-                                            // remove it from the look lookup
-                                            nodeLookup.remove(node.id);
-
-                                            // include all related outgoing flow file uuids
-                                            $.each(node.outgoing, function (_, outgoing) {
-                                                if (!uuids.has(outgoing.flowFileUuid)) {
-                                                    uuids.add(outgoing.flowFileUuid);
+                                                // add a related uuid that needs to be collapse
+                                                var next = link.target;
+                                                if (!uuids.has(next.flowFileUuid)) {
+                                                    uuids.add(next.flowFileUuid);
                                                     newUuids = true;
                                                 }
-                                            });
-                                        }
-                                    });
-
-                                    // update the link data
-                                    $.each(linkLookup.values(), function (_, link) {
-                                        // if this link is in the uuids remove it
-                                        if (uuids.has(link.flowFileUuid) && allowLinkRemoval(fanIn, link)) {
-                                            // remove it from the link lookup
-                                            linkLookup.remove(link.id);
-
-                                            // add a related uuid that needs to be collapse
-                                            var next = link.target;
-                                            if (!uuids.has(next.flowFileUuid)) {
-                                                uuids.add(next.flowFileUuid);
-                                                newUuids = true;
                                             }
+                                        });
+
+                                        // collapse any related uuids
+                                        if (newUuids) {
+                                            collapse(uuids);
                                         }
+                                    };
+
+                                    // collapse the specified uuids
+                                    collapse(eventUuids);
+
+                                    // update the layout
+                                    refresh(provenanceTableCtrl);
+                                });
+                            };
+
+                            // add menu items
+                            menuItems.push({
+                                'class': 'lineage-view-parents',
+                                'text': 'Find parents',
+                                'click': function () {
+                                    expandLineage({
+                                        lineageRequestType: 'PARENTS',
+                                        eventId: d.id,
+                                        clusterNodeId: clusterNodeId
                                     });
-
-                                    // collapse any related uuids
-                                    if (newUuids) {
-                                        collapse(uuids);
-                                    }
-                                };
-
-                                // collapse the specified uuids
-                                collapse(eventUuids);
-
-                                // update the layout
-                                refresh(provenanceTableCtrl);
+                                }
+                            }, {
+                                'class': 'lineage-view-children',
+                                'text': 'Expand',
+                                'click': function () {
+                                    expandLineage({
+                                        lineageRequestType: 'CHILDREN',
+                                        eventId: d.id,
+                                        clusterNodeId: clusterNodeId
+                                    });
+                                }
+                            }, {
+                                'class': 'lineage-collapse-children',
+                                'text': 'Collapse',
+                                'click': function () {
+                                    // collapse the children lineage
+                                    collapseLineage(d.id, provenanceTableCtrl);
+                                }
                             });
-                        };
-
-                        // add menu items
-                        menuItems.push({
-                            'class': 'lineage-view-parents',
-                            'text': 'Find parents',
-                            'click': function () {
-                                expandLineage({
-                                    lineageRequestType: 'PARENTS',
-                                    eventId: d.id,
-                                    clusterNodeId: clusterNodeId
-                                });
-                            }
-                        }, {
-                            'class': 'lineage-view-children',
-                            'text': 'Expand',
-                            'click': function () {
-                                expandLineage({
-                                    lineageRequestType: 'CHILDREN',
-                                    eventId: d.id,
-                                    clusterNodeId: clusterNodeId
-                                });
-                            }
-                        }, {
-                            'class': 'lineage-collapse-children',
-                            'text': 'Collapse',
-                            'click': function () {
-                                // collapse the children lineage
-                                collapseLineage(d.id, provenanceTableCtrl);
-                            }
-                        });
-                    }
-
-                    // show the context menu for an event
-                    addContextMenuItems(menuItems);
-                });
-
-            events
-                .append('text')
-                .attr({
-                    'id': function (d) {
-                        return 'event-text-' + d.id;
-                    },
-                    'class': 'event-type'
-                })
-                .classed('expand-parents', function (d) {
-                    return d.eventType === 'SPAWN';
-                })
-                .classed('expand-children', function (d) {
-                    return d.eventType === 'SPAWN';
-                })
-                .each(function (d) {
-                    var label = d3.select(this);
-                    if (d.eventType === 'CONTENT_MODIFIED' || d.eventType === 'ATTRIBUTES_MODIFIED') {
-                        var lines = [];
-                        if (d.eventType === 'CONTENT_MODIFIED') {
-                            lines.push('CONTENT');
-                        } else {
-                            lines.push('ATTRIBUTES');
                         }
-                        lines.push('MODIFIED');
 
-                        // append each line
-                        $.each(lines, function (i, line) {
-                            label.append('tspan')
-                                .attr('x', '0')
-                                .attr('dy', '1.2em')
-                                .text(function () {
-                                    return line;
-                                });
-                        });
-                        label.attr('transform', 'translate(10,-14)');
-                    } else {
-                        label.text(d.eventType).attr({
-                            'x': 10,
-                            'y': 4
-                        });
-                    }
-                });
-        };
-
-        // updates the ui
-        var update = function (provenanceTableCtrl) {
-            // update the node data
-            nodes = nodes.data(nodeLookup.values(), function (d) {
-                return d.id;
-            });
-
-            // add new nodes
-            var nodesEntered = nodes.enter()
-                .append('g')
-                .attr('id', function (d) {
-                    return 'lineage-group-' + d.id;
-                })
-                .classed('node', true)
-                .attr('transform', function (d) {
-                    if (d.incoming.length === 0) {
-                        return 'translate(' + (width / 2) + ',50)';
-                    } else {
-                        return 'translate(' + d.incoming[0].source.x + ',' + d.incoming[0].source.y + ')';
-                    }
-                })
-                .style('opacity', 0);
-
-            // treat flowfiles and events differently
-            nodesEntered.filter(function (d) {
-                return d.type === 'FLOWFILE';
-            }).call(renderFlowFile);
-            nodesEntered.filter(function (d) {
-                return d.type === 'EVENT';
-            }).call(renderEvent, provenanceTableCtrl);
-
-            // update the nodes
-            nodes
-                .transition()
-                .duration(400)
-                .attr('transform', function (d) {
-                    return 'translate(' + d.x + ', ' + d.y + ')';
-                })
-                .style('opacity', 1);
-
-            // remove old nodes
-            nodes.exit()
-                .transition()
-                .delay(200)
-                .duration(400)
-                .attr('transform', function (d) {
-                    if (d.incoming.length === 0) {
-                        return 'translate(' + (width / 2) + ',50)';
-                    } else {
-                        return 'translate(' + d.incoming[0].source.x + ',' + d.incoming[0].source.y + ')';
-                    }
-                })
-                .style('opacity', 0)
-                .remove();
-
-            // update the link data
-            links = links.data(linkLookup.values(), function (d) {
-                return d.id;
-            });
-
-            // add new links
-            links.enter()
-                .insert('path', '.node')
-                .attr({
-                    'class': 'link',
-                    'stroke-width': 1.5,
-                    'stroke': '#000',
-                    'fill': 'none',
-                    'd': function (d) {
-                        return 'M' + d.source.x + ',' + d.source.y + 'L' + d.source.x + ',' + d.source.y;
-                    }
-                })
-                .style('opacity', 0);
-
-            // update the links
-            links
-                .attr('marker-end', '')
-                .transition()
-                .delay(200)
-                .duration(400)
-                .attr({
-                    'marker-end': function (d) {
-                        return 'url(#' + d.target.type + ')';
-                    },
-                    'd': function (d) {
-                        return 'M' + d.source.x + ',' + d.source.y + 'L' + d.target.x + ',' + d.target.y;
-                    }
-                })
-                .style('opacity', 1);
-
-            // remove old links
-            links.exit()
-                .attr('marker-end', '')
-                .transition()
-                .duration(400)
-                .attr('d', function (d) {
-                    return 'M' + d.source.x + ',' + d.source.y + 'L' + d.source.x + ',' + d.source.y;
-                })
-                .style('opacity', 0)
-                .remove();
-        };
-
-        // show the lineage pane and hide the event search results
-        $('#provenance-lineage').show();
-        $('#provenance-event-search').hide();
-
-        // add the initial lineage
-        addLineage(lineageResults.nodes, lineageResults.links, provenanceTableCtrl);
-    };
-
-    function ProvenanceLineageCtrl() {
-    }
-
-    ProvenanceLineageCtrl.prototype = {
-        constructor: ProvenanceLineageCtrl,
-
-        /**
-         * Initializes the lineage graph.
-         */
-        init: function () {
-            $('#provenance-lineage-closer').on('click', function () {
-                // remove the svg from the dom
-                $('#provenance-lineage svg').remove();
-
-                // destroy the slider
-                $('#provenance-lineage-slider').slider('destroy');
-
-                // view the appropriate panel
-                $('#provenance-event-search').show();
-                $('#provenance-lineage').hide();
-
-                //reset table size
-                $('#provenance-table').data('gridInstance').resizeCanvas();
-            });
-
-             $('#provenance-lineage-downloader').on('click', function () {
-                 var svg = $('#provenance-lineage-container').html();
-
-                 // get the lineage to determine the actual dimensions
-                 var lineage = $('g.lineage')[0];
-                 var bbox = lineage.getBBox();
-
-                 // adjust to provide some padding
-                 var height = bbox.height + 60;
-                 var width = bbox.width + 60;
-                 var offsetX = bbox.x - 15;
-                 var offsetY = bbox.y - 15;
-
-                 // replace the svg height, width with the actual values
-                 svg = svg.replace(/height=".*?"/, 'height="' + height + '"');
-                 svg = svg.replace(/width=".*?"/, 'width="' + width + '"');
-
-                 // remove any transform applied to the lineage
-                 svg = svg.replace(/transform=".*?"/, '');
-
-                 // adjust link positioning based on the offset of the bounding box
-                 svg = svg.replace(/]*?)d="M[\s]?([^\s]+?)[\s,]([^\s]+?)[\s]?L[\s]?([^\s]+?)[\s,]([^\s]+?)[\s]?"(.*?)>/g, function (match, before, rawMoveX, rawMoveY, rawLineX, rawLineY, after) {
-                     // this regex captures the content before and after the d attribute in order to ensure that it contains the link class.
-                     // within the svg image, there are other paths that are (within markers) that we do not want to offset
-                     if (before.indexOf('link') === -1 && after.indexOf('link') === -1) {
-                         return match;
-                     }
-
-                     var moveX = parseFloat(rawMoveX) - offsetX;
-                     var moveY = parseFloat(rawMoveY) - offsetY;
-                     var lineX = parseFloat(rawLineX) - offsetX;
-                     var lineY = parseFloat(rawLineY) - offsetY;
-                     return '';
-                 });
-
-                 // adjust node positioning based on the offset of the bounding box
-                 svg = svg.replace(/]*?)transform="translate\([\s]?([^\s]+?)[\s,]([^\s]+?)[\s]?\)"(.*?)>/g, function (match, before, rawX, rawY, after) {
-                     // this regex captures the content before and after the transform attribute in order to ensure that it contains the
-                     // node class. only node groups are translated with absolute coordinates since all other translated groups fall under
-                     // a parent that is already positioned. this makes their translation relative and not appropriate for this adjustment
-                     if (before.indexOf('node') === -1 && after.indexOf('node') === -1) {
-                         return match;
-                     }
-
-                     var x = parseFloat(rawX) - offsetX;
-                     var y = parseFloat(rawY) - offsetY;
-                     return '';
-                 });
-
-                 // namespaces
-                 svg = svg.replace(/]*)/, function (match) {
-                     var svgString = match;
-                     var nsSVG = ' xmlns="http://www.w3.org/2000/svg"';
-                     var nsXlink = ' xmlns:xlink="http://www.w3.org/1999/xlink"';
-                     var version = ' version="1.1"';
-
-                     if (svgString.indexOf(nsSVG) === -1) {
-                         svgString += nsSVG;
-                     }
-
-                     if (svgString.indexOf(nsXlink) === -1) {
-                         svgString += nsXlink;
-                     }
-
-                     if (svgString.indexOf(version) === -1) {
-                         svgString += version;
-                     }
-
-                     return svgString;
-                 });
-
-                 // doctype
-                 svg = '\n' + svg;
-
-                 downloadSvgFile(svg);
-             });
-
-            initLineageQueryDialog();
-        },
-
-        /**
-         * Shows the lineage for the specified flowfile uuid.
-         *
-         * @param {string} flowFileUuid     The flowfile uuid
-         * @param {integer} eventId         The id of the event
-         * @param {string} clusterNodeId    The id of the node in the cluster where this event/flowfile originated
-         */
-        showLineage: function (flowFileUuid, eventId, clusterNodeId, provenanceTableCtrl) {
-            var lineageProgress = $('#lineage-percent-complete');
-
-            // add support to cancel outstanding requests - when the button is pressed we
-            // could be in one of two stages, 1) waiting to GET the status or 2)
-            // in the process of GETting the status. Handle both cases by cancelling
-            // the setTimeout (1) and by setting a flag to indicate that a request has
-            // been request so we can ignore the results (2).
-
-            var cancelled = false;
-            var lineage = null;
-            var lineageTimer = null;
-
-            // build the lineage request
-            var lineageRequest = {
-                lineageRequestType: 'FLOWFILE',
-                uuid: flowFileUuid,
-                clusterNodeId: clusterNodeId,
-                eventId: eventId
-            };
-
-            // update the progress bar value
-            provenanceTableCtrl.updateProgress(lineageProgress, 0);
-
-            // show the 'searching...' dialog
-            $('#lineage-query-dialog').modal('setButtonModel', [{
-                buttonText: 'Cancel',
-                color: {
-                    base: '#E3E8EB',
-                    hover: '#C7D2D7',
-                    text: '#004849'
-                },
-                handler: {
-                    click: function () {
-                        cancelled = true;
-
-                        // we are waiting for the next poll attempt
-                        if (lineageTimer !== null) {
-                            // cancel it
-                            clearTimeout(lineageTimer);
-
-                            // cancel the provenance
-                            closeDialog();
-                        }
-                    }
-                }
-            }]).modal('show');
-
-            // closes the searching dialog and cancels the query on the server
-            var closeDialog = function () {
-                // cancel the provenance results since we've successfully processed the results
-                if (nf.Common.isDefinedAndNotNull(lineage)) {
-                    cancelLineage(lineage);
-                }
-
-                // close the dialog
-                $('#lineage-query-dialog').modal('hide');
-            };
-
-            // polls the server for the status of the lineage
-            var pollLineage = function (provenanceTableCtrl) {
-                getLineage(lineage).done(function (response) {
-                    lineage = response.lineage;
-
-                    // process the lineage
-                    processLineage(provenanceTableCtrl);
-                }).fail(closeDialog);
-            };
-
-            var processLineage = function (provenanceTableCtrl) {
-                // if the request was cancelled just ignore the current response
-                if (cancelled === true) {
-                    closeDialog();
-                    return;
-                }
-
-                // close the dialog if the results contain an error
-                if (!nf.Common.isEmpty(lineage.results.errors)) {
-                    var errors = lineage.results.errors;
-                    nf.Dialog.showOkDialog({
-                        headerText: 'Process Lineage',
-                        dialogContent: nf.Common.formatUnorderedList(errors)
+                        // show the context menu for an event
+                        addContextMenuItems(menuItems);
                     });
 
-                    closeDialog();
-                    return;
-                }
+                events
+                    .append('text')
+                    .attr({
+                        'id': function (d) {
+                            return 'event-text-' + d.id;
+                        },
+                        'class': 'event-type'
+                    })
+                    .classed('expand-parents', function (d) {
+                        return d.eventType === 'SPAWN';
+                    })
+                    .classed('expand-children', function (d) {
+                        return d.eventType === 'SPAWN';
+                    })
+                    .each(function (d) {
+                        var label = d3.select(this);
+                        if (d.eventType === 'CONTENT_MODIFIED' || d.eventType === 'ATTRIBUTES_MODIFIED') {
+                            var lines = [];
+                            if (d.eventType === 'CONTENT_MODIFIED') {
+                                lines.push('CONTENT');
+                            } else {
+                                lines.push('ATTRIBUTES');
+                            }
+                            lines.push('MODIFIED');
 
-                // update the precent complete
-                provenanceTableCtrl.updateProgress(lineageProgress, lineage.percentCompleted);
-
-                // process the results if they are finished
-                if (lineage.finished === true) {
-                    // render the graph
-                    renderLineage(lineage.results, eventId, clusterNodeId, provenanceTableCtrl);
-
-                    // close the searching.. dialog
-                    closeDialog();
-                } else {
-                    // start the wait to poll again
-                    lineageTimer = setTimeout(function () {
-                        // clear the timer since we've been invoked
-                        lineageTimer = null;
-
-                        // poll lineage
-                        pollLineage(provenanceTableCtrl);
-                    }, 2000);
-                }
+                            // append each line
+                            $.each(lines, function (i, line) {
+                                label.append('tspan')
+                                    .attr('x', '0')
+                                    .attr('dy', '1.2em')
+                                    .text(function () {
+                                        return line;
+                                    });
+                            });
+                            label.attr('transform', 'translate(10,-14)');
+                        } else {
+                            label.text(d.eventType).attr({
+                                'x': 10,
+                                'y': 4
+                            });
+                        }
+                    });
             };
 
-            // once the query is submitted wait until its finished
-            submitLineage(lineageRequest).done(function (response) {
-                lineage = response.lineage;
+            // updates the ui
+            var update = function (provenanceTableCtrl) {
+                // update the node data
+                nodes = nodes.data(nodeLookup.values(), function (d) {
+                    return d.id;
+                });
 
-                // process the results, if they are not done wait 1 second before trying again
-                processLineage(provenanceTableCtrl);
-            }).fail(closeDialog);
+                // add new nodes
+                var nodesEntered = nodes.enter()
+                    .append('g')
+                    .attr('id', function (d) {
+                        return 'lineage-group-' + d.id;
+                    })
+                    .classed('node', true)
+                    .attr('transform', function (d) {
+                        if (d.incoming.length === 0) {
+                            return 'translate(' + (width / 2) + ',50)';
+                        } else {
+                            return 'translate(' + d.incoming[0].source.x + ',' + d.incoming[0].source.y + ')';
+                        }
+                    })
+                    .style('opacity', 0);
+
+                // treat flowfiles and events differently
+                nodesEntered.filter(function (d) {
+                    return d.type === 'FLOWFILE';
+                }).call(renderFlowFile);
+                nodesEntered.filter(function (d) {
+                    return d.type === 'EVENT';
+                }).call(renderEvent, provenanceTableCtrl);
+
+                // update the nodes
+                nodes
+                    .transition()
+                    .duration(400)
+                    .attr('transform', function (d) {
+                        return 'translate(' + d.x + ', ' + d.y + ')';
+                    })
+                    .style('opacity', 1);
+
+                // remove old nodes
+                nodes.exit()
+                    .transition()
+                    .delay(200)
+                    .duration(400)
+                    .attr('transform', function (d) {
+                        if (d.incoming.length === 0) {
+                            return 'translate(' + (width / 2) + ',50)';
+                        } else {
+                            return 'translate(' + d.incoming[0].source.x + ',' + d.incoming[0].source.y + ')';
+                        }
+                    })
+                    .style('opacity', 0)
+                    .remove();
+
+                // update the link data
+                links = links.data(linkLookup.values(), function (d) {
+                    return d.id;
+                });
+
+                // add new links
+                links.enter()
+                    .insert('path', '.node')
+                    .attr({
+                        'class': 'link',
+                        'stroke-width': 1.5,
+                        'stroke': '#000',
+                        'fill': 'none',
+                        'd': function (d) {
+                            return 'M' + d.source.x + ',' + d.source.y + 'L' + d.source.x + ',' + d.source.y;
+                        }
+                    })
+                    .style('opacity', 0);
+
+                // update the links
+                links
+                    .attr('marker-end', '')
+                    .transition()
+                    .delay(200)
+                    .duration(400)
+                    .attr({
+                        'marker-end': function (d) {
+                            return 'url(#' + d.target.type + ')';
+                        },
+                        'd': function (d) {
+                            return 'M' + d.source.x + ',' + d.source.y + 'L' + d.target.x + ',' + d.target.y;
+                        }
+                    })
+                    .style('opacity', 1);
+
+                // remove old links
+                links.exit()
+                    .attr('marker-end', '')
+                    .transition()
+                    .duration(400)
+                    .attr('d', function (d) {
+                        return 'M' + d.source.x + ',' + d.source.y + 'L' + d.source.x + ',' + d.source.y;
+                    })
+                    .style('opacity', 0)
+                    .remove();
+            };
+
+            // show the lineage pane and hide the event search results
+            $('#provenance-lineage').show();
+            $('#provenance-event-search').hide();
+
+            // add the initial lineage
+            addLineage(lineageResults.nodes, lineageResults.links, provenanceTableCtrl);
+        };
+
+        function ProvenanceLineageCtrl() {
         }
-    }
 
-    var provenanceLineageCtrl = new ProvenanceLineageCtrl();
-    return provenanceLineageCtrl;
-};
\ No newline at end of file
+        ProvenanceLineageCtrl.prototype = {
+            constructor: ProvenanceLineageCtrl,
+
+            /**
+             * Initializes the lineage graph.
+             */
+            init: function () {
+                $('#provenance-lineage-closer').on('click', function () {
+                    // remove the svg from the dom
+                    $('#provenance-lineage svg').remove();
+
+                    // destroy the slider
+                    $('#provenance-lineage-slider').slider('destroy');
+
+                    // view the appropriate panel
+                    $('#provenance-event-search').show();
+                    $('#provenance-lineage').hide();
+
+                    //reset table size
+                    $('#provenance-table').data('gridInstance').resizeCanvas();
+                });
+
+                $('#provenance-lineage-downloader').on('click', function () {
+                    var svg = $('#provenance-lineage-container').html();
+
+                    // get the lineage to determine the actual dimensions
+                    var lineage = $('g.lineage')[0];
+                    var bbox = lineage.getBBox();
+
+                    // adjust to provide some padding
+                    var height = bbox.height + 60;
+                    var width = bbox.width + 60;
+                    var offsetX = bbox.x - 15;
+                    var offsetY = bbox.y - 15;
+
+                    // replace the svg height, width with the actual values
+                    svg = svg.replace(/height=".*?"/, 'height="' + height + '"');
+                    svg = svg.replace(/width=".*?"/, 'width="' + width + '"');
+
+                    // remove any transform applied to the lineage
+                    svg = svg.replace(/transform=".*?"/, '');
+
+                    // adjust link positioning based on the offset of the bounding box
+                    svg = svg.replace(/]*?)d="M[\s]?([^\s]+?)[\s,]([^\s]+?)[\s]?L[\s]?([^\s]+?)[\s,]([^\s]+?)[\s]?"(.*?)>/g, function (match, before, rawMoveX, rawMoveY, rawLineX, rawLineY, after) {
+                        // this regex captures the content before and after the d attribute in order to ensure that it contains the link class.
+                        // within the svg image, there are other paths that are (within markers) that we do not want to offset
+                        if (before.indexOf('link') === -1 && after.indexOf('link') === -1) {
+                            return match;
+                        }
+
+                        var moveX = parseFloat(rawMoveX) - offsetX;
+                        var moveY = parseFloat(rawMoveY) - offsetY;
+                        var lineX = parseFloat(rawLineX) - offsetX;
+                        var lineY = parseFloat(rawLineY) - offsetY;
+                        return '';
+                    });
+
+                    // adjust node positioning based on the offset of the bounding box
+                    svg = svg.replace(/]*?)transform="translate\([\s]?([^\s]+?)[\s,]([^\s]+?)[\s]?\)"(.*?)>/g, function (match, before, rawX, rawY, after) {
+                        // this regex captures the content before and after the transform attribute in order to ensure that it contains the
+                        // node class. only node groups are translated with absolute coordinates since all other translated groups fall under
+                        // a parent that is already positioned. this makes their translation relative and not appropriate for this adjustment
+                        if (before.indexOf('node') === -1 && after.indexOf('node') === -1) {
+                            return match;
+                        }
+
+                        var x = parseFloat(rawX) - offsetX;
+                        var y = parseFloat(rawY) - offsetY;
+                        return '';
+                    });
+
+                    // namespaces
+                    svg = svg.replace(/]*)/, function (match) {
+                        var svgString = match;
+                        var nsSVG = ' xmlns="http://www.w3.org/2000/svg"';
+                        var nsXlink = ' xmlns:xlink="http://www.w3.org/1999/xlink"';
+                        var version = ' version="1.1"';
+
+                        if (svgString.indexOf(nsSVG) === -1) {
+                            svgString += nsSVG;
+                        }
+
+                        if (svgString.indexOf(nsXlink) === -1) {
+                            svgString += nsXlink;
+                        }
+
+                        if (svgString.indexOf(version) === -1) {
+                            svgString += version;
+                        }
+
+                        return svgString;
+                    });
+
+                    // doctype
+                    svg = '\n' + svg;
+
+                    downloadSvgFile(svg);
+                });
+
+                initLineageQueryDialog();
+            },
+
+            /**
+             * Shows the lineage for the specified flowfile uuid.
+             *
+             * @param {string} flowFileUuid     The flowfile uuid
+             * @param {integer} eventId         The id of the event
+             * @param {string} clusterNodeId    The id of the node in the cluster where this event/flowfile originated
+             */
+            showLineage: function (flowFileUuid, eventId, clusterNodeId, provenanceTableCtrl) {
+                var lineageProgress = $('#lineage-percent-complete');
+
+                // add support to cancel outstanding requests - when the button is pressed we
+                // could be in one of two stages, 1) waiting to GET the status or 2)
+                // in the process of GETting the status. Handle both cases by cancelling
+                // the setTimeout (1) and by setting a flag to indicate that a request has
+                // been request so we can ignore the results (2).
+
+                var cancelled = false;
+                var lineage = null;
+                var lineageTimer = null;
+
+                // build the lineage request
+                var lineageRequest = {
+                    lineageRequestType: 'FLOWFILE',
+                    uuid: flowFileUuid,
+                    clusterNodeId: clusterNodeId,
+                    eventId: eventId
+                };
+
+                // update the progress bar value
+                provenanceTableCtrl.updateProgress(lineageProgress, 0);
+
+                // show the 'searching...' dialog
+                $('#lineage-query-dialog').modal('setButtonModel', [{
+                    buttonText: 'Cancel',
+                    color: {
+                        base: '#E3E8EB',
+                        hover: '#C7D2D7',
+                        text: '#004849'
+                    },
+                    handler: {
+                        click: function () {
+                            cancelled = true;
+
+                            // we are waiting for the next poll attempt
+                            if (lineageTimer !== null) {
+                                // cancel it
+                                clearTimeout(lineageTimer);
+
+                                // cancel the provenance
+                                closeDialog();
+                            }
+                        }
+                    }
+                }]).modal('show');
+
+                // closes the searching dialog and cancels the query on the server
+                var closeDialog = function () {
+                    // cancel the provenance results since we've successfully processed the results
+                    if (common.isDefinedAndNotNull(lineage)) {
+                        cancelLineage(lineage);
+                    }
+
+                    // close the dialog
+                    $('#lineage-query-dialog').modal('hide');
+                };
+
+                // polls the server for the status of the lineage
+                var pollLineage = function (provenanceTableCtrl) {
+                    getLineage(lineage).done(function (response) {
+                        lineage = response.lineage;
+
+                        // process the lineage
+                        processLineage(provenanceTableCtrl);
+                    }).fail(closeDialog);
+                };
+
+                var processLineage = function (provenanceTableCtrl) {
+                    // if the request was cancelled just ignore the current response
+                    if (cancelled === true) {
+                        closeDialog();
+                        return;
+                    }
+
+                    // close the dialog if the results contain an error
+                    if (!common.isEmpty(lineage.results.errors)) {
+                        var errors = lineage.results.errors;
+                        dialog.showOkDialog({
+                            headerText: 'Process Lineage',
+                            dialogContent: common.formatUnorderedList(errors)
+                        });
+
+                        closeDialog();
+                        return;
+                    }
+
+                    // update the precent complete
+                    provenanceTableCtrl.updateProgress(lineageProgress, lineage.percentCompleted);
+
+                    // process the results if they are finished
+                    if (lineage.finished === true) {
+                        // render the graph
+                        renderLineage(lineage.results, eventId, clusterNodeId, provenanceTableCtrl);
+
+                        // close the searching.. dialog
+                        closeDialog();
+                    } else {
+                        // start the wait to poll again
+                        lineageTimer = setTimeout(function () {
+                            // clear the timer since we've been invoked
+                            lineageTimer = null;
+
+                            //  poll lineage
+                            pollLineage(provenanceTableCtrl);
+                        }, 2000);
+                    }
+                };
+
+                // once the query is submitted wait until its finished
+                submitLineage(lineageRequest).done(function (response) {
+                    lineage = response.lineage;
+
+                    // process the results, if they are not done wait 1 second before trying again
+                    processLineage(provenanceTableCtrl);
+                }).fail(closeDialog);
+            }
+        }
+
+        var provenanceLineageCtrl = new ProvenanceLineageCtrl();
+        return provenanceLineageCtrl;
+    };
+
+    return mySelf;
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-table.js
index 7da859317e..2826e3a433 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-table.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-table.js
@@ -15,419 +15,1152 @@
  * limitations under the License.
  */
 
-/* global nf, top, Slick */
+/* global nf, top, define, module, require, exports */
 
-nf.ng.ProvenanceTable = function (provenanceLineageCtrl) {
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'Slick',
+                'nf.Common',
+                'nf.Dialog',
+                'nf.ErrorHandler',
+                'nf.Storage',
+                'nf.ng.Bridge'],
+            function ($, Slick, common, dialog, errorHandler, storage, angularBridge) {
+                return (nf.ng.ProvenanceTable = factory($, Slick, common, dialog, errorHandler, storage, angularBridge));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.ng.ProvenanceTable =
+            factory(require('jquery'),
+                require('Slick'),
+                require('nf.Common'),
+                require('nf.Dialog'),
+                require('nf.ErrorHandler'),
+                require('nf.Storage'),
+                require('nf.ng.Bridge')));
+    } else {
+        nf.ng.ProvenanceTable = factory(root.$,
+            root.Slick,
+            root.nf.Common,
+            root.nf.Dialog,
+            root.nf.ErrorHandler,
+            root.nf.Storage,
+            root.nf.ng.Bridge);
+    }
+}(this, function ($, Slick, common, dialog, errorHandler, storage, angularBridge) {
     'use strict';
 
-    /**
-     * Configuration object used to hold a number of configuration items.
-     */
-    var config = {
-        maxResults: 1000,
-        defaultStartTime: '00:00:00',
-        defaultEndTime: '23:59:59',
-        styles: {
-            hidden: 'hidden'
-        },
-        urls: {
-            searchOptions: '../nifi-api/provenance/search-options',
-            replays: '../nifi-api/provenance-events/replays',
-            provenance: '../nifi-api/provenance',
-            provenanceEvents: '../nifi-api/provenance-events/',
-            clusterSearch: '../nifi-api/flow/cluster/search-results',
-            d3Script: 'js/d3/d3.min.js',
-            lineageScript: 'js/nf/provenance/nf-provenance-lineage.js',
-            uiExtensionToken: '../nifi-api/access/ui-extension-token',
-            downloadToken: '../nifi-api/access/download-token'
-        }
-    };
+    var nfProvenanceTable = function (provenanceLineageCtrl) {
+        'use strict';
 
-    /**
-     * The last search performed
-     */
-    var cachedQuery = {};
-
-    /**
-     * Downloads the content for the provenance event that is currently loaded in the specified direction.
-     *
-     * @param {string} direction
-     */
-    var downloadContent = function (direction) {
-        var eventId = $('#provenance-event-id').text();
-
-        // build the url
-        var dataUri = config.urls.provenanceEvents + encodeURIComponent(eventId) + '/content/' + encodeURIComponent(direction);
-
-        // perform the request once we've received a token
-        nf.Common.getAccessToken(config.urls.downloadToken).done(function (downloadToken) {
-            var parameters = {};
-
-            // conditionally include the ui extension token
-            if (!nf.Common.isBlank(downloadToken)) {
-                parameters['access_token'] = downloadToken;
+        /**
+         * Configuration object used to hold a number of configuration items.
+         */
+        var config = {
+            maxResults: 1000,
+            defaultStartTime: '00:00:00',
+            defaultEndTime: '23:59:59',
+            styles: {
+                hidden: 'hidden'
+            },
+            urls: {
+                searchOptions: '../nifi-api/provenance/search-options',
+                replays: '../nifi-api/provenance-events/replays',
+                provenance: '../nifi-api/provenance',
+                provenanceEvents: '../nifi-api/provenance-events/',
+                clusterSearch: '../nifi-api/flow/cluster/search-results',
+                d3Script: 'js/d3/d3.min.js',
+                lineageScript: 'js/nf/provenance/nf-provenance-lineage.js',
+                uiExtensionToken: '../nifi-api/access/ui-extension-token',
+                downloadToken: '../nifi-api/access/download-token'
             }
+        };
 
-            // conditionally include the cluster node id
-            var clusterNodeId = $('#provenance-event-cluster-node-id').text();
-            if (!nf.Common.isBlank(clusterNodeId)) {
-                parameters['clusterNodeId'] = clusterNodeId;
-            }
+        /**
+         * The last search performed
+         */
+        var cachedQuery = {};
 
-            // open the url
-            if ($.isEmptyObject(parameters)) {
-                window.open(dataUri);
-            } else {
-                window.open(dataUri + '?' + $.param(parameters));
-            }
-        }).fail(function () {
-            nf.Dialog.showOkDialog({
-                headerText: 'Provenance',
-                dialogContent: 'Unable to generate access token for downloading content.'
+        /**
+         * Downloads the content for the provenance event that is currently loaded in the specified direction.
+         *
+         * @param {string} direction
+         */
+        var downloadContent = function (direction) {
+            var eventId = $('#provenance-event-id').text();
+
+            // build the url
+            var dataUri = config.urls.provenanceEvents + encodeURIComponent(eventId) + '/content/' + encodeURIComponent(direction);
+
+            // perform the request once we've received a token
+            common.getAccessToken(config.urls.downloadToken).done(function (downloadToken) {
+                var parameters = {};
+
+                // conditionally include the ui extension token
+                if (!common.isBlank(downloadToken)) {
+                    parameters['access_token'] = downloadToken;
+                }
+
+                // conditionally include the cluster node id
+                var clusterNodeId = $('#provenance-event-cluster-node-id').text();
+                if (!common.isBlank(clusterNodeId)) {
+                    parameters['clusterNodeId'] = clusterNodeId;
+                }
+
+                // open the url
+                if ($.isEmptyObject(parameters)) {
+                    window.open(dataUri);
+                } else {
+                    window.open(dataUri + '?' + $.param(parameters));
+                }
+            }).fail(function () {
+                dialog.showOkDialog({
+                    headerText: 'Provenance',
+                    dialogContent: 'Unable to generate access token for downloading content.'
+                });
             });
-        });
-    };
+        };
 
-    /**
-     * Views the content for the provenance event that is currently loaded in the specified direction.
-     *
-     * @param {string} direction
-     */
-    var viewContent = function (direction) {
-        var controllerUri = $('#nifi-controller-uri').text();
-        var eventId = $('#provenance-event-id').text();
+        /**
+         * Views the content for the provenance event that is currently loaded in the specified direction.
+         *
+         * @param {string} direction
+         */
+        var viewContent = function (direction) {
+            var controllerUri = $('#nifi-controller-uri').text();
+            var eventId = $('#provenance-event-id').text();
 
-        // build the uri to the data
-        var dataUri = controllerUri + 'provenance-events/' + encodeURIComponent(eventId) + '/content/' + encodeURIComponent(direction);
+            // build the uri to the data
+            var dataUri = controllerUri + 'provenance-events/' + encodeURIComponent(eventId) + '/content/' + encodeURIComponent(direction);
 
-        // generate tokens as necessary
-        var getAccessTokens = $.Deferred(function (deferred) {
-            if (nf.Storage.hasItem('jwt')) {
-                // generate a token for the ui extension and another for the callback
-                var uiExtensionToken = $.ajax({
-                    type: 'POST',
-                    url: config.urls.uiExtensionToken
-                });
-                var downloadToken = $.ajax({
-                    type: 'POST',
-                    url: config.urls.downloadToken
-                });
-
-                // wait for each token
-                $.when(uiExtensionToken, downloadToken).done(function (uiExtensionTokenResult, downloadTokenResult) {
-                    var uiExtensionToken = uiExtensionTokenResult[0];
-                    var downloadToken = downloadTokenResult[0];
-                    deferred.resolve(uiExtensionToken, downloadToken);
-                }).fail(function () {
-                    nf.Dialog.showOkDialog({
-                        headerText: 'Provenance',
-                        dialogContent: 'Unable to generate access token for viewing content.'
+            // generate tokens as necessary
+            var getAccessTokens = $.Deferred(function (deferred) {
+                if (storage.hasItem('jwt')) {
+                    // generate a token for the ui extension and another for the callback
+                    var uiExtensionToken = $.ajax({
+                        type: 'POST',
+                        url: config.urls.uiExtensionToken
+                    });
+                    var downloadToken = $.ajax({
+                        type: 'POST',
+                        url: config.urls.downloadToken
                     });
-                    deferred.reject();
-                });
-            } else {
-                deferred.resolve('', '');
-            }
-        }).promise();
 
-        // perform the request after we've received the tokens
-        getAccessTokens.done(function (uiExtensionToken, downloadToken) {
-            var dataUriParameters = {};
+                    // wait for each token
+                    $.when(uiExtensionToken, downloadToken).done(function (uiExtensionTokenResult, downloadTokenResult) {
+                        var uiExtensionToken = uiExtensionTokenResult[0];
+                        var downloadToken = downloadTokenResult[0];
+                        deferred.resolve(uiExtensionToken, downloadToken);
+                    }).fail(function () {
+                        dialog.showOkDialog({
+                            headerText: 'Provenance',
+                            dialogContent: 'Unable to generate access token for viewing content.'
+                        });
+                        deferred.reject();
+                    });
+                } else {
+                    deferred.resolve('', '');
+                }
+            }).promise();
 
-            // conditionally include the cluster node id
-            var clusterNodeId = $('#provenance-event-cluster-node-id').text();
-            if (!nf.Common.isBlank(clusterNodeId)) {
-                dataUriParameters['clusterNodeId'] = clusterNodeId;
-            }
+            // perform the request after we've received the tokens
+            getAccessTokens.done(function (uiExtensionToken, downloadToken) {
+                var dataUriParameters = {};
 
-            // include the download token if applicable
-            if (!nf.Common.isBlank(downloadToken)) {
-                dataUriParameters['access_token'] = downloadToken;
-            }
+                // conditionally include the cluster node id
+                var clusterNodeId = $('#provenance-event-cluster-node-id').text();
+                if (!common.isBlank(clusterNodeId)) {
+                    dataUriParameters['clusterNodeId'] = clusterNodeId;
+                }
 
-            // include parameters if necessary
-            if ($.isEmptyObject(dataUriParameters) === false) {
-                dataUri = dataUri + '?' + $.param(dataUriParameters);
-            }
+                // include the download token if applicable
+                if (!common.isBlank(downloadToken)) {
+                    dataUriParameters['access_token'] = downloadToken;
+                }
 
-            // open the content viewer
-            var contentViewerUrl = $('#nifi-content-viewer-url').text();
+                // include parameters if necessary
+                if ($.isEmptyObject(dataUriParameters) === false) {
+                    dataUri = dataUri + '?' + $.param(dataUriParameters);
+                }
 
-            // if there's already a query string don't add another ?... this assumes valid
-            // input meaning that if the url has already included a ? it also contains at
-            // least one query parameter
-            if (contentViewerUrl.indexOf('?') === -1) {
-                contentViewerUrl += '?';
-            } else {
-                contentViewerUrl += '&';
-            }
+                // open the content viewer
+                var contentViewerUrl = $('#nifi-content-viewer-url').text();
 
-            var contentViewerParameters = {
-                'ref': dataUri
-            };
+                // if there's already a query string don't add another ?... this assumes valid
+                // input meaning that if the url has already included a ? it also contains at
+                // least one query parameter
+                if (contentViewerUrl.indexOf('?') === -1) {
+                    contentViewerUrl += '?';
+                } else {
+                    contentViewerUrl += '&';
+                }
 
-            // include the download token if applicable
-            if (!nf.Common.isBlank(uiExtensionToken)) {
-                contentViewerParameters['access_token'] = uiExtensionToken;
-            }
+                var contentViewerParameters = {
+                    'ref': dataUri
+                };
 
-            // open the content viewer
-            window.open(contentViewerUrl + $.param(contentViewerParameters));
-        });
-    };
+                // include the download token if applicable
+                if (!common.isBlank(uiExtensionToken)) {
+                    contentViewerParameters['access_token'] = uiExtensionToken;
+                }
 
-    /**
-     * Initializes the details dialog.
-     */
-    var initDetailsDialog = function () {
-        // initialize the properties tabs
-        $('#event-details-tabs').tabbs({
-            tabStyle: 'tab',
-            selectedTabStyle: 'selected-tab',
-            scrollableTabContentStyle: 'scrollable',
-            tabs: [{
-                name: 'Details',
-                tabContentId: 'event-details-tab-content'
-            }, {
-                name: 'Attributes',
-                tabContentId: 'attributes-tab-content'
-            }, {
-                name: 'Content',
-                tabContentId: 'content-tab-content'
-            }]
-        });
+                // open the content viewer
+                window.open(contentViewerUrl + $.param(contentViewerParameters));
+            });
+        };
 
-        $('#event-details-dialog').modal({
-            scrollableContentStyle: 'scrollable',
-            headerText: 'Provenance Event',
-            buttons: [{
-                buttonText: 'Ok',
-                color: {
-                    base: '#728E9B',
-                    hover: '#004849',
-                    text: '#ffffff'
-                },
+        /**
+         * Initializes the details dialog.
+         */
+        var initDetailsDialog = function () {
+            // initialize the properties tabs
+            $('#event-details-tabs').tabbs({
+                tabStyle: 'tab',
+                selectedTabStyle: 'selected-tab',
+                scrollableTabContentStyle: 'scrollable',
+                tabs: [{
+                    name: 'Details',
+                    tabContentId: 'event-details-tab-content'
+                }, {
+                    name: 'Attributes',
+                    tabContentId: 'attributes-tab-content'
+                }, {
+                    name: 'Content',
+                    tabContentId: 'content-tab-content'
+                }]
+            });
+
+            $('#event-details-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+                headerText: 'Provenance Event',
+                buttons: [{
+                    buttonText: 'Ok',
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            $('#event-details-dialog').modal('hide');
+                        }
+                    }
+                }],
                 handler: {
-                    click: function () {
-                        $('#event-details-dialog').modal('hide');
+                    close: function () {
+                        // clear the details
+                        $('#additional-provenance-details').empty();
+                        $('#attributes-container').empty();
+                        $('#parent-flowfiles-container').empty();
+                        $('#child-flowfiles-container').empty();
+                        $('#provenance-event-cluster-node-id').text('');
+                        $('#modified-attribute-toggle').removeClass('checkbox-checked').addClass('checkbox-unchecked');
+                    },
+                    open: function () {
+                        common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
                     }
                 }
-            }],
-            handler: {
-                close: function () {
-                    // clear the details
-                    $('#additional-provenance-details').empty();
-                    $('#attributes-container').empty();
-                    $('#parent-flowfiles-container').empty();
-                    $('#child-flowfiles-container').empty();
-                    $('#provenance-event-cluster-node-id').text('');
-                    $('#modified-attribute-toggle').removeClass('checkbox-checked').addClass('checkbox-unchecked');
-                },
-                open: function () {
-                    nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
+            });
+
+            // toggle which attributes are visible
+            $('#modified-attribute-toggle').on('click', function () {
+                var unmodifiedAttributes = $('#attributes-container div.attribute-unmodified');
+                if (unmodifiedAttributes.is(':visible')) {
+                    $('#attributes-container div.attribute-unmodified').hide();
+                } else {
+                    $('#attributes-container div.attribute-unmodified').show();
                 }
-            }
-        });
-
-        // toggle which attributes are visible
-        $('#modified-attribute-toggle').on('click', function () {
-            var unmodifiedAttributes = $('#attributes-container div.attribute-unmodified');
-            if (unmodifiedAttributes.is(':visible')) {
-                $('#attributes-container div.attribute-unmodified').hide();
-            } else {
-                $('#attributes-container div.attribute-unmodified').show();
-            }
-        });
-
-        // input download
-        $('#input-content-download').on('click', function () {
-            downloadContent('input');
-        });
-
-        // output download
-        $('#output-content-download').on('click', function () {
-            downloadContent('output');
-        });
-
-        // if a content viewer url is specified, use it
-        if (nf.Common.isContentViewConfigured()) {
-            // input view
-            $('#input-content-view').on('click', function () {
-                viewContent('input');
             });
 
-            // output view
-            $('#output-content-view').on('click', function () {
-                viewContent('output');
+            // input download
+            $('#input-content-download').on('click', function () {
+                downloadContent('input');
             });
-        }
 
-        // handle the replay and downloading
-        $('#replay-content').on('click', function () {
-            var replayEntity = {
-                'eventId': $('#provenance-event-id').text()
-            };
+            // output download
+            $('#output-content-download').on('click', function () {
+                downloadContent('output');
+            });
 
-            // conditionally include the cluster node id
-            var clusterNodeId = $('#provenance-event-cluster-node-id').text();
-            if (!nf.Common.isBlank(clusterNodeId)) {
-                replayEntity['clusterNodeId'] = clusterNodeId;
-            }
-
-            $.ajax({
-                type: 'POST',
-                url: config.urls.replays,
-                data: JSON.stringify(replayEntity),
-                dataType: 'json',
-                contentType: 'application/json'
-            }).done(function (response) {
-                nf.Dialog.showOkDialog({
-                    headerText: 'Provenance',
-                    dialogContent: 'Successfully submitted replay request.'
+            // if a content viewer url is specified, use it
+            if (common.isContentViewConfigured()) {
+                // input view
+                $('#input-content-view').on('click', function () {
+                    viewContent('input');
                 });
-            }).fail(nf.Common.handleAjaxError);
 
-            $('#event-details-dialog').modal('hide');
-        });
+                // output view
+                $('#output-content-view').on('click', function () {
+                    viewContent('output');
+                });
+            }
 
-        // show the replay panel
-        $('#replay-details').show();
-    };
+            // handle the replay and downloading
+            $('#replay-content').on('click', function () {
+                var replayEntity = {
+                    'eventId': $('#provenance-event-id').text()
+                };
 
-    /**
-     * Initializes the search dialog.
-     *
-     * @param {boolean} isClustered     Whether or not this NiFi clustered
-     */
-    var initSearchDialog = function (isClustered, provenanceTableCtrl) {
-        // configure the start and end date picker
-        $('#provenance-search-start-date, #provenance-search-end-date').datepicker({
-            showAnim: '',
-            showOtherMonths: true,
-            selectOtherMonths: true
-        });
+                // conditionally include the cluster node id
+                var clusterNodeId = $('#provenance-event-cluster-node-id').text();
+                if (!common.isBlank(clusterNodeId)) {
+                    replayEntity['clusterNodeId'] = clusterNodeId;
+                }
 
-        // initialize the default start date/time
-        $('#provenance-search-start-date').datepicker('setDate', '+0d');
-        $('#provenance-search-end-date').datepicker('setDate', '+0d');
-        $('#provenance-search-start-time').val('00:00:00');
-        $('#provenance-search-end-time').val('23:59:59');
+                $.ajax({
+                    type: 'POST',
+                    url: config.urls.replays,
+                    data: JSON.stringify(replayEntity),
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (response) {
+                    dialog.showOkDialog({
+                        headerText: 'Provenance',
+                        dialogContent: 'Successfully submitted replay request.'
+                    });
+                }).fail(errorHandler.handleAjaxError);
 
-        // initialize the default file sizes
-        $('#provenance-search-minimum-file-size').val('');
-        $('#provenance-search-maximum-file-size').val('');
+                $('#event-details-dialog').modal('hide');
+            });
 
-        // allow users to be able to search a specific node
-        if (isClustered) {
-            // make the dialog larger to support the select location
-            $('#provenance-search-dialog').height(575);
+            // show the replay panel
+            $('#replay-details').show();
+        };
 
-            // get the nodes in the cluster
-            $.ajax({
+        /**
+         * Initializes the search dialog.
+         *
+         * @param {boolean} isClustered     Whether or not this NiFi clustered
+         */
+        var initSearchDialog = function (isClustered, provenanceTableCtrl) {
+            // configure the start and end date picker
+            $('#provenance-search-start-date, #provenance-search-end-date').datepicker({
+                showAnim: '',
+                showOtherMonths: true,
+                selectOtherMonths: true
+            });
+
+            // initialize the default start date/time
+            $('#provenance-search-start-date').datepicker('setDate', '+0d');
+            $('#provenance-search-end-date').datepicker('setDate', '+0d');
+            $('#provenance-search-start-time').val('00:00:00');
+            $('#provenance-search-end-time').val('23:59:59');
+
+            // initialize the default file sizes
+            $('#provenance-search-minimum-file-size').val('');
+            $('#provenance-search-maximum-file-size').val('');
+
+            // allow users to be able to search a specific node
+            if (isClustered) {
+                // make the dialog larger to support the select location
+                $('#provenance-search-dialog').height(575);
+
+                // get the nodes in the cluster
+                $.ajax({
+                    type: 'GET',
+                    url: config.urls.clusterSearch,
+                    dataType: 'json'
+                }).done(function (response) {
+                    var nodeResults = response.nodeResults;
+
+                    // create the searchable options
+                    var searchableOptions = [{
+                        text: 'cluster',
+                        value: null
+                    }];
+
+                    // sort the nodes
+                    nodeResults.sort(function (a, b) {
+                        var compA = a.address.toUpperCase();
+                        var compB = b.address.toUpperCase();
+                        return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
+                    });
+
+                    // add each node
+                    $.each(nodeResults, function (_, nodeResult) {
+                        searchableOptions.push({
+                            text: nodeResult.address,
+                            value: nodeResult.id
+                        });
+                    });
+
+                    // populate the combo
+                    $('#provenance-search-location').combo({
+                        options: searchableOptions
+                    });
+                }).fail(errorHandler.handleAjaxError);
+
+                // show the node search combo
+                $('#provenance-search-location-container').show();
+            }
+
+            // configure the search dialog
+            $('#provenance-search-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+                headerText: 'Search Events',
+                buttons: [{
+                    buttonText: 'Search',
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            $('#provenance-search-dialog').modal('hide');
+
+                            var search = {};
+
+                            // extract the start date time
+                            var startDate = $.trim($('#provenance-search-start-date').val());
+                            var startTime = $.trim($('#provenance-search-start-time').val());
+                            if (startDate !== '') {
+                                if (startTime === '') {
+                                    startTime = config.defaultStartTime;
+                                    $('#provenance-search-start-time').val(startTime);
+                                }
+                                search['startDate'] = startDate + ' ' + startTime + ' ' + $('.timezone:first').text();
+                            }
+
+                            // extract the end date time
+                            var endDate = $.trim($('#provenance-search-end-date').val());
+                            var endTime = $.trim($('#provenance-search-end-time').val());
+                            if (endDate !== '') {
+                                if (endTime === '') {
+                                    endTime = config.defaultEndTime;
+                                    $('#provenance-search-end-time').val(endTime);
+                                }
+                                search['endDate'] = endDate + ' ' + endTime + ' ' + $('.timezone:first').text();
+                            }
+
+                            // extract the min/max file size
+                            var minFileSize = $.trim($('#provenance-search-minimum-file-size').val());
+                            if (minFileSize !== '') {
+                                search['minimumFileSize'] = minFileSize;
+                            }
+
+                            var maxFileSize = $.trim($('#provenance-search-maximum-file-size').val());
+                            if (maxFileSize !== '') {
+                                search['maximumFileSize'] = maxFileSize;
+                            }
+
+                            // limit search to a specific node
+                            if (isClustered) {
+                                var searchLocation = $('#provenance-search-location').combo('getSelectedOption');
+                                if (searchLocation.value !== null) {
+                                    search['clusterNodeId'] = searchLocation.value;
+                                }
+                            }
+
+                            // add the search criteria
+                            search['searchTerms'] = getSearchCriteria();
+
+                            // reload the table
+                            provenanceTableCtrl.loadProvenanceTable(search);
+                        }
+                    }
+                },
+                    {
+                        buttonText: 'Cancel',
+                        color: {
+                            base: '#E3E8EB',
+                            hover: '#C7D2D7',
+                            text: '#004849'
+                        },
+                        handler: {
+                            click: function () {
+                                $('#provenance-search-dialog').modal('hide');
+                            }
+                        }
+                    }]
+            });
+
+            return $.ajax({
                 type: 'GET',
-                url: config.urls.clusterSearch,
+                url: config.urls.searchOptions,
                 dataType: 'json'
             }).done(function (response) {
-                var nodeResults = response.nodeResults;
+                var provenanceOptions = response.provenanceOptions;
 
-                // create the searchable options
-                var searchableOptions = [{
-                    text: 'cluster',
-                    value: null
-                }];
+                // load all searchable fields
+                $.each(provenanceOptions.searchableFields, function (_, field) {
+                    appendSearchableField(field);
+                });
+            });
+        };
 
-                // sort the nodes
-                nodeResults.sort(function (a, b) {
-                    var compA = a.address.toUpperCase();
-                    var compB = b.address.toUpperCase();
-                    return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
+        /**
+         * Initializes the provenance query dialog.
+         */
+        var initProvenanceQueryDialog = function () {
+            // initialize the dialog
+            $('#provenance-query-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+                headerText: 'Searching provenance events...'
+            });
+        };
+
+        /**
+         * Appends the specified searchable field to the search dialog.
+         *
+         * @param {type} field      The searchable field
+         */
+        var appendSearchableField = function (field) {
+            var searchableField = $('
      ').appendTo('#searchable-fields-container');
+            $('').text(field.id).appendTo(searchableField);
+            $('
      ').text(field.label).appendTo(searchableField);
+            $('
      ').appendTo(searchableField);
+            $('
      ').appendTo(searchableField);
+
+            // make the searchable accessible for populating
+            if (field.id === 'ProcessorID') {
+                searchableField.find('input').addClass('searchable-component-id');
+            } else if (field.id === 'FlowFileUUID') {
+                searchableField.find('input').addClass('searchable-flowfile-uuid');
+            }
+
+            // ensure the no searchable fields message is hidden
+            $('#no-searchable-fields').hide();
+        };
+
+        /**
+         * Gets the search criteria that the user has specified.
+         */
+        var getSearchCriteria = function () {
+            var searchCriteria = {};
+            $('#searchable-fields-container').children('div.searchable-field').each(function () {
+                var searchableField = $(this);
+                var fieldId = searchableField.children('span.searchable-field-id').text();
+                var searchValue = $.trim(searchableField.find('input.searchable-field-input').val());
+
+                // if the field isn't blank include it in the search
+                if (!common.isBlank(searchValue)) {
+                    searchCriteria[fieldId] = searchValue;
+                }
+            });
+            return searchCriteria;
+        };
+
+        /**
+         * Initializes the provenance table.
+         *
+         * @param {boolean} isClustered     Whether or not this instance is clustered
+         */
+        var initProvenanceTable = function (isClustered, provenanceTableCtrl) {
+            // define the function for filtering the list
+            $('#provenance-filter').keyup(function () {
+                applyFilter();
+            });
+
+            // filter options
+            var filterOptions = [{
+                text: 'by component name',
+                value: 'componentName'
+            }, {
+                text: 'by component type',
+                value: 'componentType'
+            }, {
+                text: 'by type',
+                value: 'eventType'
+            }];
+
+            // if clustered, allowing filtering by node id
+            if (isClustered) {
+                filterOptions.push({
+                    text: 'by node',
+                    value: 'clusterNodeAddress'
+                });
+            }
+
+            // initialize the filter combo
+            $('#provenance-filter-type').combo({
+                options: filterOptions,
+                select: function (option) {
+                    applyFilter();
+                }
+            });
+
+            // clear the current search
+            $('#clear-provenance-search').click(function () {
+                // clear each searchable field
+                $('#searchable-fields-container').find('input.searchable-field-input').each(function () {
+                    $(this).val('');
                 });
 
-                // add each node
-                $.each(nodeResults, function (_, nodeResult) {
-                    searchableOptions.push({
-                        text: nodeResult.address,
-                        value: nodeResult.id
+                // reset the default start date/time
+                $('#provenance-search-start-date').datepicker('setDate', '+0d');
+                $('#provenance-search-end-date').datepicker('setDate', '+0d');
+                $('#provenance-search-start-time').val('00:00:00');
+                $('#provenance-search-end-time').val('23:59:59');
+
+                // reset the minimum and maximum file size
+                $('#provenance-search-minimum-file-size').val('');
+                $('#provenance-search-maximum-file-size').val('');
+
+                // if we are clustered reset the selected option
+                if (isClustered) {
+                    $('#provenance-search-location').combo('setSelectedOption', {
+                        text: 'cluster'
                     });
-                });
+                }
 
-                // populate the combo
-                $('#provenance-search-location').combo({
-                    options: searchableOptions
-                });
-            }).fail(nf.Common.handleAjaxError);
+                // reset the stored query
+                cachedQuery = {};
 
-            // show the node search combo
-            $('#provenance-search-location-container').show();
-        }
+                // reload the table
+                provenanceTableCtrl.loadProvenanceTable();
+            });
 
-        // configure the search dialog
-        $('#provenance-search-dialog').modal({
-            scrollableContentStyle: 'scrollable',
-            headerText: 'Search Events',
-            buttons: [{
-                buttonText: 'Search',
-                color: {
-                    base: '#728E9B',
-                    hover: '#004849',
-                    text: '#ffffff'
+            // add hover effect and click handler for opening the dialog
+            $('#provenance-search-button').click(function () {
+                $('#provenance-search-dialog').modal('show');
+
+                // adjust the field width for a potential scrollbar
+                var searchFieldContainer = $('#searchable-fields-container');
+                if (searchFieldContainer.get(0).scrollHeight > searchFieldContainer.innerHeight()) {
+                    $('input.searchable-field-input').width(245);
+                } else {
+                    $('input.searchable-field-input').width(260);
+                }
+            });
+
+            // define a custom formatter for the more details column
+            var moreDetailsFormatter = function (row, cell, value, columnDef, dataContext) {
+                return '
      ';
+            };
+
+            // define how general values are formatted
+            var valueFormatter = function (row, cell, value, columnDef, dataContext) {
+                return common.formatValue(value);
+            };
+
+            // determine if the this page is in the shell
+            var isInShell = (top !== window);
+
+            // define how the column is formatted
+            var showLineageFormatter = function (row, cell, value, columnDef, dataContext) {
+                var markup = '';
+
+                // conditionally include the cluster node id
+                if (common.SUPPORTS_SVG) {
+                    markup += '
      ';
+                }
+
+                // conditionally support going to the component
+                var isRemotePort = dataContext.componentType === 'Remote Input Port' || dataContext.componentType === 'Remote Output Port';
+                if (isInShell && common.isDefinedAndNotNull(dataContext.groupId) && isRemotePort === false) {
+                    markup += '
      ';
+                }
+
+                return markup;
+            };
+
+            // initialize the provenance table
+            var provenanceColumns = [
+                {
+                    id: 'moreDetails',
+                    name: ' ',
+                    sortable: false,
+                    resizable: false,
+                    formatter: moreDetailsFormatter,
+                    width: 50,
+                    maxWidth: 50
                 },
-                handler: {
-                    click: function () {
-                        $('#provenance-search-dialog').modal('hide');
+                {
+                    id: 'eventTime',
+                    name: 'Date/Time',
+                    field: 'eventTime',
+                    sortable: true,
+                    defaultSortAsc: false,
+                    resizable: true
+                },
+                {
+                    id: 'eventType',
+                    name: 'Type',
+                    field: 'eventType',
+                    sortable: true,
+                    resizable: true
+                },
+                {
+                    id: 'flowFileUuid',
+                    name: 'FlowFile Uuid',
+                    field: 'flowFileUuid',
+                    sortable: true,
+                    resizable: true
+                },
+                {
+                    id: 'fileSize',
+                    name: 'Size',
+                    field: 'fileSize',
+                    sortable: true,
+                    defaultSortAsc: false,
+                    resizable: true
+                },
+                {
+                    id: 'componentName',
+                    name: 'Component Name',
+                    field: 'componentName',
+                    sortable: true,
+                    resizable: true,
+                    formatter: valueFormatter
+                },
+                {
+                    id: 'componentType',
+                    name: 'Component Type',
+                    field: 'componentType',
+                    sortable: true,
+                    resizable: true
+                }
+            ];
 
-                        var search = {};
+            // conditionally show the cluster node identifier
+            if (isClustered) {
+                provenanceColumns.push({
+                    id: 'clusterNodeAddress',
+                    name: 'Node',
+                    field: 'clusterNodeAddress',
+                    sortable: true,
+                    resizable: true
+                });
+            }
 
-                        // extract the start date time
-                        var startDate = $.trim($('#provenance-search-start-date').val());
-                        var startTime = $.trim($('#provenance-search-start-time').val());
-                        if (startDate !== '') {
-                            if (startTime === '') {
-                                startTime = config.defaultStartTime;
-                                $('#provenance-search-start-time').val(startTime);
-                            }
-                            search['startDate'] = startDate + ' ' + startTime + ' ' + $('.timezone:first').text();
-                        }
+            // conditionally show the action column
+            if (common.SUPPORTS_SVG || isInShell) {
+                provenanceColumns.push({
+                    id: 'actions',
+                    name: ' ',
+                    formatter: showLineageFormatter,
+                    resizable: false,
+                    sortable: false,
+                    width: 50,
+                    maxWidth: 50
+                });
+            }
 
-                        // extract the end date time
-                        var endDate = $.trim($('#provenance-search-end-date').val());
-                        var endTime = $.trim($('#provenance-search-end-time').val());
-                        if (endDate !== '') {
-                            if (endTime === '') {
-                                endTime = config.defaultEndTime;
-                                $('#provenance-search-end-time').val(endTime);
-                            }
-                            search['endDate'] = endDate + ' ' + endTime + ' ' + $('.timezone:first').text();
-                        }
+            var provenanceOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                autoEdit: false,
+                multiSelect: false,
+                rowHeight: 24
+            };
 
-                        // extract the min/max file size
-                        var minFileSize = $.trim($('#provenance-search-minimum-file-size').val());
-                        if (minFileSize !== '') {
-                            search['minimumFileSize'] = minFileSize;
-                        }
+            // create the remote model
+            var provenanceData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            provenanceData.setItems([]);
+            provenanceData.setFilterArgs({
+                searchString: '',
+                property: 'name'
+            });
+            provenanceData.setFilter(filter);
 
-                        var maxFileSize = $.trim($('#provenance-search-maximum-file-size').val());
-                        if (maxFileSize !== '') {
-                            search['maximumFileSize'] = maxFileSize;
-                        }
+            // initialize the sort
+            sort({
+                columnId: 'eventTime',
+                sortAsc: false
+            }, provenanceData);
 
-                        // limit search to a specific node
-                        if (isClustered) {
-                            var searchLocation = $('#provenance-search-location').combo('getSelectedOption');
-                            if (searchLocation.value !== null) {
-                                search['clusterNodeId'] = searchLocation.value;
-                            }
-                        }
+            // initialize the grid
+            var provenanceGrid = new Slick.Grid('#provenance-table', provenanceData, provenanceColumns, provenanceOptions);
+            provenanceGrid.setSelectionModel(new Slick.RowSelectionModel());
+            provenanceGrid.registerPlugin(new Slick.AutoTooltips());
 
-                        // add the search criteria
-                        search['searchTerms'] = getSearchCriteria();
+            // initialize the grid sorting
+            provenanceGrid.setSortColumn('eventTime', false);
+            provenanceGrid.onSort.subscribe(function (e, args) {
+                sort({
+                    columnId: args.sortCol.field,
+                    sortAsc: args.sortAsc
+                }, provenanceData);
+            });
 
-                        // reload the table
-                        provenanceTableCtrl.loadProvenanceTable(search);
+            // configure a click listener
+            provenanceGrid.onClick.subscribe(function (e, args) {
+                var target = $(e.target);
+
+                // get the node at this row
+                var item = provenanceData.getItem(args.row);
+
+                // determine the desired action
+                if (provenanceGrid.getColumns()[args.cell].id === 'actions') {
+                    if (target.hasClass('show-lineage')) {
+                        provenanceLineageCtrl.showLineage(item.flowFileUuid, item.eventId.toString(), item.clusterNodeId, provenanceTableCtrl);
+                    } else if (target.hasClass('go-to')) {
+                        goTo(item);
+                    }
+                } else if (provenanceGrid.getColumns()[args.cell].id === 'moreDetails') {
+                    if (target.hasClass('show-event-details')) {
+                        provenanceTableCtrl.showEventDetails(item.eventId, item.clusterNodeId);
                     }
                 }
+            });
+
+            // wire up the dataview to the grid
+            provenanceData.onRowCountChanged.subscribe(function (e, args) {
+                provenanceGrid.updateRowCount();
+                provenanceGrid.render();
+
+                // update the total number of displayed events if necessary
+                $('#displayed-events').text(common.formatInteger(args.current));
+            });
+            provenanceData.onRowsChanged.subscribe(function (e, args) {
+                provenanceGrid.invalidateRows(args.rows);
+                provenanceGrid.render();
+            });
+
+            // hold onto an instance of the grid
+            $('#provenance-table').data('gridInstance', provenanceGrid);
+
+            // initialize the number of displayed items
+            $('#displayed-events').text('0');
+            $('#total-events').text('0');
+        };
+
+        /**
+         * Applies the filter found in the filter expression text field.
+         */
+        var applyFilter = function () {
+            // get the dataview
+            var provenanceGrid = $('#provenance-table').data('gridInstance');
+
+            // ensure the grid has been initialized
+            if (common.isDefinedAndNotNull(provenanceGrid)) {
+                var provenanceData = provenanceGrid.getData();
+
+                // update the search criteria
+                provenanceData.setFilterArgs({
+                    searchString: getFilterText(),
+                    property: $('#provenance-filter-type').combo('getSelectedOption').value
+                });
+                provenanceData.refresh();
+            }
+        };
+
+        /**
+         * Get the text out of the filter field. If the filter field doesn't
+         * have any text it will contain the text 'filter list' so this method
+         * accounts for that.
+         */
+        var getFilterText = function () {
+            return $('#provenance-filter').val();
+        };
+
+        /**
+         * Performs the provenance filtering.
+         *
+         * @param {object} item     The item subject to filtering
+         * @param {object} args     Filter arguments
+         * @returns {Boolean}       Whether or not to include the item
+         */
+        var filter = function (item, args) {
+            if (args.searchString === '') {
+                return true;
+            }
+
+            try {
+                // perform the row filtering
+                var filterExp = new RegExp(args.searchString, 'i');
+            } catch (e) {
+                // invalid regex
+                return false;
+            }
+
+            return item[args.property].search(filterExp) >= 0;
+        };
+
+        /**
+         * Sorts the data according to the sort details.
+         *
+         * @param {type} sortDetails
+         * @param {type} data
+         */
+        var sort = function (sortDetails, data) {
+            // defines a function for sorting
+            var comparer = function (a, b) {
+                if (sortDetails.columnId === 'eventTime') {
+                    var aTime = common.parseDateTime(a[sortDetails.columnId]).getTime();
+                    var bTime = common.parseDateTime(b[sortDetails.columnId]).getTime();
+                    if (aTime === bTime) {
+                        return a['id'] - b['id'];
+                    } else {
+                        return aTime - bTime;
+                    }
+                } else if (sortDetails.columnId === 'fileSize') {
+                    var aSize = common.parseSize(a[sortDetails.columnId]);
+                    var bSize = common.parseSize(b[sortDetails.columnId]);
+                    if (aSize === bSize) {
+                        return a['id'] - b['id'];
+                    } else {
+                        return aSize - bSize;
+                    }
+                } else {
+                    var aString = common.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
+                    var bString = common.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
+                    if (aString === bString) {
+                        return a['id'] - b['id'];
+                    } else {
+                        return aString === bString ? 0 : aString > bString ? 1 : -1;
+                    }
+                }
+            };
+
+            // perform the sort
+            data.sort(comparer, sortDetails.sortAsc);
+        };
+
+        /**
+         * Submits a new provenance query.
+         *
+         * @argument {object} provenance The provenance query
+         * @returns {deferred}
+         */
+        var submitProvenance = function (provenance) {
+            var provenanceEntity = {
+                'provenance': {
+                    'request': $.extend({
+                        maxResults: config.maxResults,
+                        summarize: true,
+                        incrementalResults: false
+                    }, provenance)
+                }
+            };
+
+            // submit the provenance request
+            return $.ajax({
+                type: 'POST',
+                url: config.urls.provenance,
+                data: JSON.stringify(provenanceEntity),
+                dataType: 'json',
+                contentType: 'application/json'
+            }).fail(errorHandler.handleAjaxError);
+        };
+
+        /**
+         * Gets the results from the provenance query for the specified id.
+         *
+         * @param {object} provenance
+         * @returns {deferred}
+         */
+        var getProvenance = function (provenance) {
+            var url = provenance.uri;
+            if (common.isDefinedAndNotNull(provenance.request.clusterNodeId)) {
+                url += '?' + $.param({
+                        clusterNodeId: provenance.request.clusterNodeId,
+                        summarize: true,
+                        incrementalResults: false
+                    });
+            } else {
+                url += '?' + $.param({
+                        summarize: true,
+                        incrementalResults: false
+                    });
+            }
+
+            return $.ajax({
+                type: 'GET',
+                url: url,
+                dataType: 'json'
+            }).fail(errorHandler.handleAjaxError);
+        };
+
+        /**
+         * Cancels the specified provenance query.
+         *
+         * @param {object} provenance
+         * @return {deferred}
+         */
+        var cancelProvenance = function (provenance) {
+            var url = provenance.uri;
+            if (common.isDefinedAndNotNull(provenance.request.clusterNodeId)) {
+                url += '?' + $.param({
+                        clusterNodeId: provenance.request.clusterNodeId
+                    });
+            }
+
+            return $.ajax({
+                type: 'DELETE',
+                url: url,
+                dataType: 'json'
+            }).fail(errorHandler.handleAjaxError);
+        };
+
+        /**
+         * Checks the results of the specified provenance.
+         *
+         * @param {object} provenance
+         */
+        var loadProvenanceResults = function (provenance, provenanceTableCtrl) {
+            var provenanceRequest = provenance.request;
+            var provenanceResults = provenance.results;
+
+            // ensure there are groups specified
+            if (common.isDefinedAndNotNull(provenanceResults.provenanceEvents)) {
+                var provenanceTable = $('#provenance-table').data('gridInstance');
+                var provenanceData = provenanceTable.getData();
+
+                // set the items
+                provenanceData.setItems(provenanceResults.provenanceEvents);
+                provenanceData.reSort();
+                provenanceTable.invalidate();
+
+                // update the stats last refreshed timestamp
+                $('#provenance-last-refreshed').text(provenanceResults.generated);
+
+                // update the oldest event available
+                $('#oldest-event').html(common.formatValue(provenanceResults.oldestEvent));
+
+                // record the server offset
+                provenanceTableCtrl.serverTimeOffset = provenanceResults.timeOffset;
+
+                // determines if the specified query is blank (no search terms, start or end date)
+                var isBlankQuery = function (query) {
+                    return common.isUndefinedOrNull(query.startDate) && common.isUndefinedOrNull(query.endDate) && $.isEmptyObject(query.searchTerms);
+                };
+
+                // update the filter message based on the request
+                if (isBlankQuery(provenanceRequest)) {
+                    var message = 'Showing the most recent ';
+                    if (provenanceResults.totalCount >= config.maxResults) {
+                        message += (common.formatInteger(config.maxResults) + ' of ' + provenanceResults.total + ' events, please refine the search.');
+                    } else {
+                        message += ('events.');
+                    }
+                    $('#provenance-query-message').text(message);
+                    $('#clear-provenance-search').hide();
+                } else {
+                    var message = 'Showing ';
+                    if (provenanceResults.totalCount >= config.maxResults) {
+                        message += (common.formatInteger(config.maxResults) + ' of ' + provenanceResults.total + ' events that match the specified query, please refine the search.');
+                    } else {
+                        message += ('the events that match the specified query.');
+                    }
+                    $('#provenance-query-message').text(message);
+                    $('#clear-provenance-search').show();
+                }
+
+                // update the total number of events
+                $('#total-events').text(common.formatInteger(provenanceResults.provenanceEvents.length));
+            } else {
+                $('#total-events').text('0');
+            }
+        };
+
+        /**
+         * Goes to the specified component if possible.
+         *
+         * @argument {object} item       The event it
+         */
+        var goTo = function (item) {
+            // ensure the component is still present in the flow
+            if (common.isDefinedAndNotNull(item.groupId)) {
+                // only attempt this if we're within a frame
+                if (top !== window) {
+                    // and our parent has canvas utils and shell defined
+                    if (common.isDefinedAndNotNull(parent.nf) && common.isDefinedAndNotNull(parent.nf.CanvasUtils) && common.isDefinedAndNotNull(parent.nf.Shell)) {
+                        parent.nf.CanvasUtils.showComponent(item.groupId, item.componentId);
+                        parent.$('#shell-close-button').click();
+                    }
+                }
+            }
+        };
+
+        function ProvenanceTableCtrl() {
+
+            /**
+
+             * The server time offset
+             */
+            this.serverTimeOffset = null;
+        }
+
+        ProvenanceTableCtrl.prototype = {
+            constructor: ProvenanceTableCtrl,
+
+            /**
+             * Initializes the provenance table. Returns a deferred that will indicate when/if the table has initialized successfully.
+             *
+             * @param {boolean} isClustered     Whether or not this instance is clustered
+             */
+            init: function (isClustered) {
+                var provenanceTableCtrl = this;
+                return $.Deferred(function (deferred) {
+                    // handles init failure
+                    var failure = function (xhr, status, error) {
+                        deferred.reject();
+                        errorHandler.handleAjaxError(xhr, status, error);
+                    };
+
+                    // initialize the lineage view
+                    provenanceLineageCtrl.init();
+
+                    // initialize the table view
+                    initDetailsDialog();
+                    initProvenanceQueryDialog();
+                    initProvenanceTable(isClustered, provenanceTableCtrl);
+                    initSearchDialog(isClustered, provenanceTableCtrl).done(function () {
+                        deferred.resolve();
+                    }).fail(failure);
+                }).promise();
             },
-                {
+
+            /**
+             * Update the size of the grid based on its container's current size.
+             */
+            resetTableSize: function () {
+                var provenanceGrid = $('#provenance-table').data('gridInstance');
+                if (common.isDefinedAndNotNull(provenanceGrid)) {
+                    provenanceGrid.resizeCanvas();
+                }
+            },
+
+            /**
+             * Updates the value of the specified progress bar.
+             *
+             * @param {jQuery}  progressBar
+             * @param {integer} value
+             * @returns {undefined}
+             */
+            updateProgress: function (progressBar, value) {
+                // remove existing labels
+                progressBar.find('div.progress-label').remove();
+                progressBar.find('md-progress-linear').remove();
+
+                // update the progress bar
+                var label = $('
      ').text(value + '%');
+                (angularBridge.injector.get('$compile')($(''))(angularBridge.rootScope)).appendTo(progressBar);
+                progressBar.append(label);
+            },
+
+            /**
+             * Loads the provenance table with events according to the specified optional
+             * query. If not query is specified or it is empty, the most recent entries will
+             * be returned.
+             *
+             * @param {object} query
+             */
+            loadProvenanceTable: function (query) {
+                var provenanceTableCtrl = this;
+                var provenanceProgress = $('#provenance-percent-complete');
+
+                // add support to cancel outstanding requests - when the button is pressed we
+                // could be in one of two stages, 1) waiting to GET the status or 2)
+                // in the process of GETting the status. Handle both cases by cancelling
+                // the setTimeout (1) and by setting a flag to indicate that a request has
+                // been request so we can ignore the results (2).
+
+                var cancelled = false;
+                var provenance = null;
+                var provenanceTimer = null;
+
+                // update the progress bar value
+                provenanceTableCtrl.updateProgress(provenanceProgress, 0);
+
+                // show the 'searching...' dialog
+                $('#provenance-query-dialog').modal('setButtonModel', [{
                     buttonText: 'Cancel',
                     color: {
                         base: '#E3E8EB',
@@ -436,1025 +1169,354 @@ nf.ng.ProvenanceTable = function (provenanceLineageCtrl) {
                     },
                     handler: {
                         click: function () {
-                            $('#provenance-search-dialog').modal('hide');
+                            cancelled = true;
+
+                            // we are waiting for the next poll attempt
+                            if (provenanceTimer !== null) {
+                                // cancel it
+                                clearTimeout(provenanceTimer);
+
+                                // cancel the provenance
+                                closeDialog();
+                            }
                         }
                     }
-                }]
-        });
+                }]).modal('show');
 
-        return $.ajax({
-            type: 'GET',
-            url: config.urls.searchOptions,
-            dataType: 'json'
-        }).done(function (response) {
-            var provenanceOptions = response.provenanceOptions;
+                // -----------------------------
+                // determine the provenance query
+                // -----------------------------
 
-            // load all searchable fields
-            $.each(provenanceOptions.searchableFields, function (_, field) {
-                appendSearchableField(field);
-            });
-        });
-    };
-
-    /**
-     * Initializes the provenance query dialog.
-     */
-    var initProvenanceQueryDialog = function () {
-        // initialize the dialog
-        $('#provenance-query-dialog').modal({
-            scrollableContentStyle: 'scrollable',
-            headerText: 'Searching provenance events...'
-        });
-    };
-
-    /**
-     * Appends the specified searchable field to the search dialog.
-     *
-     * @param {type} field      The searchable field
-     */
-    var appendSearchableField = function (field) {
-        var searchableField = $('
      ').appendTo('#searchable-fields-container');
-        $('').text(field.id).appendTo(searchableField);
-        $('
      ').text(field.label).appendTo(searchableField);
-        $('
      ').appendTo(searchableField);
-        $('
      ').appendTo(searchableField);
-
-        // make the searchable accessible for populating
-        if (field.id === 'ProcessorID') {
-            searchableField.find('input').addClass('searchable-component-id');
-        } else if (field.id === 'FlowFileUUID') {
-            searchableField.find('input').addClass('searchable-flowfile-uuid');
-        }
-
-        // ensure the no searchable fields message is hidden
-        $('#no-searchable-fields').hide();
-    };
-
-    /**
-     * Gets the search criteria that the user has specified.
-     */
-    var getSearchCriteria = function () {
-        var searchCriteria = {};
-        $('#searchable-fields-container').children('div.searchable-field').each(function () {
-            var searchableField = $(this);
-            var fieldId = searchableField.children('span.searchable-field-id').text();
-            var searchValue = $.trim(searchableField.find('input.searchable-field-input').val());
-
-            // if the field isn't blank include it in the search
-            if (!nf.Common.isBlank(searchValue)) {
-                searchCriteria[fieldId] = searchValue;
-            }
-        });
-        return searchCriteria;
-    };
-
-    /**
-     * Initializes the provenance table.
-     *
-     * @param {boolean} isClustered     Whether or not this instance is clustered
-     */
-    var initProvenanceTable = function (isClustered, provenanceTableCtrl) {
-        // define the function for filtering the list
-        $('#provenance-filter').keyup(function () {
-            applyFilter();
-        });
-
-        // filter options
-        var filterOptions = [{
-            text: 'by component name',
-            value: 'componentName'
-        }, {
-            text: 'by component type',
-            value: 'componentType'
-        }, {
-            text: 'by type',
-            value: 'eventType'
-        }];
-
-        // if clustered, allowing filtering by node id
-        if (isClustered) {
-            filterOptions.push({
-                text: 'by node',
-                value: 'clusterNodeAddress'
-            });
-        }
-
-        // initialize the filter combo
-        $('#provenance-filter-type').combo({
-            options: filterOptions,
-            select: function (option) {
-                applyFilter();
-            }
-        });
-
-        // clear the current search
-        $('#clear-provenance-search').click(function () {
-            // clear each searchable field
-            $('#searchable-fields-container').find('input.searchable-field-input').each(function () {
-                $(this).val('');
-            });
-
-            // reset the default start date/time
-            $('#provenance-search-start-date').datepicker('setDate', '+0d');
-            $('#provenance-search-end-date').datepicker('setDate', '+0d');
-            $('#provenance-search-start-time').val('00:00:00');
-            $('#provenance-search-end-time').val('23:59:59');
-
-            // reset the minimum and maximum file size
-            $('#provenance-search-minimum-file-size').val('');
-            $('#provenance-search-maximum-file-size').val('');
-
-            // if we are clustered reset the selected option
-            if (isClustered) {
-                $('#provenance-search-location').combo('setSelectedOption', {
-                    text: 'cluster'
-                });
-            }
-
-            // reset the stored query
-            cachedQuery = {};
-
-            // reload the table
-            provenanceTableCtrl.loadProvenanceTable();
-        });
-
-        // add hover effect and click handler for opening the dialog
-        $('#provenance-search-button').click(function () {
-            $('#provenance-search-dialog').modal('show');
-
-            // adjust the field width for a potential scrollbar
-            var searchFieldContainer = $('#searchable-fields-container');
-            if (searchFieldContainer.get(0).scrollHeight > searchFieldContainer.innerHeight()) {
-                $('input.searchable-field-input').width(245);
-            } else {
-                $('input.searchable-field-input').width(260);
-            }
-        });
-
-        // define a custom formatter for the more details column
-        var moreDetailsFormatter = function (row, cell, value, columnDef, dataContext) {
-            return '
      ';
-        };
-
-        // define how general values are formatted
-        var valueFormatter = function (row, cell, value, columnDef, dataContext) {
-            return nf.Common.formatValue(value);
-        };
-
-        // determine if the this page is in the shell
-        var isInShell = (top !== window);
-
-        // define how the column is formatted
-        var showLineageFormatter = function (row, cell, value, columnDef, dataContext) {
-            var markup = '';
-
-            // conditionally include the cluster node id
-            if (nf.Common.SUPPORTS_SVG) {
-                markup += '
      ';
-            }
-
-            // conditionally support going to the component
-            var isRemotePort = dataContext.componentType === 'Remote Input Port' || dataContext.componentType === 'Remote Output Port';
-            if (isInShell && nf.Common.isDefinedAndNotNull(dataContext.groupId) && isRemotePort === false) {
-                markup += '
      ';
-            }
-
-            return markup;
-        };
-
-        // initialize the provenance table
-        var provenanceColumns = [
-            {
-                id: 'moreDetails',
-                name: ' ',
-                sortable: false,
-                resizable: false,
-                formatter: moreDetailsFormatter,
-                width: 50,
-                maxWidth: 50
-            },
-            {
-                id: 'eventTime',
-                name: 'Date/Time',
-                field: 'eventTime',
-                sortable: true,
-                defaultSortAsc: false,
-                resizable: true
-            },
-            {id: 'eventType', name: 'Type', field: 'eventType', sortable: true, resizable: true},
-            {id: 'flowFileUuid', name: 'FlowFile Uuid', field: 'flowFileUuid', sortable: true, resizable: true},
-            {id: 'fileSize', name: 'Size', field: 'fileSize', sortable: true, defaultSortAsc: false, resizable: true},
-            {
-                id: 'componentName',
-                name: 'Component Name',
-                field: 'componentName',
-                sortable: true,
-                resizable: true,
-                formatter: valueFormatter
-            },
-            {id: 'componentType', name: 'Component Type', field: 'componentType', sortable: true, resizable: true}
-        ];
-
-        // conditionally show the cluster node identifier
-        if (isClustered) {
-            provenanceColumns.push({
-                id: 'clusterNodeAddress',
-                name: 'Node',
-                field: 'clusterNodeAddress',
-                sortable: true,
-                resizable: true
-            });
-        }
-
-        // conditionally show the action column
-        if (nf.Common.SUPPORTS_SVG || isInShell) {
-            provenanceColumns.push({
-                id: 'actions',
-                name: ' ',
-                formatter: showLineageFormatter,
-                resizable: false,
-                sortable: false,
-                width: 50,
-                maxWidth: 50
-            });
-        }
-
-        var provenanceOptions = {
-            forceFitColumns: true,
-            enableTextSelectionOnCells: true,
-            enableCellNavigation: true,
-            enableColumnReorder: false,
-            autoEdit: false,
-            multiSelect: false,
-            rowHeight: 24
-        };
-
-        // create the remote model
-        var provenanceData = new Slick.Data.DataView({
-            inlineFilters: false
-        });
-        provenanceData.setItems([]);
-        provenanceData.setFilterArgs({
-            searchString: '',
-            property: 'name'
-        });
-        provenanceData.setFilter(filter);
-
-        // initialize the sort
-        sort({
-            columnId: 'eventTime',
-            sortAsc: false
-        }, provenanceData);
-
-        // initialize the grid
-        var provenanceGrid = new Slick.Grid('#provenance-table', provenanceData, provenanceColumns, provenanceOptions);
-        provenanceGrid.setSelectionModel(new Slick.RowSelectionModel());
-        provenanceGrid.registerPlugin(new Slick.AutoTooltips());
-
-        // initialize the grid sorting
-        provenanceGrid.setSortColumn('eventTime', false);
-        provenanceGrid.onSort.subscribe(function (e, args) {
-            sort({
-                columnId: args.sortCol.field,
-                sortAsc: args.sortAsc
-            }, provenanceData);
-        });
-
-        // configure a click listener
-        provenanceGrid.onClick.subscribe(function (e, args) {
-            var target = $(e.target);
-
-            // get the node at this row
-            var item = provenanceData.getItem(args.row);
-
-            // determine the desired action
-            if (provenanceGrid.getColumns()[args.cell].id === 'actions') {
-                if (target.hasClass('show-lineage')) {
-                    provenanceLineageCtrl.showLineage(item.flowFileUuid, item.eventId.toString(), item.clusterNodeId, provenanceTableCtrl);
-                } else if (target.hasClass('go-to')) {
-                    goTo(item);
-                }
-            } else if (provenanceGrid.getColumns()[args.cell].id === 'moreDetails') {
-                if (target.hasClass('show-event-details')) {
-                    provenanceTableCtrl.showEventDetails(item.eventId, item.clusterNodeId);
-                }
-            }
-        });
-
-        // wire up the dataview to the grid
-        provenanceData.onRowCountChanged.subscribe(function (e, args) {
-            provenanceGrid.updateRowCount();
-            provenanceGrid.render();
-
-            // update the total number of displayed events if necessary
-            $('#displayed-events').text(nf.Common.formatInteger(args.current));
-        });
-        provenanceData.onRowsChanged.subscribe(function (e, args) {
-            provenanceGrid.invalidateRows(args.rows);
-            provenanceGrid.render();
-        });
-
-        // hold onto an instance of the grid
-        $('#provenance-table').data('gridInstance', provenanceGrid);
-
-        // initialize the number of displayed items
-        $('#displayed-events').text('0');
-        $('#total-events').text('0');
-    };
-
-    /**
-     * Applies the filter found in the filter expression text field.
-     */
-    var applyFilter = function () {
-        // get the dataview
-        var provenanceGrid = $('#provenance-table').data('gridInstance');
-
-        // ensure the grid has been initialized
-        if (nf.Common.isDefinedAndNotNull(provenanceGrid)) {
-            var provenanceData = provenanceGrid.getData();
-
-            // update the search criteria
-            provenanceData.setFilterArgs({
-                searchString: getFilterText(),
-                property: $('#provenance-filter-type').combo('getSelectedOption').value
-            });
-            provenanceData.refresh();
-        }
-    };
-
-    /**
-     * Get the text out of the filter field. If the filter field doesn't
-     * have any text it will contain the text 'filter list' so this method
-     * accounts for that.
-     */
-    var getFilterText = function () {
-        return $('#provenance-filter').val();
-    };
-
-    /**
-     * Performs the provenance filtering.
-     *
-     * @param {object} item     The item subject to filtering
-     * @param {object} args     Filter arguments
-     * @returns {Boolean}       Whether or not to include the item
-     */
-    var filter = function (item, args) {
-        if (args.searchString === '') {
-            return true;
-        }
-
-        try {
-            // perform the row filtering
-            var filterExp = new RegExp(args.searchString, 'i');
-        } catch (e) {
-            // invalid regex
-            return false;
-        }
-
-        return item[args.property].search(filterExp) >= 0;
-    };
-
-    /**
-     * Sorts the data according to the sort details.
-     *
-     * @param {type} sortDetails
-     * @param {type} data
-     */
-    var sort = function (sortDetails, data) {
-        // defines a function for sorting
-        var comparer = function (a, b) {
-            if (sortDetails.columnId === 'eventTime') {
-                var aTime = nf.Common.parseDateTime(a[sortDetails.columnId]).getTime();
-                var bTime = nf.Common.parseDateTime(b[sortDetails.columnId]).getTime();
-                if (aTime === bTime) {
-                    return a['id'] - b['id'];
+                // handle the specified query appropriately
+                if (common.isDefinedAndNotNull(query)) {
+                    // store the last query performed
+                    cachedQuery = query;
+                } else if (!$.isEmptyObject(cachedQuery)) {
+                    // use the last query performed
+                    query = cachedQuery;
                 } else {
-                    return aTime - bTime;
+                    // don't use a query
+                    query = {};
                 }
-            } else if (sortDetails.columnId === 'fileSize') {
-                var aSize = nf.Common.parseSize(a[sortDetails.columnId]);
-                var bSize = nf.Common.parseSize(b[sortDetails.columnId]);
-                if (aSize === bSize) {
-                    return a['id'] - b['id'];
-                } else {
-                    return aSize - bSize;
-                }
-            } else {
-                var aString = nf.Common.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
-                var bString = nf.Common.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
-                if (aString === bString) {
-                    return a['id'] - b['id'];
-                } else {
-                    return aString === bString ? 0 : aString > bString ? 1 : -1;
-                }
-            }
-        };
 
-        // perform the sort
-        data.sort(comparer, sortDetails.sortAsc);
-    };
+                // closes the searching dialog and cancels the query on the server
+                var closeDialog = function () {
+                    // cancel the provenance results since we've successfully processed the results
+                    if (common.isDefinedAndNotNull(provenance)) {
+                        cancelProvenance(provenance);
+                    }
 
-    /**
-     * Submits a new provenance query.
-     *
-     * @argument {object} provenance The provenance query
-     * @returns {deferred}
-     */
-    var submitProvenance = function (provenance) {
-        var provenanceEntity = {
-            'provenance': {
-                'request': $.extend({
-                    maxResults: config.maxResults,
-                    summarize: true,
-                    incrementalResults: false
-                }, provenance)
-            }
-        };
-
-        // submit the provenance request
-        return $.ajax({
-            type: 'POST',
-            url: config.urls.provenance,
-            data: JSON.stringify(provenanceEntity),
-            dataType: 'json',
-            contentType: 'application/json'
-        }).fail(nf.Common.handleAjaxError);
-    };
-
-    /**
-     * Gets the results from the provenance query for the specified id.
-     *
-     * @param {object} provenance
-     * @returns {deferred}
-     */
-    var getProvenance = function (provenance) {
-        var url = provenance.uri;
-        if (nf.Common.isDefinedAndNotNull(provenance.request.clusterNodeId)) {
-            url += '?' + $.param({
-                    clusterNodeId: provenance.request.clusterNodeId,
-                    summarize: true,
-                    incrementalResults: false
-                });
-        } else {
-            url += '?' + $.param({
-                    summarize: true,
-                    incrementalResults: false
-                });
-        }
-
-        return $.ajax({
-            type: 'GET',
-            url: url,
-            dataType: 'json'
-        }).fail(nf.Common.handleAjaxError);
-    };
-
-    /**
-     * Cancels the specified provenance query.
-     *
-     * @param {object} provenance
-     * @return {deferred}
-     */
-    var cancelProvenance = function (provenance) {
-        var url = provenance.uri;
-        if (nf.Common.isDefinedAndNotNull(provenance.request.clusterNodeId)) {
-            url += '?' + $.param({
-                    clusterNodeId: provenance.request.clusterNodeId
-                });
-        }
-
-        return $.ajax({
-            type: 'DELETE',
-            url: url,
-            dataType: 'json'
-        }).fail(nf.Common.handleAjaxError);
-    };
-
-    /**
-     * Checks the results of the specified provenance.
-     *
-     * @param {object} provenance
-     */
-    var loadProvenanceResults = function (provenance, provenanceTableCtrl) {
-        var provenanceRequest = provenance.request;
-        var provenanceResults = provenance.results;
-
-        // ensure there are groups specified
-        if (nf.Common.isDefinedAndNotNull(provenanceResults.provenanceEvents)) {
-            var provenanceTable = $('#provenance-table').data('gridInstance');
-            var provenanceData = provenanceTable.getData();
-
-            // set the items
-            provenanceData.setItems(provenanceResults.provenanceEvents);
-            provenanceData.reSort();
-            provenanceTable.invalidate();
-
-            // update the stats last refreshed timestamp
-            $('#provenance-last-refreshed').text(provenanceResults.generated);
-
-            // update the oldest event available
-            $('#oldest-event').html(nf.Common.formatValue(provenanceResults.oldestEvent));
-
-            // record the server offset
-            provenanceTableCtrl.serverTimeOffset = provenanceResults.timeOffset;
-
-            // determines if the specified query is blank (no search terms, start or end date)
-            var isBlankQuery = function (query) {
-                return nf.Common.isUndefinedOrNull(query.startDate) && nf.Common.isUndefinedOrNull(query.endDate) && $.isEmptyObject(query.searchTerms);
-            };
-
-            // update the filter message based on the request
-            if (isBlankQuery(provenanceRequest)) {
-                var message = 'Showing the most recent ';
-                if (provenanceResults.totalCount >= config.maxResults) {
-                    message += (nf.Common.formatInteger(config.maxResults) + ' of ' + provenanceResults.total + ' events, please refine the search.');
-                } else {
-                    message += ('events.');
-                }
-                $('#provenance-query-message').text(message);
-                $('#clear-provenance-search').hide();
-            } else {
-                var message = 'Showing ';
-                if (provenanceResults.totalCount >= config.maxResults) {
-                    message += (nf.Common.formatInteger(config.maxResults) + ' of ' + provenanceResults.total + ' events that match the specified query, please refine the search.');
-                } else {
-                    message += ('the events that match the specified query.');
-                }
-                $('#provenance-query-message').text(message);
-                $('#clear-provenance-search').show();
-            }
-
-            // update the total number of events
-            $('#total-events').text(nf.Common.formatInteger(provenanceResults.provenanceEvents.length));
-        } else {
-            $('#total-events').text('0');
-        }
-    };
-
-    /**
-     * Goes to the specified component if possible.
-     *
-     * @argument {object} item       The event it
-     */
-    var goTo = function (item) {
-        // ensure the component is still present in the flow
-        if (nf.Common.isDefinedAndNotNull(item.groupId)) {
-            // only attempt this if we're within a frame
-            if (top !== window) {
-                // and our parent has canvas utils and shell defined
-                if (nf.Common.isDefinedAndNotNull(parent.nf) && nf.Common.isDefinedAndNotNull(parent.nf.CanvasUtils) && nf.Common.isDefinedAndNotNull(parent.nf.Shell)) {
-                    parent.nf.CanvasUtils.showComponent(item.groupId, item.componentId);
-                    parent.$('#shell-close-button').click();
-                }
-            }
-        }
-    };
-
-    function ProvenanceTableCtrl() {
-
-        /**
-         * The server time offset
-         */
-        this.serverTimeOffset = null;
-    }
-
-    ProvenanceTableCtrl.prototype = {
-        constructor: ProvenanceTableCtrl,
-
-        /**
-         * Initializes the provenance table. Returns a deferred that will indicate when/if the table has initialized successfully.
-         *
-         * @param {boolean} isClustered     Whether or not this instance is clustered
-         */
-        init: function (isClustered) {
-            var self = this;
-            return $.Deferred(function (deferred) {
-                // handles init failure
-                var failure = function (xhr, status, error) {
-                    deferred.reject();
-                    nf.Common.handleAjaxError(xhr, status, error);
+                    // close the dialog
+                    $('#provenance-query-dialog').modal('hide');
                 };
 
-                // initialize the lineage view
-                provenanceLineageCtrl.init();
+                // polls the server for the status of the provenance
+                var pollProvenance = function () {
+                    getProvenance(provenance).done(function (response) {
+                        // update the provenance
+                        provenance = response.provenance;
 
-                // initialize the table view
-                initDetailsDialog();
-                initProvenanceQueryDialog();
-                initProvenanceTable(isClustered, self);
-                initSearchDialog(isClustered, self).done(function () {
-                    deferred.resolve();
-                }).fail(failure);
-            }).promise();
-        },
+                        // process the provenance
+                        processProvenanceResponse();
+                    }).fail(closeDialog);
+                };
 
-        /**
-         * Update the size of the grid based on its container's current size.
-         */
-        resetTableSize: function () {
-            var provenanceGrid = $('#provenance-table').data('gridInstance');
-            if (nf.Common.isDefinedAndNotNull(provenanceGrid)) {
-                provenanceGrid.resizeCanvas();
-            }
-        },
-
-        /**
-         * Updates the value of the specified progress bar.
-         *
-         * @param {jQuery}  progressBar
-         * @param {integer} value
-         * @returns {undefined}
-         */
-        updateProgress: function (progressBar, value) {
-            // remove existing labels
-            progressBar.find('div.progress-label').remove();
-            progressBar.find('md-progress-linear').remove();
-
-            // update the progress bar
-            var label = $('
      ').text(value + '%');
-            (nf.ng.Bridge.injector.get('$compile')($(''))(nf.ng.Bridge.rootScope)).appendTo(progressBar);
-            progressBar.append(label);
-        },
-
-        /**
-         * Loads the provenance table with events according to the specified optional
-         * query. If not query is specified or it is empty, the most recent entries will
-         * be returned.
-         *
-         * @param {object} query
-         */
-        loadProvenanceTable: function (query) {
-            var self = this;
-            var provenanceProgress = $('#provenance-percent-complete');
-
-            // add support to cancel outstanding requests - when the button is pressed we
-            // could be in one of two stages, 1) waiting to GET the status or 2)
-            // in the process of GETting the status. Handle both cases by cancelling
-            // the setTimeout (1) and by setting a flag to indicate that a request has
-            // been request so we can ignore the results (2).
-
-            var cancelled = false;
-            var provenance = null;
-            var provenanceTimer = null;
-
-            // update the progress bar value
-            self.updateProgress(provenanceProgress, 0);
-
-            // show the 'searching...' dialog
-            $('#provenance-query-dialog').modal('setButtonModel', [{
-                buttonText: 'Cancel',
-                color: {
-                    base: '#E3E8EB',
-                    hover: '#C7D2D7',
-                    text: '#004849'
-                },
-                handler: {
-                    click: function () {
-                        cancelled = true;
-
-                        // we are waiting for the next poll attempt
-                        if (provenanceTimer !== null) {
-                            // cancel it
-                            clearTimeout(provenanceTimer);
-
-                            // cancel the provenance
-                            closeDialog();
-                        }
+                // processes the provenance
+                var processProvenanceResponse = function () {
+                    // if the request was cancelled just ignore the current response
+                    if (cancelled === true) {
+                        closeDialog();
+                        return;
                     }
-                }
-            }]).modal('show');
 
-            // -----------------------------
-            // determine the provenance query
-            // -----------------------------
+                    // update the percent complete
+                    provenanceTableCtrl.updateProgress(provenanceProgress, provenance.percentCompleted);
 
-            // handle the specified query appropriately
-            if (nf.Common.isDefinedAndNotNull(query)) {
-                // store the last query performed
-                cachedQuery = query;
-            } else if (!$.isEmptyObject(cachedQuery)) {
-                // use the last query performed
-                query = cachedQuery;
-            } else {
-                // don't use a query
-                query = {};
-            }
+                    // process the results if they are finished
+                    if (provenance.finished === true) {
+                        // show any errors when the query finishes
+                        if (!common.isEmpty(provenance.results.errors)) {
+                            var errors = provenance.results.errors;
+                            dialog.showOkDialog({
+                                headerText: 'Provenance',
+                                dialogContent: common.formatUnorderedList(errors),
+                            });
+                        }
 
-            // closes the searching dialog and cancels the query on the server
-            var closeDialog = function () {
-                // cancel the provenance results since we've successfully processed the results
-                if (nf.Common.isDefinedAndNotNull(provenance)) {
-                    cancelProvenance(provenance);
-                }
+                        // process the results
+                        loadProvenanceResults(provenance, provenanceTableCtrl);
 
-                // close the dialog
-                $('#provenance-query-dialog').modal('hide');
-            };
+                        // hide the dialog
+                        closeDialog();
+                    } else {
+                        // start the wait to poll again
+                        provenanceTimer = setTimeout(function () {
+                            // clear the timer since we've been invoked
+                            provenanceTimer = null;
 
-            // polls the server for the status of the provenance
-            var pollProvenance = function () {
-                getProvenance(provenance).done(function (response) {
+                            // poll provenance
+                            pollProvenance();
+                        }, 2000);
+                    }
+                };
+
+                // once the query is submitted wait until its finished
+                submitProvenance(query).done(function (response) {
                     // update the provenance
                     provenance = response.provenance;
 
-                    // process the provenance
+                    // process the results, if they are not done wait 1 second before trying again
                     processProvenanceResponse();
                 }).fail(closeDialog);
-            };
+            },
 
-            // processes the provenance
-            var processProvenanceResponse = function () {
-                // if the request was cancelled just ignore the current response
-                if (cancelled === true) {
-                    closeDialog();
-                    return;
+            /**
+             * Gets the details for the specified event.
+             *
+             * @param {string} eventId
+             * @param {string} clusterNodeId    The id of the node in the cluster where this event/flowfile originated
+             */
+            getEventDetails: function (eventId, clusterNodeId) {
+                var url;
+                if (nf.Common.isDefinedAndNotNull(clusterNodeId)) {
+                    url = config.urls.provenanceEvents + encodeURIComponent(eventId) + '?' + $.param({
+                            clusterNodeId: clusterNodeId
+                        });
+                } else {
+                    url = config.urls.provenanceEvents + encodeURIComponent(eventId);
                 }
 
-                // update the percent complete
-                self.updateProgress(provenanceProgress, provenance.percentCompleted);
+                return $.ajax({
+                    type: 'GET',
+                    url: url,
+                    dataType: 'json'
+                }).fail(nf.Common.handleAjaxError);
+            },
 
-                // process the results if they are finished
-                if (provenance.finished === true) {
-                    // show any errors when the query finishes
-                    if (!nf.Common.isEmpty(provenance.results.errors)) {
-                        var errors = provenance.results.errors;
-                        nf.Dialog.showOkDialog({
-                            headerText: 'Provenance',
-                            dialogContent: nf.Common.formatUnorderedList(errors),
+            /**
+             * Shows the details for the specified action.
+             *
+             * @param {string} eventId
+             * @param {string} clusterNodeId    The id of the node in the cluster where this event/flowfile originated
+             */
+            showEventDetails: function (eventId, clusterNodeId) {
+                provenanceTableCtrl.getEventDetails(eventId, clusterNodeId).done(function (response) {
+                    var event = response.provenanceEvent;
+
+                    // update the event details
+                    $('#provenance-event-id').text(event.eventId);
+                    $('#provenance-event-time').html(common.formatValue(event.eventTime)).ellipsis();
+                    $('#provenance-event-type').html(common.formatValue(event.eventType)).ellipsis();
+                    $('#provenance-event-flowfile-uuid').html(common.formatValue(event.flowFileUuid)).ellipsis();
+                    $('#provenance-event-component-id').html(common.formatValue(event.componentId)).ellipsis();
+                    $('#provenance-event-component-name').html(common.formatValue(event.componentName)).ellipsis();
+                    $('#provenance-event-component-type').html(common.formatValue(event.componentType)).ellipsis();
+                    $('#provenance-event-details').html(common.formatValue(event.details)).ellipsis();
+
+                    // over the default tooltip with the actual byte count
+                    var fileSize = $('#provenance-event-file-size').html(common.formatValue(event.fileSize)).ellipsis();
+                    fileSize.attr('title', common.formatInteger(event.fileSizeBytes) + ' bytes');
+
+                    // sets an duration
+                    var setDuration = function (field, value) {
+                        if (common.isDefinedAndNotNull(value)) {
+                            if (value === 0) {
+                                field.text('< 1ms');
+                            } else {
+                                field.text(common.formatDuration(value));
+                            }
+                        } else {
+                            field.html('No value set');
+                        }
+                    };
+
+                    // handle durations
+                    setDuration($('#provenance-event-duration'), event.eventDuration);
+                    setDuration($('#provenance-lineage-duration'), event.lineageDuration);
+
+                    // formats an event detail
+                    var formatEventDetail = function (label, value) {
+                        $('
      ').append(
+                            $('
      ').text(label)).append(
+                            $('
      ' + common.formatValue(value) + '
      ').ellipsis()).append(
+                            $('
      ')).appendTo('#additional-provenance-details');
+                    };
+
+                    // conditionally show RECEIVE details
+                    if (event.eventType === 'RECEIVE') {
+                        formatEventDetail('Source FlowFile Id', event.sourceSystemFlowFileId);
+                        formatEventDetail('Transit Uri', event.transitUri);
+                    }
+
+                    // conditionally show SEND details
+                    if (event.eventType === 'SEND') {
+                        formatEventDetail('Transit Uri', event.transitUri);
+                    }
+
+                    // conditionally show ADDINFO details
+                    if (event.eventType === 'ADDINFO') {
+                        formatEventDetail('Alternate Identifier Uri', event.alternateIdentifierUri);
+                    }
+
+                    // conditionally show ROUTE details
+                    if (event.eventType === 'ROUTE') {
+                        formatEventDetail('Relationship', event.relationship);
+                    }
+
+                    // conditionally show FETCH details
+                    if (event.eventType === 'FETCH') {
+                        formatEventDetail('Transit Uri', event.transitUri);
+                    }
+
+                    // conditionally show the cluster node identifier
+                    if (common.isDefinedAndNotNull(event.clusterNodeId)) {
+                        // save the cluster node id
+                        $('#provenance-event-cluster-node-id').text(event.clusterNodeId);
+
+                        // render the cluster node address
+                        formatEventDetail('Node Address', event.clusterNodeAddress);
+                    }
+
+                    // populate the parent/child flowfile uuids
+                    var parentUuids = $('#parent-flowfiles-container');
+                    var childUuids = $('#child-flowfiles-container');
+
+                    // handle parent flowfiles
+                    if (common.isEmpty(event.parentUuids)) {
+                        $('#parent-flowfile-count').text(0);
+                        parentUuids.append('No parents');
+                    } else {
+                        $('#parent-flowfile-count').text(event.parentUuids.length);
+                        $.each(event.parentUuids, function (_, uuid) {
+                            $('
      ').text(uuid).appendTo(parentUuids);
                         });
                     }
 
-                    // process the results
-                    loadProvenanceResults(provenance, self);
+                    // handle child flowfiles
+                    if (common.isEmpty(event.childUuids)) {
+                        $('#child-flowfile-count').text(0);
+                        childUuids.append('No children');
+                    } else {
+                        $('#child-flowfile-count').text(event.childUuids.length);
+                        $.each(event.childUuids, function (_, uuid) {
+                            $('
      ').text(uuid).appendTo(childUuids);
+                        });
+                    }
 
-                    // hide the dialog
-                    closeDialog();
-                } else {
-                    // start the wait to poll again
-                    provenanceTimer = setTimeout(function () {
-                        // clear the timer since we've been invoked
-                        provenanceTimer = null;
+                    // get the attributes container
+                    var attributesContainer = $('#attributes-container');
 
-                        // poll provenance
-                        pollProvenance();
-                    }, 2000);
-                }
-            };
+                    // get any action details
+                    $.each(event.attributes, function (_, attribute) {
+                        // create the attribute record
+                        var attributeRecord = $('
      ')
+                            .append($('
      ' + common.formatValue(attribute.name) + '
      ').ellipsis())
+                            .appendTo(attributesContainer);
 
-            // once the query is submitted wait until its finished
-            submitProvenance(query).done(function (response) {
-                // update the provenance
-                provenance = response.provenance;
+                        // add the current value
+                        attributeRecord
+                            .append($('
      ' + common.formatValue(attribute.value) + '
      ').ellipsis())
+                            .append('
      ');
 
-                // process the results, if they are not done wait 1 second before trying again
-                processProvenanceResponse();
-            }).fail(closeDialog);
-        },
-
-        /**
-         * Gets the details for the specified event.
-         *
-         * @param {string} eventId
-         * @param {string} clusterNodeId    The id of the node in the cluster where this event/flowfile originated
-         */
-        getEventDetails: function (eventId, clusterNodeId) {
-            var url;
-            if (nf.Common.isDefinedAndNotNull(clusterNodeId)) {
-                url = config.urls.provenanceEvents + encodeURIComponent(eventId) + '?' + $.param({
-                        clusterNodeId: clusterNodeId
-                    });
-            } else {
-                url = config.urls.provenanceEvents + encodeURIComponent(eventId);
-            }
-
-            return $.ajax({
-                type: 'GET',
-                url: url,
-                dataType: 'json'
-            }).fail(nf.Common.handleAjaxError);
-        },
-
-        /**
-         * Shows the details for the specified action.
-         *
-         * @param {string} eventId
-         * @param {string} clusterNodeId    The id of the node in the cluster where this event/flowfile originated
-         */
-        showEventDetails: function (eventId, clusterNodeId) {
-            provenanceTableCtrl.getEventDetails(eventId, clusterNodeId).done(function (response) {
-                var event = response.provenanceEvent;
-
-                // update the event details
-                $('#provenance-event-id').text(event.eventId);
-                $('#provenance-event-time').html(nf.Common.formatValue(event.eventTime)).ellipsis();
-                $('#provenance-event-type').html(nf.Common.formatValue(event.eventType)).ellipsis();
-                $('#provenance-event-flowfile-uuid').html(nf.Common.formatValue(event.flowFileUuid)).ellipsis();
-                $('#provenance-event-component-id').html(nf.Common.formatValue(event.componentId)).ellipsis();
-                $('#provenance-event-component-name').html(nf.Common.formatValue(event.componentName)).ellipsis();
-                $('#provenance-event-component-type').html(nf.Common.formatValue(event.componentType)).ellipsis();
-                $('#provenance-event-details').html(nf.Common.formatValue(event.details)).ellipsis();
-
-                // over the default tooltip with the actual byte count
-                var fileSize = $('#provenance-event-file-size').html(nf.Common.formatValue(event.fileSize)).ellipsis();
-                fileSize.attr('title', nf.Common.formatInteger(event.fileSizeBytes) + ' bytes');
-
-                // sets an duration
-                var setDuration = function (field, value) {
-                    if (nf.Common.isDefinedAndNotNull(value)) {
-                        if (value === 0) {
-                            field.text('< 1ms');
+                        // show the previous value if the property has changed
+                        if (attribute.value !== attribute.previousValue) {
+                            if (common.isDefinedAndNotNull(attribute.previousValue)) {
+                                attributeRecord
+                                    .append($('
      ' + common.formatValue(attribute.previousValue) + ' (previous)
      ').ellipsis())
+                                    .append('
      ');
+                            } else {
+                                attributeRecord
+                                    .append($('
      ' + common.formatValue(attribute.previousValue) + '
      ').ellipsis())
+                                    .append('
      ');
+                            }
                         } else {
-                            field.text(nf.Common.formatDuration(value));
+                            // mark this attribute as not modified
+                            attributeRecord.addClass('attribute-unmodified');
+                        }
+                    });
+
+                    var formatContentValue = function (element, value) {
+                        if (common.isDefinedAndNotNull(value)) {
+                            element.removeClass('unset').text(value);
+                        } else {
+                            element.addClass('unset').text('No value previously set');
+                        }
+                    };
+
+                    // content
+                    $('#input-content-header').text('Input Claim');
+                    formatContentValue($('#input-content-container'), event.inputContentClaimContainer);
+                    formatContentValue($('#input-content-section'), event.inputContentClaimSection);
+                    formatContentValue($('#input-content-identifier'), event.inputContentClaimIdentifier);
+                    formatContentValue($('#input-content-offset'), event.inputContentClaimOffset);
+                    formatContentValue($('#input-content-bytes'), event.inputContentClaimFileSizeBytes);
+
+                    // input content file size
+                    var inputContentSize = $('#input-content-size');
+                    formatContentValue(inputContentSize, event.inputContentClaimFileSize);
+                    if (common.isDefinedAndNotNull(event.inputContentClaimFileSize)) {
+                        // over the default tooltip with the actual byte count
+                        inputContentSize.attr('title', common.formatInteger(event.inputContentClaimFileSizeBytes) + ' bytes');
+                    }
+
+                    formatContentValue($('#output-content-container'), event.outputContentClaimContainer);
+                    formatContentValue($('#output-content-section'), event.outputContentClaimSection);
+                    formatContentValue($('#output-content-identifier'), event.outputContentClaimIdentifier);
+                    formatContentValue($('#output-content-offset'), event.outputContentClaimOffset);
+                    formatContentValue($('#output-content-bytes'), event.outputContentClaimFileSizeBytes);
+
+                    // output content file size
+                    var outputContentSize = $('#output-content-size');
+                    formatContentValue(outputContentSize, event.outputContentClaimFileSize);
+                    if (common.isDefinedAndNotNull(event.outputContentClaimFileSize)) {
+                        // over the default tooltip with the actual byte count
+                        outputContentSize.attr('title', common.formatInteger(event.outputContentClaimFileSizeBytes) + ' bytes');
+                    }
+
+                    if (event.inputContentAvailable === true) {
+                        $('#input-content-download').show();
+
+                        if (common.isContentViewConfigured()) {
+                            $('#input-content-view').show();
+                        } else {
+                            $('#input-content-view').hide();
                         }
                     } else {
-                        field.html('No value set');
-                    }
-                };
-
-                // handle durations
-                setDuration($('#provenance-event-duration'), event.eventDuration);
-                setDuration($('#provenance-lineage-duration'), event.lineageDuration);
-
-                // formats an event detail
-                var formatEventDetail = function (label, value) {
-                    $('
      ').append(
-                        $('
      ').text(label)).append(
-                        $('
      ' + nf.Common.formatValue(value) + '
      ').ellipsis()).append(
-                        $('
      ')).appendTo('#additional-provenance-details');
-                };
-
-                // conditionally show RECEIVE details
-                if (event.eventType === 'RECEIVE') {
-                    formatEventDetail('Source FlowFile Id', event.sourceSystemFlowFileId);
-                    formatEventDetail('Transit Uri', event.transitUri);
-                }
-
-                // conditionally show SEND details
-                if (event.eventType === 'SEND') {
-                    formatEventDetail('Transit Uri', event.transitUri);
-                }
-
-                // conditionally show ADDINFO details
-                if (event.eventType === 'ADDINFO') {
-                    formatEventDetail('Alternate Identifier Uri', event.alternateIdentifierUri);
-                }
-
-                // conditionally show ROUTE details
-                if (event.eventType === 'ROUTE') {
-                    formatEventDetail('Relationship', event.relationship);
-                }
-
-                // conditionally show FETCH details
-                if (event.eventType === 'FETCH') {
-                    formatEventDetail('Transit Uri', event.transitUri);
-                }
-
-                // conditionally show the cluster node identifier
-                if (nf.Common.isDefinedAndNotNull(event.clusterNodeId)) {
-                    // save the cluster node id
-                    $('#provenance-event-cluster-node-id').text(event.clusterNodeId);
-
-                    // render the cluster node address
-                    formatEventDetail('Node Address', event.clusterNodeAddress);
-                }
-
-                // populate the parent/child flowfile uuids
-                var parentUuids = $('#parent-flowfiles-container');
-                var childUuids = $('#child-flowfiles-container');
-
-                // handle parent flowfiles
-                if (nf.Common.isEmpty(event.parentUuids)) {
-                    $('#parent-flowfile-count').text(0);
-                    parentUuids.append('No parents');
-                } else {
-                    $('#parent-flowfile-count').text(event.parentUuids.length);
-                    $.each(event.parentUuids, function (_, uuid) {
-                        $('
      ').text(uuid).appendTo(parentUuids);
-                    });
-                }
-
-                // handle child flowfiles
-                if (nf.Common.isEmpty(event.childUuids)) {
-                    $('#child-flowfile-count').text(0);
-                    childUuids.append('No children');
-                } else {
-                    $('#child-flowfile-count').text(event.childUuids.length);
-                    $.each(event.childUuids, function (_, uuid) {
-                        $('
      ').text(uuid).appendTo(childUuids);
-                    });
-                }
-
-                // get the attributes container
-                var attributesContainer = $('#attributes-container');
-
-                // get any action details
-                $.each(event.attributes, function (_, attribute) {
-                    // create the attribute record
-                    var attributeRecord = $('
      ')
-                        .append($('
      ' + nf.Common.formatValue(attribute.name) + '
      ').ellipsis())
-                        .appendTo(attributesContainer);
-
-                    // add the current value
-                    attributeRecord
-                        .append($('
      ' + nf.Common.formatValue(attribute.value) + '
      ').ellipsis())
-                        .append('
      ');
-
-                    // show the previous value if the property has changed
-                    if (attribute.value !== attribute.previousValue) {
-                        if (nf.Common.isDefinedAndNotNull(attribute.previousValue)) {
-                            attributeRecord
-                                .append($('
      ' + nf.Common.formatValue(attribute.previousValue) + ' (previous)
      ').ellipsis())
-                                .append('
      ');
-                        } else {
-                            attributeRecord
-                                .append($('
      ' + nf.Common.formatValue(attribute.previousValue) + '
      ').ellipsis())
-                                .append('
      ');
-                        }
-                    } else {
-                        // mark this attribute as not modified
-                        attributeRecord.addClass('attribute-unmodified');
-                    }
-                });
-
-                var formatContentValue = function (element, value) {
-                    if (nf.Common.isDefinedAndNotNull(value)) {
-                        element.removeClass('unset').text(value);
-                    } else {
-                        element.addClass('unset').text('No value previously set');
-                    }
-                };
-
-                // content
-                $('#input-content-header').text('Input Claim');
-                formatContentValue($('#input-content-container'), event.inputContentClaimContainer);
-                formatContentValue($('#input-content-section'), event.inputContentClaimSection);
-                formatContentValue($('#input-content-identifier'), event.inputContentClaimIdentifier);
-                formatContentValue($('#input-content-offset'), event.inputContentClaimOffset);
-                formatContentValue($('#input-content-bytes'), event.inputContentClaimFileSizeBytes);
-
-                // input content file size
-                var inputContentSize = $('#input-content-size');
-                formatContentValue(inputContentSize, event.inputContentClaimFileSize);
-                if (nf.Common.isDefinedAndNotNull(event.inputContentClaimFileSize)) {
-                    // over the default tooltip with the actual byte count
-                    inputContentSize.attr('title', nf.Common.formatInteger(event.inputContentClaimFileSizeBytes) + ' bytes');
-                }
-
-                formatContentValue($('#output-content-container'), event.outputContentClaimContainer);
-                formatContentValue($('#output-content-section'), event.outputContentClaimSection);
-                formatContentValue($('#output-content-identifier'), event.outputContentClaimIdentifier);
-                formatContentValue($('#output-content-offset'), event.outputContentClaimOffset);
-                formatContentValue($('#output-content-bytes'), event.outputContentClaimFileSizeBytes);
-
-                // output content file size
-                var outputContentSize = $('#output-content-size');
-                formatContentValue(outputContentSize, event.outputContentClaimFileSize);
-                if (nf.Common.isDefinedAndNotNull(event.outputContentClaimFileSize)) {
-                    // over the default tooltip with the actual byte count
-                    outputContentSize.attr('title', nf.Common.formatInteger(event.outputContentClaimFileSizeBytes) + ' bytes');
-                }
-
-                if (event.inputContentAvailable === true) {
-                    $('#input-content-download').show();
-
-                    if (nf.Common.isContentViewConfigured()) {
-                        $('#input-content-view').show();
-                    } else {
+                        $('#input-content-download').hide();
                         $('#input-content-view').hide();
                     }
-                } else {
-                    $('#input-content-download').hide();
-                    $('#input-content-view').hide();
-                }
 
-                if (event.outputContentAvailable === true) {
-                    $('#output-content-download').show();
+                    if (event.outputContentAvailable === true) {
+                        $('#output-content-download').show();
 
-                    if (nf.Common.isContentViewConfigured()) {
-                        $('#output-content-view').show();
+                        if (common.isContentViewConfigured()) {
+                            $('#output-content-view').show();
+                        } else {
+                            $('#output-content-view').hide();
+                        }
                     } else {
+                        $('#output-content-download').hide();
                         $('#output-content-view').hide();
                     }
-                } else {
-                    $('#output-content-download').hide();
-                    $('#output-content-view').hide();
-                }
 
-                if (event.replayAvailable === true) {
-                    $('#replay-content, #replay-content-connection').show();
-                    formatContentValue($('#replay-connection-id'), event.sourceConnectionIdentifier);
-                    $('#replay-content-message').hide();
-                } else {
-                    $('#replay-content, #replay-content-connection').hide();
-                    $('#replay-content-message').text(event.replayExplanation).show();
-                }
+                    if (event.replayAvailable === true) {
+                        $('#replay-content, #replay-content-connection').show();
+                        formatContentValue($('#replay-connection-id'), event.sourceConnectionIdentifier);
+                        $('#replay-content-message').hide();
+                    } else {
+                        $('#replay-content, #replay-content-connection').hide();
+                        $('#replay-content-message').text(event.replayExplanation).show();
+                    }
 
-                // show the dialog
-                $('#event-details-dialog').modal('show');
-            });
+                    // show the dialog
+                    $('#event-details-dialog').modal('show');
+                });
+            }
         }
-    }
 
-    var provenanceTableCtrl = new ProvenanceTableCtrl();
-    return provenanceTableCtrl;
-};
\ No newline at end of file
+        var provenanceTableCtrl = new ProvenanceTableCtrl();
+        return provenanceTableCtrl;
+    };
+
+    return nfProvenanceTable;
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance.js
index 9e5d457f8b..9dd99831dd 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance.js
@@ -15,285 +15,348 @@
  * limitations under the License.
  */
 
-/* global nf, top */
+/* global nf, top, define, module, require, exports */
 
-$(document).ready(function () {
-    //Create Angular App
-    var app = angular.module('ngProvenanceApp', ['ngResource', 'ngRoute', 'ngMaterial', 'ngMessages']);
-
-    //Define Dependency Injection Annotations
-    nf.ng.AppConfig.$inject = ['$mdThemingProvider', '$compileProvider'];
-    nf.ng.AppCtrl.$inject = ['$scope'];
-    nf.ng.Provenance.$inject = ['provenanceTableCtrl'];
-    nf.ng.ProvenanceLineage.$inject = [];
-    nf.ng.ProvenanceTable.$inject = ['provenanceLineageCtrl'];
-
-    //Configure Angular App
-    app.config(nf.ng.AppConfig);
-
-    //Define Angular App Controllers
-    app.controller('ngProvenanceAppCtrl', nf.ng.AppCtrl);
-
-    //Define Angular App Services
-    app.service('provenanceCtrl', nf.ng.Provenance);
-    app.service('provenanceLineageCtrl', nf.ng.ProvenanceLineage);
-    app.service('provenanceTableCtrl', nf.ng.ProvenanceTable);
-
-    //Manually Boostrap Angular App
-    nf.ng.Bridge.injector = angular.bootstrap($('body'), ['ngProvenanceApp'], { strictDi: true });
-
-    // initialize the status page
-    nf.ng.Bridge.injector.get('provenanceCtrl').init();
-});
-
-nf.ng.Provenance = function (provenanceTableCtrl) {
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'angular',
+                'nf.Common',
+                'nf.ng.AppConfig',
+                'nf.ng.AppCtrl',
+                'nf.ng.ProvenanceLineage',
+                'nf.ng.ProvenanceTable',
+                'nf.ng.Bridge',
+                'nf.ErrorHandler',
+                'nf.Storage'],
+            function ($,
+                      angular,
+                      common,
+                      appConfig,
+                      appCtrl,
+                      provenanceLineage,
+                      provenanceTable,
+                      angularBridge,
+                      errorHandler,
+                      storage) {
+                return (nf.ng.Provenance =
+                    factory($,
+                        angular,
+                        common,
+                        appConfig,
+                        appCtrl,
+                        provenanceLineage,
+                        provenanceTable,
+                        angularBridge,
+                        errorHandler,
+                        storage));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.ng.Provenance =
+            factory(require('jquery'),
+                require('angular'),
+                require('nf.Common'),
+                require('nf.ng.AppConfig'),
+                require('nf.ng.AppCtrl'),
+                require('nf.ng.ProvenanceLineage'),
+                require('nf.ng.ProvenanceTable'),
+                require('nf.ng.Bridge'),
+                require('nf.ErrorHandler'),
+                require('nf.Storage')));
+    } else {
+        nf.ng.Provenance = factory(root.$,
+            root.angular,
+            root.nf.Common,
+            root.nf.ng.AppConfig,
+            root.nf.ng.AppCtrl,
+            root.nf.ng.ProvenanceLineage,
+            root.nf.ng.ProvenanceTable,
+            root.nf.ng.Bridge,
+            root.nf.ErrorHandler,
+            root.nf.Storage);
+    }
+}(this, function ($, angular, common, appConfig, appCtrl, provenanceLineage, provenanceTable, angularBridge, errorHandler, storage) {
     'use strict';
 
-    /**
-     * Configuration object used to hold a number of configuration items.
-     */
-    var config = {
-        urls: {
-            clusterSummary: '../nifi-api/flow/cluster/summary',
-            banners: '../nifi-api/flow/banners',
-            about: '../nifi-api/flow/about',
-            currentUser: '../nifi-api/flow/current-user'
-        }
-    };
+    $(document).ready(function () {
+        //Create Angular App
+        var app = angular.module('ngProvenanceApp', ['ngResource', 'ngRoute', 'ngMaterial', 'ngMessages']);
 
-    /**
-     * Whether or not this NiFi is clustered.
-     */
-    var isClustered = null;
+        //Define Dependency Injection Annotations
+        appConfig.$inject = ['$mdThemingProvider', '$compileProvider'];
+        appCtrl.$inject = ['$scope'];
+        nfProvenance.$inject = ['provenanceTableCtrl'];
+        provenanceLineage.$inject = [];
+        provenanceTable.$inject = ['provenanceLineageCtrl'];
 
-    /**
-     * Determines if this NiFi is clustered.
-     */
-    var detectedCluster = function () {
-        return $.ajax({
-            type: 'GET',
-            url: config.urls.clusterSummary
-        }).done(function (response) {
-            isClustered = response.clusterSummary.connectedToCluster;
-        }).fail(nf.Common.handleAjaxError);
-    };
+        //Configure Angular App
+        app.config(appConfig);
 
-    /**
-     * Loads the controller configuration.
-     */
-    var loadAbout = function () {
-        // get the about details
-        return $.ajax({
-            type: 'GET',
-            url: config.urls.about,
-            dataType: 'json'
-        }).done(function (response) {
-            var aboutDetails = response.about;
-            var provenanceTitle = aboutDetails.title + ' Data Provenance';
+        //Define Angular App Controllers
+        app.controller('ngProvenanceAppCtrl', appCtrl);
 
-            // store the controller name
-            $('#nifi-controller-uri').text(aboutDetails.uri);
+        //Define Angular App Services
+        app.service('provenanceCtrl', nfProvenance);
+        app.service('provenanceLineageCtrl', provenanceLineage);
+        app.service('provenanceTableCtrl', provenanceTable);
 
-            // set the timezone for the start and end time
-            $('.timezone').text(aboutDetails.timezone);
+        //Manually Boostrap Angular App
+        angularBridge.injector = angular.bootstrap($('body'), ['ngProvenanceApp'], {strictDi: true});
 
-            // store the content viewer url if available
-            if (!nf.Common.isBlank(aboutDetails.contentViewerUrl)) {
-                $('#nifi-content-viewer-url').text(aboutDetails.contentViewerUrl);
-            }
+        // initialize the status page
+        angularBridge.injector.get('provenanceCtrl').init();
+    });
 
-            // set the document title and the about title
-            document.title = provenanceTitle;
-            $('#provenance-header-text').text(provenanceTitle);
-        }).fail(nf.Common.handleAjaxError);
-    };
-
-    /**
-     * Loads the current user.
-     */
-    var loadCurrentUser = function () {
-        return $.ajax({
-            type: 'GET',
-            url: config.urls.currentUser,
-            dataType: 'json'
-        }).done(function (currentUser) {
-            nf.Common.setCurrentUser(currentUser);
-        }).fail(nf.Common.handleAjaxError);
-    };
-
-    /**
-     * Initializes the provenance page.
-     */
-    var initializeProvenancePage = function () {
-        // define mouse over event for the refresh button
-        $('#refresh-button').click(function () {
-            provenanceTableCtrl.loadProvenanceTable();
-        });
-
-        // return a deferred for page initialization
-        return $.Deferred(function (deferred) {
-            // get the banners if we're not in the shell
-            if (top === window) {
-                $.ajax({
-                    type: 'GET',
-                    url: config.urls.banners,
-                    dataType: 'json'
-                }).done(function (response) {
-                    // ensure the banners response is specified
-                    if (nf.Common.isDefinedAndNotNull(response.banners)) {
-                        if (nf.Common.isDefinedAndNotNull(response.banners.headerText) && response.banners.headerText !== '') {
-                            // update the header text
-                            var bannerHeader = $('#banner-header').text(response.banners.headerText).show();
-
-                            // show the banner
-                            var updateTop = function (elementId) {
-                                var element = $('#' + elementId);
-                                element.css('top', (parseInt(bannerHeader.css('height'), 10) + parseInt(element.css('top'), 10)) + 'px');
-                            };
-
-                            // update the position of elements affected by top banners
-                            updateTop('provenance');
-                        }
-
-                        if (nf.Common.isDefinedAndNotNull(response.banners.footerText) && response.banners.footerText !== '') {
-                            // update the footer text and show it
-                            var bannerFooter = $('#banner-footer').text(response.banners.footerText).show();
-
-                            var updateBottom = function (elementId) {
-                                var element = $('#' + elementId);
-                                element.css('bottom', parseInt(bannerFooter.css('height'), 10) + 'px');
-                            };
-
-                            // update the position of elements affected by bottom banners
-                            updateBottom('provenance');
-                        }
-                    }
-
-                    deferred.resolve();
-                }).fail(function (xhr, status, error) {
-                    nf.Common.handleAjaxError(xhr, status, error);
-                    deferred.reject();
-                });
-            } else {
-                deferred.resolve();
-            }
-        }).promise();
-    };
-
-    function ProvenanceCtrl() {
-    }
-
-    ProvenanceCtrl.prototype = {
-        constructor: ProvenanceCtrl,
+    var nfProvenance = function (provenanceTableCtrl) {
 
         /**
-         * Initializes the status page.
+         * Configuration object used to hold a number of configuration items.
          */
-        init: function () {
-            nf.Storage.init();
+        var config = {
+            urls: {
+                clusterSummary: '../nifi-api/flow/cluster/summary',
+                banners: '../nifi-api/flow/banners',
+                about: '../nifi-api/flow/about',
+                currentUser: '../nifi-api/flow/current-user'
+            }
+        };
 
-            // load the user and detect if the NiFi is clustered
-            $.when(loadAbout(), loadCurrentUser(), detectedCluster()).done(function () {
-                // create the provenance table
-                provenanceTableCtrl.init(isClustered).done(function () {
-                    var searchTerms = {};
+        /**
+         * Whether or not this NiFi is clustered.
+         */
+        var isClustered = null;
 
-                    // look for a processor id in the query search
-                    var initialComponentId = $('#initial-component-query').text();
-                    if ($.trim(initialComponentId) !== '') {
-                        // populate initial search component
-                        $('input.searchable-component-id').val(initialComponentId);
+        /**
+         * Determines if this NiFi is clustered.
+         */
+        var detectedCluster = function () {
+            return $.ajax({
+                type: 'GET',
+                url: config.urls.clusterSummary
+            }).done(function (response) {
+                isClustered = response.clusterSummary.connectedToCluster;
+            }).fail(errorHandler.handleAjaxError);
+        };
 
-                        // build the search criteria
-                        searchTerms['ProcessorID'] = initialComponentId;
-                    }
+        /**
+         * Loads the controller configuration.
+         */
+        var loadAbout = function () {
+            // get the about details
+            return $.ajax({
+                type: 'GET',
+                url: config.urls.about,
+                dataType: 'json'
+            }).done(function (response) {
+                var aboutDetails = response.about;
+                var provenanceTitle = aboutDetails.title + ' Data Provenance';
 
-                    // look for a flowfile uuid in the query search
-                    var initialFlowFileUuid = $('#initial-flowfile-query').text();
-                    if ($.trim(initialFlowFileUuid) !== '') {
-                        // populate initial search component
-                        $('input.searchable-flowfile-uuid').val(initialFlowFileUuid);
+                // store the controller name
+                $('#nifi-controller-uri').text(aboutDetails.uri);
 
-                        // build the search criteria
-                        searchTerms['FlowFileUUID'] = initialFlowFileUuid;
-                    }
+                // set the timezone for the start and end time
+                $('.timezone').text(aboutDetails.timezone);
 
-                    // load the provenance table
-                    if ($.isEmptyObject(searchTerms)) {
-                        // load the provenance table
-                        provenanceTableCtrl.loadProvenanceTable();
-                    } else {
-                        // load the provenance table
-                        provenanceTableCtrl.loadProvenanceTable({
-                            'searchTerms': searchTerms
-                        });
-                    }
+                // store the content viewer url if available
+                if (!common.isBlank(aboutDetails.contentViewerUrl)) {
+                    $('#nifi-content-viewer-url').text(aboutDetails.contentViewerUrl);
+                }
 
-                    var setBodySize = function () {
-                        //alter styles if we're not in the shell
-                        if (top === window) {
-                            $('body').css({
-                                'height': $(window).height() + 'px',
-                                'width': $(window).width() + 'px'
-                            });
+                // set the document title and the about title
+                document.title = provenanceTitle;
+                $('#provenance-header-text').text(provenanceTitle);
+            }).fail(errorHandler.handleAjaxError);
+        };
 
-                            $('#provenance').css('margin', 40);
-                            $('#provenance-refresh-container').css({
-                                'bottom': '0px',
-                                'left': '0px',
-                                'right': '0px'
-                            });
+        /**
+         * Loads the current user.
+         */
+        var loadCurrentUser = function () {
+            return $.ajax({
+                type: 'GET',
+                url: config.urls.currentUser,
+                dataType: 'json'
+            }).done(function (currentUser) {
+                common.setCurrentUser(currentUser);
+            }).fail(errorHandler.handleAjaxError);
+        };
+
+        /**
+         * Initializes the provenance page.
+         */
+        var initializeProvenancePage = function () {
+            // define mouse over event for the refresh button
+            $('#refresh-button').click(function () {
+                provenanceTableCtrl.loadProvenanceTable();
+            });
+
+            // return a deferred for page initialization
+            return $.Deferred(function (deferred) {
+                // get the banners if we're not in the shell
+                if (top === window) {
+                    $.ajax({
+                        type: 'GET',
+                        url: config.urls.banners,
+                        dataType: 'json'
+                    }).done(function (response) {
+                        // ensure the banners response is specified
+                        if (common.isDefinedAndNotNull(response.banners)) {
+                            if (common.isDefinedAndNotNull(response.banners.headerText) && response.banners.headerText !== '') {
+                                // update the header text
+                                var bannerHeader = $('#banner-header').text(response.banners.headerText).show();
+
+                                // show the banner
+                                var updateTop = function (elementId) {
+                                    var element = $('#' + elementId);
+                                    element.css('top', (parseInt(bannerHeader.css('height'), 10) + parseInt(element.css('top'), 10)) + 'px');
+                                };
+
+                                // update the position of elements affected by top banners
+                                updateTop('provenance');
+                            }
+
+                            if (common.isDefinedAndNotNull(response.banners.footerText) && response.banners.footerText !== '') {
+                                // update the footer text and show it
+                                var bannerFooter = $('#banner-footer').text(response.banners.footerText).show();
+
+                                var updateBottom = function (elementId) {
+                                    var element = $('#' + elementId);
+                                    element.css('bottom', parseInt(bannerFooter.css('height'), 10) + 'px');
+                                };
+
+                                // update the position of elements affected by bottom banners
+                                updateBottom('provenance');
+                            }
                         }
 
-                        // configure the initial grid height
-                        provenanceTableCtrl.resetTableSize();
-                    };
-
-                    // once the table is initialized, finish initializing the page
-                    initializeProvenancePage().done(function () {
-                        // set the initial size
-                        setBodySize();
+                        deferred.resolve();
+                    }).fail(function (xhr, status, error) {
+                        errorHandler.handleAjaxError(xhr, status, error);
+                        deferred.reject();
                     });
+                } else {
+                    deferred.resolve();
+                }
+            }).promise();
+        };
 
-                    $(window).on('resize', function (e) {
-                        setBodySize();
-                        // resize dialogs when appropriate
-                        var dialogs = $('.dialog');
-                        for (var i = 0, len = dialogs.length; i < len; i++) {
-                            if ($(dialogs[i]).is(':visible')){
-                                setTimeout(function(dialog){
-                                    dialog.modal('resize');
-                                }, 50, $(dialogs[i]));
-                            }
+        function ProvenanceCtrl() {
+        }
+
+        ProvenanceCtrl.prototype = {
+            constructor: ProvenanceCtrl,
+
+            /**
+             * Initializes the status page.
+             */
+            init: function () {
+                storage.init();
+
+                // load the user and detect if the NiFi is clustered
+                $.when(loadAbout(), loadCurrentUser(), detectedCluster()).done(function () {
+                    // create the provenance table
+                    provenanceTableCtrl.init(isClustered).done(function () {
+                        var searchTerms = {};
+
+                        // look for a processor id in the query search
+                        var initialComponentId = $('#initial-component-query').text();
+                        if ($.trim(initialComponentId) !== '') {
+                            // populate initial search component
+                            $('input.searchable-component-id').val(initialComponentId);
+
+                            // build the search criteria
+                            searchTerms['ProcessorID'] = initialComponentId;
                         }
 
-                        // resize grids when appropriate
-                        var gridElements = $('*[class*="slickgrid_"]');
-                        for (var j = 0, len = gridElements.length; j < len; j++) {
-                            if ($(gridElements[j]).is(':visible')){
-                                setTimeout(function(gridElement){
-                                    gridElement.data('gridInstance').resizeCanvas();
-                                }, 50, $(gridElements[j]));
-                            }
+                        // look for a flowfile uuid in the query search
+                        var initialFlowFileUuid = $('#initial-flowfile-query').text();
+                        if ($.trim(initialFlowFileUuid) !== '') {
+                            // populate initial search component
+                            $('input.searchable-flowfile-uuid').val(initialFlowFileUuid);
+
+                            // build the search criteria
+                            searchTerms['FlowFileUUID'] = initialFlowFileUuid;
                         }
 
-                        // toggle tabs .scrollable when appropriate
-                        var tabsContainers = $('.tab-container');
-                        var tabsContents = [];
-                        for (var k = 0, len = tabsContainers.length; k < len; k++) {
-                            if ($(tabsContainers[k]).is(':visible')){
-                                tabsContents.push($('#' + $(tabsContainers[k]).attr('id') + '-content'));
-                            }
+                        // load the provenance table
+                        if ($.isEmptyObject(searchTerms)) {
+                            // load the provenance table
+                            provenanceTableCtrl.loadProvenanceTable();
+                        } else {
+                            // load the provenance table
+                            provenanceTableCtrl.loadProvenanceTable({
+                                'searchTerms': searchTerms
+                            });
                         }
-                        $.each(tabsContents, function (index, tabsContent) {
-                            nf.Common.toggleScrollable(tabsContent.get(0));
+
+                        var setBodySize = function () {
+                            //alter styles if we're not in the shell
+                            if (top === window) {
+                                $('body').css({
+                                    'height': $(window).height() + 'px',
+                                    'width': $(window).width() + 'px'
+                                });
+
+                                $('#provenance').css('margin', 40);
+                                $('#provenance-refresh-container').css({
+                                    'bottom': '0px',
+                                    'left': '0px',
+                                    'right': '0px'
+                                });
+                            }
+
+                            // configure the initial grid height
+                            provenanceTableCtrl.resetTableSize();
+                        };
+
+                        // once the table is initialized, finish initializing the page
+                        initializeProvenancePage().done(function () {
+                            // set the initial size
+                            setBodySize();
+                        });
+
+                        $(window).on('resize', function (e) {
+                            setBodySize();
+                            // resize dialogs when appropriate
+                            var dialogs = $('.dialog');
+                            for (var i = 0, len = dialogs.length; i < len; i++) {
+                                if ($(dialogs[i]).is(':visible')) {
+                                    setTimeout(function (dialog) {
+                                        dialog.modal('resize');
+                                    }, 50, $(dialogs[i]));
+                                }
+                            }
+
+                            // resize grids when appropriate
+                            var gridElements = $('*[class*="slickgrid_"]');
+                            for (var j = 0, len = gridElements.length; j < len; j++) {
+                                if ($(gridElements[j]).is(':visible')) {
+                                    setTimeout(function (gridElement) {
+                                        gridElement.data('gridInstance').resizeCanvas();
+                                    }, 50, $(gridElements[j]));
+                                }
+                            }
+
+                            // toggle tabs .scrollable when appropriate
+                            var tabsContainers = $('.tab-container');
+                            var tabsContents = [];
+                            for (var k = 0, len = tabsContainers.length; k < len; k++) {
+                                if ($(tabsContainers[k]).is(':visible')) {
+                                    tabsContents.push($('#' + $(tabsContainers[k]).attr('id') + '-content'));
+                                }
+                            }
+                            $.each(tabsContents, function (index, tabsContent) {
+                                common.toggleScrollable(tabsContent.get(0));
+                            });
                         });
                     });
                 });
-            });
+            }
         }
+
+        var provenanceCtrl = new ProvenanceCtrl();
+        return provenanceCtrl;
     }
 
-    var provenanceCtrl = new ProvenanceCtrl();
-    return provenanceCtrl;
-};
\ No newline at end of file
+    return nfProvenance;
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-cluster-search.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-cluster-search.js
index a12b536812..b4fa88b036 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-cluster-search.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-cluster-search.js
@@ -14,7 +14,33 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-nf.ClusterSearch = (function () {
+
+/* global nf, define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'nf.Common',
+                'nf.Dialog',
+                'nf.SummaryTable'],
+            function ($, common, dialog, summaryTable) {
+                return (nf.ClusterSearch = factory($, common, dialog, summaryTable));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.ClusterSearch =
+            factory(require('jquery'),
+                require('nf.Common'),
+                require('nf.Dialog'),
+                require('nf.SummaryTable')));
+    } else {
+        nf.ClusterSearch = factory(root.$,
+            root.nf.Common,
+            root.nf.Dialog,
+            root.nf.SummaryTable);
+    }
+}(this, function ($, common, dialog, summaryTable) {
+    'use strict';
+
     /**
      * Configuration object used to hold a number of configuration items.
      */
@@ -59,10 +85,10 @@ nf.ClusterSearch = (function () {
                                 // selects the specified node
                                 var selectNode = function (node) {
                                     // update the urls to point to this specific node of the cluster
-                                    nf.SummaryTable.setClusterNodeId(node.id);
+                                    summaryTable.setClusterNodeId(node.id);
 
                                     // load the summary for the selected node
-                                    nf.SummaryTable.loadSummaryTable();
+                                    summaryTable.loadSummaryTable();
 
                                     // update the header
                                     $('#summary-header-text').text(node.address + ' Summary');
@@ -70,9 +96,9 @@ nf.ClusterSearch = (function () {
 
                                 // ensure the search found some results
                                 if (!$.isArray(searchResults) || searchResults.length === 0) {
-                                    nf.Dialog.showOkDialog({
+                                    dialog.showOkDialog({
                                         headerText: 'Cluster Search',
-                                        dialogContent: 'No nodes match \'' + nf.Common.escapeHtml(clusterSearchTerm) + '\'.'
+                                        dialogContent: 'No nodes match \'' + common.escapeHtml(clusterSearchTerm) + '\'.'
                                     });
                                 } else if (searchResults.length > 1) {
                                     var exactMatch = false;
@@ -91,9 +117,9 @@ nf.ClusterSearch = (function () {
                                         // close the dialog
                                         $('#view-single-node-dialog').modal('hide');
                                     } else {
-                                        nf.Dialog.showOkDialog({
+                                        dialog.showOkDialog({
                                             headerText: 'Cluster Search',
-                                            dialogContent: 'More than one node matches \'' + nf.Common.escapeHtml(clusterSearchTerm) + '\'.'
+                                            dialogContent: 'More than one node matches \'' + common.escapeHtml(clusterSearchTerm) + '\'.'
                                         });
                                     }
                                 } else if (searchResults.length === 1) {
@@ -146,9 +172,9 @@ nf.ClusterSearch = (function () {
                     // results are normalized into a single element array
                     var searchResults = items[0];
 
-                    var self = this;
+                    var nfClusterSearchAutocomplete = this;
                     $.each(searchResults.nodeResults, function (_, node) {
-                        self._renderItem(ul, {
+                        nfClusterSearchAutocomplete._renderItem(ul, {
                             label: node.address,
                             value: node.address
                         });
@@ -208,8 +234,8 @@ nf.ClusterSearch = (function () {
             // handle the view cluster click event
             $('#view-cluster-link').click(function () {
                 // reset the urls and refresh the table
-                nf.SummaryTable.setClusterNodeId(null);
-                nf.SummaryTable.loadSummaryTable();
+                summaryTable.setClusterNodeId(null);
+                summaryTable.loadSummaryTable();
 
                 // update the header
                 $('#summary-header-text').text('NiFi Summary');
@@ -219,4 +245,4 @@ nf.ClusterSearch = (function () {
             $('#view-options-container').show();
         }
     };
-}());
\ No newline at end of file
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js
index fba8b93074..c61dee53ab 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js
@@ -14,9 +14,43 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* global nf, top, Slick */
+/* global nf, top, define, module, require, exports */
 
-nf.SummaryTable = (function () {
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'Slick',
+                'nf.Common',
+                'nf.ErrorHandler',
+                'nf.StatusHistory',
+                'nf.ProcessorDetails',
+                'nf.ConnectionDetails',
+                'nf.ng.Bridge'],
+            function ($, Slick, common, errorHandler, statusHistory, processorDetails, connectionDetails, angularBridge) {
+                return (nf.SummaryTable = factory($, Slick, common, errorHandler, statusHistory, processorDetails, connectionDetails, angularBridge));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.SummaryTable =
+            factory(require('jquery'),
+                require('Slick'),
+                require('nf.Common'),
+                require('nf.ErrorHandler'),
+                require('nf.StatusHistory'),
+                require('nf.ProcessorDetails'),
+                require('nf.ConnectionDetails'),
+                require('nf.ng.Bridge')));
+    } else {
+        nf.SummaryTable = factory(root.$,
+            root.Slick,
+            root.nf.Common,
+            root.nf.ErrorHandler,
+            root.nf.StatusHistory,
+            root.nf.ProcessorDetails,
+            root.nf.ConnectionDetails,
+            root.nf.ng.Bridge);
+    }
+}(this, function ($, Slick, common, errorHandler, statusHistory, processorDetails, connectionDetails, angularBridge) {
+    'use strict';
 
     /**
      * Configuration object used to hold a number of configuration items.
@@ -40,7 +74,7 @@ nf.SummaryTable = (function () {
         // only attempt this if we're within a frame
         if (top !== window) {
             // and our parent has canvas utils and shell defined
-            if (nf.Common.isDefinedAndNotNull(parent.nf) && nf.Common.isDefinedAndNotNull(parent.nf.CanvasUtils) && nf.Common.isDefinedAndNotNull(parent.nf.Shell)) {
+            if (common.isDefinedAndNotNull(parent.nf) && common.isDefinedAndNotNull(parent.nf.CanvasUtils) && common.isDefinedAndNotNull(parent.nf.Shell)) {
                 parent.nf.CanvasUtils.showComponent(groupId, componentId);
                 parent.$('#shell-close-button').click();
             }
@@ -87,12 +121,12 @@ nf.SummaryTable = (function () {
                 if (tab === 'Processors') {
                     // ensure the processor table is sized properly
                     var processorsGrid = $('#processor-summary-table').data('gridInstance');
-                    if (nf.Common.isDefinedAndNotNull(processorsGrid)) {
+                    if (common.isDefinedAndNotNull(processorsGrid)) {
                         processorsGrid.resizeCanvas();
 
                         // update the total number of processors
-                        $('#displayed-items').text(nf.Common.formatInteger(processorsGrid.getData().getLength()));
-                        $('#total-items').text(nf.Common.formatInteger(processorsGrid.getData().getLength()));
+                        $('#displayed-items').text(common.formatInteger(processorsGrid.getData().getLength()));
+                        $('#total-items').text(common.formatInteger(processorsGrid.getData().getLength()));
                     }
 
                     // update the combo for processors
@@ -111,12 +145,12 @@ nf.SummaryTable = (function () {
                 } else if (tab === 'Connections') {
                     // ensure the connection table is size properly
                     var connectionsGrid = $('#connection-summary-table').data('gridInstance');
-                    if (nf.Common.isDefinedAndNotNull(connectionsGrid)) {
+                    if (common.isDefinedAndNotNull(connectionsGrid)) {
                         connectionsGrid.resizeCanvas();
 
                         // update the total number of connections
-                        $('#displayed-items').text(nf.Common.formatInteger(connectionsGrid.getData().getLength()));
-                        $('#total-items').text(nf.Common.formatInteger(connectionsGrid.getData().getLength()));
+                        $('#displayed-items').text(common.formatInteger(connectionsGrid.getData().getLength()));
+                        $('#total-items').text(common.formatInteger(connectionsGrid.getData().getLength()));
                     }
 
                     // update the combo for connections
@@ -138,12 +172,12 @@ nf.SummaryTable = (function () {
                 } else if (tab === 'Input Ports') {
                     // ensure the connection table is size properly
                     var inputPortsGrid = $('#input-port-summary-table').data('gridInstance');
-                    if (nf.Common.isDefinedAndNotNull(inputPortsGrid)) {
+                    if (common.isDefinedAndNotNull(inputPortsGrid)) {
                         inputPortsGrid.resizeCanvas();
 
                         // update the total number of input ports
-                        $('#displayed-items').text(nf.Common.formatInteger(inputPortsGrid.getData().getLength()));
-                        $('#total-items').text(nf.Common.formatInteger(inputPortsGrid.getData().getLength()));
+                        $('#displayed-items').text(common.formatInteger(inputPortsGrid.getData().getLength()));
+                        $('#total-items').text(common.formatInteger(inputPortsGrid.getData().getLength()));
                     }
 
                     // update the combo for input ports
@@ -159,12 +193,12 @@ nf.SummaryTable = (function () {
                 } else if (tab === 'Output Ports') {
                     // ensure the connection table is size properly
                     var outputPortsGrid = $('#output-port-summary-table').data('gridInstance');
-                    if (nf.Common.isDefinedAndNotNull(outputPortsGrid)) {
+                    if (common.isDefinedAndNotNull(outputPortsGrid)) {
                         outputPortsGrid.resizeCanvas();
 
                         // update the total number of output ports
-                        $('#displayed-items').text(nf.Common.formatInteger(outputPortsGrid.getData().getLength()));
-                        $('#total-items').text(nf.Common.formatInteger(outputPortsGrid.getData().getLength()));
+                        $('#displayed-items').text(common.formatInteger(outputPortsGrid.getData().getLength()));
+                        $('#total-items').text(common.formatInteger(outputPortsGrid.getData().getLength()));
                     }
 
                     // update the combo for output ports
@@ -180,12 +214,12 @@ nf.SummaryTable = (function () {
                 } else if (tab === 'Remote Process Groups') {
                     // ensure the connection table is size properly
                     var remoteProcessGroupsGrid = $('#remote-process-group-summary-table').data('gridInstance');
-                    if (nf.Common.isDefinedAndNotNull(remoteProcessGroupsGrid)) {
+                    if (common.isDefinedAndNotNull(remoteProcessGroupsGrid)) {
                         remoteProcessGroupsGrid.resizeCanvas();
 
                         // update the total number of remote process groups
-                        $('#displayed-items').text(nf.Common.formatInteger(remoteProcessGroupsGrid.getData().getLength()));
-                        $('#total-items').text(nf.Common.formatInteger(remoteProcessGroupsGrid.getData().getLength()));
+                        $('#displayed-items').text(common.formatInteger(remoteProcessGroupsGrid.getData().getLength()));
+                        $('#total-items').text(common.formatInteger(remoteProcessGroupsGrid.getData().getLength()));
                     }
 
                     // update the combo for remote process groups
@@ -204,12 +238,12 @@ nf.SummaryTable = (function () {
                 } else {
                     // ensure the connection table is size properly
                     var processGroupGrid = $('#process-group-summary-table').data('gridInstance');
-                    if (nf.Common.isDefinedAndNotNull(processGroupGrid)) {
+                    if (common.isDefinedAndNotNull(processGroupGrid)) {
                         processGroupGrid.resizeCanvas();
 
                         // update the total number of process groups
-                        $('#displayed-items').text(nf.Common.formatInteger(processGroupGrid.getData().getLength()));
-                        $('#total-items').text(nf.Common.formatInteger(processGroupGrid.getData().getLength()));
+                        $('#displayed-items').text(common.formatInteger(processGroupGrid.getData().getLength()));
+                        $('#total-items').text(common.formatInteger(processGroupGrid.getData().getLength()));
                     }
 
                     // update the combo for process groups
@@ -235,8 +269,8 @@ nf.SummaryTable = (function () {
             var markup = '
      ';
 
             // if there are bulletins, render them on the graph
-            if (!nf.Common.isEmpty(dataContext.bulletins)) {
-                markup += '
      ';
+            if (!common.isEmpty(dataContext.bulletins)) {
+                markup += '
      ';
             }
 
             return markup;
@@ -249,22 +283,22 @@ nf.SummaryTable = (function () {
 
         // formatter for tasks
         var taskTimeFormatter = function (row, cell, value, columnDef, dataContext) {
-            return nf.Common.formatInteger(dataContext.tasks) + ' / ' + dataContext.tasksDuration;
+            return common.formatInteger(dataContext.tasks) + ' / ' + dataContext.tasksDuration;
         };
 
         // function for formatting the last accessed time
         var valueFormatter = function (row, cell, value, columnDef, dataContext) {
-            return nf.Common.formatValue(value);
+            return common.formatValue(value);
         };
 
         // define a custom formatter for the run status column
         var runStatusFormatter = function (row, cell, value, columnDef, dataContext) {
             var activeThreadCount = '';
-            if (nf.Common.isDefinedAndNotNull(dataContext.activeThreadCount) && dataContext.activeThreadCount > 0) {
+            if (common.isDefinedAndNotNull(dataContext.activeThreadCount) && dataContext.activeThreadCount > 0) {
                 activeThreadCount = '(' + dataContext.activeThreadCount + ')';
             }
-            var classes = nf.Common.escapeHtml(value.toLowerCase());
-            switch(nf.Common.escapeHtml(value.toLowerCase())) {
+            var classes = common.escapeHtml(value.toLowerCase());
+            switch (common.escapeHtml(value.toLowerCase())) {
                 case 'running':
                     classes += ' fa fa-play running';
                     break;
@@ -284,7 +318,7 @@ nf.SummaryTable = (function () {
                     classes += '';
             }
             var formattedValue = '
      ';
-            return formattedValue + '
      ' + nf.Common.escapeHtml(value) + '
      ' + nf.Common.escapeHtml(activeThreadCount) + '
      ';
+            return formattedValue + '
      ' + common.escapeHtml(value) + '
      ' + common.escapeHtml(activeThreadCount) + '
      ';
         };
 
         // define the input, read, written, and output columns (reused between both tables)
@@ -357,16 +391,11 @@ nf.SummaryTable = (function () {
             tasksTimeColumn
         ];
 
-        // initialize the search field if applicable
-        if (isClustered) {
-            nf.ClusterSearch.init();
-        }
-
         // determine if the this page is in the shell
         var isInShell = (top !== window);
 
         // add an action column if appropriate
-        if (isClustered || isInShell || nf.Common.SUPPORTS_SVG) {
+        if (isClustered || isInShell || common.SUPPORTS_SVG) {
             // define how the column is formatted
             var processorActionFormatter = function (row, cell, value, columnDef, dataContext) {
                 var markup = '';
@@ -375,7 +404,7 @@ nf.SummaryTable = (function () {
                     markup += '
      ';
                 }
 
-                if (nf.Common.SUPPORTS_SVG) {
+                if (common.SUPPORTS_SVG) {
                     markup += '
      ';
                 }
 
@@ -450,7 +479,7 @@ nf.SummaryTable = (function () {
                 if (target.hasClass('go-to')) {
                     goTo(item.groupId, item.id);
                 } else if (target.hasClass('show-processor-status-history')) {
-                    nf.StatusHistory.showProcessorChart(item.groupId, item.id);
+                    statusHistory.showProcessorChart(item.groupId, item.id);
                 } else if (target.hasClass('show-cluster-processor-summary')) {
                     // load the cluster processor summary
                     loadClusterProcessorSummary(item.groupId, item.id);
@@ -466,7 +495,7 @@ nf.SummaryTable = (function () {
                 }
             } else if (processorsGrid.getColumns()[args.cell].id === 'moreDetails') {
                 if (target.hasClass('show-processor-details')) {
-                    nf.ProcessorDetails.showDetails(item.groupId, item.id);
+                    processorDetails.showDetails(item.groupId, item.id);
                 }
             }
         });
@@ -478,7 +507,7 @@ nf.SummaryTable = (function () {
 
             // update the total number of displayed processors if necessary
             if ($('#processor-summary-table').is(':visible')) {
-                $('#displayed-items').text(nf.Common.formatInteger(args.current));
+                $('#displayed-items').text(common.formatInteger(args.current));
             }
         });
         processorsData.onRowsChanged.subscribe(function (e, args) {
@@ -496,12 +525,12 @@ nf.SummaryTable = (function () {
                 var item = processorsData.getItemById(processorId);
 
                 // format the tooltip
-                var bulletins = nf.Common.getFormattedBulletins(item.bulletins);
-                var tooltip = nf.Common.formatUnorderedList(bulletins);
+                var bulletins = common.getFormattedBulletins(item.bulletins);
+                var tooltip = common.formatUnorderedList(bulletins);
 
                 // show the tooltip
-                if (nf.Common.isDefinedAndNotNull(tooltip)) {
-                    bulletinIcon.qtip($.extend({}, nf.Common.config.tooltipConfig, {
+                if (common.isDefinedAndNotNull(tooltip)) {
+                    bulletinIcon.qtip($.extend({}, common.config.tooltipConfig, {
                         content: tooltip,
                         position: {
                             container: $('#summary'),
@@ -617,11 +646,11 @@ nf.SummaryTable = (function () {
 
         var backpressureFormatter = function (row, cell, value, columnDef, dataContext) {
             var percentUseCount = 'NA';
-            if (nf.Common.isDefinedAndNotNull(dataContext.percentUseCount)) {
+            if (common.isDefinedAndNotNull(dataContext.percentUseCount)) {
                 percentUseCount = dataContext.percentUseCount + '%';
             }
             var percentUseBytes = 'NA';
-            if (nf.Common.isDefinedAndNotNull(dataContext.percentUseBytes)) {
+            if (common.isDefinedAndNotNull(dataContext.percentUseBytes)) {
                 percentUseBytes = dataContext.percentUseBytes + '%';
             }
             return percentUseCount + ' / ' + percentUseBytes;
@@ -675,7 +704,7 @@ nf.SummaryTable = (function () {
         ];
 
         // add an action column if appropriate
-        if (isClustered || isInShell || nf.Common.SUPPORTS_SVG) {
+        if (isClustered || isInShell || common.SUPPORTS_SVG) {
             // define how the column is formatted
             var connectionActionFormatter = function (row, cell, value, columnDef, dataContext) {
                 var markup = '';
@@ -684,7 +713,7 @@ nf.SummaryTable = (function () {
                     markup += '
      ';
                 }
 
-                if (nf.Common.SUPPORTS_SVG) {
+                if (common.SUPPORTS_SVG) {
                     markup += '
      ';
                 }
 
@@ -759,7 +788,7 @@ nf.SummaryTable = (function () {
                 if (target.hasClass('go-to')) {
                     goTo(item.groupId, item.id);
                 } else if (target.hasClass('show-connection-status-history')) {
-                    nf.StatusHistory.showConnectionChart(item.groupId, item.id);
+                    statusHistory.showConnectionChart(item.groupId, item.id);
                 } else if (target.hasClass('show-cluster-connection-summary')) {
                     // load the cluster processor summary
                     loadClusterConnectionSummary(item.groupId, item.id);
@@ -775,7 +804,7 @@ nf.SummaryTable = (function () {
                 }
             } else if (connectionsGrid.getColumns()[args.cell].id === 'moreDetails') {
                 if (target.hasClass('show-connection-details')) {
-                    nf.ConnectionDetails.showDetails(item.groupId, item.id);
+                    connectionDetails.showDetails(item.groupId, item.id);
                 }
             }
         });
@@ -787,7 +816,7 @@ nf.SummaryTable = (function () {
 
             // update the total number of displayed processors, if necessary
             if ($('#connection-summary-table').is(':visible')) {
-                $('#displayed-items').text(nf.Common.formatInteger(args.current));
+                $('#displayed-items').text(common.formatInteger(args.current));
             }
         });
         connectionsData.onRowsChanged.subscribe(function (e, args) {
@@ -895,8 +924,8 @@ nf.SummaryTable = (function () {
             var markup = '';
 
             // if there are bulletins, render them on the graph
-            if (!nf.Common.isEmpty(dataContext.bulletins)) {
-                markup += '
      ';
+            if (!common.isEmpty(dataContext.bulletins)) {
+                markup += '
      ';
             }
 
             return markup;
@@ -954,7 +983,7 @@ nf.SummaryTable = (function () {
         ];
 
         // add an action column if appropriate
-        if (isClustered || isInShell || nf.Common.SUPPORTS_SVG) {
+        if (isClustered || isInShell || common.SUPPORTS_SVG) {
             // define how the column is formatted
             var processGroupActionFormatter = function (row, cell, value, columnDef, dataContext) {
                 var markup = '';
@@ -963,7 +992,7 @@ nf.SummaryTable = (function () {
                     markup += '
      ';
                 }
 
-                if (nf.Common.SUPPORTS_SVG) {
+                if (common.SUPPORTS_SVG) {
                     markup += '
      ';
                 }
 
@@ -1036,12 +1065,12 @@ nf.SummaryTable = (function () {
             // determine the desired action
             if (processGroupsGrid.getColumns()[args.cell].id === 'actions') {
                 if (target.hasClass('go-to')) {
-                    if (nf.Common.isDefinedAndNotNull(parent.nf) && nf.Common.isDefinedAndNotNull(parent.nf.CanvasUtils) && nf.Common.isDefinedAndNotNull(parent.nf.Shell)) {
+                    if (common.isDefinedAndNotNull(parent.nf) && common.isDefinedAndNotNull(parent.nf.CanvasUtils) && common.isDefinedAndNotNull(parent.nf.Shell)) {
                         parent.nf.CanvasUtils.enterGroup(item.id);
                         parent.$('#shell-close-button').click();
                     }
                 } else if (target.hasClass('show-process-group-status-history')) {
-                    nf.StatusHistory.showProcessGroupChart(item.groupId, item.id);
+                    statusHistory.showProcessGroupChart(item.groupId, item.id);
                 } else if (target.hasClass('show-cluster-process-group-summary')) {
                     // load the cluster processor summary
                     loadClusterProcessGroupSummary(item.id);
@@ -1065,7 +1094,7 @@ nf.SummaryTable = (function () {
 
             // update the total number of displayed process groups if necessary
             if ($('#process-group-summary-table').is(':visible')) {
-                $('#displayed-items').text(nf.Common.formatInteger(args.current));
+                $('#displayed-items').text(common.formatInteger(args.current));
             }
         });
         processGroupsData.onRowsChanged.subscribe(function (e, args) {
@@ -1083,12 +1112,12 @@ nf.SummaryTable = (function () {
                 var item = processGroupsData.getItemById(processGroupId);
 
                 // format the tooltip
-                var bulletins = nf.Common.getFormattedBulletins(item.bulletins);
-                var tooltip = nf.Common.formatUnorderedList(bulletins);
+                var bulletins = common.getFormattedBulletins(item.bulletins);
+                var tooltip = common.formatUnorderedList(bulletins);
 
                 // show the tooltip
-                if (nf.Common.isDefinedAndNotNull(tooltip)) {
-                    bulletinIcon.qtip($.extend({}, nf.Common.config.tooltipConfig, {
+                if (common.isDefinedAndNotNull(tooltip)) {
+                    bulletinIcon.qtip($.extend({}, common.config.tooltipConfig, {
                         content: tooltip,
                         position: {
                             container: $('#summary'),
@@ -1309,7 +1338,7 @@ nf.SummaryTable = (function () {
 
             // update the total number of displayed processors, if necessary
             if ($('#input-port-summary-table').is(':visible')) {
-                $('#display-items').text(nf.Common.formatInteger(args.current));
+                $('#display-items').text(common.formatInteger(args.current));
             }
         });
         inputPortsData.onRowsChanged.subscribe(function (e, args) {
@@ -1327,12 +1356,12 @@ nf.SummaryTable = (function () {
                 var item = inputPortsData.getItemById(portId);
 
                 // format the tooltip
-                var bulletins = nf.Common.getFormattedBulletins(item.bulletins);
-                var tooltip = nf.Common.formatUnorderedList(bulletins);
+                var bulletins = common.getFormattedBulletins(item.bulletins);
+                var tooltip = common.formatUnorderedList(bulletins);
 
                 // show the tooltip
-                if (nf.Common.isDefinedAndNotNull(tooltip)) {
-                    bulletinIcon.qtip($.extend({}, nf.Common.config.tooltipConfig, {
+                if (common.isDefinedAndNotNull(tooltip)) {
+                    bulletinIcon.qtip($.extend({}, common.config.tooltipConfig, {
                         content: tooltip,
                         position: {
                             container: $('#summary'),
@@ -1549,7 +1578,7 @@ nf.SummaryTable = (function () {
 
             // update the total number of displayed processors, if necessary
             if ($('#output-port-summary-table').is(':visible')) {
-                $('#display-items').text(nf.Common.formatInteger(args.current));
+                $('#display-items').text(common.formatInteger(args.current));
             }
         });
         outputPortsData.onRowsChanged.subscribe(function (e, args) {
@@ -1567,12 +1596,12 @@ nf.SummaryTable = (function () {
                 var item = outputPortsData.getItemById(portId);
 
                 // format the tooltip
-                var bulletins = nf.Common.getFormattedBulletins(item.bulletins);
-                var tooltip = nf.Common.formatUnorderedList(bulletins);
+                var bulletins = common.getFormattedBulletins(item.bulletins);
+                var tooltip = common.formatUnorderedList(bulletins);
 
                 // show the tooltip
-                if (nf.Common.isDefinedAndNotNull(tooltip)) {
-                    bulletinIcon.qtip($.extend({}, nf.Common.config.tooltipConfig, {
+                if (common.isDefinedAndNotNull(tooltip)) {
+                    bulletinIcon.qtip($.extend({}, common.config.tooltipConfig, {
                         content: tooltip,
                         position: {
                             container: $('#summary'),
@@ -1681,7 +1710,7 @@ nf.SummaryTable = (function () {
         // define a custom formatter for the run status column
         var transmissionStatusFormatter = function (row, cell, value, columnDef, dataContext) {
             var activeThreadCount = '';
-            if (nf.Common.isDefinedAndNotNull(dataContext.activeThreadCount) && dataContext.activeThreadCount > 0) {
+            if (common.isDefinedAndNotNull(dataContext.activeThreadCount) && dataContext.activeThreadCount > 0) {
                 activeThreadCount = '(' + dataContext.activeThreadCount + ')';
             }
 
@@ -1698,7 +1727,7 @@ nf.SummaryTable = (function () {
 
             // generate the mark up
             var formattedValue = '
      ';
-            return formattedValue + '
      ' + transmissionLabel + '
      ' + nf.Common.escapeHtml(activeThreadCount) + '
      ';
+            return formattedValue + '
      ' + transmissionLabel + '
      ' + common.escapeHtml(activeThreadCount) + '
      ';
         };
 
         var transmissionStatusColumn = {
@@ -1738,7 +1767,7 @@ nf.SummaryTable = (function () {
         ];
 
         // add an action column if appropriate
-        if (isClustered || isInShell || nf.Common.SUPPORTS_SVG) {
+        if (isClustered || isInShell || common.SUPPORTS_SVG) {
             // define how the column is formatted
             var remoteProcessGroupActionFormatter = function (row, cell, value, columnDef, dataContext) {
                 var markup = '';
@@ -1747,7 +1776,7 @@ nf.SummaryTable = (function () {
                     markup += '
      ';
                 }
 
-                if (nf.Common.SUPPORTS_SVG) {
+                if (common.SUPPORTS_SVG) {
                     markup += '
      ';
                 }
 
@@ -1822,7 +1851,7 @@ nf.SummaryTable = (function () {
                 if (target.hasClass('go-to')) {
                     goTo(item.groupId, item.id);
                 } else if (target.hasClass('show-remote-process-group-status-history')) {
-                    nf.StatusHistory.showRemoteProcessGroupChart(item.groupId, item.id);
+                    statusHistory.showRemoteProcessGroupChart(item.groupId, item.id);
                 } else if (target.hasClass('show-cluster-remote-process-group-summary')) {
                     // load the cluster processor summary
                     loadClusterRemoteProcessGroupSummary(item.groupId, item.id);
@@ -1846,7 +1875,7 @@ nf.SummaryTable = (function () {
 
             // update the total number of displayed processors, if necessary
             if ($('#remote-process-group-summary-table').is(':visible')) {
-                $('#displayed-items').text(nf.Common.formatInteger(args.current));
+                $('#displayed-items').text(common.formatInteger(args.current));
             }
         });
         remoteProcessGroupsData.onRowsChanged.subscribe(function (e, args) {
@@ -1864,12 +1893,12 @@ nf.SummaryTable = (function () {
                 var item = remoteProcessGroupsData.getItemById(remoteProcessGroupId);
 
                 // format the tooltip
-                var bulletins = nf.Common.getFormattedBulletins(item.bulletins);
-                var tooltip = nf.Common.formatUnorderedList(bulletins);
+                var bulletins = common.getFormattedBulletins(item.bulletins);
+                var tooltip = common.formatUnorderedList(bulletins);
 
                 // show the tooltip
-                if (nf.Common.isDefinedAndNotNull(tooltip)) {
-                    bulletinIcon.qtip($.extend({}, nf.Common.config.tooltipConfig, {
+                if (common.isDefinedAndNotNull(tooltip)) {
+                    bulletinIcon.qtip($.extend({}, common.config.tooltipConfig, {
                         content: tooltip,
                         position: {
                             container: $('#summary'),
@@ -2027,7 +2056,7 @@ nf.SummaryTable = (function () {
                     $('#summary-loading-container').show();
                 },
                 open: function () {
-                    nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
+                    common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
                 }
             }
         });
@@ -2052,7 +2081,7 @@ nf.SummaryTable = (function () {
      */
     var sort = function (tableId, sortDetails, data) {
         // ensure there is a state object for this table
-        if (nf.Common.isUndefined(sortState[tableId])) {
+        if (common.isUndefined(sortState[tableId])) {
             sortState[tableId] = {};
         }
 
@@ -2060,17 +2089,17 @@ nf.SummaryTable = (function () {
         var comparer = function (a, b) {
             if (sortDetails.columnId === 'moreDetails') {
                 var aBulletins = 0;
-                if (!nf.Common.isEmpty(a.bulletins)) {
+                if (!common.isEmpty(a.bulletins)) {
                     aBulletins = a.bulletins.length;
                 }
                 var bBulletins = 0;
-                if (!nf.Common.isEmpty(b.bulletins)) {
+                if (!common.isEmpty(b.bulletins)) {
                     bBulletins = b.bulletins.length;
                 }
                 return aBulletins - bBulletins;
             } else if (sortDetails.columnId === 'runStatus' || sortDetails.columnId === 'transmissionStatus') {
-                var aString = nf.Common.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
-                var bString = nf.Common.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
+                var aString = common.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
+                var bString = common.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
                 if (aString === bString) {
                     return a.activeThreadCount - b.activeThreadCount;
                 } else {
@@ -2080,26 +2109,26 @@ nf.SummaryTable = (function () {
                 var mod = sortState[tableId].count % 4;
                 if (mod < 2) {
                     $('#' + tableId + ' span.queued-title').addClass('sorted');
-                    var aQueueCount = nf.Common.parseCount(a['queuedCount']);
-                    var bQueueCount = nf.Common.parseCount(b['queuedCount']);
+                    var aQueueCount = common.parseCount(a['queuedCount']);
+                    var bQueueCount = common.parseCount(b['queuedCount']);
                     return aQueueCount - bQueueCount;
                 } else {
                     $('#' + tableId + ' span.queued-size-title').addClass('sorted');
-                    var aQueueSize = nf.Common.parseSize(a['queuedSize']);
-                    var bQueueSize = nf.Common.parseSize(b['queuedSize']);
+                    var aQueueSize = common.parseSize(a['queuedSize']);
+                    var bQueueSize = common.parseSize(b['queuedSize']);
                     return aQueueSize - bQueueSize;
                 }
             } else if (sortDetails.columnId === 'backpressure') {
                 var mod = sortState[tableId].count % 4;
                 if (mod < 2) {
                     $('#' + tableId + ' span.backpressure-object-title').addClass('sorted');
-                    var aPercentUseObject = nf.Common.isDefinedAndNotNull(a['percentUseCount']) ? a['percentUseCount'] : -1;
-                    var bPercentUseObject = nf.Common.isDefinedAndNotNull(b['percentUseCount']) ? b['percentUseCount'] : -1;
+                    var aPercentUseObject = common.isDefinedAndNotNull(a['percentUseCount']) ? a['percentUseCount'] : -1;
+                    var bPercentUseObject = common.isDefinedAndNotNull(b['percentUseCount']) ? b['percentUseCount'] : -1;
                     return aPercentUseObject - bPercentUseObject;
                 } else {
                     $('#' + tableId + ' span.backpressure-data-size-title').addClass('sorted');
-                    var aPercentUseDataSize = nf.Common.isDefinedAndNotNull(a['percentUseBytes']) ? a['percentUseBytes'] : -1;
-                    var bPercentUseDataSize = nf.Common.isDefinedAndNotNull(b['percentUseBytes']) ? b['percentUseBytes'] : -1;
+                    var aPercentUseDataSize = common.isDefinedAndNotNull(a['percentUseBytes']) ? a['percentUseBytes'] : -1;
+                    var bPercentUseDataSize = common.isDefinedAndNotNull(b['percentUseBytes']) ? b['percentUseBytes'] : -1;
                     return aPercentUseDataSize - bPercentUseDataSize;
                 }
             } else if (sortDetails.columnId === 'sent' || sortDetails.columnId === 'received' || sortDetails.columnId === 'input' || sortDetails.columnId === 'output' || sortDetails.columnId === 'transferred') {
@@ -2108,44 +2137,44 @@ nf.SummaryTable = (function () {
                 var mod = sortState[tableId].count % 4;
                 if (mod < 2) {
                     $('#' + tableId + ' span.' + sortDetails.columnId + '-title').addClass('sorted');
-                    var aCount = nf.Common.parseCount(aSplit[0]);
-                    var bCount = nf.Common.parseCount(bSplit[0]);
+                    var aCount = common.parseCount(aSplit[0]);
+                    var bCount = common.parseCount(bSplit[0]);
                     return aCount - bCount;
                 } else {
                     $('#' + tableId + ' span.' + sortDetails.columnId + '-size-title').addClass('sorted');
-                    var aSize = nf.Common.parseSize(aSplit[1]);
-                    var bSize = nf.Common.parseSize(bSplit[1]);
+                    var aSize = common.parseSize(aSplit[1]);
+                    var bSize = common.parseSize(bSplit[1]);
                     return aSize - bSize;
                 }
             } else if (sortDetails.columnId === 'io') {
                 var mod = sortState[tableId].count % 4;
                 if (mod < 2) {
                     $('#' + tableId + ' span.read-title').addClass('sorted');
-                    var aReadSize = nf.Common.parseSize(a['read']);
-                    var bReadSize = nf.Common.parseSize(b['read']);
+                    var aReadSize = common.parseSize(a['read']);
+                    var bReadSize = common.parseSize(b['read']);
                     return aReadSize - bReadSize;
                 } else {
                     $('#' + tableId + ' span.written-title').addClass('sorted');
-                    var aWriteSize = nf.Common.parseSize(a['written']);
-                    var bWriteSize = nf.Common.parseSize(b['written']);
+                    var aWriteSize = common.parseSize(a['written']);
+                    var bWriteSize = common.parseSize(b['written']);
                     return aWriteSize - bWriteSize;
                 }
             } else if (sortDetails.columnId === 'tasks') {
                 var mod = sortState[tableId].count % 4;
                 if (mod < 2) {
                     $('#' + tableId + ' span.tasks-title').addClass('sorted');
-                    var aTasks = nf.Common.parseCount(a['tasks']);
-                    var bTasks = nf.Common.parseCount(b['tasks']);
+                    var aTasks = common.parseCount(a['tasks']);
+                    var bTasks = common.parseCount(b['tasks']);
                     return aTasks - bTasks;
                 } else {
                     $('#' + tableId + ' span.time-title').addClass('sorted');
-                    var aDuration = nf.Common.parseDuration(a['tasksDuration']);
-                    var bDuration = nf.Common.parseDuration(b['tasksDuration']);
+                    var aDuration = common.parseDuration(a['tasksDuration']);
+                    var bDuration = common.parseDuration(b['tasksDuration']);
                     return aDuration - bDuration;
                 }
             } else {
-                var aString = nf.Common.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
-                var bString = nf.Common.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
+                var aString = common.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
+                var bString = common.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
                 return aString === bString ? 0 : aString > bString ? 1 : -1;
             }
         };
@@ -2215,7 +2244,7 @@ nf.SummaryTable = (function () {
 
         // add the parameter if appropriate
         var parameters = {};
-        if (!nf.Common.isNull(clusterNodeId)) {
+        if (!common.isNull(clusterNodeId)) {
             parameters['clusterNodeId'] = clusterNodeId;
         }
 
@@ -2239,7 +2268,7 @@ nf.SummaryTable = (function () {
             $('#free-heap').text(aggregateSnapshot.freeHeap);
 
             // ensure the heap utilization could be calculated
-            if (nf.Common.isDefinedAndNotNull(aggregateSnapshot.heapUtilization)) {
+            if (common.isDefinedAndNotNull(aggregateSnapshot.heapUtilization)) {
                 $('#utilization-heap').text('(' + aggregateSnapshot.heapUtilization + ')');
             } else {
                 $('#utilization-heap').text('');
@@ -2252,7 +2281,7 @@ nf.SummaryTable = (function () {
             $('#free-non-heap').text(aggregateSnapshot.freeNonHeap);
 
             // enure the non heap utilization could be calculated
-            if (nf.Common.isDefinedAndNotNull(aggregateSnapshot.nonHeapUtilization)) {
+            if (common.isDefinedAndNotNull(aggregateSnapshot.nonHeapUtilization)) {
                 $('#utilization-non-heap').text('(' + aggregateSnapshot.nonHeapUtilization + ')');
             } else {
                 $('#utilization-non-heap').text('');
@@ -2260,9 +2289,9 @@ nf.SummaryTable = (function () {
 
             // garbage collection
             var garbageCollectionContainer = $('#garbage-collection-table tbody').empty();
-            if (nf.Common.isDefinedAndNotNull(aggregateSnapshot.garbageCollection)) {
+            if (common.isDefinedAndNotNull(aggregateSnapshot.garbageCollection)) {
                 // sort the garbage collections
-                var sortedGarbageCollection = aggregateSnapshot.garbageCollection.sort(function(a, b) {
+                var sortedGarbageCollection = aggregateSnapshot.garbageCollection.sort(function (a, b) {
                     return a.name === b.name ? 0 : a.name > b.name ? 1 : -1;
                 });
                 // add each to the UI
@@ -2275,10 +2304,10 @@ nf.SummaryTable = (function () {
             $('#available-processors').text(aggregateSnapshot.availableProcessors);
 
             // load
-            if (nf.Common.isDefinedAndNotNull(aggregateSnapshot.processorLoadAverage)) {
-                $('#processor-load-average').text(nf.Common.formatFloat(aggregateSnapshot.processorLoadAverage));
+            if (common.isDefinedAndNotNull(aggregateSnapshot.processorLoadAverage)) {
+                $('#processor-load-average').text(common.formatFloat(aggregateSnapshot.processorLoadAverage));
             } else {
-                $('#processor-load-average').html(nf.Common.formatValue(aggregateSnapshot.processorLoadAverage));
+                $('#processor-load-average').html(common.formatValue(aggregateSnapshot.processorLoadAverage));
             }
 
             // flow file storage usage
@@ -2287,9 +2316,9 @@ nf.SummaryTable = (function () {
 
             // content repo storage usage
             var contentRepositoryUsageContainer = $('#content-repository-storage-usage-container').empty();
-            if (nf.Common.isDefinedAndNotNull(aggregateSnapshot.contentRepositoryStorageUsage)) {
+            if (common.isDefinedAndNotNull(aggregateSnapshot.contentRepositoryStorageUsage)) {
                 // sort the content repos
-                var sortedContentRepositoryStorageUsage = aggregateSnapshot.contentRepositoryStorageUsage.sort(function(a, b) {
+                var sortedContentRepositoryStorageUsage = aggregateSnapshot.contentRepositoryStorageUsage.sort(function (a, b) {
                     return a.identifier === b.identifier ? 0 : a.identifier > b.identifier ? 1 : -1;
                 });
                 // add each to the UI
@@ -2311,7 +2340,7 @@ nf.SummaryTable = (function () {
                 '#version-os-version': aggregateSnapshot.versionInfo.osVersion,
                 '#version-os-arch': aggregateSnapshot.versionInfo.osArchitecture
             };
-            for (versionSpanSelector in versionSpanSelectorToFieldMap) {
+            for (var versionSpanSelector in versionSpanSelectorToFieldMap) {
                 var dataField = versionSpanSelectorToFieldMap[versionSpanSelector];
                 if (dataField) {
                     $(versionSpanSelector).text(dataField);
@@ -2322,7 +2351,7 @@ nf.SummaryTable = (function () {
 
             // update the stats last refreshed timestamp
             $('#system-diagnostics-last-refreshed').text(aggregateSnapshot.statsLastRefreshed);
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(errorHandler.handleAjaxError);
     };
 
     /**
@@ -2351,14 +2380,14 @@ nf.SummaryTable = (function () {
 
         var storage = $('
      ');
         storage.text('Usage:');
-        if (nf.Common.isDefinedAndNotNull(storageUsage.identifier)) {
+        if (common.isDefinedAndNotNull(storageUsage.identifier)) {
             storage.text('Usage for ' + storageUsage.identifier + ':');
         }
         storage.appendTo(storageUsageContainer);
 
-        (nf.ng.Bridge.injector.get('$compile')($(''))(nf.ng.Bridge.rootScope)).appendTo(storageUsageContainer);
+        (angularBridge.injector.get('$compile')($(''))(angularBridge.rootScope)).appendTo(storageUsageContainer);
 
-        var usageDetails = $('
      ').text(' (' + storageUsage.usedSpace + ' of ' + storageUsage.totalSpace + ')').prepend($('').text(Math.round((used/total)*100) + '%'));
+        var usageDetails = $('
      ').text(' (' + storageUsage.usedSpace + ' of ' + storageUsage.totalSpace + ')').prepend($('').text(Math.round((used / total) * 100) + '%'));
         $('
      ').append(usageDetails).append('
      ').appendTo(storageUsageContainer);
     };
 
@@ -2437,7 +2466,7 @@ nf.SummaryTable = (function () {
         }
 
         // ensure the grid has been initialized
-        if (nf.Common.isDefinedAndNotNull(grid)) {
+        if (common.isDefinedAndNotNull(grid)) {
             var data = grid.getData();
 
             // update the search criteria
@@ -2465,7 +2494,7 @@ nf.SummaryTable = (function () {
             },
             dataType: 'json'
         }).done(function (response) {
-            if (nf.Common.isDefinedAndNotNull(response.processorStatus)) {
+            if (common.isDefinedAndNotNull(response.processorStatus)) {
                 var processorStatus = response.processorStatus;
 
                 var clusterProcessorsGrid = $('#cluster-processor-summary-table').data('gridInstance');
@@ -2504,7 +2533,7 @@ nf.SummaryTable = (function () {
                 // update the stats last refreshed timestamp
                 $('#cluster-processor-summary-last-refreshed').text(processorStatus.statsLastRefreshed);
             }
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(errorHandler.handleAjaxError);
     };
 
     /**
@@ -2523,7 +2552,7 @@ nf.SummaryTable = (function () {
             },
             dataType: 'json'
         }).done(function (response) {
-            if (nf.Common.isDefinedAndNotNull(response.connectionStatus)) {
+            if (common.isDefinedAndNotNull(response.connectionStatus)) {
                 var connectionStatus = response.connectionStatus;
 
                 var clusterConnectionsGrid = $('#cluster-connection-summary-table').data('gridInstance');
@@ -2561,7 +2590,7 @@ nf.SummaryTable = (function () {
                 // update the stats last refreshed timestamp
                 $('#cluster-connection-summary-last-refreshed').text(connectionStatus.statsLastRefreshed);
             }
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(errorHandler.handleAjaxError);
     };
 
     /**
@@ -2580,7 +2609,7 @@ nf.SummaryTable = (function () {
             },
             dataType: 'json'
         }).done(function (response) {
-            if (nf.Common.isDefinedAndNotNull(response.processGroupStatus)) {
+            if (common.isDefinedAndNotNull(response.processGroupStatus)) {
                 var processGroupStatus = response.processGroupStatus;
 
                 var clusterProcessGroupsGrid = $('#cluster-process-group-summary-table').data('gridInstance');
@@ -2621,7 +2650,7 @@ nf.SummaryTable = (function () {
                 // update the stats last refreshed timestamp
                 $('#cluster-process-group-summary-last-refreshed').text(processGroupStatus.statsLastRefreshed);
             }
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(errorHandler.handleAjaxError);
     };
 
     /**
@@ -2640,7 +2669,7 @@ nf.SummaryTable = (function () {
             },
             dataType: 'json'
         }).done(function (response) {
-            if (nf.Common.isDefinedAndNotNull(response.portStatus)) {
+            if (common.isDefinedAndNotNull(response.portStatus)) {
                 var inputPortStatus = response.portStatus;
 
                 var clusterInputPortsGrid = $('#cluster-input-port-summary-table').data('gridInstance');
@@ -2674,7 +2703,7 @@ nf.SummaryTable = (function () {
                 // update the stats last refreshed timestamp
                 $('#cluster-input-port-summary-last-refreshed').text(inputPortStatus.statsLastRefreshed);
             }
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(errorHandler.handleAjaxError);
     };
 
     /**
@@ -2693,7 +2722,7 @@ nf.SummaryTable = (function () {
             },
             dataType: 'json'
         }).done(function (response) {
-            if (nf.Common.isDefinedAndNotNull(response.portStatus)) {
+            if (common.isDefinedAndNotNull(response.portStatus)) {
                 var outputPortStatus = response.portStatus;
 
                 var clusterOutputPortsGrid = $('#cluster-output-port-summary-table').data('gridInstance');
@@ -2727,7 +2756,7 @@ nf.SummaryTable = (function () {
                 // update the stats last refreshed timestamp
                 $('#cluster-output-port-summary-last-refreshed').text(outputPortStatus.statsLastRefreshed);
             }
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(errorHandler.handleAjaxError);
     };
 
     /**
@@ -2746,7 +2775,7 @@ nf.SummaryTable = (function () {
             },
             dataType: 'json'
         }).done(function (response) {
-            if (nf.Common.isDefinedAndNotNull(response.remoteProcessGroupStatus)) {
+            if (common.isDefinedAndNotNull(response.remoteProcessGroupStatus)) {
                 var remoteProcessGroupStatus = response.remoteProcessGroupStatus;
 
                 var clusterRemoteProcessGroupsGrid = $('#cluster-remote-process-group-summary-table').data('gridInstance');
@@ -2782,7 +2811,7 @@ nf.SummaryTable = (function () {
                 // update the stats last refreshed timestamp
                 $('#cluster-remote-process-group-summary-last-refreshed').text(remoteProcessGroupStatus.statsLastRefreshed);
             }
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(errorHandler.handleAjaxError);
     };
 
     var clusterNodeId = null;
@@ -2805,11 +2834,11 @@ nf.SummaryTable = (function () {
                     var configDetails = configResponse.flowConfiguration;
 
                     // initialize the chart
-                    nf.StatusHistory.init(configDetails.timeOffset);
+                    statusHistory.init(configDetails.timeOffset);
 
                     // initialize the processor/connection details dialog
-                    nf.ProcessorDetails.init(false);
-                    nf.ConnectionDetails.init();
+                    processorDetails.init(false);
+                    connectionDetails.init();
                     initSummaryTable(isClustered);
 
                     deferred.resolve();
@@ -2835,7 +2864,7 @@ nf.SummaryTable = (function () {
             var processorsTable = $('#processor-summary-table');
             if (processorsTable.is(':visible')) {
                 var processorsGrid = processorsTable.data('gridInstance');
-                if (nf.Common.isDefinedAndNotNull(processorsGrid)) {
+                if (common.isDefinedAndNotNull(processorsGrid)) {
                     processorsGrid.resizeCanvas();
                 }
             }
@@ -2843,7 +2872,7 @@ nf.SummaryTable = (function () {
             var connectionsTable = $('#connection-summary-table');
             if (connectionsTable.is(':visible')) {
                 var connectionsGrid = connectionsTable.data('gridInstance');
-                if (nf.Common.isDefinedAndNotNull(connectionsGrid)) {
+                if (common.isDefinedAndNotNull(connectionsGrid)) {
                     connectionsGrid.resizeCanvas();
                 }
             }
@@ -2851,7 +2880,7 @@ nf.SummaryTable = (function () {
             var processGroupsTable = $('#process-group-summary-table');
             if (processGroupsTable.is(':visible')) {
                 var processGroupsGrid = processGroupsTable.data('gridInstance');
-                if (nf.Common.isDefinedAndNotNull(processGroupsGrid)) {
+                if (common.isDefinedAndNotNull(processGroupsGrid)) {
                     processGroupsGrid.resizeCanvas();
                 }
             }
@@ -2859,7 +2888,7 @@ nf.SummaryTable = (function () {
             var inputPortsTable = $('#input-port-summary-table');
             if (inputPortsTable.is(':visible')) {
                 var inputPortGrid = inputPortsTable.data('gridInstance');
-                if (nf.Common.isDefinedAndNotNull(inputPortGrid)) {
+                if (common.isDefinedAndNotNull(inputPortGrid)) {
                     inputPortGrid.resizeCanvas();
                 }
             }
@@ -2867,7 +2896,7 @@ nf.SummaryTable = (function () {
             var outputPortsTable = $('#output-port-summary-table');
             if (outputPortsTable.is(':visible')) {
                 var outputPortGrid = outputPortsTable.data('gridInstance');
-                if (nf.Common.isDefinedAndNotNull(outputPortGrid)) {
+                if (common.isDefinedAndNotNull(outputPortGrid)) {
                     outputPortGrid.resizeCanvas();
                 }
             }
@@ -2875,7 +2904,7 @@ nf.SummaryTable = (function () {
             var remoteProcessGroupsTable = $('#remote-process-group-summary-table');
             if (remoteProcessGroupsTable.is(':visible')) {
                 var remoteProcessGroupGrid = remoteProcessGroupsTable.data('gridInstance');
-                if (nf.Common.isDefinedAndNotNull(remoteProcessGroupGrid)) {
+                if (common.isDefinedAndNotNull(remoteProcessGroupGrid)) {
                     remoteProcessGroupGrid.resizeCanvas();
                 }
             }
@@ -2889,7 +2918,7 @@ nf.SummaryTable = (function () {
 
             // add the parameter if appropriate
             var parameters = {};
-            if (!nf.Common.isNull(clusterNodeId)) {
+            if (!common.isNull(clusterNodeId)) {
                 parameters['clusterNodeId'] = clusterNodeId;
             }
 
@@ -2909,10 +2938,10 @@ nf.SummaryTable = (function () {
                 var processGroupStatus = response.processGroupStatus;
                 var aggregateSnapshot = processGroupStatus.aggregateSnapshot;
 
-                if (nf.Common.isDefinedAndNotNull(aggregateSnapshot)) {
+                if (common.isDefinedAndNotNull(aggregateSnapshot)) {
                     // remove any tooltips from the processor table
                     var processorsGridElement = $('#processor-summary-table');
-                    nf.Common.cleanUpTooltips(processorsGridElement, 'div.has-bulletins');
+                    common.cleanUpTooltips(processorsGridElement, 'div.has-bulletins');
 
                     // get the processor grid/data
                     var processorsGrid = processorsGridElement.data('gridInstance');
@@ -2924,7 +2953,7 @@ nf.SummaryTable = (function () {
 
                     // remove any tooltips from the process group table
                     var processGroupGridElement = $('#process-group-summary-table');
-                    nf.Common.cleanUpTooltips(processGroupGridElement, 'div.has-bulletins');
+                    common.cleanUpTooltips(processGroupGridElement, 'div.has-bulletins');
 
                     // get the process group grid/data
                     var processGroupGrid = processGroupGridElement.data('gridInstance');
@@ -2932,7 +2961,7 @@ nf.SummaryTable = (function () {
 
                     // remove any tooltips from the input port table
                     var inputPortsGridElement = $('#input-port-summary-table');
-                    nf.Common.cleanUpTooltips(inputPortsGridElement, 'div.has-bulletins');
+                    common.cleanUpTooltips(inputPortsGridElement, 'div.has-bulletins');
 
                     // get the input ports grid/data
                     var inputPortsGrid = inputPortsGridElement.data('gridInstance');
@@ -2940,7 +2969,7 @@ nf.SummaryTable = (function () {
 
                     // remove any tooltips from the output port table
                     var outputPortsGridElement = $('#output-port-summary-table');
-                    nf.Common.cleanUpTooltips(outputPortsGridElement, 'div.has-bulletins');
+                    common.cleanUpTooltips(outputPortsGridElement, 'div.has-bulletins');
 
                     // get the output ports grid/data
                     var outputPortsGrid = outputPortsGridElement.data('gridInstance');
@@ -2948,7 +2977,7 @@ nf.SummaryTable = (function () {
 
                     // remove any tooltips from the remote process group table
                     var remoteProcessGroupsGridElement = $('#remote-process-group-summary-table');
-                    nf.Common.cleanUpTooltips(remoteProcessGroupsGridElement, 'div.has-bulletins');
+                    common.cleanUpTooltips(remoteProcessGroupsGridElement, 'div.has-bulletins');
 
                     // get the remote process groups grid
                     var remoteProcessGroupsGrid = remoteProcessGroupsGridElement.data('gridInstance');
@@ -2999,22 +3028,22 @@ nf.SummaryTable = (function () {
 
                     // update the total number of processors
                     if ($('#processor-summary-table').is(':visible')) {
-                        $('#total-items').text(nf.Common.formatInteger(processorItems.length));
+                        $('#total-items').text(common.formatInteger(processorItems.length));
                     } else if ($('#connection-summary-table').is(':visible')) {
-                        $('#total-items').text(nf.Common.formatInteger(connectionItems.length));
+                        $('#total-items').text(common.formatInteger(connectionItems.length));
                     } else if ($('#input-port-summary-table').is(':visible')) {
-                        $('#total-items').text(nf.Common.formatInteger(inputPortItems.length));
+                        $('#total-items').text(common.formatInteger(inputPortItems.length));
                     } else if ($('#output-port-summary-table').is(':visible')) {
-                        $('#total-items').text(nf.Common.formatInteger(outputPortItems.length));
+                        $('#total-items').text(common.formatInteger(outputPortItems.length));
                     } else if ($('#process-group-summary-table').is(':visible')) {
-                        $('#total-items').text(nf.Common.formatInteger(processGroupItems.length));
+                        $('#total-items').text(common.formatInteger(processGroupItems.length));
                     } else {
-                        $('#total-items').text(nf.Common.formatInteger(remoteProcessGroupItems.length));
+                        $('#total-items').text(common.formatInteger(remoteProcessGroupItems.length));
                     }
                 } else {
                     $('#total-items').text('0');
                 }
-            }).fail(nf.Common.handleAjaxError);
+            }).fail(errorHandler.handleAjaxError);
         }
     };
-}());
\ No newline at end of file
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary.js
index 7e68316be9..826c4a9f6c 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary.js
@@ -15,34 +15,106 @@
  * limitations under the License.
  */
 
-/* global nf */
+/* global nf, define, module, require, exports */
 
-$(document).ready(function () {
-    //Create Angular App
-    var app = angular.module('ngSummaryApp', ['ngResource', 'ngRoute', 'ngMaterial', 'ngMessages']);
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'angular',
+                'nf.Common',
+                'nf.ClusterSummary',
+                'nf.ClusterSearch',
+                'nf.ng.AppConfig',
+                'nf.ng.AppCtrl',
+                'nf.ng.ServiceProvider',
+                'nf.ng.Bridge',
+                'nf.ErrorHandler',
+                'nf.Storage',
+                'nf.SummaryTable'],
+            function ($,
+                      angular,
+                      common,
+                      clusterSummary,
+                      clusterSearch,
+                      appConfig,
+                      appCtrl,
+                      serviceProvider,
+                      provenanceTable,
+                      angularBridge,
+                      errorHandler,
+                      storage,
+                      summaryTable) {
+                return (nf.Summary =
+                    factory($,
+                        angular,
+                        common,
+                        clusterSummary,
+                        clusterSearch,
+                        appConfig,
+                        appCtrl,
+                        serviceProvider,
+                        angularBridge,
+                        errorHandler,
+                        storage,
+                        summaryTable));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.Summary =
+            factory(require('jquery'),
+                require('angular'),
+                require('nf.Common'),
+                require('nf.ClusterSummary'),
+                require('nf.ClusterSearch'),
+                require('nf.ng.AppConfig'),
+                require('nf.ng.AppCtrl'),
+                require('nf.ng.ServiceProvider'),
+                require('nf.ng.Bridge'),
+                require('nf.ErrorHandler'),
+                require('nf.Storage'),
+                require('nf.SummaryTable')));
+    } else {
+        nf.Summary = factory(root.$,
+            root.angular,
+            root.nf.Common,
+            root.nf.ClusterSummary,
+            root.nf.ClusterSearch,
+            root.nf.ng.AppConfig,
+            root.nf.ng.AppCtrl,
+            root.nf.ng.ServiceProvider,
+            root.nf.ng.Bridge,
+            root.nf.ErrorHandler,
+            root.nf.Storage,
+            root.nf.SummaryTable);
+    }
+}(this, function ($, angular, common, clusterSummary, clusterSearch, appConfig, appCtrl, serviceProvider, angularBridge, errorHandler, storage, summaryTable) {
+    'use strict';
 
-    //Define Dependency Injection Annotations
-    nf.ng.AppConfig.$inject = ['$mdThemingProvider', '$compileProvider'];
-    nf.ng.AppCtrl.$inject = ['$scope', 'serviceProvider'];
-    nf.ng.ServiceProvider.$inject = [];
+    $(document).ready(function () {
+        //Create Angular App
+        var app = angular.module('ngSummaryApp', ['ngResource', 'ngRoute', 'ngMaterial', 'ngMessages']);
 
-    //Configure Angular App
-    app.config(nf.ng.AppConfig);
+        //Define Dependency Injection Annotations
+        appConfig.$inject = ['$mdThemingProvider', '$compileProvider'];
+        appCtrl.$inject = ['$scope', 'serviceProvider'];
+        serviceProvider.$inject = [];
 
-    //Define Angular App Controllers
-    app.controller('ngSummaryAppCtrl', nf.ng.AppCtrl);
+        //Configure Angular App
+        app.config(appConfig);
 
-    //Define Angular App Services
-    app.service('serviceProvider', nf.ng.ServiceProvider);
+        //Define Angular App Controllers
+        app.controller('ngSummaryAppCtrl', appCtrl);
 
-    //Manually Boostrap Angular App
-    nf.ng.Bridge.injector = angular.bootstrap($('body'), ['ngSummaryApp'], { strictDi: true });
+        //Define Angular App Services
+        app.service('serviceProvider', serviceProvider);
 
-    // initialize the summary page
-    nf.Summary.init();
-});
+        //Manually Boostrap Angular App
+        angularBridge.injector = angular.bootstrap($('body'), ['ngSummaryApp'], {strictDi: true});
 
-nf.Summary = (function () {
+        // initialize the summary page
+        clusterSummary.loadClusterSummary().done(function () {
+            nfSummary.init();
+        });
+    });
 
     /**
      * Configuration object used to hold a number of configuration items.
@@ -64,12 +136,16 @@ nf.Summary = (function () {
                 type: 'GET',
                 url: config.urls.clusterSummary
             }).done(function (response) {
-                nf.SummaryTable.init(response.clusterSummary.connectedToCluster).done(function () {
+                summaryTable.init(response.clusterSummary.connectedToCluster).done(function () {
+                    // initialize the search field if applicable
+                    if (response.clusterSummary.connectedToCluster) {
+                        clusterSearch.init();
+                    }
                     deferred.resolve();
                 }).fail(function () {
                     deferred.reject();
                 });
-            }).fail(nf.Common.handleAjaxError);
+            }).fail(errorHandler.handleAjaxError);
         }).promise();
     };
 
@@ -79,7 +155,9 @@ nf.Summary = (function () {
     var initializeSummaryPage = function () {
         // define mouse over event for the refresh buttons
         $('#refresh-button').click(function () {
-            nf.SummaryTable.loadSummaryTable();
+            clusterSummary.loadClusterSummary().done(function () {
+                summaryTable.loadSummaryTable();
+            });
         });
 
         // return a deferred for page initialization
@@ -92,8 +170,8 @@ nf.Summary = (function () {
                     dataType: 'json'
                 }).done(function (response) {
                     // ensure the banners response is specified
-                    if (nf.Common.isDefinedAndNotNull(response.banners)) {
-                        if (nf.Common.isDefinedAndNotNull(response.banners.headerText) && response.banners.headerText !== '') {
+                    if (common.isDefinedAndNotNull(response.banners)) {
+                        if (common.isDefinedAndNotNull(response.banners.headerText) && response.banners.headerText !== '') {
                             // update the header text
                             var bannerHeader = $('#banner-header').text(response.banners.headerText).show();
 
@@ -107,7 +185,7 @@ nf.Summary = (function () {
                             updateTop('summary');
                         }
 
-                        if (nf.Common.isDefinedAndNotNull(response.banners.footerText) && response.banners.footerText !== '') {
+                        if (common.isDefinedAndNotNull(response.banners.footerText) && response.banners.footerText !== '') {
                             // update the footer text and show it
                             var bannerFooter = $('#banner-footer').text(response.banners.footerText).show();
 
@@ -123,7 +201,7 @@ nf.Summary = (function () {
 
                     deferred.resolve();
                 }).fail(function (xhr, status, error) {
-                    nf.Common.handleAjaxError(xhr, status, error);
+                    errorHandler.handleAjaxError(xhr, status, error);
                     deferred.reject();
                 });
             } else {
@@ -132,17 +210,17 @@ nf.Summary = (function () {
         }).promise();
     };
 
-    return {
+    var nfSummary = {
         /**
          * Initializes the status page.
          */
         init: function () {
-            nf.Storage.init();
-            
+            storage.init();
+
             // intialize the summary table
             initializeSummaryTable().done(function () {
                 // load the table
-                nf.SummaryTable.loadSummaryTable().done(function () {
+                summaryTable.loadSummaryTable().done(function () {
                     // once the table is initialized, finish initializing the page
                     initializeSummaryPage().done(function () {
 
@@ -153,7 +231,7 @@ nf.Summary = (function () {
                                     'height': $(window).height() + 'px',
                                     'width': $(window).width() + 'px'
                                 });
-                                
+
                                 $('#summary').css('margin', 40);
                                 $('div.summary-table').css('bottom', 127);
                                 $('#flow-summary-refresh-container').css({
@@ -163,7 +241,7 @@ nf.Summary = (function () {
                                 });
                             }
 
-                            nf.SummaryTable.resetTableSize();
+                            summaryTable.resetTableSize();
                         };
 
                         // get the about details
@@ -181,15 +259,15 @@ nf.Summary = (function () {
 
                             // set the initial size
                             setBodySize();
-                        }).fail(nf.Common.handleAjaxError);
+                        }).fail(errorHandler.handleAjaxError);
 
                         $(window).on('resize', function (e) {
                             setBodySize();
                             // resize dialogs when appropriate
                             var dialogs = $('.dialog');
                             for (var i = 0, len = dialogs.length; i < len; i++) {
-                                if ($(dialogs[i]).is(':visible')){
-                                    setTimeout(function(dialog){
+                                if ($(dialogs[i]).is(':visible')) {
+                                    setTimeout(function (dialog) {
                                         dialog.modal('resize');
                                     }, 50, $(dialogs[i]));
                                 }
@@ -198,8 +276,8 @@ nf.Summary = (function () {
                             // resize grids when appropriate
                             var gridElements = $('*[class*="slickgrid_"]');
                             for (var j = 0, len = gridElements.length; j < len; j++) {
-                                if ($(gridElements[j]).is(':visible')){
-                                    setTimeout(function(gridElement){
+                                if ($(gridElements[j]).is(':visible')) {
+                                    setTimeout(function (gridElement) {
                                         gridElement.data('gridInstance').resizeCanvas();
                                     }, 50, $(gridElements[j]));
                                 }
@@ -209,12 +287,12 @@ nf.Summary = (function () {
                             var tabsContainers = $('.tab-container');
                             var tabsContents = [];
                             for (var k = 0, len = tabsContainers.length; k < len; k++) {
-                                if ($(tabsContainers[k]).is(':visible')){
+                                if ($(tabsContainers[k]).is(':visible')) {
                                     tabsContents.push($('#' + $(tabsContainers[k]).attr('id') + '-content'));
                                 }
                             }
                             $.each(tabsContents, function (index, tabsContent) {
-                                nf.Common.toggleScrollable(tabsContent.get(0));
+                                common.toggleScrollable(tabsContent.get(0));
                             });
                         });
                     });
@@ -222,4 +300,6 @@ nf.Summary = (function () {
             });
         }
     };
-}());
\ No newline at end of file
+
+    return nfSummary;
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates-table.js
index 627bc05995..33722b56f6 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates-table.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates-table.js
@@ -15,9 +15,34 @@
  * limitations under the License.
  */
 
-/* global nf, Slick */
+/* global nf, define, module, require, exports */
 
-nf.TemplatesTable = (function () {
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'Slick',
+                'nf.Common',
+                'nf.Dialog',
+                'nf.ErrorHandler'],
+            function ($, Slick, common, dialog, errorHandler) {
+                return (nf.TemplatesTable = factory($, Slick, common, dialog, errorHandler));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.TemplatesTable =
+            factory(require('jquery'),
+                require('Slick'),
+                require('nf.Common'),
+                require('nf.Dialog'),
+                require('nf.ErrorHandler')));
+    } else {
+        nf.TemplatesTable = factory(root.$,
+            root.Slick,
+            root.nf.Common,
+            root.nf.Dialog,
+            root.nf.ErrorHandler);
+    }
+}(this, function ($, Slick, common, dialog, errorHandler) {
+    'use strict';
 
     /**
      * Configuration object used to hold a number of configuration items.
@@ -31,28 +56,28 @@ nf.TemplatesTable = (function () {
 
     /**
      * Sorts the specified data using the specified sort details.
-     * 
+     *
      * @param {object} sortDetails
      * @param {object} data
      */
     var sort = function (sortDetails, data) {
         // defines a function for sorting
         var comparer = function (a, b) {
-            if(a.permissions.canRead && b.permissions.canRead) {
+            if (a.permissions.canRead && b.permissions.canRead) {
                 if (sortDetails.columnId === 'timestamp') {
-                    var aDate = nf.Common.parseDateTime(a.template[sortDetails.columnId]);
-                    var bDate = nf.Common.parseDateTime(b.template[sortDetails.columnId]);
+                    var aDate = common.parseDateTime(a.template[sortDetails.columnId]);
+                    var bDate = common.parseDateTime(b.template[sortDetails.columnId]);
                     return aDate.getTime() - bDate.getTime();
                 } else {
-                    var aString = nf.Common.isDefinedAndNotNull(a.template[sortDetails.columnId]) ? a.template[sortDetails.columnId] : '';
-                    var bString = nf.Common.isDefinedAndNotNull(b.template[sortDetails.columnId]) ? b.template[sortDetails.columnId] : '';
+                    var aString = common.isDefinedAndNotNull(a.template[sortDetails.columnId]) ? a.template[sortDetails.columnId] : '';
+                    var bString = common.isDefinedAndNotNull(b.template[sortDetails.columnId]) ? b.template[sortDetails.columnId] : '';
                     return aString === bString ? 0 : aString > bString ? 1 : -1;
                 }
             } else {
-                if (!a.permissions.canRead && !b.permissions.canRead){
+                if (!a.permissions.canRead && !b.permissions.canRead) {
                     return 0;
                 }
-                if(a.permissions.canRead){
+                if (a.permissions.canRead) {
                     return 1;
                 } else {
                     return -1;
@@ -66,14 +91,14 @@ nf.TemplatesTable = (function () {
 
     /**
      * Prompts the user before attempting to delete the specified template.
-     * 
+     *
      * @argument {object} templateEntity     The template
      */
     var promptToDeleteTemplate = function (templateEntity) {
         // prompt for deletion
-        nf.Dialog.showYesNoDialog({
+        dialog.showYesNoDialog({
             headerText: 'Delete Template',
-            dialogContent: 'Delete template \'' + nf.Common.escapeHtml(templateEntity.template.name) + '\'?',
+            dialogContent: 'Delete template \'' + common.escapeHtml(templateEntity.template.name) + '\'?',
             yesHandler: function () {
                 deleteTemplate(templateEntity);
             }
@@ -82,14 +107,14 @@ nf.TemplatesTable = (function () {
 
     /**
      * Opens the access policies for the specified template.
-     * 
+     *
      * @param templateEntity
      */
     var openAccessPolicies = function (templateEntity) {
         // only attempt this if we're within a frame
         if (top !== window) {
             // and our parent has canvas utils and shell defined
-            if (nf.Common.isDefinedAndNotNull(parent.nf) && nf.Common.isDefinedAndNotNull(parent.nf.PolicyManagement) && nf.Common.isDefinedAndNotNull(parent.nf.Shell)) {
+            if (common.isDefinedAndNotNull(parent.nf) && common.isDefinedAndNotNull(parent.nf.PolicyManagement) && common.isDefinedAndNotNull(parent.nf.Shell)) {
                 parent.nf.PolicyManagement.showTemplatePolicy(templateEntity);
                 parent.$('#shell-close-button').click();
             }
@@ -98,7 +123,7 @@ nf.TemplatesTable = (function () {
 
     /**
      * Deletes the template with the specified id.
-     * 
+     *
      * @argument {string} templateEntity     The template
      */
     var deleteTemplate = function (templateEntity) {
@@ -110,10 +135,10 @@ nf.TemplatesTable = (function () {
             var templatesGrid = $('#templates-table').data('gridInstance');
             var templatesData = templatesGrid.getData();
             templatesData.deleteItem(templateEntity.id);
-            
+
             // update the total number of templates
             $('#total-templates').text(templatesData.getItems().length);
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(errorHandler.handleAjaxError);
     };
 
     /**
@@ -133,7 +158,7 @@ nf.TemplatesTable = (function () {
         var templatesGrid = $('#templates-table').data('gridInstance');
 
         // ensure the grid has been initialized
-        if (nf.Common.isDefinedAndNotNull(templatesGrid)) {
+        if (common.isDefinedAndNotNull(templatesGrid)) {
             var templatesData = templatesGrid.getData();
 
             // update the search criteria
@@ -147,7 +172,7 @@ nf.TemplatesTable = (function () {
 
     /**
      * Performs the filtering.
-     * 
+     *
      * @param {object} item     The item subject to filtering
      * @param {object} args     Filter arguments
      * @returns {Boolean}       Whether or not to include the item
@@ -175,11 +200,11 @@ nf.TemplatesTable = (function () {
      * @param {object} templateEntity     The template
      */
     var downloadTemplate = function (templateEntity) {
-        nf.Common.getAccessToken(config.urls.downloadToken).done(function (downloadToken) {
+        common.getAccessToken(config.urls.downloadToken).done(function (downloadToken) {
             var parameters = {};
 
             // conditionally include the download token
-            if (!nf.Common.isBlank(downloadToken)) {
+            if (!common.isBlank(downloadToken)) {
                 parameters['access_token'] = downloadToken;
             }
 
@@ -190,7 +215,7 @@ nf.TemplatesTable = (function () {
                 window.open(templateEntity.template.uri + '/download' + '?' + $.param(parameters));
             }
         }).fail(function () {
-            nf.Dialog.showOkDialog({
+            dialog.showOkDialog({
                 headerText: 'Download Template',
                 dialogContent: 'Unable to generate access token for downloading content.'
             });
@@ -210,12 +235,12 @@ nf.TemplatesTable = (function () {
             // filter type
             $('#templates-filter-type').combo({
                 options: [{
-                        text: 'by name',
-                        value: 'name'
-                    }, {
-                        text: 'by description',
-                        value: 'description'
-                    }],
+                    text: 'by name',
+                    value: 'name'
+                }, {
+                    text: 'by description',
+                    value: 'description'
+                }],
                 select: function (option) {
                     applyFilter();
                 }
@@ -242,7 +267,7 @@ nf.TemplatesTable = (function () {
                     return '';
                 }
 
-                return nf.Common.formatValue(dataContext.template.description);
+                return common.formatValue(dataContext.template.description);
             };
 
             var groupIdFormatter = function (row, cell, value, columnDef, dataContext) {
@@ -266,9 +291,9 @@ nf.TemplatesTable = (function () {
                     markup += '
      ';
                 }
 
-                // allow policy configuration conditionally
-                if (top !== window && nf.Common.canAccessTenants()) {
-                    if (nf.Common.isDefinedAndNotNull(parent.nf) && nf.Common.isDefinedAndNotNull(parent.nf.Canvas) && parent.nf.Canvas.isConfigurableAuthorizer()) {
+                // allow policy configuration conditionally if embedded in
+                if (top !== window && common.canAccessTenants()) {
+                    if (common.isDefinedAndNotNull(parent.nf) && common.isDefinedAndNotNull(parent.nf.Canvas) && parent.nf.Canvas.isConfigurableAuthorizer()) {
                         markup += '
      ';
                     }
                 }
@@ -278,12 +303,48 @@ nf.TemplatesTable = (function () {
 
             // initialize the templates table
             var templatesColumns = [
-                {id: 'timestamp', name: 'Date/Time', sortable: true, defaultSortAsc: false, resizable: false, formatter: timestampFormatter, width: 225, maxWidth: 225},
-                {id: 'name', name: 'Name', sortable: true, resizable: true, formatter: nameFormatter},
-                {id: 'description', name: 'Description', sortable: true, resizable: true, formatter: descriptionFormatter},
-                {id: 'groupId', name: 'Process Group Id', sortable: true, resizable: true, formatter: groupIdFormatter},
-                {id: 'actions', name: ' ', sortable: false, resizable: false, formatter: actionFormatter, width: 100, maxWidth: 100}
+                {
+                    id: 'timestamp',
+                    name: 'Date/Time',
+                    sortable: true,
+                    defaultSortAsc: false,
+                    resizable: false,
+                    formatter: timestampFormatter,
+                    width: 225,
+                    maxWidth: 225
+                },
+                {
+                    id: 'name',
+                    name: 'Name',
+                    sortable: true,
+                    resizable: true,
+                    formatter: nameFormatter
+                },
+                {
+                    id: 'description',
+                    name: 'Description',
+                    sortable: true,
+                    resizable: true,
+                    formatter: descriptionFormatter
+                },
+                {
+                    id: 'groupId',
+                    name: 'Process Group Id',
+                    sortable: true,
+                    resizable: true,
+                    formatter: groupIdFormatter
+                },
+                {
+                    id: 'actions',
+                    name: ' ',
+                    sortable: false,
+                    resizable: false,
+                    formatter: actionFormatter,
+                    width: 100,
+                    maxWidth: 100
+                }
             ];
+
             var templatesOptions = {
                 forceFitColumns: true,
                 enableTextSelectionOnCells: true,
@@ -360,17 +421,17 @@ nf.TemplatesTable = (function () {
             // initialize the number of displayed items
             $('#displayed-templates').text('0');
         },
-        
+
         /**
          * Update the size of the grid based on its container's current size.
          */
         resetTableSize: function () {
             var templateGrid = $('#templates-table').data('gridInstance');
-            if (nf.Common.isDefinedAndNotNull(templateGrid)) {
+            if (common.isDefinedAndNotNull(templateGrid)) {
                 templateGrid.resizeCanvas();
             }
         },
-        
+
         /**
          * Load the processor templates table.
          */
@@ -381,7 +442,7 @@ nf.TemplatesTable = (function () {
                 dataType: 'json'
             }).done(function (response) {
                 // ensure there are groups specified
-                if (nf.Common.isDefinedAndNotNull(response.templates)) {
+                if (common.isDefinedAndNotNull(response.templates)) {
                     var templatesGrid = $('#templates-table').data('gridInstance');
                     var templatesData = templatesGrid.getData();
 
@@ -398,7 +459,7 @@ nf.TemplatesTable = (function () {
                 } else {
                     $('#total-templates').text('0');
                 }
-            }).fail(nf.Common.handleAjaxError);
+            }).fail(errorHandler.handleAjaxError);
         }
     };
-}());
\ No newline at end of file
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates.js
index da5785b005..15af39c53e 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates.js
@@ -15,14 +15,39 @@
  * limitations under the License.
  */
 
-/* global nf, top */
+/* global nf, top, define, module, require, exports */
 
-$(document).ready(function () {
-    // initialize the templates page
-    nf.Templates.init();
-});
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'nf.Common',
+                'nf.TemplatesTable',
+                'nf.ErrorHandler',
+                'nf.Storage'],
+            function ($, common, templatesTable, errorHandler, storage) {
+                return (nf.Templates = factory($, common, templatesTable, errorHandler, storage));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.Templates =
+            factory(require('jquery'),
+                require('nf.Common'),
+                require('nf.TemplatesTable'),
+                require('nf.ErrorHandler'),
+                require('nf.Storage')));
+    } else {
+        nf.Templates = factory(root.$,
+            root.nf.Common,
+            root.nf.TemplatesTable,
+            root.nf.ErrorHandler,
+            root.nf.Storage);
+    }
+}(this, function ($, common, templatesTable, errorHandler, storage) {
+    'use strict';
 
-nf.Templates = (function () {
+    $(document).ready(function () {
+        // initialize the templates page
+        nfTemplates.init();
+    });
 
     /**
      * Configuration object used to hold a number of configuration items.
@@ -44,8 +69,8 @@ nf.Templates = (function () {
             url: config.urls.currentUser,
             dataType: 'json'
         }).done(function (currentUser) {
-            nf.Common.setCurrentUser(currentUser);
-        }).fail(nf.Common.handleAjaxError);
+            common.setCurrentUser(currentUser);
+        }).fail(errorHandler.handleAjaxError);
     };
 
     /**
@@ -54,7 +79,7 @@ nf.Templates = (function () {
     var initializeTemplatesPage = function () {
         // define mouse over event for the refresh button
         $('#refresh-button').click(function () {
-            nf.TemplatesTable.loadTemplatesTable();
+            templatesTable.loadTemplatesTable();
         });
 
         // get the banners if we're not in the shell
@@ -66,8 +91,8 @@ nf.Templates = (function () {
                     dataType: 'json'
                 }).done(function (response) {
                     // ensure the banners response is specified
-                    if (nf.Common.isDefinedAndNotNull(response.banners)) {
-                        if (nf.Common.isDefinedAndNotNull(response.banners.headerText) && response.banners.headerText !== '') {
+                    if (common.isDefinedAndNotNull(response.banners)) {
+                        if (common.isDefinedAndNotNull(response.banners.headerText) && response.banners.headerText !== '') {
                             // update the header text
                             var bannerHeader = $('#banner-header').text(response.banners.headerText).show();
 
@@ -81,7 +106,7 @@ nf.Templates = (function () {
                             updateTop('templates');
                         }
 
-                        if (nf.Common.isDefinedAndNotNull(response.banners.footerText) && response.banners.footerText !== '') {
+                        if (common.isDefinedAndNotNull(response.banners.footerText) && response.banners.footerText !== '') {
                             // update the footer text and show it
                             var bannerFooter = $('#banner-footer').text(response.banners.footerText).show();
 
@@ -97,7 +122,7 @@ nf.Templates = (function () {
 
                     deferred.resolve();
                 }).fail(function (xhr, status, error) {
-                    nf.Common.handleAjaxError(xhr, status, error);
+                    errorHandler.handleAjaxError(xhr, status, error);
                     deferred.reject();
                 });
             } else {
@@ -106,21 +131,21 @@ nf.Templates = (function () {
         }).promise();
     };
 
-    return {
+    var nfTemplates = {
         /**
          * Initializes the templates page.
          */
         init: function () {
-            nf.Storage.init();
+            storage.init();
 
             // load the current user
             loadCurrentUser().done(function () {
 
                 // create the templates table
-                nf.TemplatesTable.init();
+                templatesTable.init();
 
                 // load the table
-                nf.TemplatesTable.loadTemplatesTable().done(function () {
+                templatesTable.loadTemplatesTable().done(function () {
                     // once the table is initialized, finish initializing the page
                     initializeTemplatesPage().done(function () {
                         var setBodySize = function () {
@@ -137,7 +162,7 @@ nf.Templates = (function () {
                             }
 
                             // configure the initial grid height
-                            nf.TemplatesTable.resetTableSize();
+                            templatesTable.resetTableSize();
                         };
 
                         // get the about details
@@ -155,15 +180,15 @@ nf.Templates = (function () {
 
                             // set the initial size
                             setBodySize();
-                        }).fail(nf.Common.handleAjaxError);
+                        }).fail(errorHandler.handleAjaxError);
 
                         $(window).on('resize', function (e) {
                             setBodySize();
                             // resize dialogs when appropriate
                             var dialogs = $('.dialog');
                             for (var i = 0, len = dialogs.length; i < len; i++) {
-                                if ($(dialogs[i]).is(':visible')){
-                                    setTimeout(function(dialog){
+                                if ($(dialogs[i]).is(':visible')) {
+                                    setTimeout(function (dialog) {
                                         dialog.modal('resize');
                                     }, 50, $(dialogs[i]));
                                 }
@@ -172,8 +197,8 @@ nf.Templates = (function () {
                             // resize grids when appropriate
                             var gridElements = $('*[class*="slickgrid_"]');
                             for (var j = 0, len = gridElements.length; j < len; j++) {
-                                if ($(gridElements[j]).is(':visible')){
-                                    setTimeout(function(gridElement){
+                                if ($(gridElements[j]).is(':visible')) {
+                                    setTimeout(function (gridElement) {
                                         gridElement.data('gridInstance').resizeCanvas();
                                     }, 50, $(gridElements[j]));
                                 }
@@ -183,12 +208,12 @@ nf.Templates = (function () {
                             var tabsContainers = $('.tab-container');
                             var tabsContents = [];
                             for (var k = 0, len = tabsContainers.length; k < len; k++) {
-                                if ($(tabsContainers[k]).is(':visible')){
+                                if ($(tabsContainers[k]).is(':visible')) {
                                     tabsContents.push($('#' + $(tabsContainers[k]).attr('id') + '-content'));
                                 }
                             }
                             $.each(tabsContents, function (index, tabsContent) {
-                                nf.Common.toggleScrollable(tabsContent.get(0));
+                                common.toggleScrollable(tabsContent.get(0));
                             });
                         });
                     });
@@ -196,4 +221,6 @@ nf.Templates = (function () {
             });
         }
     };
-}());
\ No newline at end of file
+
+    return nfTemplates;
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users-table.js
index 4a1f78de2a..13cff49517 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users-table.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users-table.js
@@ -15,9 +15,34 @@
  * limitations under the License.
  */
 
-/* global nf, Slick */
+/* global nf, define, module, require, exports */
 
-nf.UsersTable = (function () {
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'Slick',
+                'nf.Common',
+                'nf.Client',
+                'nf.ErrorHandler'],
+            function ($, Slick, common, client, errorHandler) {
+                return (nf.UsersTable = factory($, Slick, common, client, errorHandler));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.UsersTable =
+            factory(require('jquery'),
+                require('Slick'),
+                require('nf.Common'),
+                require('nf.Client'),
+                require('nf.ErrorHandler')));
+    } else {
+        nf.UsersTable = factory(root.$,
+            root.Slick,
+            root.nf.Common,
+            root.nf.Client,
+            root.nf.ErrorHandler);
+    }
+}(this, function ($, Slick, common, client, errorHandler) {
+    'use strict';
 
     /**
      * Configuration object used to hold a number of configuration items.
@@ -51,11 +76,11 @@ nf.UsersTable = (function () {
                         // update the user
                         $.ajax({
                             type: 'DELETE',
-                            url: user.uri + '?' + $.param(nf.Client.getRevision(user)),
+                            url: user.uri + '?' + $.param(client.getRevision(user)),
                             dataType: 'json'
                         }).done(function () {
-                            nf.UsersTable.loadUsersTable();
-                        }).fail(nf.Common.handleAjaxError);
+                            self.loadUsersTable();
+                        }).fail(errorHandler.handleAjaxError);
 
                         // hide the dialog
                         $('#user-delete-dialog').modal('hide');
@@ -144,7 +169,7 @@ nf.UsersTable = (function () {
 
         // build the request entity
         var updatedGroupEntity = {
-            'revision': nf.Client.getRevision(groupEntity),
+            'revision': client.getRevision(groupEntity),
             'component': $.extend({}, groupEntity.component, {
                 'users': groupMembers
             })
@@ -182,7 +207,7 @@ nf.UsersTable = (function () {
 
         // build the request entity
         var updatedGroupEntity = {
-            'revision': nf.Client.getRevision(groupEntity),
+            'revision': client.getRevision(groupEntity),
             'component': $.extend({}, groupEntity.component, {
                 'users': groupMembers
             })
@@ -208,7 +233,7 @@ nf.UsersTable = (function () {
         // get the grid and data
         var usersGrid = $('#users-table').data('gridInstance');
         var usersData = usersGrid.getData();
-        
+
         // create the user
         var userXhr = $.ajax({
             type: 'POST',
@@ -225,16 +250,16 @@ nf.UsersTable = (function () {
                 var groupEntity = usersData.getItemById(selectedGroup.id)
                 xhrs.push(addUserToGroup(groupEntity, userEntity));
             });
-            
+
             $.when.apply(window, xhrs).always(function () {
-                nf.UsersTable.loadUsersTable().done(function () {
+                self.loadUsersTable().done(function () {
                     // select the new user
                     var row = usersData.getRowById(userEntity.id);
                     usersGrid.setSelectedRows([row]);
                     usersGrid.scrollRowIntoView(row);
                 });
-            }).fail(nf.Common.handleAjaxError);
-        }).fail(nf.Common.handleAjaxError);
+            }).fail(errorHandler.handleAjaxError);
+        }).fail(errorHandler.handleAjaxError);
     };
 
     /**
@@ -251,7 +276,7 @@ nf.UsersTable = (function () {
         var userEntity = usersData.getItemById(userId);
 
         var updatedUserEntity = {
-            'revision': nf.Client.getRevision(userEntity),
+            'revision': client.getRevision(userEntity),
             'component': {
                 'id': userId,
                 'identity': userIdentity
@@ -268,11 +293,11 @@ nf.UsersTable = (function () {
         });
 
         userXhr.done(function (updatedUserEntity) {
-        
+
             // determine what to add/remove
             var groupsAdded = [];
             var groupsRemoved = [];
-            $.each(updatedUserEntity.component.userGroups, function(_, currentGroup) {
+            $.each(updatedUserEntity.component.userGroups, function (_, currentGroup) {
                 var isSelected = $.grep(selectedGroups, function (group) {
                     return group.id === currentGroup.id;
                 });
@@ -282,7 +307,7 @@ nf.UsersTable = (function () {
                     groupsRemoved.push(currentGroup);
                 }
             });
-            $.each(selectedGroups, function(_, selectedGroup) {
+            $.each(selectedGroups, function (_, selectedGroup) {
                 var isSelected = $.grep(updatedUserEntity.component.userGroups, function (group) {
                     return group.id === selectedGroup.id;
                 });
@@ -305,9 +330,9 @@ nf.UsersTable = (function () {
             });
 
             $.when.apply(window, xhrs).always(function () {
-                nf.UsersTable.loadUsersTable();
-            }).fail(nf.Common.handleAjaxError);
-        }).fail(nf.Common.handleAjaxError);
+                self.loadUsersTable();
+            }).fail(errorHandler.handleAjaxError);
+        }).fail(errorHandler.handleAjaxError);
     };
 
     /**
@@ -324,7 +349,7 @@ nf.UsersTable = (function () {
             dataType: 'json',
             contentType: 'application/json'
         }).done(function (groupEntity) {
-            nf.UsersTable.loadUsersTable().done(function () {
+            self.loadUsersTable().done(function () {
                 // add the user
                 var usersGrid = $('#users-table').data('gridInstance');
                 var usersData = usersGrid.getData();
@@ -334,7 +359,7 @@ nf.UsersTable = (function () {
                 usersGrid.setSelectedRows([row]);
                 usersGrid.scrollRowIntoView(row);
             });
-        }).fail(nf.Common.handleAjaxError);
+        }).fail(errorHandler.handleAjaxError);
     };
 
     var updateGroup = function (groupId, groupIdentity, selectedUsers) {
@@ -344,7 +369,7 @@ nf.UsersTable = (function () {
         var groupEntity = usersData.getItemById(groupId);
 
         var updatedGroupoEntity = {
-            'revision': nf.Client.getRevision(groupEntity),
+            'revision': client.getRevision(groupEntity),
             'component': {
                 'id': groupId,
                 'identity': groupIdentity,
@@ -360,8 +385,8 @@ nf.UsersTable = (function () {
             dataType: 'json',
             contentType: 'application/json'
         }).done(function (groupEntity) {
-            nf.UsersTable.loadUsersTable();
-        }).fail(nf.Common.handleAjaxError);
+            self.loadUsersTable();
+        }).fail(errorHandler.handleAjaxError);
     };
 
     /**
@@ -385,7 +410,7 @@ nf.UsersTable = (function () {
                         // see if we should create or update this user
                         if ($.trim(userId) === '') {
                             var tenantEntity = {
-                                'revision': nf.Client.getRevision({
+                                'revision': client.getRevision({
                                     'revision': {
                                         'version': 0
                                     }
@@ -499,7 +524,7 @@ nf.UsersTable = (function () {
      */
     var globalResourceParser = function (dataContext) {
         return 'Global policy to ' +
-            nf.Common.getPolicyTypeListing(nf.Common.substringAfterFirst(dataContext.component.resource, '/')).text;
+            common.getPolicyTypeListing(common.substringAfterFirst(dataContext.component.resource, '/')).text;
     };
 
     /**
@@ -514,13 +539,13 @@ nf.UsersTable = (function () {
 
         //determine policy type
         if (resource.startsWith('/policies')) {
-            resource = nf.Common.substringAfterFirst(resource, '/policies');
+            resource = common.substringAfterFirst(resource, '/policies');
             policyLabel += 'Admin policy for ';
         } else if (resource.startsWith('/data-transfer')) {
-            resource = nf.Common.substringAfterFirst(resource, '/data-transfer');
+            resource = common.substringAfterFirst(resource, '/data-transfer');
             policyLabel += 'Site to site policy for ';
         } else if (resource.startsWith('/data')) {
-            resource = nf.Common.substringAfterFirst(resource, '/data');
+            resource = common.substringAfterFirst(resource, '/data');
             policyLabel += 'Data policy for ';
         } else {
             policyLabel += 'Component policy for ';
@@ -567,7 +592,7 @@ nf.UsersTable = (function () {
             // if the user has permission to the policy
             if (dataContext.permissions.canRead === true) {
                 // check if Global policy
-                if (nf.Common.isUndefinedOrNull(dataContext.component.componentReference)) {
+                if (common.isUndefinedOrNull(dataContext.component.componentReference)) {
                     return globalResourceParser(dataContext);
                 }
                 // not a global policy... check if user has access to the component reference
@@ -582,7 +607,7 @@ nf.UsersTable = (function () {
             var markup = '';
 
             if (dataContext.permissions.canRead === true) {
-                if (nf.Common.isDefinedAndNotNull(dataContext.component.componentReference)) {
+                if (common.isDefinedAndNotNull(dataContext.component.componentReference)) {
                     if (dataContext.component.resource.indexOf('/processors') >= 0) {
                         markup += '
      ';
                     } else if (dataContext.component.resource.indexOf('/controller-services') >= 0) {
@@ -622,13 +647,34 @@ nf.UsersTable = (function () {
         };
 
         var userPoliciesColumns = [
-            {id: 'policy', name: 'Policy', sortable: true, resizable: true, formatter: policyDisplayNameFormatter, width: 150},
-            {id: 'action', name: 'Action', sortable: true, resizable: false, formatter: actionFormatter, width: 50}
+            {
+                id: 'policy',
+                name: 'Policy',
+                sortable: true,
+                resizable: true,
+                formatter: policyDisplayNameFormatter,
+                width: 150
+            },
+            {
+                id: 'action',
+                name: 'Action',
+                sortable: true,
+                resizable: false,
+                formatter: actionFormatter,
+                width: 50
+            }
         ];
 
         // add the actions if we're in the shell
         if (top !== window) {
-            userPoliciesColumns.push({id: 'actions', name: ' ', sortable: false, resizable: false, formatter: actionsFormatter, width: 25});
+            userPoliciesColumns.push({
+                id: 'actions',
+                name: ' ',
+                sortable: false,
+                resizable: false,
+                formatter: actionsFormatter,
+                width: 25
+            });
         }
 
         var userPoliciesOptions = {
@@ -737,12 +783,12 @@ nf.UsersTable = (function () {
         var membersGroupsFormatter = function (row, cell, value, columnDef, dataContext) {
             if (dataContext.type === 'group') {
                 return 'Members: ' + dataContext.component.users.map(function (user) {
-                    return user.component.identity;
-                }).join(', ') + '';
+                        return user.component.identity;
+                    }).join(', ') + '';
             } else {
                 return 'Member of: ' + dataContext.component.userGroups.map(function (group) {
-                    return group.component.identity;
-                }).join(', ') + '';
+                        return group.component.identity;
+                    }).join(', ') + '';
             }
         };
 
@@ -751,12 +797,12 @@ nf.UsersTable = (function () {
             var markup = '';
 
             // ensure user can modify the user
-            if (nf.Common.canModifyTenants()) {
+            if (common.canModifyTenants()) {
                 markup += '
      ';
                 markup += '
      ';
             }
 
-            if (!nf.Common.isEmpty(dataContext.component.accessPolicies)) {
+            if (!common.isEmpty(dataContext.component.accessPolicies)) {
                 markup += '
      ';
             }
 
@@ -765,10 +811,32 @@ nf.UsersTable = (function () {
 
         // initialize the templates table
         var usersColumns = [
-            {id: 'identity', name: 'User', sortable: true, resizable: true, formatter: identityFormatter},
-            {id: 'membersGroups', name: ' ', sortable: true, defaultSortAsc: false, resizable: true, formatter: membersGroupsFormatter},
-            {id: 'actions', name: ' ', sortable: false, resizable: false, formatter: actionFormatter, width: 100, maxWidth: 100}
+            {
+                id: 'identity',
+                name: 'User',
+                sortable: true,
+                resizable: true,
+                formatter: identityFormatter
+            },
+            {
+                id: 'membersGroups',
+                name: ' ',
+                sortable: true,
+                defaultSortAsc: false,
+                resizable: true,
+                formatter: membersGroupsFormatter
+            },
+            {
+                id: 'actions',
+                name: ' ',
+                sortable: false,
+                resizable: false,
+                formatter: actionFormatter,
+                width: 100,
+                maxWidth: 100
+            }
         ];
+
         var usersOptions = {
             forceFitColumns: true,
             enableTextSelectionOnCells: true,
@@ -854,15 +922,15 @@ nf.UsersTable = (function () {
     var userSort = function (sortDetails, data) {
         // 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] : '';
+            if (a.permissions.canRead && b.permissions.canRead) {
+                var aString = common.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
+                var bString = common.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : '';
                 return aString === bString ? 0 : aString > bString ? 1 : -1;
             } else {
-                if (!a.permissions.canRead && !b.permissions.canRead){
+                if (!a.permissions.canRead && !b.permissions.canRead) {
                     return 0;
                 }
-                if(a.permissions.canRead){
+                if (a.permissions.canRead) {
                     return 1;
                 } else {
                     return -1;
@@ -883,10 +951,10 @@ nf.UsersTable = (function () {
     var userPolicySort = function (sortDetails, data) {
         // defines a function for sorting
         var comparer = function (a, b) {
-            if(a.permissions.canRead && b.permissions.canRead) {
+            if (a.permissions.canRead && b.permissions.canRead) {
                 if (sortDetails.columnId === 'action') {
-                    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 (sortDetails.columnId === 'policy') {
                     var aString = '';
@@ -895,7 +963,7 @@ nf.UsersTable = (function () {
                     // if the user has permission to the policy
                     if (a.permissions.canRead === true) {
                         // check if Global policy
-                        if (nf.Common.isUndefinedOrNull(a.component.componentReference)) {
+                        if (common.isUndefinedOrNull(a.component.componentReference)) {
                             aString = globalResourceParser(a);
                         } else {
                             // not a global policy... check if user has access to the component reference
@@ -908,9 +976,9 @@ nf.UsersTable = (function () {
                     // if the user has permission to the policy
                     if (b.permissions.canRead === true) {
                         // check if Global policy
-                        if (nf.Common.isUndefinedOrNull(b.component.componentReference)) {
+                        if (common.isUndefinedOrNull(b.component.componentReference)) {
                             bString = globalResourceParser(b);
-                        }else {
+                        } else {
                             // not a global policy... check if user has access to the component reference
                             bString = componentResourceParser(b);
                         }
@@ -921,10 +989,10 @@ nf.UsersTable = (function () {
                     return aString === bString ? 0 : aString > bString ? 1 : -1;
                 }
             } else {
-                if (!a.permissions.canRead && !b.permissions.canRead){
+                if (!a.permissions.canRead && !b.permissions.canRead) {
                     return 0;
                 }
-                if(a.permissions.canRead){
+                if (a.permissions.canRead) {
                     return 1;
                 } else {
                     return -1;
@@ -953,7 +1021,7 @@ nf.UsersTable = (function () {
         var usersGrid = $('#users-table').data('gridInstance');
 
         // ensure the grid has been initialized
-        if (nf.Common.isDefinedAndNotNull(usersGrid)) {
+        if (common.isDefinedAndNotNull(usersGrid)) {
             var usersData = usersGrid.getData();
 
             // update the search criteria
@@ -998,7 +1066,7 @@ nf.UsersTable = (function () {
 
         // add a row for each user
         var count = 0;
-        $.each(usersData.getItems(), function(_, user) {
+        $.each(usersData.getItems(), function (_, user) {
             if (user.type === 'user') {
                 // checkbox
                 var checkbox = $('
      ').addClass('group-user-' + user.id);
@@ -1031,14 +1099,14 @@ nf.UsersTable = (function () {
 
         // add a row for each user
         var count = 0;
-        $.each(usersData.getItems(), function(_, group) {
+        $.each(usersData.getItems(), function (_, group) {
             if (group.type === 'group') {
                 // checkbox
                 var checkbox = $('
      ').addClass('user-group-' + group.id);
 
                 // group id
                 var groupId = $('').text(group.id);
-                
+
                 // icon
                 var groupIcon = $('
      ');
 
@@ -1127,7 +1195,7 @@ nf.UsersTable = (function () {
         userPoliciesData.beginUpdate();
 
         // set the rows
-        if (nf.Common.isDefinedAndNotNull(user.component.accessPolicies)) {
+        if (common.isDefinedAndNotNull(user.component.accessPolicies)) {
             userPoliciesData.setItems(user.component.accessPolicies);
         }
 
@@ -1146,7 +1214,7 @@ nf.UsersTable = (function () {
         userPoliciesGrid.resizeCanvas();
     };
 
-    return {
+    var nfUsersTable = {
         init: function () {
             initUserDialog();
             initUserPoliciesDialog();
@@ -1154,7 +1222,7 @@ nf.UsersTable = (function () {
             initUserDeleteDialog();
             initUsersTable();
 
-            if (nf.Common.canModifyTenants()) {
+            if (common.canModifyTenants()) {
                 $('#new-user-button').on('click', function () {
                     buildUsersList();
                     buildGroupsList();
@@ -1179,7 +1247,7 @@ nf.UsersTable = (function () {
             var usersTable = $('#users-table');
             if (usersTable.is(':visible')) {
                 var grid = usersTable.data('gridInstance');
-                if (nf.Common.isDefinedAndNotNull(grid)) {
+                if (common.isDefinedAndNotNull(grid)) {
                     grid.resizeCanvas();
                 }
             }
@@ -1242,7 +1310,9 @@ nf.UsersTable = (function () {
                 usersGrid.getSelectionModel().setSelectedRows([]);
 
                 $('#total-users').text(usersData.getLength());
-            }).fail(nf.Common.handleAjaxError);
+            }).fail(errorHandler.handleAjaxError);
         }
     };
-}());
\ No newline at end of file
+
+    return nfUsersTable;
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users.js
index 34476a2d3d..8cad6cf160 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users.js
@@ -14,18 +14,50 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-$(document).ready(function () {
-    // initialize the counters page
-    nf.Users.init();
 
-    //alter styles if we're not in the shell
-    if (top === window) {
-        $('#users').css('top', 20);
-        $('#users-refresh-container').css('bottom', 20);
+/* global nf, top, define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'nf.Common',
+                'nf.UsersTable',
+                'nf.ErrorHandler',
+                'nf.Storage',
+                'nf.Client'],
+            function ($, common, usersTable, errorHandler, storage, client) {
+                return (nf.Users = factory($, common, usersTable, errorHandler, storage, client));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.Users =
+            factory(require('jquery'),
+                require('nf.Common'),
+                require('nf.UsersTable'),
+                require('nf.ErrorHandler'),
+                require('nf.Storage'),
+                require('nf.Client')));
+    } else {
+        nf.Users =
+            factory(root.$,
+                root.nf.Common,
+                root.nf.UsersTable,
+                root.nf.ErrorHandler,
+                root.nf.Storage,
+                root.nf.Client);
     }
-});
+}(this, function ($, common, usersTable, errorHandler, storage, client) {
+    'use strict';
 
-nf.Users = (function () {
+    $(document).ready(function () {
+        // initialize the counters page
+        nfUsers.init();
+
+        //alter styles if we're not in the shell
+        if (top === window) {
+            $('#users').css('top', 20);
+            $('#users-refresh-container').css('bottom', 20);
+        }
+    });
 
     /**
      * Configuration object used to hold a number of configuration items.
@@ -47,14 +79,14 @@ nf.Users = (function () {
             url: config.urls.currentUser,
             dataType: 'json'
         }).done(function (currentUser) {
-            nf.Common.setCurrentUser(currentUser);
-        }).fail(nf.Common.handleAjaxError);
+            common.setCurrentUser(currentUser);
+        }).fail(errorHandler.handleAjaxError);
     };
 
     var initializeUsersPage = function () {
         // define mouse over event for the refresh button
-        nf.Common.addHoverEffect('#user-refresh-button', 'button-refresh', 'button-refresh-hover').click(function () {
-            nf.UsersTable.loadUsersTable();
+        common.addHoverEffect('#user-refresh-button', 'button-refresh', 'button-refresh-hover').click(function () {
+            usersTable.loadUsersTable();
         });
 
         // get the banners if we're not in the shell
@@ -66,8 +98,8 @@ nf.Users = (function () {
                     dataType: 'json'
                 }).done(function (bannerResponse) {
                     // ensure the banners response is specified
-                    if (nf.Common.isDefinedAndNotNull(bannerResponse.banners)) {
-                        if (nf.Common.isDefinedAndNotNull(bannerResponse.banners.headerText) && bannerResponse.banners.headerText !== '') {
+                    if (common.isDefinedAndNotNull(bannerResponse.banners)) {
+                        if (common.isDefinedAndNotNull(bannerResponse.banners.headerText) && bannerResponse.banners.headerText !== '') {
                             // update the header text
                             var bannerHeader = $('#banner-header').text(bannerResponse.banners.headerText).show();
 
@@ -81,7 +113,7 @@ nf.Users = (function () {
                             updateTop('users');
                         }
 
-                        if (nf.Common.isDefinedAndNotNull(bannerResponse.banners.footerText) && bannerResponse.banners.footerText !== '') {
+                        if (common.isDefinedAndNotNull(bannerResponse.banners.footerText) && bannerResponse.banners.footerText !== '') {
                             // update the footer text and show it
                             var bannerFooter = $('#banner-footer').text(bannerResponse.banners.footerText).show();
 
@@ -97,7 +129,7 @@ nf.Users = (function () {
 
                     deferred.resolve();
                 }).fail(function (xhr, status, error) {
-                    nf.Common.handleAjaxError(xhr, status, error);
+                    errorHandler.handleAjaxError(xhr, status, error);
                     deferred.reject();
                 });
             } else {
@@ -106,30 +138,30 @@ nf.Users = (function () {
         });
     };
 
-    return {
+    var nfUsers = {
         /**
          * Initializes the counters page.
          */
         init: function () {
-            nf.Storage.init();
+            storage.init();
 
             // initialize the client
-            nf.Client.init();
+            client.init();
 
             // load the users authorities
             ensureAccess().done(function () {
                 // create the counters table
-                nf.UsersTable.init();
+                usersTable.init();
 
                 // load the users table
-                nf.UsersTable.loadUsersTable().done(function () {
+                usersTable.loadUsersTable().done(function () {
                     // finish initializing users page
                     initializeUsersPage().done(function () {
                         // listen for browser resize events to update the page size
-                        $(window).resize(nf.UsersTable.resetTableSize);
-                        
+                        $(window).resize(usersTable.resetTableSize);
+
                         // configure the initial grid height
-                        nf.UsersTable.resetTableSize();
+                        usersTable.resetTableSize();
 
                         // get the about details
                         $.ajax({
@@ -143,15 +175,15 @@ nf.Users = (function () {
                             // set the document title and the about title
                             document.title = countersTitle;
                             $('#users-header-text').text(countersTitle);
-                        }).fail(nf.Common.handleAjaxError);
+                        }).fail(errorHandler.handleAjaxError);
                     });
 
                     $(window).on('resize', function (e) {
                         // resize dialogs when appropriate
                         var dialogs = $('.dialog');
                         for (var i = 0, len = dialogs.length; i < len; i++) {
-                            if ($(dialogs[i]).is(':visible')){
-                                setTimeout(function(dialog){
+                            if ($(dialogs[i]).is(':visible')) {
+                                setTimeout(function (dialog) {
                                     dialog.modal('resize');
                                 }, 50, $(dialogs[i]));
                             }
@@ -160,8 +192,8 @@ nf.Users = (function () {
                         // resize grids when appropriate
                         var gridElements = $('*[class*="slickgrid_"]');
                         for (var j = 0, len = gridElements.length; j < len; j++) {
-                            if ($(gridElements[j]).is(':visible')){
-                                setTimeout(function(gridElement){
+                            if ($(gridElements[j]).is(':visible')) {
+                                setTimeout(function (gridElement) {
                                     gridElement.data('gridInstance').resizeCanvas();
                                 }, 50, $(gridElements[j]));
                             }
@@ -171,4 +203,6 @@ nf.Users = (function () {
             });
         }
     };
-}());
\ No newline at end of file
+
+    return nfUsers;
+}));
\ No newline at end of file